three.js - 从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 存储库的链接，其中包含说明此问题的所有示例以及我最终找到的解决方案:
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 屏幕空间导数的叉积计算法线。

这会将法线设置为面法线。在硬边上它将是不连续的。

三.js r.58