Three.js 使用点（n，l）作为纹理查找坐标Webgl时渲染瑕疵

我正在glsl中实现（pdf）以用作带有Three.js的着色器

我得到了一些渲染工件，我认为问题是由于webgl的奇怪，我不知道，可能与Nan或Inf或其他东西有关。。。我在拔头发

我将在下面介绍完整的片段和顶点着色器，但我认为这是片段着色器中的错误代码：

....
vec3 n = normalize(vNormal);
vec3 l = normalize(lightDir);

float d = dot(n, l) * 0.5 + 0.5;

//vec2 texLookUp = vec2(d, loa);
vec2 texLookUp = vec2(d, 0.055);
vec4 dColor = texture2D(texture, texLookUp);
gl_FragColor = dColor;
....

uniform vec3 lightDir;
uniform sampler2D texture;

varying vec3 vNormal;
varying vec3 vPosition;
varying vec2 vUv;

// loa calculation for texture lookup
varying highp float loa;

void main() {

vec3 n = normalize(vNormal);
vec3 l = normalize(lightDir);

float d = dot(n, l) * 0.5 + 0.5;

//vec2 texLookUp = vec2(d, loa);
vec2 texLookUp = vec2(d, 0.055);
vec4 dColor = texture2D(texture, texLookUp);

gl_FragColor = dColor;
}

尽我最大的努力调试，使用值d作为纹理查找向量的一个组件似乎存在一些问题。此代码生成以下奇怪的工件：

这些轮廓上不应该有那些黄色的“线”

正如您可能已经注意到的，我实际上并没有在代码中使用“loa”值。有一段时间，我认为这个问题是在我计算loa的方式，但似乎这个错误是独立于loa

任何帮助都将不胜感激

片段着色器：

....
vec3 n = normalize(vNormal);
vec3 l = normalize(lightDir);

float d = dot(n, l) * 0.5 + 0.5;

//vec2 texLookUp = vec2(d, loa);
vec2 texLookUp = vec2(d, 0.055);
vec4 dColor = texture2D(texture, texLookUp);
gl_FragColor = dColor;
....

uniform vec3 lightDir;
uniform sampler2D texture;

varying vec3 vNormal;
varying vec3 vPosition;
varying vec2 vUv;

// loa calculation for texture lookup
varying highp float loa;

void main() {

vec3 n = normalize(vNormal);
vec3 l = normalize(lightDir);

float d = dot(n, l) * 0.5 + 0.5;

//vec2 texLookUp = vec2(d, loa);
vec2 texLookUp = vec2(d, 0.055);
vec4 dColor = texture2D(texture, texLookUp);

gl_FragColor = dColor;
}

和顶点着色器：

uniform vec3 cameraPos;
uniform vec3 lightDir;
uniform vec3 focalPos;
uniform float inflate;
uniform float zmin;
uniform float r;


varying vec3 vNormal;
varying vec2 vUv;

varying float loa;

void main() {
vec3 n = normalize(normal);

// euclidiean distance to point from camera pos
float depth = length(cameraPos - position);

// 1. detail mapping correcting for perspective projection
float z = depth / zmin;

loa = 1.0 - (log2(z)/log2(r));

loa = clamp(loa, 0.055, 0.9);

vNormal = n;
vUv = uv;

gl_Position = projectionMatrix * modelViewMatrix * vec4(normal * inflate + position, 1.0 );
}

---

我通过将纹理设置为ClampToEdgeWrapping而不是RepeatWrapping解决了这个问题。我是通过这个堆栈溢出问题得到这个答案的：

这篇博文很好地解释了解决方案：

在THREEjs中处理此问题的函数是纹理的成员，并在THREEjs文档中进行了解释

---

我还需要将最小过滤器设置为最接近，以完全消除瑕疵。

我认为您的

d

公式已关闭。试着用

max（点（n，l），0）

来代替。我真的不明白这会做什么，它也没有解决问题，但当我做以下操作时，它确实奇怪地使黄色工件“变薄”：float d=max（点（n，l），0.0）*0.5+0.5；我也试过：float d=min（max（dot（n，l），0.0），1.0）*0.5+0.5；但这并没有产生明显的效果。我…*0.5+0.5的原因是要将范围从[-1.0,1.0]变换到[0.0,1.0]，所以另一个线索是，如果我使用fract（点（n，l）），那么问题会变得非常严重…你的查找纹理看起来像什么？左边是黄色的吗？你可以做一个

gl\u FragColor=vec4（d）在同一个模型上并上传它？你能把一个网页（例如JSFIDLE或jsbin）和你的代码放在一起吗？