Javascript webgl在2d中渲染的相同PNG文件不如canvas2d平滑

当我试图通过

canvas.getContext（'2d'）

和

canvas.getContext（'webgl'）

将相同的PNG文件加载到画布时，发现与canvas2d相比，webgl渲染的PNG文件在细节上不如canvas2d渲染的PNG文件平滑。这是由点之间的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);

---

您使用的是

最近的

过滤，这意味着纹理的屏幕空间大小需要与纹理的大小完全相同，如果您想要一个非常好的结果

---

您可能希望使用

LINEAR

，如果要缩小相当多，您还需要

LINEAR\u MIPMAP\u LINEAR

作为最小过滤器，因此您还需要调用

generateMipmap

，这是否回答了您的问题？看见此外，由于您提到了canvas2d，因此只有在图像的尺寸为二次幂时，您才能在WebGL1中调用

generateMipmap

。线性过滤器对我执行相同的操作。但是，将图像的尺寸修改为2的幂后，线性映射的效果要好得多。现在webgl2d纹理和canvas2d图像之间的唯一区别是alpha小于1的曲线边界（例如，气泡）。我还尝试了gl.hint（gl.GENERATE\u MIPMAP\u hint，gl.NICEST），但似乎没有改进。所以我想知道这是我能为webgl 2d做的最好的尝试吗？听起来你的显示尺寸比你的纹理尺寸小得多，所以你可能只想在CPU上使用高质量的过滤器来调整它的大小。