How does alpha work in webGL with blending disabled? - webgl

Question

I render a couple of vertices in point mode, with blending disabled, here's the relevant code:
var canvas = htmlToElement('<canvas width="100" height="100" style="margin:auto;display:block;"></canvas>');
document.body.appendChild(canvas);
gl = canvas.getContext('experimental-webgl');
var vertices = [
-0.5, 0.5, 0.0,
0.0, 0.5, 0.0,
];
var vertLen = vertices.length / 3;
var vertex_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
var vertShader = createShader(document.getElementById('vert').textContent, gl.VERTEX_SHADER);
var fragShader = createShader(document.getElementById('frag').textContent, gl.FRAGMENT_SHADER);
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
var coord = gl.getAttribLocation(shaderProgram, "coordinates");
gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(coord);
gl.clearColor(0, 0, 0, 1);
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.viewport(0, 0, canvas.width, canvas.height);
gl.disable(gl.BLEND);
//gl.blendEquation(gl.FUNC_ADD);
//gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
gl.drawArrays(gl.POINTS, 0, vertLen);
And here is the fragment shader:
<script type='x-shader/x-fragment' id='frag'>
void main(void) {
gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);
}
</script>
This is what I get:
The red color on this image is [255,27,32].
So my question is, without blending, what is the formula that transforms half transparent red into [255,27,32]?
I think it's the same in OpenGL?

Answer 1

What do you mean it's [255, 27, 32]? How did you get that number?
The <canvas> element is blended with the rest of the HTML page just like all HTML elements so "in general" if you put 1, 0, 0, 0.5 in the fragment shader then 255, 0, 0, 127 is written in the canvas.
The canvas will then be blended with the page. What's behind the canvas is up to your CSS. Maybe you had <canvas style="background: purple;"></canvas> or maybe your CSS is set to
body {
background: #123456;
}
The background could be anything you set it to
The canvas will by default, be blended assuming the colors inside the canvas are using "premultiplied alpha" which means that color (255, 0, 0, 127) is an invalid color.
Pre-multipled alpha means R, G, and B have been multiplied by alpha. When R is 1 and alpha 0.5 the highest R can be is 0.5 (because 1.0 multiplied by 0.5 is 0.5)
So what happens in that case is undefined by the HTML spec.
You can tell the browser to use un-premultiplied alpha for drawing the canvas on top of the whatever it's over by passing premultipledAlpha: false when you create the WebGL context. You can also turn off alpha in the canvas with alpha: false when creating the context. (though IIRC it doesn't work in Safari, Safari being the new IE 🙄
examples:
test('#normal', {});
test('#unpremultiplied-alpha', {premultipliedAlpha: false});
test('#no-alpha', {alpha: false});
function test(selector, options) {
const canvas = document.querySelector(selector);
const gl = canvas.getContext('webgl', options);
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.enable(gl.SCISSOR_TEST);
gl.scissor(32, 32, 64, 64);
gl.clearColor(0.5, 0.25, 0.125, 0.5);
gl.clear(gl.COLOR_BUFFER_BIT);
}
/* make the background stripes */
html, body {
height: 100%;
background: repeating-linear-gradient(
45deg,
lime,
lime 10px,
orange 10px,
orange 20px
);
}
canvas {
border: 1px solid black;
}
<canvas width="128" height="128" id="normal"></canvas>
<canvas width="128" height="128" id="unpremultiplied-alpha"></canvas>
<canvas width="128" height="128" id="no-alpha"></canvas>