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 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
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 
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!
Hi the transition effect looks amazing. The above explanation is bit vague and not able to figure out for a newbie like me. Is it possible to explain briefly with your code? Thanks in advance
Hi, I’m sorry it would be a lot of work to explain everything in details, it looks like it’s a popular subject maybe I should make a github repository, …My main concern is to find a quality open scene to make the demo !
3 Likes
Hi sharp, I really want to know more about implementing this.
- export a very basic geometry of the scene (like the bounding box of each mesh).
how should I do this? Does it mean that instead of exporting mesh as complete ones (for example mesh+texture+lighting etc.), just the wireframe? or just a frame? something like that?
what i want to implement is, like your project, curve or change shape of the cursor circle mesh when touching different angle meshes like walls, floors, furnitures etc. I know the background is skybox cubemap which image, so only with that skybox can’t make the cursor mesh change orientation because it is just image. So what you did is importing actual 3d mesh (only having frame and transparent?) and placed it on the skybox cubemap faces to match the images?
Thank you
Hi sorry for the delay I was in holiday
Yes just the wireframe
It’s a skybox projection on a (wireframe) mesh so we can have the cursor “snap” to the geometry…Each point of view is represented by a cubeTexture + a camera position in the scene (<=> a reflection matrix)
Thank you for your reply
I imported transparent meshes from unreal engine and imported into babylon.js.
It works well! Your post and your work really helped me. Thank you again!
1 Like
Hey @sharp I would absolutely love this as a github library! Is this something you’re still thinking about doing?
Thanks for the reminder 
, yes I do ! I have contacted my client and he is ok to make it open source so I’m waiting his images.
If you can’t wait there’s another thread with details : ReflectionTexture in a viewpoint-based mesh
And there’s also a playground : https://www.babylonjs-playground.com/#F77J2B#2
Hey @sharp could you open source even without the client images?