我正在尝试在WebGLRenderer中的PhongMaterial中为THREE.SpotLight实现光饼干(或图案或光纹理或光掩模).目的是能够为光附加纹理,如下所示:http://www.idjnow.com/ProductImagesLarge/GOBO-GLASS1C.jpg纹理会降低光线的强度,产生阴影般的效果投影.
我认为我有"将纹理附加到光线并将其作为制服传递给着色器中查找",尽管还没有能够测试它,因为我在聚光锥/点中计算我的位置时遇到了问题.
我看到聚光灯的光贡献在这里计算(我正在直接修改Three.js源,而不是创建我自己的材质):
https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLShaders.js#L1013
聚光灯的位置是一个圆圈,对吧？或椭圆,如果它在一个角度.所以我需要在这里添加一些代码,这将告诉我在聚光灯下的位置(xy坐标).我可以在纹理查找上映射这些坐标,相应地降低spotDiffuse,并希望有工作的图案投影.
我怎样才能计算出与每个光相关的坐标？
或者有没有更好的方法在Three.js中实现光饼干/图案/光纹理/光掩模？我认为它是游戏引擎中的一个流行功能,如果有内置的东西会很高兴.http://docs.unity3d.com/Documentation/Components/class-Light.html很好地描述了我正在寻找的东西(cookie部分).
看看这里:http://www.evpopov.com/threejstest/test_spot_projtexture.html
我认为它正在做你想要的.
它实际上是标准的投影纹理,除了纹理不是"按原样"使用,而是减弱了光照计算.
对于这个样本,我使用了投影纹理的alpha通道作为衰减因子.
为了创建我使用的顶点/片段着色器,我从phong材质中获取了顶点/片段着色器,并且仅保留了用于聚光灯渲染的相关部分.我还设置了恒定的环境颜色,以避免出现黑色区域(在光斑范围之外).
如果要在自己的着色器中重复使用投影纹理的特定代码,则在顶点/片段着色器中以//开头的注释.
你还必须生成与你的光相对应的投影矩阵:该makeProjectiveMatrixForLight函数为你做了=>它几乎与你在三个用于阴影映射的JS源代码中找到的代码相同.
启动示例时,墙壁旋转,聚光灯保持固定.您可以通过改变做出的光点移动目标moveLightTarget到true,在这种情况下,你要设置rotateCube以false更清楚地看到正在发生的事情.
