帶修改頂點的飛機上的片段着色器

我有一個PlaneGeometry，我隨機爲頂點創建動畫以創建隨機尖峯。我用這個FragmentShader：帶修改頂點的飛機上的片段着色器

void main() { 
     vec3 light = vec3(cos(time),sin(time),1.0); 
     light = normalize(light); 
     float dProd = max(0.0, dot(vNormal, light)); 
     gl_FragColor = vec4(dProd,dProd,dProd,1.0); 
     }

我預計將有黑顏色的每穗的一些面孔，而是我得到了一個堅實的顏色。我把一個球在我的飛機，並應用了相同的着色器： enter image description here

當我打開線框OFF： enter image description here

不知道我理解發生了什麼在飛機上？我認爲，由於每個尖峯都有不同的法線，它們也應該有不同的光照。

Live Demo

來源

2013-06-21 Guillaume

你的「尖峯」沒有不同的頂點的法線，因爲你沒有改變頂點的法線;他們都是（0，1，0）。這是你可以在控制檯中檢查你自己的東西。另外，修改四邊形（平面的一個面）的頂點時，四個頂點可能不再是平面的。這會導致你所有的問題。（谷歌非平面四邊形。）

您可以通過三角測量PlaneGeometry第一避免這些問題：

THREE.GeometryUtils.triangulateQuads(geometry);

注意，此功能重新計算頂點法線。看看源代碼，以便了解它在做什麼。

three.js r.58

來源

2013-06-21 22:06:35 WestLangley

Thx爲您的明確答案。我認爲，以非平面四邊形作爲THREE.js的開始並不是最好的主意。 – Guillaume

帶修改頂點的飛機上的片段着色器

回答

相關問題