To build upon Sean's answer, you don't need to make a separate FBO in order to render the effect you're looking for. Unfortunately, you cannot do it in a single pass because you're asking for two different blending operations for the pixels depending on whether or not your orange triangle is overlapping the light blue one. Fortunately, this is an excellent example of a place where the stencil buffer can be used.
In order to generate the effect that you want you need to do the following:
- Clear the stencil and color bits for your framebuffer.
- Render the blue triangle into both the color buffer and the stencil buffer.
- Render the orange triangle once with regular alpha blending testing whether or not the stencil value is non-zero
- Render the orange triangle again without alpha blending (painter's algorithm) wherever the stencil value is zero.
You will need to make sure that your OpenGL context has a stencil buffer, which you can usually do during creation of the context. I believe that WebGL asks for it explicitly.
Here is some (untested) pseudocode as well:
// Enable both color and stencil buffers
glColorMask(GL_TRUE, GL_TRUE, GL_TRUE, GL_TRUE);
// Tell OpenGL to never pass the stencil test, and set the reference value to one.
glStencilFunc(GL_NEVER, 1, 0xFF);
// Tell OpenGL to replace the value in the stencil buffer with the reference value
// whenever the stencil test fails (which is always)
glStencilOp(GL_REPLACE, GL_KEEP, GL_KEEP);
// Clear your framebuffer
glClearColor(0, 0, 0, 0);
glClear(GL_STENCIL_BUFFER_BIT | GL_COLOR_BUFFER_BIT);
// Set the stencil function to only draw against non-zero values and to not modify
// the stencil buffer on failure
glStencilFunc(GL_NOTEQUAL, 0, 0xFF);
glStencilOp(GL_KEEP, GL_KEEP, GL_KEEP);
// Enable alpha blending as usual
// Set the stencil buffer to only draw against zero values and to not modify the
// stencil buffer on failure. We do not need to call glStencilOp again because
// the arguments will be the same.
glStencilFunc(GL_EQUAL, 0, 0xFF);
// Disable blending