FIx transparency in drawing programs

[cwervo]

We aren't alpha-blending the shaders in the final compositing step so even sections of the shaders in the /draw directory that use vec4(0, 0, 0, 0) for transparency end up with black rectangles that bound the shapes they're drawing (e.g. the photo on the left). Using discard we get the behavior we expect, where overlapping shapes with transparent regions don't block each other.

Before | After

Also works on images:

[osnr]

Oh, this is a nice change.

How hard is it to just do the actual alpha blending in our compositor so we can return rgba(0,0,0,0) and it does the same thing? Or do you feel that would be weird?

[ppkn]

I haven't tested this. But I love it. Thanks for fixing this.

[cwervo]

I didn't investigate turning on alpha blending, let me take a look and see if that would be better!

[cwervo]

Okay, so it turned out we were alpha blending but we were crushing the "alpha blend factor" (VK_BLEND_FACTOR_ZERO, changed to VK_BLEND_FACTOR_ONE_MINUS_SRC_ALPHA), resulting in the black bounding boxes.

Now that alpha blending is correctly turned on there's a funny problem where our canvases could stack up transparencies and produce an unintended halo effect. We fix this with a new GPU pipeline, canvas-composite that we use instead of the image pipeline. It's almost identical except it reverses the alpha premultiplication, fixing the potential haloing bug!

Now we get nicely overlapping partially transparent elements: