How to build a box that's transparent to the outside world, but also hiding what's inside?

[fateriddle]

How to build a box that's transparent to the outside world, but also hiding what's inside?

I tried material.alpha = 0, box becomes transparent, but also whatever inside the box is revealed. 

Basically, I'm trying to build a AR portal, which to my understanding is a skybox inside of a transparentbox, with a hole as the door. You can only peek inside through the door, so I need everything else be hidden, but can't get it done.

[Wingnut]

Hi F!  Welcome.  Umm... wow, that's a tough challenge, as best I can tell.

I built a testing playground... using a 6-plane box, with a skybox inside.

https://www.babylonjs-playground.com/#1NXKLI#16

It ALMOST looks like I have the skybox hidden inside a transparent standard box, eh?

But nooooooo.  This is a black box with no transparency.  (I change the scene background color to blue, after the door finishes opening - to reveal the foolery.)

So, I failed, so far.   But, I made a testing playground.   This might be a GPU and/or a "layers" thing.   A forum search for "augmented reality" might be wise.

Stay tuned for more/better comments.

[ssaket]

This is just the lazy way of doing this with the help of maths ( I love maths)  

http://playground.babylonjs.com/#Q1WZDK

[JohnK]

Not solved yet as there are no blocks behind the "portal" https://www.babylonjs-playground.com/#L0IMUD#9

Uses multiple scenes and a viewport. My thinking is to perhaps add a third scene behind the "portal" which you would need to synchronise with the front scene and then use some event to cross through the "portal". Note that if you use a free camera then you would need to change the size of the viewport as you got closer or further away. Also there would be no rotation effect as you moved around, the "portal" would always be flat on the the screen.

OK decided to have a go with a background scene. https://www.babylonjs-playground.com/#L0IMUD#10

This works with random meshes but having a fixed  "street type" scene would be much more of a problem.

[ssaket]

@JohnK check this out https://www.magicleap.com/ , if you scroll out you would see the eye portal... the transition is so smooth !! I wonder how they made this !!

[JohnK]

Only seen their landing page the camera is limited to zooming in or out, so should be possible with BJS. Do not attach firstPerson Scene camera to canvas. Adjust radius and viewport position and size on keypress, once close enough switch to mid scene only.

 

EDIT Something like this and use W to move forward and S to move back https://www.babylonjs-playground.com/#L0IMUD#11

 

[trevordev]

Maybe this playground can help. It uses a custom shader to create portals: https://www.babylonjs-playground.com/#EEOWP#7

[Gijs]

Here's a combination of what's been suggested (sort of):

http://www.babylonjs-playground.com/#ACPMQL#1

[fateriddle]

On 10/12/2018 at 3:40 AM, Gijs said:

Here's a combination of what's been suggested (sort of):

http://www.babylonjs-playground.com/#ACPMQL#1

The result is fantastic, but I'm afraid the code is too complicated(and long) for me to understand how do you do it. Could you please explain a little bit about the core concept to achieve this? Thank you.

 

@Gijs Also, I find that the scene inside outer box is just a ground, is it possible to have a skybox inside the transparent outer box?

[Gijs]

@fateriddle

Hi, sorry about that, I just dumped that playground here when it worked! Here's the portal step-by-step:

The scene the box is from:
http://www.babylonjs-playground.com/#CQNGRK#0

First, make a box around the scene with a shader that makes the color (0, 0, 0, 0):

http://www.babylonjs-playground.com/#H7XBW1#0

The result is a white box, because the background of the html document is white. So then render the scene to a render target, which is then used as a texture of a plane that fills the whole screen:

http://www.babylonjs-playground.com/#H7XBW1#1

The layerMask trickery is to make the rendertarget see the scene, but the user only the plane.

Now adding the main scene (here, createScene is the outer scene, createScene2 is the scene in the box, and createScene3 is for the background):

http://www.babylonjs-playground.com/#H7XBW1#2

And syncing the cameras in the render function (scene2 now uses a FreeCamera as well):

http://www.babylonjs-playground.com/#H7XBW1#3

Then some portal enter logic (not sure how it works anymore). The important bit is that it uses clip planes  to first render what's behind the portal, then what's in front of it (so the main scene is rendered twice, one half each). I used a background scene to reduce the tearing that happens because the camera moves in between rendering the scenes (things intersecting the axis of the portal will have tearing).

http://www.babylonjs-playground.com/#H7XBW1#4

As for the skybox, I haven't been able to use it, because you can see the back of the skybox from outside the portal. But there must be a way...