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

【问题标题】：Compute normals from displacement map in three.js r.58?从three.js r.58中的置换贴图计算法线？
【发布时间】：2013-07-05 22:01:26
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

我在上面描述的称为“凹凸贴图”，它是 three.js phong 着色器的默认设置。我将法线贴图着色器与负责凹凸贴图的 phong 着色器块相结合：

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

【讨论】：

【解决方案3】：

此答案基于您上面的 cmets。

你可以随心所欲，但它相当复杂，你当然必须修改 three.js 的“普通”着色器。

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

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

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

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

three.js r.58

【讨论】：

非常酷！但它似乎仍在计算位移前法线。这可能是我的片段着色器中的一个错误，但我需要做更多的测试。
1.您可以使用我在此处给出的答案即时计算与位移顶点一致的面法线。您还可以将这些法线与法线细节贴图结合起来。 2. 切线空间法线贴图应该基本上是蓝色的。你的是白色的。 3.对不起，我无法为你调试代码，但我可以回答有关three.js的问题。