cables-gl / cables_docs

cables documentation docs.cables.gl
https://cables.gl/docs/docs
45 stars 16 forks source link

Please add "over" (and "under") blend modes for TextureEffects ops #219

Closed kebby closed 2 years ago

kebby commented 2 years ago

I'm trying to composite several 3D scenes and 2D assets with a ImageCompose/DrawImage chain, and I realized the proper blend mode to do so with antialiased/alpha content is missing.

To make compositing work properly re. blending and filtering, you need to work with premultiplied alpha. This is actually possible in 3D scenes (premultiplied is the same as "blended over a black background" after all) but to make it work with DrawImage etc. you need the "over" blend ode which is srcBlend=1, dstBlend=inv_src_alpha. (in contrast to the "normal" mode that has srcBlend=src_alpha) - and that blend mode is missing.

Here's a minimal patch to illustrate the issue (render low res antialiased cube into a texture, then blend that texture over a blue background with DrawImage)

https://cables.gl/p/623864320fcb980efaf2c9c7?s=7XsWi1krK0hUMblJ

The antialiased edges for the cube look too dark in the output because the black background around the cube bleeds into the filtering. "Over" would fix that.

There's also another fun mode that this unlocks: "under", aka srcBlend=inv_dst_alpha, dstBlend=1, with which you can put stuff under the translucent parts of an already existing image. That one would be a nice bonus but not necessary :)

pandrr commented 2 years ago

thanks, yes the alpha problems are annoying....

in textureeffects the blending is actually done in glsl to be a bit more flexible.

i am working on a bigger update for better alpha channel workflows...

anyway drawImage has a premultiplied checkbox on dev.cables.gl

for full transparent imageCompose workflow there is newImageCompose on dev.cables.gl. but many ops have to be updated until this is fully usable