在 Phong 着色器中计算聚光灯锥上的位置

Question

我正在尝试在 WebGLRenderer 的 PhongMaterial 中为 THREE.SpotLight 实现光 cookie（或图案图案、光纹理或光蒙版）。目的是能够为灯光附加纹理，如下所示：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 部分）。

Answer 1

看看这里：http://www.evpopov.com/threejstest/test_spot_projtexture.html

我认为它正在做你想做的事。

它实际上是标准的投影纹理，除了纹理不是“按原样”使用而是衰减光照计算。

对于这个示例，我使用了投影纹理的 Alpha 通道作为衰减因子。

为了创建我使用的顶点/片段着色器，我从 phong 材质中获取了顶点/片段着色器，并且只保留了聚光灯渲染的相关部分。我还设置了一个恒定的环境颜色以避免出现黑色区域​​（在斑点范围之外）。

如果您想在自己的着色器中重用它，投影纹理的特定代码在顶点/片段着色器中具有以 // 开头的 cmets。

您还必须生成与您的灯光相对应的投影矩阵：makeProjectiveMatrixForLight 函数会为您完成 => 它与您在三个用于阴影映射的 JS 源代码中找到的代码几乎相同。

启动示例时，墙壁旋转，聚光灯保持固定。您可以通过将moveLightTarget 更改为true 来使聚光灯的目标移动，在这种情况下，您需要将rotateCube 设置为false 以更好地了解发生了什么。