0

我用三个 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。

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

谢谢！

4

1 回答 1

2

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

看看我用它做的一个分支。我做了几件事，比如改变magfilterto linear（最近的总是看起来像素化），但大多数情况下我只是改变了凹凸贴图的周期，以便它上下几次，而不是在整个过程中上升一点点纹理。

另一件要记住的事情是凹凸贴图总是看起来很粗糙，最高可达 11。它正在做一项艰巨的任务，试图在 2d 空间中伪造一个 3d 表面，并且因为它是纹理，它具有有限的分辨率，仔细检查会看起来很恶心。

于 2017-06-07T08:34:31.707 回答