Fake interior in Babylon.js

I just saw this really cool video for a fake interior made in Unity, video.I am kinda really dumb in shader programming and plan on getting better. In the meantime any help with this would be much appreciated.

2 Likes

Usually effects like this creating with help of parallax mapping, or with interrior mapping:

Interrior mapping:
Interior Mapping for Blender 2.9 - YouTube,
THE BEST Window Shader for Eevee! 2.8 - YouTube (has source file in description)

And parallax mapping:
Blender: эксперимент с эффектом Parallax Mapping - YouTube (has source file in description)

I I tried several times to create parallax mapping node via Babylon JS NME:
https://nme.babylonjs.com/
But always failed because i don`t know how i can transform object coordinates to world coordinates via NME tools.

It is my drafts by this theme:
https://nme.babylonjs.com/#Y2XELJ
https://nme.babylonjs.com/#HAE313

I am also attaching a topic about parallax:

To create such effects, you only need to implement a similar transformation in HME, but I have not been able to do this yet.
image

if you get any success on this topic, please write about this.

3 Likes

https://www.babylonjs-playground.com/#HGKT7A

3 Likes

This is a better example of a portal:

Sorry, it’s not fake. :slight_smile: It’s a real scene in a scene thing. ^^

It is the way for create interior but I think that got much more performance compared with interior mapping and when we use that method for windows we can just locate box 3d model of roombehind the window.

Oops, saw that after your reply)

Yes, my answers came from future! :smiley:

1 Like

So I forgot to said: if you aren’t see anything here:Babylon.js Node Material Editor it is because mesh must have tangents. Switch model to cube or custom model with tangents.

I am curious, what is the use case for this? Is there any real performance difference from actually representing the interior in meshes vs. shader trickery?

It uses only one texture and a quad + some shader trickery. It can be really convincing, plus what is in the texture can be very detailed (like a whole bedroom) which would be much costlier than rendering in meshes and materials. So yes it does have a perfomance benefit. Feel free to change my mind.

Let me process this first.

See Add Parallax occlusion to the PerturbNormal node · Issue #10258 · BabylonJS/Babylon.js · GitHub regarding parallax mapping in NME.

It is sad but i`m believe it will be adding later or maybe somebody create parallax using other way :wink:

I was curious what parallax means and what function is behind it. Here is my example. If you could mask this output in a frame so that objects outside the frame are not displayed, you would have an illusion of a parallax mapping.

1 Like