fateriddle Posted October 8, 2018 Share Posted October 8, 2018 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. JackFalcon 1 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted October 8, 2018 Share Posted October 8, 2018 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. NasimiAsl, JackFalcon, Gijs and 1 other 4 Quote Link to comment Share on other sites More sharing options...
ssaket Posted October 8, 2018 Share Posted October 8, 2018 This is just the lazy way of doing this with the help of maths ( I love maths) http://playground.babylonjs.com/#Q1WZDK JackFalcon and Wingnut 2 Quote Link to comment Share on other sites More sharing options...
JohnK Posted October 8, 2018 Share Posted October 8, 2018 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. Gijs, ssaket, JackFalcon and 1 other 4 Quote Link to comment Share on other sites More sharing options...
ssaket Posted October 9, 2018 Share Posted October 9, 2018 @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 !! Quote Link to comment Share on other sites More sharing options...
JohnK Posted October 9, 2018 Share Posted October 9, 2018 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 Wingnut 1 Quote Link to comment Share on other sites More sharing options...
trevordev Posted October 9, 2018 Share Posted October 9, 2018 Maybe this playground can help. It uses a custom shader to create portals: https://www.babylonjs-playground.com/#EEOWP#7 Wingnut, JackFalcon, Gijs and 2 others 5 Quote Link to comment Share on other sites More sharing options...
Gijs Posted October 11, 2018 Share Posted October 11, 2018 Here's a combination of what's been suggested (sort of): http://www.babylonjs-playground.com/#ACPMQL#1 JohnK, Dad72 and fateriddle 3 Quote Link to comment Share on other sites More sharing options...
fateriddle Posted October 22, 2018 Author Share Posted October 22, 2018 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? Quote Link to comment Share on other sites More sharing options...
Gijs Posted October 24, 2018 Share Posted October 24, 2018 @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... bghgary and GameMonetize 1 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.