# Transform 2D coordinates into world space and making it spherical

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.)

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

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?

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?

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

Works for me

PR: