360 photo appears flipped/reversed

Questions
1

Hi all,

We are having a problem with the 360 image display, its reversed/flipped, my dev who is very experienced is still not able to figure it out why. can someone help us figure out the 2 problems. See a live demo here

  1. Why is the 360 photo reversed, how do we fix it
  2. How can we scale the 360 photo? is there an way to set its world scale?

Thank you so much and happy scary Halloween :slight_smile:

2

Can you repro in the playground with only the 360 image ? it will make it easier to debug for everybody

3

Is it a photo dome? Sometimes when a dev is stuck, a simple designer like me can help :grin: Is it an equirectangular? Why not simply invert the texture in PSD? As for the scaling (of a photo dome) you can scale the dome mesh, but that’s about it I believe. The rest I would work from the camera (with fov and fov mode).

2 Likes
4

Yes , I have found that equirectangular to be sided for the outside of a sphere, not inside. If there things like signs, they appear backwards. Flipping is the quickest way to fix.

Scaling can also be done by changing the size of the sphere or dome.

1 Like
5

Thank you all, I will get back to you with a Playground setup and see what’s going on, we really do not want to hack it by flipping it in PSD, the original image is attached for Refence.

1debug
1debug1000×500 1.15 MB

6

Thing to try and report back on is, can you just go thru the UV and change X, every other one, to math.abs(x - 1)? I have that on my to do list, but farming that out to someone who also cares works for me too.

2 Likes
7

The alternative looks like ‘hacked through code’ to me VS ‘hacked through design’ :grin: But then, the choice is yours :smiley:

Edit: Of course, as @JCPalmer said, you could also help making the fix (so it wouldn’t be ‘hacked’ anymore). Or you might just report it as a bug and wait for someone to fix it. A PG will be required for this. Meanwhile, I believe the easiest ‘hack’ (and easiest to update after the fix) would be the design hack. Of course, my opinion only.

8

Hi,

I think it can be easily done by code, as it can be done by updating properties on your app using the inspector.

  1. Open your app, with your browser Devtools
  2. In DevTools console, type BABYLON.Inspector.Show()
  3. Find your main texture and give it a U and W angle

image
image1919×1010 243 KB

(I was expecting a U scale = -1 to do the trick, but it does not…)

doc : Texture | Babylon.js Documentation

I guess it’s easier than flipping your mesh UV values, and it can work without editing the texture before feeding it to your app. Just add two lines to set uAng and wAng where you instantiate your texture :slight_smile:

4 Likes
9

Hi all,

As always, thank you so much for the rapid support, we decided to use the - U and this works great.

Thank you again very much for all your help with this :slight_smile: