使用Three.js普通着色器扭曲法线 - r.58

Question

我正在尝试使用Three.js r.58普通着色器制作置换贴图。我让它正确移位，但即使我使用computeTangents（），照明也似乎不尊重移位后法线。

当我关闭位移时，我发现默认法线肯定很有趣。这是一个球体的顶视图，从侧面照亮（白点标记一个点光源）：

这是一个演示页面： 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 normalmap材质而不传递法线贴图时，这似乎是默认行为。如果您传递全白法线贴图，您将看到相同的行为。

要将法线贴图传递给法线贴图着色器，请将此行添加到统一声明中：

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/