WebXR

import { DeviceOrientationCamera } from "@babylonjs/core/Cameras/deviceOrientationCamera";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
import { Scene } from "@babylonjs/core/scene";
import { WebXRSessionManager } from "@babylonjs/core/XR/webXRSessionManager";
const xrPolyfillPromise = new Promise((resolve) => {
    if (navigator.xr) {
        return resolve();
    }
    if (window.WebXRPolyfill) {
        new WebXRPolyfill();
        return resolve();
    }
    else {
        const url = "https://cdn.jsdelivr.net/npm/webxr-polyfill@latest/build/webxr-polyfill.js";
        const s = document.createElement("script");
        s.src = url;
        document.head.appendChild(s);
        s.onload = () => {
            new WebXRPolyfill();
            resolve();
        };
    }
});
var createScene = async function () {
    // wait for the polyfill to kick in
    await xrPolyfillPromise;
    console.log(navigator.xr); // should be there!
    console.log(await WebXRSessionManager.IsSessionSupportedAsync("immersive-vr")); // should be true
    // create your scene
    var scene = new Scene(engine);
    var camera = new DeviceOrientationCamera("DevOr_camera", new Vector3(-30, -30, -30), scene);
    camera.setTarget(Vector3.Zero());
    camera.attachControl(canvas, true);
    var light = new HemisphericLight("light", new Vector3(0, 0, 0), scene);
    scale = 100;
    // initialize XR
    var xr = await scene.createDefaultXRExperienceAsync();
    return scene;
};

import { FreeCamera } from "@babylonjs/core/Cameras/freeCamera";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder";
import { Scene } from "@babylonjs/core/scene";
var createScene = async function () {
    var scene = new Scene(engine);
    var camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);
    camera.setTarget(Vector3.Zero());
    camera.attachControl(canvas, true);
    var light = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);
    light.intensity = 0.7;
    var sphere = MeshBuilder.CreateSphere("sphere1", { segments: 16, diameter: 2 }, scene);
    sphere.position.y = 1;
    const env = scene.createDefaultEnvironment();
    // here we add XR support
    const xr = await scene.createDefaultXRExperienceAsync({
        floorMeshes: [env.ground],
    });
    return scene;
};

import { Scene } from "@babylonjs/core/scene";
var scene = new Scene(engine);
var vrHelper = scene.createDefaultVRExperience();

import { Scene } from "@babylonjs/core/scene";
var scene = new Scene(engine);
var xrHelper = scene.createDefaultXRExperienceAsync();

import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
import { DirectionalLight } from "@babylonjs/core/Lights/directionalLight";
import { ShadowGenerator } from "@babylonjs/core/Lights/Shadows/shadowGenerator";
import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
import { Color3 } from "@babylonjs/core/Maths/math.color";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder";
import { Scene } from "@babylonjs/core/scene";
import { AdvancedDynamicTexture } from "@babylonjs/gui/2D/advancedDynamicTexture";
import { ColorPicker } from "@babylonjs/gui/2D/controls/colorpicker";
import { Control } from "@babylonjs/gui/2D/controls/control";
import { StackPanel } from "@babylonjs/gui/2D/controls/stackPanel";
import { TextBlock } from "@babylonjs/gui/2D/controls/textBlock";
var createScene = function () {
    // Create scene
    var scene = new Scene(engine);
    // Create simple sphere
    var sphere = MeshBuilder.CreateIcoSphere("sphere", {
        radius: 0.2,
        flat: true,
        subdivisions: 1,
    }, scene);
    sphere.position.y = 3;
    sphere.material = new StandardMaterial("sphere material", scene);
    // Lights and camera
    var light = new DirectionalLight("light", new Vector3(0, -0.5, 1.0), scene);
    light.position = new Vector3(0, 5, -2);
    var camera = new ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 4, 3, new Vector3(0, 3, 0), scene);
    camera.attachControl(canvas, true);
    scene.activeCamera.beta += 0.8;
    // Default Environment
    var environment = scene.createDefaultEnvironment({
        enableGroundShadow: true,
        groundYBias: 2.8,
    });
    environment.setMainColor(Color3.FromHexString("#74b9ff"));
    // Shadows
    var shadowGenerator = new ShadowGenerator(1024, light);
    shadowGenerator.useBlurExponentialShadowMap = true;
    shadowGenerator.blurKernel = 32;
    shadowGenerator.addShadowCaster(sphere, true);
    // Enable VR, use XR when possible
    var vrHelper = scene.createDefaultVRExperience({
        createDeviceOrientationCamera: false,
        useXR: true, // This will enable XR if supported
        floorMeshes: [environment.ground],
    });
    // Runs every frame to rotate the sphere
    scene.onBeforeRenderObservable.add(() => {
        sphere.rotation.y += 0.0001 * scene.getEngine().getDeltaTime();
        sphere.rotation.x += 0.0001 * scene.getEngine().getDeltaTime();
    });
    // GUI
    var plane = MeshBuilder.CreatePlane("plane", { size: 1 });
    plane.position = new Vector3(0.4, 4, 0.4);
    var advancedTexture = AdvancedDynamicTexture.CreateForMesh(plane);
    var panel = new StackPanel();
    advancedTexture.addControl(panel);
    var header = new TextBlock();
    header.text = "Color GUI";
    header.height = "100px";
    header.color = "white";
    header.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
    header.fontSize = "120";
    panel.addControl(header);
    var picker = new ColorPicker();
    picker.value = sphere.material.diffuseColor;
    picker.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
    picker.height = "350px";
    picker.width = "350px";
    // This will work in XR, since we are using native pointer events!
    picker.onValueChangedObservable.add(function (value) {
        sphere.material.diffuseColor.copyFrom(value);
    });
    panel.addControl(picker);
    vrHelper.onAfterEnteringVRObservable.add(() => {
        // This callback will still work! Would be better to use the XR native observables.
    });
    return scene;
};