基于纹理坐标导数的 2 个 mip 级别之间的双线性过滤方程是什么

Question

标记为 OpenGL，因为问题应该与 OpenGL/WebGL 无关

我正在尝试实现基于着色器的纹理过滤。我有 之前的问题 和一个答案，帮助我修复了选择 mip 级别时的错误。实际上，该示例在 mip 级别之间执行“最近”操作。

现在我想在级别之间进行双线性过滤（NEAREST_MIPMAP_LINEAR）。

以前面的示例为例，它计算一个

mipLevel

然后就这样了

 outColor = colors[int(mipLevel)]

其中

colors

是 8 种 vec4 颜色的数组，与相应纹理的 mip 级别的颜色相匹配。该示例在左侧使用纹理绘制，在右侧使用此颜色表并调整纹理坐标以强制选择 mip 级别。

根据规范第 3.8.10.4 节，在 mip 级别之间插值的公式为

 τ = [1 − frac(λ)]τ1 + frac(λ)τ2.

其中 λ 是上面的

mipLevel

，

τ1

和

τ2

是来自 mip 级别的颜色。好像只能翻译成这个

 t1 = colors[int(mipLevel)];
 t2 = colors[int(mipLevel)];

 outColor = mix(t1, t2, fract(mipLevel));

但是当我尝试时，输出与硬件的实际过滤不匹配。下面，如果它正常工作，两侧应该同步改变颜色。

我错过了什么？

html, body {
  margin: 0;
  font-family: monospace;
  height: 100%;
}
canvas {
  display: block;
  width: 100%;
  height: 100%;
}

<canvas id="c"></canvas>

<script type="module">
import * as twgl from 'https://twgljs.org/dist/5.x/twgl-full.module.js';

const vs = `#version 300 es
uniform mat4 u_worldViewProjection;
uniform mat3 u_texMat;

out vec2 v_texCoord;

const vec2 position[6] = vec2[6](
  vec2(0, 0),
  vec2(1, 0),
  vec2(0, 1),
  vec2(0, 1),
  vec2(1, 0),
  vec2(1, 1));

void main() {
  vec2 p = position[gl_VertexID];
  v_texCoord = (u_texMat * vec3(p, 1)).xy;
  gl_Position = u_worldViewProjection * vec4(p, 0, 1);
}
`;
const fsTex = `#version 300 es
precision highp float;

in vec2 v_texCoord;

uniform sampler2D u_tex;

out vec4 outColor;

void main() {
  outColor = texture(u_tex, v_texCoord);
}
`;
const fsMipLevel = `#version 300 es
precision highp float;

in vec2 v_texCoord;

out vec4 outColor;

const vec4 colors[8] = vec4[8](
  vec4(  1,   0,   0, 1), // 0: red
  vec4(  1,   1,   0, 1), // 1: yellow
  vec4(  0,   1,   0, 1), // 2: green
  vec4(  0,   1,   1, 1), // 3: cyan
  vec4(  0,   0,   1, 1), // 4: blue
  vec4(  1,   0,   1, 1), // 5: magenta
  vec4(0.5, 0.5, 0.5, 1), // 6: gray
  vec4(  1,   1,   1, 1));// 7: white

void main() {
  vec2 size = vec2(128.0, 128.0); // size of the texture in your example
  vec2 dx = dFdx(v_texCoord * size);
  vec2 dy = dFdy(v_texCoord * size);
  float deltaMaxSq = max(dot(dx, dx), dot(dy, dy));
  float mipLevel = 0.5 * log2(deltaMaxSq) + 0.5;
  
  vec4 t1 = colors[int(mipLevel)];
  vec4 t2 = colors[int(mipLevel + 1.0)];
  
  outColor = mix(t1, t2, fract(mipLevel));
}
`;

const colors = [
  '#F00',
  '#FF0',
  '#0F0',
  '#0FF',
  '#00F',
  '#F0F',
  '#888',
  '#FFF',
];


function createMips(colors) {
  const ctx = document.createElement('canvas').getContext('2d');
  const numMips = colors.length;
  return colors.map((color, i) => {
    const size = 2 ** (numMips - i - 1);
    ctx.canvas.width = size;
    ctx.canvas.height = size;
    ctx.fillStyle = color;
    ctx.fillRect(0, 0, size, size);
    return ctx.getImageData(0, 0, size, size);
  });
}

function main() {
  const m4 = twgl.m4;
  const gl = document.getElementById("c").getContext("webgl2");
  if (!gl) {
    alert("Sorry, this example requires WebGL 2.0");  // eslint-disable-line
    return;
  }
  
  const texProgramInfo = twgl.createProgramInfo(gl, [vs, fsTex]);
  const mipProgramInfo = twgl.createProgramInfo(gl, [vs, fsMipLevel]);

  const texImage = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texImage);
  const data = createMips(colors);
  data.forEach(({width, height, data}, level) => {
    gl.texImage2D(gl.TEXTURE_2D, level, gl.RGBA8, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
  });
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_LINEAR);

  const lerp = (a, b, t) => a + (b - a) * t;

  function render(time) {
    time *= 0.001;
    twgl.resizeCanvasToDisplaySize(gl.canvas);
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
    gl.clearColor(0.3, 0.3, 0.3, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    const uniforms = {};

    const s = lerp(1, 128, Math.sin(time) * 0.5 + 0.5);
    uniforms.u_texMat = [
      s, 0, 0,
      0, s, 0,
      0, 0, 1,
    ];
    uniforms.u_worldViewProjection = m4.translation([-1.01, -0.5, 0]);

    gl.useProgram(texProgramInfo.program);
    twgl.setUniforms(texProgramInfo, uniforms);
    gl.drawArrays(gl.TRIANGLES, 0, 6);

    uniforms.u_worldViewProjection = m4.translation([0.01, -0.5, 0]);

    gl.useProgram(mipProgramInfo.program);
    twgl.setUniforms(mipProgramInfo, uniforms);
    gl.drawArrays(gl.TRIANGLES, 0, 6);

    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
}

main();
</script>

Answer 1

对于“NEAREST”过滤，您必须对索引进行舍入（如名称“NEAREST”所示）：

c[round(l)]

但是，使用“线性”过滤，您必须在下一个较小索引和下一个较大索引的颜色之间进行插值：

mix(c[int(l)], c[int(l)+1], fract(l))

所以你必须删除

+ 0.5

：

float mipLevel = 0.5 * log2(deltaMaxSq) + 0.5;

float mipLevel = 0.5 * log2(deltaMaxSq);