Clip image, or clip objects

Is there a way to clip a png with another png (png is just an example). Or clip an image with a rect/circle node? Or some other way to do a cut-out/masking type of visual.

Thanks!

Here’s an example that uses some internal APIs, so no guarantees that it’ll work in future updates… It’ll only work in WebGL, not in Canvas 2D (it uses a WebGL stencil buffer to do masking)

Rectangles and Circles can be used as masks (like in photoshop or after effects). A mask can be either positive, or negative.

It basically works like this:

  • All pixels have a “mask” value. All pixels start with a value of 0.
  • If a value is <0 nothing will be rendered on that pixel
  • If a value is >=0 it will be rendered
  • A negative mask will subtract 1 on every pixel it touches
  • A positive mask will add 1 on every pixel it touches

Have a look at the attached example, I hope it explains it more clearly. Let me know if you have further questions!

masking.zip (192.6 KB)

2 Likes

This does work very nice! I was wondering if something similar is possible with using images as masks e.g. a b/w png that has a falloff with transparency. I’ve tried to replace the circle with that, but I couldn’t get that to work.

Thanks!