javascript - 由 webgl 在 2d 中渲染的相同 PNG 文件不如 canvas2d 流畅

Question

当我尝试通过 canvas.getContext('2d') 和 canvas.getContext('webgl') 将相同的 PNG 文件加载到 Canvas 中时，发现与canvas2d相比，webgl渲染的PNG文件在细节上不如canvas2d渲染的流畅。这是由点之间的 GPU 插值或纹理设置/上传问题引起的吗？有什么设置可以使 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过滤，这意味着如果您想要一个纹理，纹理的屏幕空间大小需要与纹理完全相同。非常好的结果。

您可能想使用 LINEAR 来代替，如果您要缩小很多，您还需要 LINEAR_MIPMAP_LINEAR 作为您的最小过滤器，并且您会因此还要调用generateMipmap。