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

Question

我在three.js r.58 中使用法线着色器，据我所知需要法线贴图。但是，我使用的是动态置换贴图，因此在这种情况下，预先计算的法线贴图不起作用。

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

编辑：我发布了一个球体的演示，带有显示平面法线的置换贴图：

这是 github 存储库的链接，其中包含说明此问题的所有示例以及我最终找到的解决方案：https : //github.com/meetar/three.js-normal-map-0

Answer 1

这个答案是基于您上面的评论。

您可以做您想做的事情，但它相当复杂，您当然必须修改 Three.js 的“普通”着色器。

看看http://alteredqualia.com/third/examples/webgl_cubes_indexed.html。查看片段着色器，你会发现

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

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

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

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

三.js r.58