javascript - 通过 webgl 加载 PNG 图像并不完美

Question

当使用 canvas.getContext('2d') 加载具有透明部分的 png 文件时，它看起来与 png 文件本身完全一样。但是通过canvas.getContext('webgl')加载时，透明部分会显示为白色。然后如果你在着色器中添加discard，它会更好但仍然不如png文件完美。如何解决这个问题？

---

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

---

void main() {
      vec4 color = texture2D(u_image, v_texCoord);
      if(color.a < 0.5) {
         discard;
      }
      gl_FragColor = color;
    }

Answer 1

听起来您可能需要激活混合。

gl.enable(gl.BLEND);

然后将混合函数设置为使用预乘 alpha(默认)

gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);