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

【问题标题】：Same PNG file rendered by webgl in 2d is NOT as smoothly as canvas2d由 webgl 在 2d 中渲染的相同 PNG 文件不如 canvas2d 平滑
【发布时间】：2019-11-22 04:17:32
【问题描述】：

当我尝试通过canvas.getContext('2d')和canvas.getContext('webgl')将同一个PNG文件加载到画布中时，发现与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);

【问题讨论】：

这能回答你的问题吗？ WebGL image rendering bad quality
见texture filtering。另外，由于您提到了 canvas2d，因此有 this

标签： javascript canvas webgl

【解决方案1】：

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

您可能想改用LINEAR，如果您要缩小很多，您还需要LINEAR_MIPMAP_LINEAR 作为您的最小过滤器，因此您还需要调用generateMipmap。

【讨论】：

如果图像的尺寸是 2 次方，您只能在 WebGL1 中调用 generateMipmap。
LINEAR 过滤器对我来说也是如此。但是在将图像的尺寸修改为 2 次方后，LINEAR_MIPMAP_LINEAR 会好得多。现在 webgl2d 纹理和 canvas2d 图像之间的唯一区别是 alpha 小于 1 的曲线边界（例如，气泡）。我也尝试了 gl.hint(gl.GENERATE_MIPMAP_HINT, gl.NICEST)，但似乎没有任何改进。所以只是想知道这是我可以为 webgl 2d 尝试的最好的方法吗？
听起来你的显示尺寸比你的纹理尺寸小很多，所以你可能想在 CPU 上使用高质量的过滤器简单地调整它的大小。