三个js凹凸贴图
Three js bump mapping
我用三个js（r85）创建了一个简单的场景。它包含一个相机、一个灯和一个平面几何网格。我还创建了一个渲染器目标，我在其中使用 ShaderMaterial 渲染平面的凹凸贴图纹理。在片段着色器中，凹凸贴图使用连续函数（因此凹凸贴图应该是"smooth"）：
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。
谁能告诉我那些奇怪的线条是什么以及如何避免这些线条？如果我使用简单图像作为凹凸贴图（不是渲染目标），则线条不会出现。
谢谢！
发生这种情况是因为长度为 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 space 中伪造 3d 表面，并且因为它是一种纹理，具有有限的分辨率，仔细观察会显得很粗糙。
我用三个js（r85）创建了一个简单的场景。它包含一个相机、一个灯和一个平面几何网格。我还创建了一个渲染器目标，我在其中使用 ShaderMaterial 渲染平面的凹凸贴图纹理。在片段着色器中，凹凸贴图使用连续函数（因此凹凸贴图应该是"smooth"）：
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。
谁能告诉我那些奇怪的线条是什么以及如何避免这些线条？如果我使用简单图像作为凹凸贴图（不是渲染目标），则线条不会出现。
谢谢！
发生这种情况是因为长度为 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 space 中伪造 3d 表面，并且因为它是一种纹理，具有有限的分辨率，仔细观察会显得很粗糙。