How to support more than 2 rendering groups with stencil buffer

In my Playground the crate should only be visible through the mask.The background should be behind all and visible through the mask as well.

Should look like this:

Something like that?
Stencil | Babylon.js Playground (babylonjs.com)

(assuming you invert the mask image if you want to see only in the hole)

1 Like


It should look like this (photoshopped)

Yep so you should be able to use my code :wink:

Thank you for your help. How do invert the mask image?

You want to render the hole so I would recommend a second texture where the hole is filled and the frame is transparent

I’m not sure I understand your approach. Could you provide example in playground?

I have updated playground to better reflect the desired effect.

@sebavan Could you please help out here :pray:

You need to draw the “hole” in the stencil with a special value and draw the crate after the hole only where the stencil value equals the one of the hole.

1 Like

Something like that:
Stencil | Babylon.js Playground (babylonjs.com)

2 Likes

Closer, but now earth is no longer visible through hole. Mask should clip only crate.

Stencil | Babylon.js Playground (babylonjs.com)

2 Likes

Great! Thank you so much!

I was looking and playing about with this last week, but never posted a reply, but am doing so now for the sake of completeness.

First, to quickly build on the solution by @Deltakosh, the second draw of the background isn’t needed - the same effect can be achieved by setting material.disableColorWrite = true on the mask material (PG). Changing the depth function also isn’t needed if writing to depth is disabled on the mask, material.disableDepthWrite = true (PG).

When I was looking at this last week, I used the original mask (though if indeed it is never meant to be seen, then inverting it as in the above playgrounds makes more sense). This works by drawing the mask both with and without the texture being set, along with the use of engine.setStencilOperationPass(BABYLON.Engine.INCR), so that the white area ends up with a stencil value of 2, while the circle area has a stencil value of 1.

Using the original mask the following results can all be achieved:

Framed: (PG)

Background masked: (PG)

Background not masked (as above): (PG)

Only the first (framed) can’t be achieved with the inverted mask, so unless that is what you were wanting (which I guess you’re not based on the conversation above, but perhaps some future reader might be) then it’s probably best to just use that.

3 Likes

Thank you for taking the time to put this together. Your solution makes more sense IMO without 2nd background layer.

1 Like