计算Phong着色器中聚光灯圆锥体上的位置
我正在尝试在WebGLRenderer的PhongMaterial中为THREE.SpotLight实现轻量cookies (或gobos，或轻量纹理，或轻量蒙版)。其目标是能够为灯光附加纹理，如下所示：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，希望有工作的gobo投影。
如何计算与每个灯光相关的这些坐标？
或者，有没有更好的方法在Three.js中实现轻量cookie/ gobos /轻量纹理/轻量蒙版？我知道这是游戏引擎中很受欢迎的功能，如果能有这样的内置功能就好了。http://docs.unity3d.com/Documentation/Components/class-Light.html很好地描述了我正在寻找的东西( cookie部分)。
回答 1
Stack Overflow用户
发布于 2013-04-01 01:03:00
看看这里：http://www.evpopov.com/threejstest/test_spot_projtexture.html
我认为它是在做你想要的事情。
它实际上是标准的投影纹理，除了纹理不是“按原样”使用而是衰减照明计算。
对于这个示例，我使用了投影纹理的alpha通道作为衰减因子。
为了创建我使用的顶点/碎片着色器，我从phong材质中获取了顶点/碎片着色器，并仅保留相关部分用于聚光灯渲染。我还设置了一个恒定的环境色，以避免出现黑色区域(在专色范围之外)。
如果要在自己的着色器中重复使用，投影纹理的特定代码在顶点/碎片着色器中具有以//开头的注释。
您还必须生成与您的光线对应的投影矩阵：=>函数会为您生成投影矩阵，它几乎与您在三个用于阴影贴图的JS源代码中找到的代码相同。
启动示例时，墙将旋转，聚光灯保持不变。可以通过将moveLightTarget更改为true来移动聚光灯的目标，在这种情况下，需要将rotateCube设置为false，以便更好地查看所发生的情况。
https://stackoverflow.com/questions/15665074
复制相似问题
腾讯云开发者
