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

Question

When I tried to load the same PNG file into the canvas via both canvas.getContext('2d') and canvas.getContext('webgl'), found that compared with canvas2d, the PNG file rendered by webgl is NOT as smoothly as it rendered by canvas2d in detail. Is this caused by the GPU interpolation between points or texture setting/uploading issue? Any settings which could make the webgl version exactly the same as canvas 2d performs?

    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);

Does this answer your question? [WebGL image rendering bad quality](https://stackoverflow.com/questions/39276191/webgl-image-rendering-bad-quality) — LJᛃ, Nov 21 '19 at 16:23
See [texture filtering](https://webglfundamentals.org/webgl/lessons/webgl-3d-textures.html). Also since you mentioned canvas2d there's [this](https://webglfundamentals.org/webgl/lessons/webgl-2d-drawimage.html) — gman, Nov 21 '19 at 23:33

score 1 · Accepted Answer · answered Nov 21 '19 at 20:17

1

You're using NEAREST filtering, which means the screen-space size of the texture would need to be exactly the same size as the texture, if you want a really nice result.

You probably want to use LINEAR instead, and if you're minifying by quite a bit you'll also want LINEAR_MIPMAP_LINEAR for your min filter, and you'd therefore also want to call generateMipmap.

answered Nov 21 '19 at 20:17

prideout

2,895
1
23
25

You can only call `generateMipmap` in WebGL1 if the image's dimensions are powers-of-2. – gman Nov 21 '19 at 23:34
The LINEAR filter performs the same for me. But the LINEAR_MIPMAP_LINEAR is much better after modifying the image’s dimensions to powers-of-2. Now the only difference between webgl2d texture and canvas2d image is the curve borders where the alpha less than 1(eg, a bubble). I also tried gl.hint(gl.GENERATE_MIPMAP_HINT, gl.NICEST), but seems like no improvement. So just wonder is this the best I could try for webgl 2d? – WayneNWayne Nov 22 '19 at 03:48
It sounds like your display size is much smaller than your texture size, so you might want to simply resize it on the CPU using a high quality filter. – prideout Nov 22 '19 at 14:38

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

1 Answers1