Entonces, soy nuevo en Webgl y he estado tratando de agregar un fondo transparente para que pueda ver la imagen pero también el fondo. Incluí el código con el que he estado trabajando, pero cada vez que ejecuto el código, solo publica la imagen y no cambia el fondo. Cualquier consejo sobre lo que estoy haciendo mal sería apreciado.
precision highp float; // Uniform variables are constant over image uniform float time; uniform sampler2D image; uniform vec2 u_resolution; uniform vec2 viewport; void main(void) { gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5); gl_FragColor = texture2D(image, gl_FragCoord.yx / 600.0); }Depende de lo que quieras. Puedes mix el color de la textura y el color de fondo 1:1:
void main(void) { vec4 color = vec4(1.0, 0.0, 0.0, 0.5); vec4 textureColor = texture2D(image, gl_FragCoord.yx / 600.0); gl_FragColor = mix(textureColor, color, 0.5); } Si la textura es parcialmente transparente y desea rellenar estas áreas con el color de fondo, debe mix el color según el canal alfa de la textura ( textureColor.a ):
void main(void) { vec4 backColor = vec4(1.0, 0.0, 0.0, 0.5); vec4 textureColor = texture2D(image, gl_FragCoord.yx / 600.0); gl_FragColor = mix(backColor, textureColor, textureColor.a); }Sin embargo, Blending es algo completamente diferente. La mezcla debe estar habilitada y la función de mezcla debe estar configurada. Esto no se puede hacer en el compartidor. Debe configurarse usando instrucciones WebGL. p.ej:
gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);Consulte también ¿Funciona la combinación con la función de combinación GLSL?