Sign in to follow this  
fateriddle

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

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

@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...

 

Share this post


Link to post
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.

Guest
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.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.