Как я могу изменить этот эквивалент WebGL drawImage, чтобы он не очищал пиксели, нарисованные под прозрачными изображениями?

Question

Я следовал этому уроку для воссоздания drawImage для WebGL, но одна вещь, на которую он не распространяется, это тот факт, что для изображений с прозрачными пикселями, например игровых спрайтов, все, что находится за прямоугольником изображения ( даже там, где пиксели прозрачные) очищается.

Это, вероятно, тривиально, но я совершенно новичок в 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, чтобы получить альфу, или 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;
}