求WebGPU/WebGL中Mipmap LOD标准逻辑及WGSL/GLSL梯度加权规则

核心问题本质 #

平铺纹理边缘的瑕疵源于导数计算失效：采样器依赖UV坐标的梯度（dpdx/dpdy）计算Mipmap层级权重，但边缘处UV的不连续会导致梯度突变，进而选到错误的Mip层级。

标准Mipmap LOD计算逻辑（GLSL/WGSL通用） #

WebGL和WebGPU遵循统一的Mipmap LOD计算规则，可直接转换为WGSL实现：

1. 计算UV在屏幕空间的水平/垂直梯度：

   let dx = dpdx(uv);
   let dy = dpdy(uv);
   

2. 将UV梯度转换为纹理像素单位的变化量：

   let texSize = textureDimensions(tex);
   let scale = vec2<f32>(f32(texSize.x), f32(texSize.y));
   let ddx = dx * scale;
   let ddy = dy * scale;
   

3. 计算基础LOD值：通过梯度的平方长度平方根取对数2得到，用max避免负数值：

   let lodBase = 0.5 * log2(max(dot(ddx, ddx), dot(ddy, ddy)));
   

边缘修正的手动实现方案 #

按照你提出的思路，通过边缘内偏移计算可靠LOD，再应用到边缘采样，具体步骤：

1. 定义极小偏移量（根据纹理尺寸调整，示例用0.001）：

   const delta = 0.001;
   

2. 对UV进行边缘内偏移，确保偏移后UV处于连续区域：

   // 处理U方向边缘：接近0则右移，接近1则左移
   let correctedU = select(uv.x + delta, select(uv.x - delta, uv.x, uv.x > 1.0 - delta), uv.x < delta);
   // 处理V方向边缘
   let correctedV = select(uv.y + delta, select(uv.y - delta, uv.y, uv.y > 1.0 - delta), uv.y < delta);
   let correctedUV = vec2<f32>(correctedU, correctedV);
   

3. 用修正后的UV计算可靠LOD并限制范围：

   let dx = dpdx(correctedUV);
   let dy = dpdy(correctedUV);
   let texSize = textureDimensions(tex);
   let scale = vec2<f32>(f32(texSize.x), f32(texSize.y));
   let ddx = dx * scale;
   let ddy = dy * scale;
   let maxMipLevel = floor(log2(max(f32(texSize.x), f32(texSize.y))));
   let lod = clamp(0.5 * log2(max(dot(ddx, ddx), dot(ddy, ddy))), 0.0, maxMipLevel);
   

4. 手动指定LOD采样纹理：

   let color = textureSampleLevel(tex, sampler, uv, lod);
   

关键注意事项 #

• maxMipLevel需提前计算，为纹理最长边尺寸的对数2向下取整
• 偏移量delta不能过大（避免偏离边缘采样）或过小（仍落在导数突变区）
• 带透明通道的纹理，修正后可能需额外处理alpha通道过渡

内容的提问来源于stack exchange，提问作者Spiri