three.js - 从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/three/examples/webgl_cubes_indexed.html。看看片段着色器，你会看到

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

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

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

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

三.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