Question

I followed this tutorial用于为WebGL重新创建drawImage，但它没有涵盖的一件事是，对于具有透明像素的图像（例如游戏精灵），图像矩形后面的所有内容（即使像素是透明的）被清除。

这可能微不足道，但是我对GLSL完全陌生，这里是着色器：

fragment

precision mediump float;
varying vec2 v_texcoord;
uniform sampler2D u_texture;
void main() {
   gl_FragColor = texture2D(u_texture, v_texcoord);
}

vertex

attribute vec4 a_position;
attribute vec2 a_texcoord;
uniform mat4 u_matrix;
varying vec2 v_texcoord;
void main() {
   gl_Position = u_matrix * a_position;
   v_texcoord = a_texcoord;
}

我如何修改这些像素，以避免在将精灵的透明像素渲染到其上时在已渲染的帧中隐藏像素？

Answer 1

我知道了。对于入门者来说很难找到它，因为入门教程没有解释很多重要的基础知识，例如您可以使用texture2D(u_texture, v_texcoord).a来获取Alpha，或者使用discard来不绘制像素。

precision mediump float;
varying vec2 v_texcoord;
uniform sampler2D u_texture;

void main() {
  vec4 color = texture2D(u_texture, v_texcoord);
  float alpha = texture2D(u_texture, v_texcoord).a;
  if (alpha < 1.0) {
    discard;
  }
  gl_FragColor = color;
}

如何修改此WebGL drawImage等效项，以使其不清除在透明图像下方绘制的像素？

1 个答案: