三个js凹凸映射

Question

我用三个js（r85）创建了一个简单的场景。它包含一个相机、一个灯光和一个平面几何网格。我还创建了一个渲染器目标，在其中使用 ShaderMaterial 渲染平面的凹凸贴图纹理。在片段着色器中，凹凸贴图使用连续函数（因此凹凸贴图应该是“平滑的”）：

varying vec2 vUV;

void main() {
    float x = sin(sqrt(vUV.x * vUV.x + vUV.y * vUV.y));
    gl_FragColor.rgb = vec3(x, x, x);
}

代码呈现如下图像（奇怪的线条）：

当我在 MeshPhongMaterial 中使用凹凸贴图时，会出现某种奇怪的线条。

在此处查看jsfiddle。

谁能告诉我那些奇怪的线条是什么以及如何避免这些？如果我对凹凸贴图使用简单的图像（不是渲染目标），则不会出现线条。

谢谢！

Answer 1

发生这种情况是因为长度为0-sqrt(2) or 0-1.41，您正在利用正弦波周期的一小部分0-2*PI or 0-6.283 - 因此纹理的颜色深度受到压力 - 您正在迈出一步每 50 个像素或其他 1 位 - 这就是当您从 0x000000 渐变到 0x1a1a1a 时，径向渐变看起来像一系列环的原因。

Check out a branch i made from it. 我做了一些事情，比如将magfilter 更改为linear（最近的总是看起来像素化），但大多数情况下我只是更改了凹凸贴图的周期，以便它上下几次而不仅仅是在纹理的过程中上升一点点。

要记住的另一件事是，凹凸贴图本身看起来很粗糙，最高可达 11。这是一项艰巨的任务，试图在 2d 空间中伪造 3d 表面，因为它是纹理，所以它有一个有限的分辨率，仔细观察会显得很粗糙。