Is it possible to do object fill masking to simulate filling

Hey Guys!

I was wondering if it is possible with Three.js to perform an object mask. Where I can scale the mask to simulate filling. I want to use this on Complex transparent shapes like chemistry beakers, etc.

I’ve seen this done with other engines. Just curious before i have to figure out another method.
Thanks in advance

One way to implement objects as masks is via post processing:

https://threejs.org/examples/webgl_postprocessing_masking

Is that the effect you are looking for?

Kind of!
I was looking for a less intensive and bit more dynamic way?
Maybe with an object and depth functions to simulate something like this??

image

Where I could then scale the colored image to simulate something inside of the object

Never mind!
Thanks for your help Mugen87! Your a champ!

I figured out how to do it using materials, transparency and setting my glass object as LessEqualDepth, and my liquid object as GreaterEqualDepth. Both objects need to have Transparent enabled

Cheers! keep up the awesome work brother!

1 Like