Transform 2D coordinates into world space and making it spherical

Questions
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