Walkthrough using panoramic in skybox

[impactcolor]

Hi I came across this demo done using Babylon's 

http://www.babylonjs.com/Demos/Espilit/

my question is I'm interested in doing a room like this but I don't want any objects in the room just a skybox.  In the demo provided here is the surrounding a skybox or a full 3d modeled building?  Also I have a panoramic picture.

[Wingnut]

Hi @impactcolor, welcome to the forum.

@iiceman created a pano that I just love.  http://p215008.mittwaldserver.info/panorama360/#scene1

 

I did a pano in the playground once...  http://playground.babylonjs.com/#A4BMF#4

Error: WebGL: texImage2D: Driver ran out of memory during upload.  (oh no!)

Unfortunately, it is now broken.  Perhaps, try the URL to your panoramic image... in there (if you have it web-published).  Hit RUN (and save, if you wish)... see if you get the same error.

A forum search or playground search for the term 'panorama' might give good results.  Might not, too. 

There was another panorama scene... playground-based... it was an Asian shopping area, possibly in Tokyo or Bangkok.  Maybe it was a skybox, though.  I would like to find that PG again, and give you the URL.  It was beautiful.  I will continue to look for it.

Anyway, welcome again... and I think Espilit uses a real building model.  But there is possibly a Babylon.Layer as a background image, or even a skybox "around" the building.  Could be wrong, though.  I often am.   

[iiceman]

Hi there and welcome impactcolor!

I think if you don't need to walk around in the room creating a 360 degrees sphere with the panorama texture is a good choice. It's pretty easy, too.

You can find the small script that does everything here: http://p215008.mittwaldserver.info/panorama360/js/script.js
And the config and image sources here: http://p215008.mittwaldserver.info/panorama360/js/config.js
It's still on my github, too, but not sure how up to date that version is: https://github.com/iiceman40/BabylonDev/tree/master/panorama360

I think if you leave the door stuff out the remaining script is really tiny. If you want to move around in the 3D space like in the Espilit demo you might get problems with the panorama sphere because you quickly get too close to the sphere walls. Hope you know what I mean  Let us know how it  goes and if you need any help!

[impactcolor]

@Wingnut @iiceman

Thank you both for your reply!  Is there away we can do a "walk" type of effect for the user by using different pictures?  For example let's say we had a pano every foot from the location.  In example let's say the center then we want the user to move 5 ft ahead so we did a picture every ft.  Until they "arrived" at the next center where they could look around.  Is this something that we could possibly do?  I know for something like this I would need a mesh but I don't have a mesh and redoing one would take far too long.  Any help would be appreciated, thank you!

[Wingnut]

Hi again, IC.  Umm... boy, I cannot think of a way to do that.  That would require a new pano image be photographed every 1 foot... in real world.  And, the user walk-direction would be constrained to single direction (forward, thru the "tunnel-of-pano-spheres"). In order to keep that smooth, you must "flip" pictures rather quickly, just like animated gifs might do.  Generally speaking, you need to change the pano pictures 10+ times per second, or else it will look fake.  It takes 30 images per second with standard video... to look "real".

What other options can you allow yourself?  Could you allow a tunnel from one pano-sphere... to another?  Then your character could "really" walk... down a tube... like a train tunnel.

How about spinning the pano-sphere around Y axis rather quickly, and when it comes to a stop, it has changed pano-images? 

Another way... is teleportation (Star Trek transporter).  Essentially, you spray particles at the camera for a few seconds, and when they clear, the panorama image has changed. Or you can use a more conventional "cinema way"... fade-to-black and then fade-up-from-black.

Look at classic television.  They use "cuts" and "fade-in/out" because they don't have enough space/sets (or budget)... to allow a character to walk from place to place.  Ever see a U.S. Show called The West Wing?  There, they did take the steadycam shot for long walks... because... they built a huge set.

I think that's what you meant when you said "need a mesh".  Perhaps you would need a world (a very large and realistic scene).  Worlds are not easy to build, and heavy processor load.   Panoramas and skyboxes give SO MUCH BEAUTY at very low cost... and I understand why you want to advance their use/ease.  Unfortunately, it doesn't allow very many options for advancing. 

Any kind of sphere-scaling... would make the pano image get distorted.  Or, walk-up to the sphere wall, and the same thing happens...  pano image resolution/clarity changes.

I wish I had a good idea, but, sorry.  I will keep thinking.  Perhaps others will comment.

[impactcolor]

@Wingnut Hello again! The tunnel indeed is a good idea.  It would be a clever way to do it.  Let's say we did a tunnel as shown in the image below, would we use a pano image as our "walk through" texture on the inside of the tunnel wall?  This would allow the user to feel as if they are actually moving in the area.  It would be a one way quick motion so user only sees image quickly passing by them as they move to the next area.  Does this make sense?

 

 

[Wingnut]

Hi IC!  Keep in mind... that sphere panos are best viewed when camera is near the center.

Just the same, I decided to create a 2-pano playground demo.

http://playground.babylonjs.com/#A4BMF#8

Both spheres are 20000 units diameter.  Sphere1 is centered at position 0, 0, -11000.  Sphere2 is much further "out" along the z-axis, positioned at 0, 0, 11000.  The camera is targeted +z.  I start the arcCamera (and its target) in the center of sphere1, and begin slowly "walking" it (the target) towards sphere2. 

The camera.wheelPrecision is set real fast, so you can mousewheel-out (unzoom) and see "the big picture"... and see that the 2 sphere edges are about 2000 units apart.  No overlap.

Yet, as the camera (its target) leaves sphere1 and enters sphere2, there appears to be no "gap" between the spheres.  I don't know why that is, but it makes this demo even MORE interesting.    And it is a good idea to NOT look backwards just after entering sphere2.  It looks a bit ugly at first, because the camera (target) has not gone far enough into sphere2 yet.  But, still interesting.  Torturing Panoramas 101. 

Anyway, here we can all play-with building a tunnel or other teleporting ideas, if we wish.  I wanted to see what "walk" might look-like... in a 20000-diameter pano.  Not too bad, actually.  Texture distorts and goes "fuzzy"... but not as much as I thought it would.  Interesting!  Fun!