Jump to content

Is it possible to mask a scene with another scene? ("Mask Pass")


Recommended Posts

After skimming through Babylon.js docs, I couldn't quite figure out whether it's possible to have one scene mask another (apologies if I mix up some common terminology).

In THREE.js, you could set up a separate MaskPass for that; here's an example I put together of what I want to achieve:


Would it be possible to reproduce this example in Babylon.js?

// Thanks in advance

Link to comment
Share on other sites


look to line 20 - 21 :>>

scene.clearColor = new BABYLON.Color4(0,0.3,0.4,0);
document.getElementById('renderCanvas').parentNode.style.backgroundImage = 'url(/textures/ground.jpg)';
1. step one : make scene clearcolor transparent
2. step two: make postprocess with  transparent area
and welcome to forum
in this sample you can make 2 canvas with 2 different scene 
but by other way you can render 2 scene with render target too


Link to comment
Share on other sites

@NasimiAsl Thanks for the example -- however, it's slightly different; look, in my codepen the mask was preventing *any* rendering of the main scene, and you could see the background clearly through it (as opposed to postprocessing just being applied on top).

In your example, is it possible to prevent the sphere to be rendered at all at the masked locations?

Link to comment
Share on other sites

In Babylon.js you can have multiple scenes and each one can decide what to do with the depthbuffer.

In your case you need 2 scenes where the second one does NOT clear the depth buffer before render. Something along these lines: https://www.babylonjs-playground.com/#FF57EP#1


The way they did it in 3js would work as well but it requires rendertargets (which is supported in Babylon.js)


Link to comment
Share on other sites

Using the concept of layermask, you can also have at least 4 simultaneous scenes in the same place at the same time.  A camera has a layermask, as do meshes.  You could set all the meshes for one scene to a mask.  The meshes for "another scene" can have another mask.  If you set the mask of the camera to one or the other, then a different "scene" will be shown.  If you set the camera's masks to a bitwise or of both, then both will show.

If you are familiar with Blender, same concept.  One Blend file / scene.  If you wish to show only certain meshes put them on the same layer.  If multiple layers are selected, more than meshes for one layer with display.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...