@preference-sl/pref-viewer 2.10.0-beta.1 → 2.10.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preference-sl/pref-viewer",
-  "version": "2.10.0-beta.1",
+  "version": "2.10.0-beta.2",
   "description": "Web Component to preview GLTF models with Babylon.js",
   "author": "Alex Moreno Palacio <amoreno@preference.es>",
   "scripts": {

package/src/index.js

@@ -39,7 +39,7 @@
  * </pref-viewer>
  * ```
  */
-import { Engine, Scene, ArcRotateCamera, Vector3, Color4, HemisphericLight, DirectionalLight, PointLight, ShadowGenerator, LoadAssetContainerAsync, Tools } from "@babylonjs/core";
+import { Engine, Scene, ArcRotateCamera, Vector3, Color4, HemisphericLight, DirectionalLight, PointLight, ShadowGenerator, LoadAssetContainerAsync, Tools, WebXRSessionManager, WebXRDefaultExperience } from "@babylonjs/core";
 import "@babylonjs/loaders";
 import { USDZExportAsync, GLTF2Export } from "@babylonjs/serializers";
 import "@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression";
@@ -73,6 +73,7 @@ class PrefViewer extends HTMLElement {
     #dirLight = null;
     #cameraLight = null;
     #shadowGen = null;
+    #XRExperience = null;
 
     constructor() {
         super();
@@ -171,10 +172,9 @@ class PrefViewer extends HTMLElement {
         wrapper.appendChild(this.#canvas);
         this.shadowRoot.append(wrapper);
     }
-
     
     // Bbylon.js
-    #initializeBabylon() {
+    async #initializeBabylon() {
         this.#engine = new Engine(this.#canvas, true, { alpha: true });
         this.#scene = new Scene(this.#engine);
         this.#scene.clearColor = new Color4(1, 1, 1, 1);
@@ -184,6 +184,36 @@ class PrefViewer extends HTMLElement {
         
         this.#engine.runRenderLoop(() => this.#scene && this.#scene.render());
         this.#canvasResizeObserver.observe(this.#canvas);
+
+        await this.#createXRExperience();
+    }
+
+    async #createXRExperience() {
+        if (this.#XRExperience) {
+            return true;
+        }
+        
+        const sessionMode = "immersive-ar";
+        const sessionSupported = await WebXRSessionManager.IsSessionSupportedAsync(sessionMode);
+        if (!sessionSupported) {
+            console.info("PrefViewer: WebXR in mode AR is not supported");
+            return false;
+        }
+
+        const options = {
+            uiOptions: {
+                sessionMode: sessionMode,
+                renderTarget: "xrLayer",
+                referenceSpaceType: "local",
+            },
+        };
+
+        try {
+        this.#XRExperience = await WebXRDefaultExperience.CreateAsync(this.#scene, options);
+        } catch (error) {
+            console.warn("PrefViewer: failed to create WebXR experience", error);
+            this.#XRExperience = null;
+        }
     }
 
     #canvasResizeObserver = new ResizeObserver(() => this.#engine && this.#engine.resize());