三个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表面，并且因为它是纹理，它具有有限的分辨率，在仔细检查时看起来很粗糙。