Three.js正常着色器的扭曲法線 - r.58

Question

我正在嘗試使用Three.js r.58正常着色器來製作位移貼圖。我有它正確的位移，但照明似乎沒有尊重後位移法線，即使我使用computeTangents（）。

當我關閉位移時，我發現默認法線肯定很有趣。這裏有一個球的頂視圖，從側面亮起（白點標誌着POINTLIGHT）：

而這裏的演示頁： http://meetar.github.io/three.js-normal-map-0/index0.html

是什麼造成的？是否有任何地方的Three.js正常着色器的文檔？

Answer 1

1. 您沒有傳入normalMap，這是必需的。嘗試傳遞一個單一的。

2. ComputeTangents()可以在具有不連續UV的頂點上做奇怪的事情 - 就像在北極。

3. 該代碼是doucmentation。 :-)

Answer 2

的「扭曲」法線每個頂點正常被評價爲RGB值(255, 255, 255)，其對應於正切空間XYZ座標(1.0, 1.0, 1.0)的結果。這似乎是使用three.js法線貼圖材質時未使用法線貼圖的默認行爲。如果您傳遞全白法線貼圖，則會看到相同的行爲。

傳遞一個法線貼圖到法線貼圖着色器，這行添加到您的統一聲明：

uniforms[ "tNormal" ].value = new THREE.ImageUtils.loadTexture('normalmap.png'); 

傳遞一個「平」法線貼圖，讓你的「normalmap.png」固體(128, 128, 255)薰衣草，其歸一化到切空間座標(0.0, 0.0, 1.0)。

對於法線圖包括大量的例子的很大擊穿，檢查出此鏈接：http://wiki.polycount.com/NormalMap/