Transform 2D coordinates into world space and making it spherical

Questions
#1

Hello.

I need help transforming 2D coordinates into world space.
Then I need to make those coordinates spherical (to fit in the sphere).

I have no idea how to do that and I couldn’t find any resources to help me.

My 2D coordinates are in a 1920x3840 resolution.

Here is an example of the data format I have:
(Adobe After Effects 6.0 Keyframe Data)
Position
Frame X pixels Y pixels Z pixels
510 1858.61 1055.91 0
511 1858.54 1056.15 0
512 1858.51 1056.04 0
513 1858.44 1055.8 0
514 1858.34 1055.56 0
515 1858.19 1055.58 0
516 1858.15 1055.69 0
517 1858.15 1056 0
518 1858.12 1056.29 0
519 1858.01 1056.48 0
520 1857.75 1056.37 0
521 1857.54 1056.03 0
522 1857.36 1055.5 0
523 1857.26 1055.14 0
524 1857.04 1054.91 0
525 1856.8 1054.8 0

Eventually I’d like to do something similar to this: San Nicolas
(You see the overlays?, That’s what I’m talking about.)

Here is the link to the playground where I try to position a simple plane using the 2D coordinates: Babylon.js Playground
(I’ m really bad at geometry as you can see.)

#2

Hi @masad93732 and welcome to the forum. Its all a question of scale https://playground.babylonjs.com/#2GPSRC#1

#3

Thank you for your answer. I feel like an idiot for not thinking about it.

I was thinking that we had to do a complex calculation to make it proportional.

What is complicated is to make it follow the contours of the sphere. “Making it spherical”.

Could this help me to do that ? Use Morph targets - Babylon.js Documentation

How would you do it?

#4

In which case what is your data measuring?

Frame X pixels Y pixels Z pixels
510 1858.61 1055.91 0
511 1858.54 1056.15 0

In other words if they referred to the farm video dome example what do they tell us?

#5

I think you want something like this:

https://playground.babylonjs.com/#2GPSRC#2

The (x,y) coordinates are first converted to spherical (theta, phi) coordinates with:

const theta = x / (videoWidth / 360) - 180;
const phi = - (y / (videoHeight / 180) - 90);

So, (0, 0) is converted to (-180°, 90°), (videoWidth, videoHeight) to (180°, -90°) and any value in-between are converted in the interval [-180, 180] and [-90, 90].

To convert this to 3D, you also need the rho parameter, which is the radius of the video dome (sphere). You can get it after having created the VideoDome:

var options = {
    resolution: 32,
    clickToPlay: true,
};
var videoDome = new BABYLON.VideoDome(
    "videoDome",
    ["https://yoda.blob.core.windows.net/videos/uptale360.mp4"],
    options,
    scene
);
const radius = options.size / 2;

options.size is set by the constructor and holds the diameter of the sphere.

Now you have a proper spherical coordinate (rho, theta, phi), you can convert it to 3D (see PG for the code).

Of notes:

  • I have set videoDome._mesh.isPickable = false; to disable the picking on the video dome mesh, else you can’t click the button. It’s not the right way to do it because _mesh is protected. I think the best way would be to add an accessor to get the _mesh property: @Deltakosh / @sebavan: are you ok with that?
  • I have done plane.material.depthFunction = BABYLON.Constants.ALWAYS; juste after BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(plane) to make sure the button is always visible and not partially hidden by the dome: you can comment this line and see what happens
  • I have added plane.billboardMode = BABYLON.AbstractMesh.BILLBOARDMODE_ALL; to make sure the button is always facing the camera whatever the rotation
1 Like
Light position in HDR
#6

Works for me :slight_smile:

#7

PR: