Switch smoothly photoDome texture in a panoramic tour 360

Questions
1

Hi to everyone!

I’m trying to do a panoramic tour like this one
Matterport Tour

I use Spherical Panning for the camera ( solution that i found in the documentation Spherical Camera )

but i can’t understand how can i change the camera position and the texture of the dome together with the “zoom” effect.

Can anyone help me ?
Thank you very much for your help!!

2

Pinging @Vinc3r / @sharp who I think worked on something similar

1 Like
3

Hi,

You have 2 choices :

1 / Clone

  • Clone the mesh, apply the new dome texture
  • Make a fade out / in synchronized with the camera move.

2 / Custom Shader

  • 2 dome textures
  • 1 animated alpha parameter
1 Like
4

You can also check this old thread: Cubemap SKYBOX_MODE projection origin - Questions & Answers - HTML5 Game Devs Forum

1 Like
5

Check this one too : How could I create this 360 panorama transition effect using bablylon.js?

2 Likes
6

Thank you very much for your solutions!! i will try with the reflection matrix.
it is no so easy and i think it will take me a while but at the end i will give you a response!

Thank you again!

7

Sorry @Vinc3r,
i’ve tried your playground but i can’t see any changes if i use the reflectionTextureMatrix as you can see from the screenshots below

CubMap01
CubMap011293×1209 140 KB
CubMap02
CubMap021289×1204 80 KB

is this the right link ?
https://www.babylonjs-playground.com/#JCZIXE#9

Thanks for your time!

8

I just tried to simplify the playground to focus on this reflectionMatrix issue, and I’m not able anymore to make it working :’( https://www.babylonjs-playground.com/#JCZIXE#24 (lines 65 & 96)… except on BJS v3 or 4.0 ! https://www.babylonjs-playground.com/#0VWQRQ#1 My code breaks on 4.1 and latest. (note also line 96 that I don’t really know what I’m doing :smiley: )

Are matrix computations change on the last BJS update?

9

@Vinc3r it should work, I do not think matrices changed for this. Do you have a simple repro of the issue ? or an explanation of what is expected (I do not understand the issue in your shared PG, they look the same in the different versions for me ?)

I would like to tackle it down ASAP.

10

The goal is to be able to move the projection center. By default, the skybox is using the mesh origin (I guess), but in this case we want to project a skybox from a specific point of view (in my playground above, I try to project cubeTexture01 from greenpoint position, and cubeTexture02 from yellowpoint).

11

But should I do to repro (I might be confused by the button) and what should I see. Sorry to bother so much :slight_smile:

12

I will create a new playground :wink:

13

Is this one OK? https://www.babylonjs-playground.com/#EG0Z6D#3

14

Perfect, Il check ASAP.

15

Actually I am still not seeing any difference between 3.3 and latest. Is that expected ?

Both are showing :
image

And the button does nothing.

16

Erf, I take a look (I’m not really comfortable when matrixes comes to me)

17

OK, so this works well on BJS v3, v4.0.3, but not on v4.1 & latest : https://www.babylonjs-playground.com/#LAC99A#1

(and I have no idea why the GUI button doesn’t change anything)

18

Ok now I can see it :slight_smile:

I ll have a look tonight

1 Like
19

The bug is in reflectionTexture.fx:

vec3 computeSkyBoxCoords(vec3 positionW, mat4 reflectionMatrix)
{
    return vec3(reflectionMatrix * vec4(positionW, 0));
}

It should be 1 and not 0.

I will let @sebavan make the PR because there maybe the same bug to correct in computeEquirectangularCoords, computeSphericalCoords, computeCubicCoords, computeCubicLocalCoords, but I’m not sure…

1 Like
20

Yup no worries I am on it, but fixing another issue just before this one :slight_smile: