Hi folks! I have been playing around with a scene which is sort of a protype for an effect I would like to use on my own personal blog site. The idea is to have some small “Portals” which act as doorways to the various sections of my site. Each cube will contain distinct meshes and backgrounds and I will overlay an HTML link on each portal. The plan is to have the scene remain even during site navigation as a sort of background with content layered on top of it in a synchronized way, (I will load in content via turbolinks.js). When someone clicks on a link I will make the babylon camera zoom in and enter the corresponding cube and the assets within it will serve as that pages distinct 3D background. I will have maybe 5 or 6 of these cubes in the scene. Outside the cubes will be some other geometry, not decided on that yet.
Anyway. Before I can acheive this effect I really need to develop a good understanding of how the various stencil testing functions work. I found some examples, but not enough for me to really understand how stencil masks and rendering groups etc work together. I can get close to the effect I need just by clumsily copying code from other playgrounds, but not close enough. I need to really understand well how these stencil functions work. I don’t have a background in 3D so am useless with shaders currently, but hope to learn it all!
Here is a playground link: https://www.babylonjs-playground.com/#VCPMCZ#40
The idea is that the “portal” can be any transparent mesh, (I probably wont stick to just using simple cubes, they might end up being stone shapes made in Blender…). I want the portal mesh to be able to use the skybox cube texture. I was also experimenting with refractions for the inside faces of the cube, but can’t figure out a way to achieve this in a performant way yet. I tried creating two cubes and hiding the backfaces of one and setting the other to use a reflection cube texture, but I couldnt get it to look decent on a mobile with only 512px for the size, so am abandoning that idea for now and just having the box be transparent with no refractions.
So what am hoping is that some of you wizards will find the time to explain to me like I am 5 yrs old exactly what’s happening in the “PORTAL CODE” section of my playground which I mostly just copied over from another playground. The result I want is for the “portal” to have reflections from the scene’s skybox and for the “ground” mesh, (the big sphere), to not be visible inside the cube though it intersects the portal’s “inner” geometry.
I think I understand the basic idea of rendering groups, they are like layers, the default one is 0, higher ids will mean the layer is painted over objects in lower rendering groups regardless of depth. Right?
Things I don’t understand and can’t find documentation on:
“scene.setRenderingAutoClearDepthStencil(1, false);”
the API docs say that this function “Specifies whether or not the stencil and depth buffer are cleared between two rendering groups.” What exactly does “between two rendering groups” mean? The default one, 0, and the one referenced as a parameter?
There is not much info in the API docs about the following functions:
setStencilMask()
setStencilFunction()
setStencilFunctionMask()
setStencilFunctionReference()
I can’t see a guide to using them. I can guess at what they do, but would really appreciate an authoritative explanation so I can properly understand. Am assuming this is not something that you were expecting beginners like me to mess with.
Am guessing I need to add the ground/sphere to its own rendering group and then maybe somehow create a second stencil mask which only discards the piece of the ground mesh which is visible within the portal. Am just new sure how to do it. Am guessing that I will get the cube texture reflections to appear on the portal cube once I have added it to the right rendering group. Just not sure which one.
If I can understand these things well, with your help, I would like to write up a small guide that could be added to the docs, as I think these techniques are probably more useful even to beginners than you might have realized. I might even create a demo playground scene with some useful utility functions that folk can use to organise their all their meshes and scenes into “layers” easily.
Any guidance at all would be appreciated!
P.S. I think the forum could maybe make more use of the tags feature. Maybe am looking at it wrong, but there only seem to be a handful of tags. I can see the use for more detailed tags such as “stencil” or “masking” etc
Anyway I will post a playground with the finished project at some point so you see what I mean.
?
