My goal is to display two objects using two separate gl.drawArrays calls. I want any transparent parts of the objects to not be visible. Additionally, I want one object to appear on top of the other so that the first drawn object is hidden where it overlaps the second one.
In order to achieve this, I have set up my render loop as follows:
gl.clearColor(0, 0, 0, 1);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
gl.enable(gl.BLEND);
gl.disable(gl.DEPTH_TEST);
I am not entirely sure about the blend functions but I utilize them to enable transparency. However, this causes the two objects to blend and create a yellow color (one object is red and the other is green). My intention is to have the final color be either red or green depending on the order they are drawn in, while still maintaining transparency.
To illustrate the issue, observe the following code snippet:
const fShaderSource2 = `#version 300 es
precision mediump float;
out vec4 outColor;
void main() {
outColor = vec4(0.0, 1.0, 0.0, 1.0);
}
`;
...
minibatch.push(redText);
minibatch.push(greenText);
Although I draw the red object first and then the green object, the resulting color is yellow instead of the desired outcome. I aim to rectify this discrepancy.