So these Babylon buttons will work in normal browsers or will they work only for VR.
After updating Babylon.JS to V5.6 along with amp-360, VR option is not working in Azure Media Player
Can we use SVG shapes instead of HTML elements(like buttons)? Will it work for VRs?
SVG shapes? You can use SVG as a texture, but not the shapes. You can define your own shapes, but not using SVG as an HTML element.
1 Like
Can we use application/vnd.ms-sstr+xml content types to play using VideoDome. My streaming URL contains manifest which comes from the azure media service.
The filename in the URL is like this PlayaMuertos360B.ism/manifest.
you can use anything your web browser can play. we don’t parse the video data, the browser does, using an HTML Video element.
1 Like
Hi, I’m using Babylon VideDome to show 360 videos, Is there any option in Babylon GUI to show GUI buttons after a certain timeframe?
you can set the visibility of GUI dynamically so it would be on you to add the code handling the synchronization from the current videoElement timestamp
1 Like
when we opens a video in a VideoDome can directly show VR view? ie can we skip the VR icon click to get the VR view.
No, a user interaction is needed to enter XR. If the user is rleady in an XR session you will be able to continue this session, but if the user enters the session when watching the video you have to do it with a user interaction (i.e. a click on an HTML element)
Is there any option for click GUI buttons through VR handles without creating Mesh?
When i added GUI button and tried to click that button through VR it was not working, It was working only buttons created through Mesh.
I will share screenshot of the buttons
The green button is created with Mesh and other one is normal GUI button. I want to make the VR handle click work for the other one (Grey color button).
I will share the button creation code for each button
Green button (created with mesh and its working with VR handle click)
const plane = BABYLON.MeshBuilder.CreatePlane('plane', { width: 2, height: 1 }, scene);
plane.position.y = 0.5;
// when creating the texture, the ratio of width/height (in pixel) should be equal to plane's width/height
const texture = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(plane, 500, 250);
texture.supportPointerMove = false;
texture.invertY = false;
const rect = new BABYLON.GUI.Rectangle();
rect.width = '100px'; // Percentage, 1 = 100%
rect.height = "50px";
rect.cornerRadius = 0; // in pixel
rect.thickness = 0; // in pixel
rect.color = "transparent";
rect.background = "transparent";
texture.addControl(rect);
const button1 = BABYLON.GUI.Button.CreateSimpleButton("button", "Click Me");
button1.width = '100px';
button1.height = "50px";
button1.color = "white";
button1.background = "green";
rect.addControl(button1);
Grey button (VR handle click not working, but want to make it work)
//for adding button area - start
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
//const rect = new Rect({ width: 2, position: new BABYLON.Vector3(0, 1.5, 2) }, scene);
var button = BABYLON.GUI.Button.CreateSimpleButton("but", SceneObj.LstVideoOverlay[0].LstButtonOverlay[0].OnClickText);
button.width = "" + Width + "px";
button.height = "" + Height + "px";
button.color = "rgb(255, 255, 255)";
button.background = "rgb(132, 125, 125)";
button.top = "" + Top + "px";
button.left = "" + Left + "px";
button.children[0].fontSize = "13px";
button.children[0].fontFamily = "sans-serif";
button.cornerRadius = 10;
//button.background = "transparent";
button.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
button.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
//button.isVisible = false;
advancedTexture.addControl(button);
I’m also adding the XR code which I used for enable the VR functionality
scene.createDefaultXRExperienceAsync({}).then(xr => {
const featureManager = xr.baseExperience.featuresManager;
// enable laser pointers on both controllers
featureManager.enableFeature(BABYLON.WebXRFeatureName.POINTER_SELECTION, "stable", {
xrInput: xr.input,
enablePointerSelectionOnAllControllers: true
//maxPointerDistance: Infinity
});
// disable teleportation
featureManager.disableFeature(BABYLON.WebXRFeatureName.TELEPORTATION);
});
VR does not support fullscreen UI. By the end of the year it probably would, but only to display content. There is no way to interact with a UI when in fullscreen when in an XR session.
So the short answer is - you will have to create a mesh for UI in VR
1 Like
Is there any option for fixing the mesh in a fixed position? While doing that the VR handle click is not working. Is there any solution for that?
not sure what you mean. Do you mean fixed to the camera? you can parent the mesh to the camera and put it a unit or two to the front. this will keep the mesh always in front of the camera, if that helps.
We tried with plane.parent = camera; option and it gives fixed position but its not working with VR handle click.
because you need to parent it to the XR camera, and not the desktop camera
How can we define XR camera in babylon GUI? Is there any samples to refer this?
it depends on your code. You have either created it, or if you use the experience helper you can find the camera referenced in the base experience object:
1 Like