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

**URL:** <https://forum.babylonjs.com/t/transform-2d-coordinates-into-world-space-and-making-it-spherical/12371>\
**Category:** Questions\
**Created:** [July 10, 2020, 8:02am UTC](https://forum.babylonjs.com/t/transform-2d-coordinates-into-world-space-and-making-it-spherical/12371 "2020-07-10T08:02:38Z")\
**Posts on this page:** 1\
**Showing post:** 5

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [July 10, 2020, 2:36pm UTC](https://forum.babylonjs.com/t/transform-2d-coordinates-into-world-space-and-making-it-spherical/12371/5 "2020-07-10T14:36:00Z")

</div>

I think you want something like this:

[https://playground.babylonjs.com/#2GPSRC#2](https://playground.babylonjs.com/#2GPSRC#2)

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

```javascript
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`:

```javascript
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

---

_[View the full topic](https://forum.babylonjs.com/t/transform-2d-coordinates-into-world-space-and-making-it-spherical/12371)._