由 webgl 在 2d 中呈现的相同 PNG 文件不如 canvas2d 平滑

Question

当我尝试通过 canvas.getContext('2d') 和 canvas.getContext('webgl') 将相同的 PNG 文件加载到 canvas 时，发现与 canvas2d 相比，呈现的 PNG 文件webgl 在细节上不如 canvas2d 渲染的流畅。这是由点之间的 GPU 插值或纹理 setting/uploading 问题引起的吗？任何可以使 webgl 版本与 canvas 2d 执行完全相同的设置？

    let FSHADER_SOURCE = `
    precision mediump float;

    uniform sampler2D u_image0;    
    varying vec2 v_texCoord;

    void main() {
      vec4 color0 = texture2D(u_image0, v_texCoord);
      gl_FragColor = color0;
    }
    `

    let texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);

    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.img);

Answer 1

您正在使用 NEAREST 过滤，这意味着纹理的屏幕尺寸 space 需要与完全尺寸相同纹理，如果你想要一个非常好的结果。

您可能想改用 LINEAR，如果您要缩小很多，您还需要 LINEAR_MIPMAP_LINEAR 作为您的最小过滤器，因此您也希望呼叫 generateMipmap.

由 webgl 在 2d 中呈现的相同 PNG 文件不如 canvas2d 平滑

Same PNG file rendered by webgl in 2d is NOT as smoothly as canvas2d

javascript

canvas

webgl