从three.js r.58中的置换贴图计算法线？

Question

我在three.js r.58中使用普通着色器，我理解requires a normal map。但是，我正在使用动态置换贴图，因此预先计算的法线贴图在这种情况下不起作用。

我发现的点亮置换贴图的所有示例都使用平面着色或预先计算的法线贴图。是否可以根据移位的顶点动态计算法线？

修改：我发布了a demo of a sphere with a displacement map showing flat normals：

以下是github repo的链接，我的所有示例都说明了这个问题，以及我最终找到的解决方案： https://github.com/meetar/three.js-normal-map-0

Answer 1

此答案基于您的上述评论。

你可以做你想做的事，但它很复杂，你当然必须修改three.js'普通'着色器。

看看http://alteredqualia.com/three/examples/webgl_cubes_indexed.html。查看片段着色器，您将看到

vec3 normal = normalize( cross( dFdx( vViewPosition ), dFdy( vViewPosition ) ) );

Alteredqualia在片段着色器中使用导数法线（而不是属性法线），因为顶点着色器中的顶点位置发生了变化，而法线未知。

他正在做的是使用片段位置的x和y屏幕空间导数的叉积来计算法线。

这会将法线设置为面法线。它在硬边缘处会不连续。

three.js r.58

Answer 2

我上面描述的内容称为“凹凸贴图”，默认情况下是three.js phong着色器。我将法线贴图着色器与负责凹凸贴图的phong着色器的块组合在一起：

http://meetar.github.io/three.js-normal-map-0/bump.html

虽然法线有点吵，但基本上都是正确的。

Answer 3

您还可以使用JavaScript从置换贴图计算法线贴图。这会产生平滑法线，如果您的置换贴图不会经常变化，这是一个不错的选择。

此方法使用此演示中的代码：http://mrdoob.com/lab/javascript/height2normal/

在这里演示： http://meetar.github.io/three.js-normal-map-0/index14.html