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

Questions
3

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 !

8 Likes