Tengo un sprite con canal alfa (primera imagen, tiene relleno de textura, para evitar el sangrado de textura, por eso es "más grueso"). La segunda imagen es lo que veo cuando renderizo el sprite. Lo extraño es que la mezcla alfa funciona, porque el azul claro dentro del círculo es azul alfa, veo que funciona. Y las partes naranjas también tienen colores alfa en los bordes (debido al suavizado).
Pero, ¿cómo es posible ese borde blanco alrededor del círculo azul? El círculo azul tiene alfa, veo que está funcionando. No puedo comprender si la combinación alfa funciona (para los píxeles alfa azules), ¿cómo es posible ese borde blanco alrededor del círculo azul (esos son los píxeles alfa naranja)?
¿Cómo puedo evitar renderizar los bordes blancos alrededor del círculo azul del sprite?
gl.enable(gl.BLEND);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
Si renderizo el sprite en un lienzo HTML, funciona como se esperaba, tiene una combinación alfa, sin bordes blancos alrededor del círculo.
Las imágenes adjuntas no tienen canal alfa, pero están en mi aplicación.
Encontré la solución. Parece que si no apago el alfa en getContext, el alfa no funciona correctamente.
const gl = canvas.getContext("webgl2", {
alpha: false,
});
Luego me di cuenta de que de esta manera solo funciona para el filtrado de texturas MÁS CERCANO, para trabajar para el filtrado LINEAL y para MIPMAP también necesita:
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);