three.js - 平铺地形法线

Question

我正在尝试在 ThreeJS 中创建地形解决方案，但在生成法线时遇到了一些麻烦。我通过使用 THREE.PlaneGeometry 类创建许多网格对象来解决这个问题。创建完所有图块后，我会遍历每个图块并设置 UV，以便每个图块代表整体的一部分。我还生成顶点 Y 位置的高度值以创建一些山丘。然后我调用几何函数

geometry.computeFaceNormals(); 
geometry.computeVertexNormals();

这只是为了让我为每个图块设置一些默认的面和顶点法线。

然后我遍历每个瓷砖并尝试平均每个角落的法线。

问题是(我认为)法线，但我真的不知道如何称呼这个问题。创建时，平面角上的每个法线都指向与面相同的方向。这使地形看起来像一个平坦的阴影对象。为了防止这种情况，我想也许我需要做的是确保每个顶点法线(每个角)与其直接相邻的法线具有相同的平均法线。即每个瓦片的每个角与相邻平面周围的所有直接法线具有相同的法线。

图A


在这里，我正在可视化网格上的 4 个法线中的每一个。你可以看到在每个角落的法线都是一样的(在彼此之上)

图B


编辑
图C


编辑
图D


除非所有顶点都共享相同的法线，否则它仍然会出现所有块状 <:/

我不知道该怎么做……我认为我对需要做的事情的理解是不正确的……？

任何帮助将不胜感激。

Answer 1

你对应该发生的事情基本上是正确的。你得到的阴影与连续法线不一致。如果给定位置的所有顶点面都具有相同的法线，则您不应在第二张图像中看到明显的阴影不连续性。然而，图像看起来也不像简单的面部法线，至少在我看来不是。

需要注意以下几点:

1)我注意到你的四边形本身不是平面的。您的算法是否有可能假设它们是？非平面四边形网格没有真正的“面法线”可用作基础。

2)在对它们求平均值后，您的标准化归一化了吗？也就是说，它们的向量长度是否为 1？

3)您是否确信正常平均代码实际上是使用正确的法线进行平均？此中的阴影看起来不像完全平坦的阴影图像，其中四边形中的每个顶点面法线都相同 - 如果是这种情况，您将在每个四边形上获得一致的阴影，尽管四边形不会连续。这可能是您的原始顶点面法线实际上与面法线不对齐？

4)尝试关闭凹凸贴图进行调试。根据您的着色器中凹凸的处理方式，您可能有不正确的副法线/双切线，而不是错误的垂直法线。