@shopware-ag/dive 1.16.14 → 1.16.15-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@shopware-ag/dive",
-    "version": "1.16.14",
+    "version": "1.16.15-beta.0",
     "description": "Shopware Spatial Framework",
     "type": "module",
     "main": "./build/dive.cjs",

package/src/ar/AR.ts

@@ -0,0 +1,164 @@
+import { DIVEInfo, WebXRUnsupportedReason } from '../info/Info';
+import { DIVEARQuickLook } from './arquicklook/ARQuickLook';
+import { DIVEWebXR } from './webxr/WebXR';
+import { type DIVEScene } from '../scene/Scene';
+import { type DIVERenderer } from '../renderer/Renderer';
+import DIVEOrbitControls from '../controls/OrbitControls';
+
+export class DIVEAR {
+    private _renderer: DIVERenderer;
+    private _scene: DIVEScene;
+    private _controller: DIVEOrbitControls;
+
+    private arPlacement: string = 'floor';
+    private arScale: string = 'auto';
+
+    constructor(
+        renderer: DIVERenderer,
+        scene: DIVEScene,
+        controller: DIVEOrbitControls,
+    ) {
+        this._renderer = renderer;
+        this._scene = scene;
+        this._controller = controller;
+    }
+
+    public async Launch(): Promise<void> {
+        const system = DIVEInfo.GetSystem();
+
+        if (system === 'iOS') {
+            const support = DIVEInfo.GetSupportsARQuickLook();
+            if (!support) {
+                console.log('ARQuickLook not supported');
+                return Promise.reject();
+            }
+
+            console.log('Launching AR on iOS');
+
+            // Launch ARQuickLook
+            await DIVEARQuickLook.Launch(this._scene);
+            return Promise.resolve();
+        }
+
+        if (system === 'Android') {
+            this.openSceneViewer();
+            return;
+
+            const support = await DIVEInfo.GetSupportsWebXR();
+            if (!support) {
+                console.log(
+                    'WebXR not supported. Reason: ' +
+                        WebXRUnsupportedReason[
+                            DIVEInfo.GetWebXRUnsupportedReason()!
+                        ],
+                );
+                return Promise.reject();
+            }
+
+            console.log('Launching AR on Android');
+            // Launch WebXR
+            await DIVEWebXR.Launch(
+                this._renderer,
+                this._scene,
+                this._controller,
+            );
+            return Promise.resolve();
+        }
+
+        console.log(
+            'AR not supported. Not a mobile system. (System is ' + system + ')',
+        );
+    }
+
+    private openSceneViewer(): void {
+        const src = this.createSceneViewerSrc();
+        const anchor = document.createElement('a');
+        const noArViewerSigil = '#model-viewer-no-ar-fallback';
+        // let isSceneViewerBlocked = false;
+
+        const location = self.location.toString();
+        const locationUrl = new URL(location);
+        const modelUrl = new URL(src, location);
+        if (modelUrl.hash) modelUrl.hash = '';
+        const params = new URLSearchParams(modelUrl.search);
+
+        locationUrl.hash = noArViewerSigil;
+
+        // modelUrl can contain title/link/sound etc.
+        params.set('mode', 'ar_preferred');
+        if (!params.has('disable_occlusion')) {
+            params.set('disable_occlusion', 'true');
+        }
+        if (this.arScale === 'fixed') {
+            params.set('resizable', 'false');
+        }
+        if (this.arPlacement === 'wall') {
+            params.set('enable_vertical_placement', 'true');
+        }
+        if (params.has('sound')) {
+            const soundUrl = new URL(params.get('sound')!, location);
+            params.set('sound', soundUrl.toString());
+        }
+        if (params.has('link')) {
+            const linkUrl = new URL(params.get('link')!, location);
+            params.set('link', linkUrl.toString());
+        }
+
+        console.log('modelUrl.toString()', modelUrl.toString());
+        console.log(
+            'encodeURIComponent(modelUrl.toString())',
+            encodeURIComponent(modelUrl.toString()),
+        );
+
+        const intent = `intent://arvr.google.com/scene-viewer/1.2?${
+            params.toString() + '&file=' + modelUrl.toString()
+        }#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;S.browser_fallback_url=${encodeURIComponent(
+            locationUrl.toString(),
+        )};end;`;
+        // intent =
+        //     'intent://arvr.google.com/scene-viewer/1.0?file=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;S.browser_fallback_url=https://developers.google.com/ar;end;';
+        console.log({ intent });
+
+        const undoHashChange = (): void => {
+            if (self.location.hash === noArViewerSigil) {
+                // isSceneViewerBlocked = true;
+                // The new history will be the current URL with a new hash.
+                // Go back one step so that we reset to the expected URL.
+                // NOTE(cdata): this should not invoke any browser-level navigation
+                // because hash-only changes modify the URL in-place without
+                // navigating:
+                self.history.back();
+                console.warn(
+                    'Error while trying to present in AR with Scene Viewer',
+                );
+                console.warn('Falling back to next ar-mode');
+                // this[$selectARMode]();
+                // Would be nice to activateAR() here, but webXR fails due to not
+                // seeing a user activation.
+            }
+        };
+
+        self.addEventListener('hashchange', undoHashChange, { once: true });
+
+        anchor.setAttribute('href', intent);
+        console.log('Attempting to present in AR with Scene Viewer...');
+        anchor.click();
+    }
+
+    private createSceneViewerSrc(): string {
+        let uri: string | null = null;
+
+        this._scene.traverse((object) => {
+            if (uri) return;
+            if (object.userData.uri) {
+                uri = object.userData.uri;
+            }
+        });
+
+        if (!uri) {
+            throw new Error('No model found in scene');
+        }
+
+        return uri;
+    }
+}

package/src/ar/arquicklook/ARQuickLook.ts

@@ -0,0 +1,42 @@
+import { Object3D } from 'three';
+import { type DIVEScene } from '../../scene/Scene';
+import { USDZExporter } from 'three/examples/jsm/exporters/USDZExporter';
+
+export class DIVEARQuickLook {
+    private static _usdzExporter: USDZExporter = new USDZExporter();
+
+    public static Launch(scene: DIVEScene): Promise<void> {
+        // create node to build usdz from
+        const quickLookScene = new Object3D();
+
+        // extract models from scene
+        quickLookScene.add(...this.extractModels(scene));
+
+        // launch ARQuickLook
+        return this.launchARFromNode(quickLookScene);
+    }
+
+    private static extractModels(scene: DIVEScene): Object3D[] {
+        // extract models
+        return scene.Root.children;
+    }
+
+    private static launchARFromNode(node: Object3D): Promise<void> {
+        // bundle USDZ
+        return this._usdzExporter
+            .parse(node, { quickLookCompatible: true })
+            .then((usdz: Uint8Array) => {
+                // create blob
+                const blob = new Blob([usdz], { type: 'model/vnd.usdz+zip' });
+                const url = URL.createObjectURL(blob);
+
+                // launch ARQuickLook
+                const a = document.createElement('a');
+                a.innerHTML = '<picture></picture>'; // This is actually needed so the viewer opens instantly
+                a.rel = 'ar';
+                a.href = url;
+                a.download = 'scene.usdz';
+                a.click();
+            });
+    }
+}

package/src/ar/webxr/WebXR.ts

@@ -0,0 +1,176 @@
+import { Vector3 } from 'three';
+import DIVEOrbitControls from '../../controls/OrbitControls';
+import { type DIVERenderer } from '../../renderer/Renderer';
+import { type DIVEScene } from '../../scene/Scene';
+import { Overlay } from './overlay/Overlay';
+import { DIVEWebXRController } from './controller/WebXRController';
+
+export class DIVEWebXR {
+    // general members
+    private static _renderer: DIVERenderer;
+    private static _scene: DIVEScene;
+    private static _controller: DIVEOrbitControls;
+
+    // camera reset members
+    private static _cameraPosition: Vector3;
+    private static _cameraTarget: Vector3;
+
+    // render loop members
+    private static _renderCallbackId: string | null = null;
+
+    // setup members
+    private static _session: XRSession | null = null;
+    private static _referenceSpaceType: XRReferenceSpaceType = 'local';
+    private static _overlay: Overlay | null = null;
+    private static _options = {
+        requiredFeatures: [
+            'local',
+            'hit-test',
+        ],
+        optionalFeatures: [
+            'light-estimation',
+            'local-floor',
+            'dom-overlay',
+            'depth-sensing',
+        ],
+        depthSensing: {
+            usagePreference: ['gpu-optimized'],
+            dataFormatPreference: [],
+        },
+        domOverlay: { root: {} as HTMLElement },
+    };
+
+    private static _xrController: DIVEWebXRController | null = null;
+
+    public static async Launch(
+        renderer: DIVERenderer,
+        scene: DIVEScene,
+        controller: DIVEOrbitControls,
+    ): Promise<void> {
+        this._renderer = renderer;
+        this._scene = scene;
+        this._controller = controller;
+
+        // setting camera reset values
+        this._cameraPosition = this._controller.object.position.clone();
+        this._cameraTarget = this._controller.target.clone();
+
+        if (!navigator.xr) {
+            console.error('WebXR not supported');
+            return Promise.reject();
+        }
+
+        // setup current instance
+        this._renderer.xr.enabled = true;
+        this._scene.InitXR(renderer);
+
+        // creating overlay
+        if (!DIVEWebXR._overlay) {
+            const overlay = new Overlay();
+            DIVEWebXR._overlay = overlay;
+        }
+        DIVEWebXR._options.domOverlay = { root: DIVEWebXR._overlay.Element };
+
+        // request session
+        const session = await navigator.xr.requestSession(
+            'immersive-ar',
+            this._options,
+        );
+        session.addEventListener('end', () => {
+            this._onSessionEnded();
+        });
+
+        // build up session
+        renderer.xr.setReferenceSpaceType(this._referenceSpaceType);
+        await renderer.xr.setSession(session);
+        DIVEWebXR._overlay.Element.style.display = '';
+        this._session = session;
+
+        // add end session event listener
+        DIVEWebXR._overlay.CloseButton.addEventListener('click', () =>
+            this.End(),
+        );
+
+        // start session
+        await this._onSessionStarted();
+
+        return Promise.resolve();
+    }
+
+    public static Update(_time: DOMHighResTimeStamp, frame: XRFrame): void {
+        if (!this._session) return;
+
+        if (this._xrController) {
+            this._xrController.Update(frame);
+        }
+    }
+
+    public static End(): void {
+        if (!this._session) return;
+        this._session.end();
+    }
+
+    private static async _onSessionStarted(): Promise<void> {
+        if (!this._session) return;
+
+        // add update callback to render loop
+        this._renderCallbackId = this._renderer.AddPreRenderCallback(
+            (time: DOMHighResTimeStamp, frame: XRFrame) => {
+                this.Update(time, frame);
+            },
+        );
+
+        this._xrController = new DIVEWebXRController(
+            this._session,
+            this._renderer,
+            this._scene,
+        );
+        await this._xrController.Init().catch(() => {
+            this.End();
+        });
+
+        return Promise.resolve();
+    }
+
+    private static _onSessionEnded(): void {
+        if (!this._session) return;
+
+        if (this._xrController) {
+            this._xrController.Dispose();
+        }
+
+        // remove Update() callback
+        if (this._renderCallbackId) {
+            this._renderer.RemovePreRenderCallback(this._renderCallbackId);
+            this._renderCallbackId = null;
+        }
+
+        // disable XR on renderer to restore canvas rendering
+        this._renderer.xr.enabled = false;
+
+        // resize renderer
+        const canvasWrapper = this._renderer.domElement.parentElement;
+        if (canvasWrapper) {
+            const { clientWidth, clientHeight } = canvasWrapper;
+            this._renderer.OnResize(clientWidth, clientHeight);
+
+            // resize camera
+            this._controller.object.OnResize(clientWidth, clientHeight);
+        }
+
+        // reset camera
+        this._controller.object.position.copy(this._cameraPosition);
+        this._controller.target.copy(this._cameraTarget);
+
+        // reset camera values
+        this._cameraPosition.set(0, 0, 0);
+        this._cameraTarget.set(0, 0, 0);
+
+        // dispose xr scene
+        this._scene.DisposeXR();
+
+        this._session.removeEventListener('end', this._onSessionEnded);
+        DIVEWebXR._overlay!.Element.style.display = 'none';
+        this._session = null;
+    }
+}