How could I create this 360 panorama transition effect using bablylon.js?

Hi all, I’m looking to simulate movement between 360 panoramas as demonstrated here and here. Can someone please point me in the right direction?

Hello and welcome

this seems to be the conjunction of a FOV change and a blend between two 360 renders

Hi,

I made this effect in Babylon

I will try to explain the process but I should say it’s tricky and required a lot of 3D skills :p…

The main point is to use high quality rendering (CubeTexture) for several hotspots on the scene. So you will have maximum quality of rendering (but a lot of images to download)

We used Unreal to

  • generate the Cube Textures
  • export a very basic geometry of the scene (like the bounding box of each mesh).

The basic geometry is a collision mesh and we use a standard material with a BABYLON.CubeTexture in SKYBOX_MODE to render the current cube texture.

For example in the lightmapTexture channel :

 material.lightmapTexture = cubeTexture;
 material.lightmapTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
 material.lightmapTexture.setReflectionTextureMatrix(reflectionMatrix);
 material.useLightmapAsShadowmap = true; 

To animate you could write a custom shader but there’s no need since it’s much efficient to clone the collisionMesh and to make a fadeOut/fadeIn between current position and destination (sync with a camera animation)

The tricky part is the reflectionMatrix because the reflection is computed from origin so you will have to modify it depending on where you are in the scene (or where you want to go)

If helper is a ‘clickable point’ (i.e there’s a cubeMap available at this position) and mesh a collisionMesh then you can have the reflection matrix :

let distance = mesh.position.subtract(helper.position);
let reflectionMatrix = BABYLON.Matrix.Translation(distance.x, distance.y, distance.z);

Hope this help !

7 Likes

Hey @sharp,

Sorry to dig this post up…

I’m actually working on a similar tool myself and am having trouble with applying the skybox translation to several objects. I can make it work but the way i do it, and because each object has its own pivot point, each object needs a copy of the texture (the VR cube map) in order to apply the translation according to the camera location.
It does work but it’s super inefficient as for say 10 hotspots and 50 objects I would need to create 10*50 textures just to handle the movement between hotspot which sounds insane.

2 solutions that I don’t love would be to:
-Merge all the objects together.
-Set all the objects pivot point to be the same so that the translation only needs to happen once per hotspot.

In the demo you shared (good job on this!), are you using one model or several ones?

I set up a playground to recreate what I’m currently planning to do which I don’t love.
https://www.babylonjs-playground.com/#JCZIXE#27
It’s based on this forum post:

I added a box to the scene and made the main changes from line 48 to 60 in order to deal with the skybox. As you can see I have one extra object and two cameras which lead me to create 2 extra texture clones. Anytime you add a camera or an object you have to exponentially multiply the number of textures you need.

Thanks!

Chris

yes we set all the objects pivot point to the same.

Since all the objects have the same pivot point we just need to set the reflectionTextureMatrix once :slight_smile: then there’s only one cube texture instance shared by all the meshes.

… and we merge all the object too to decrease the draw calls

got it. Thanks for the reply!