用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的'normal'着色器。

看一看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

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

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

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

Answer 3

我上面所描述被称为“凹凸贴图”，它是作为一个默认使用three.js phong着色器。虽然法线有点吵，他们基本上是正确的

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

：我加之负责凹凸贴图的海防着色器区块的法线贴图着色器。