計算Phong着色器中聚光燈錐體的位置

Question

我想爲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部分）。

Answer 1

看一看這裏：http://www.evpopov.com/threejstest/test_spot_projtexture.html

我覺得還是做你想要什麼。

它實際上是標準的投影紋理，除非紋理不是「原樣」使用，而是減弱了光照計算。

對於這個樣本，我已經使用投影紋理的alpha通道作爲衰減因子。

爲了創建我使用的頂點/片段着色器，我從phong材質中取得了頂點/片段着色器，並僅保留相關部分以進行聚光燈渲染。我還設置了一個恆定的環境顏色，以避免黑色區域（現場範圍之外）。

如果您想在自己的着色器中重複使用，則投影紋理的具體代碼在頂點/片段着色器中具有以//開始的註釋。

您還必須生成與您的光線相對應的投影矩陣：makeProjectiveMatrixForLight函數爲您做了它=>它幾乎與您可以在三個用於陰影映射的JS源代碼中找到的代碼相同。

啓動示例時，牆壁旋轉並且聚光燈保持固定。您可以通過將moveLightTarget更改爲true來使目標光的目標移動，在這種情況下，您希望將rotateCube設置爲false以更好地瞭解發生了什麼。