@shopware-ag/dive 1.16.26-beta.2 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@shopware-ag/dive",
-    "version": "1.16.26-beta.2",
+    "version": "1.17.0",
     "description": "Shopware Spatial Framework",
     "type": "module",
     "main": "./build/dive.cjs",
@@ -69,6 +69,7 @@
         "generate-readme": "yarn generate-readme:transpile && yarn generate-readme:write && yarn generate-readme:cleanup",
         "generate-readme:transpile": "yarn tsc --resolveJsonModule --esModuleInterop ci/readme/generate-readme.ts && mv ci/readme/generate-readme.js ci/readme/generate-readme.cjs",
         "generate-readme:write": "node ci/readme/generate-readme.cjs",
-        "generate-readme:cleanup": "node -e \"require('fs').unlinkSync('ci/readme/generate-readme.cjs')\""
+        "generate-readme:cleanup": "node -e \"require('fs').unlinkSync('ci/readme/generate-readme.cjs')\"",
+        "ci": "yarn lint && yarn coverage && yarn prettier:check && yarn build && bash ci/lint/lint-actions.sh"
     }
 }

package/src/__test__/DIVE.test.ts

@@ -208,8 +208,8 @@ describe('dive/DIVE', () => {
         expect(() => (window as any).DIVE.PrintScene()).not.toThrow();
     });
 
-    it('should instantiate in development NODE_ENV', () => {
-        process.env.NODE_ENV = 'development';
+    it('should instantiate in development DIVE_NODE_ENV', () => {
+        process.env.DIVE_NODE_ENV = 'development';
         const dive = new DIVE();
         expect(dive).toBeDefined();
         expect((window as any).DIVE.PrintScene).toBeDefined();

package/src/ar/AR.ts

@@ -4,15 +4,22 @@ import { DIVEWebXR } from './webxr/WebXR';
 import { type DIVEScene } from '../scene/Scene';
 import { type DIVERenderer } from '../renderer/Renderer';
 import DIVEOrbitControls from '../controls/OrbitControls';
+import { DIVESceneViewer } from './sceneviewer/SceneViewer';
+
+export type DIVEAROptions = {
+    arPlacement: 'horizontal' | 'vertical';
+    arScale: 'auto' | 'fixed';
+    /**
+     * experimental, currently deactivated
+     */
+    useWebXR: false;
+};
 
 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,
@@ -23,150 +30,69 @@ export class DIVEAR {
         this._controller = controller;
     }
 
-    public async Launch(): Promise<void> {
+    public async Launch(options?: DIVEAROptions): 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();
+            return this.tryARQuickLook();
         }
 
         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();
+            if (options?.useWebXR) {
+                console.warn('DIVE: WebXR is experimental on Android.');
+                return this.tryWebXR();
             }
 
-            console.log('Launching AR on Android');
-            // Launch WebXR
-            await DIVEWebXR.Launch(
-                this._renderer,
-                this._scene,
-                this._controller,
-            );
-            return Promise.resolve();
+            return this.trySceneViewer();
         }
 
         console.log(
-            'AR not supported. Not a mobile system. (System is ' + system + ')',
+            'DIVE: 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());
+    private async tryARQuickLook(options?: DIVEAROptions): Promise<void> {
+        const support = DIVEInfo.GetSupportsARQuickLook();
+        if (!support) {
+            console.log('ARQuickLook not supported');
+            return Promise.reject();
         }
 
-        console.log('modelUrl.toString()', modelUrl.toString());
-        console.log(
-            'encodeURIComponent(modelUrl.toString())',
-            encodeURIComponent(modelUrl.toString()),
-        );
+        console.log('DIVE: Launching AR with ARQuickLook ...');
 
-        const version = '1.0';
-
-        console.log('USING SCENE VIEWER');
-        console.log('version:', version);
-        console.log('params:', params.toString());
-        console.log('modelUrl:', modelUrl.toString());
-        console.log('locationUrl:', locationUrl.toString());
-
-        const intent = `intent://arvr.google.com/scene-viewer/${version}?${
-            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.
-            }
-        };
+        // Launch ARQuickLook
+        await DIVEARQuickLook.Launch(this._scene, options);
+        return Promise.resolve();
+    }
 
-        self.addEventListener('hashchange', undoHashChange, { once: true });
+    private async tryWebXR(): Promise<void> {
+        const support = await DIVEInfo.GetSupportsWebXR();
+        if (!support) {
+            console.log(
+                'WebXR not supported. Reason: ' +
+                    WebXRUnsupportedReason[
+                        DIVEInfo.GetWebXRUnsupportedReason()!
+                    ],
+            );
+            return Promise.reject();
+        }
 
-        anchor.setAttribute('href', intent);
-        console.log('Attempting to present in AR with Scene Viewer...');
-        anchor.click();
+        console.log('DIVE: Launching AR with WebXR ...');
+        // Launch WebXR
+        await DIVEWebXR.Launch(this._renderer, this._scene, this._controller);
+        return Promise.resolve();
     }
 
-    private createSceneViewerSrc(): string {
-        let uri: string | null = null;
+    private async trySceneViewer(options?: DIVEAROptions): Promise<void> {
+        // actually we don't have to try here, because SceneViewer is supported on all devices by now.
+        // if there are no AR services (ARCore) installed on the device, SceneViewer will only show the model in 3D.
+        // we also have no options to detect if SceneViewer is supported.
 
-        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');
-        }
+        console.log('DIVE: Launching AR with SceneViewer ...');
 
-        return uri;
+        DIVESceneViewer.Launch(this._scene, options);
+        return Promise.resolve();
     }
 }

package/src/ar/__test__/AR.test.ts

@@ -0,0 +1,187 @@
+import { DIVEAR, type DIVEAROptions } from '../AR';
+import { DIVEInfo } from '../../info/Info';
+import { DIVERenderer } from '../../renderer/Renderer';
+import { DIVEScene } from '../../scene/Scene';
+import DIVEOrbitControls from '../../controls/OrbitControls';
+import { DIVEARQuickLook } from '../arquicklook/ARQuickLook';
+import { DIVESceneViewer } from '../sceneviewer/SceneViewer';
+import { DIVEWebXR } from '../webxr/WebXR';
+
+jest.mock('../arquicklook/ARQuickLook', () => ({
+    DIVEARQuickLook: {
+        Launch: jest.fn(),
+    },
+}));
+
+jest.mock('../webxr/WebXR', () => ({
+    DIVEWebXR: {
+        Launch: jest.fn(),
+    },
+}));
+
+jest.mock('../sceneviewer/SceneViewer', () => ({
+    DIVESceneViewer: {
+        Launch: jest.fn(),
+    },
+}));
+
+describe('DIVEAR', () => {
+    let renderer: DIVERenderer;
+    let scene: DIVEScene;
+    let controller: DIVEOrbitControls;
+    let diveAR: DIVEAR;
+
+    beforeEach(() => {
+        renderer = {} as DIVERenderer;
+        scene = {} as DIVEScene;
+        controller = {} as DIVEOrbitControls;
+        diveAR = new DIVEAR(renderer, scene, controller);
+    });
+
+    describe('Launch', () => {
+        describe('AR Quick Look', () => {
+            it('should launch ARQuickLook on iOS', async () => {
+                jest.spyOn(DIVEInfo, 'GetSystem').mockReturnValue('iOS');
+                jest.spyOn(DIVEInfo, 'GetSupportsARQuickLook').mockReturnValue(
+                    true,
+                );
+                const arQuickLookLaunchSpy = jest.spyOn(
+                    DIVEARQuickLook,
+                    'Launch',
+                );
+
+                const consoleLogSpy = jest
+                    .spyOn(console, 'log')
+                    .mockImplementation();
+
+                await diveAR.Launch();
+
+                expect(arQuickLookLaunchSpy).toHaveBeenCalledWith(
+                    scene,
+                    undefined,
+                );
+                arQuickLookLaunchSpy.mockRestore();
+
+                expect(consoleLogSpy).toHaveBeenCalled();
+                consoleLogSpy.mockRestore();
+            });
+
+            it('should not launch ARQuickLook on iOS if not supported', async () => {
+                jest.spyOn(DIVEInfo, 'GetSystem').mockReturnValue('iOS');
+                jest.spyOn(DIVEInfo, 'GetSupportsARQuickLook').mockReturnValue(
+                    false,
+                );
+                const arQuickLookLaunchSpy = jest.spyOn(
+                    DIVEARQuickLook,
+                    'Launch',
+                );
+
+                const consoleLogSpy = jest
+                    .spyOn(console, 'log')
+                    .mockImplementation();
+
+                await diveAR.Launch().catch(() => {});
+
+                expect(arQuickLookLaunchSpy).not.toHaveBeenCalled();
+                arQuickLookLaunchSpy.mockRestore();
+
+                expect(consoleLogSpy).toHaveBeenCalled();
+                consoleLogSpy.mockRestore();
+            });
+        });
+
+        describe('Scene Viewer', () => {
+            it('should launch SceneViewer on Android', async () => {
+                jest.spyOn(DIVEInfo, 'GetSystem').mockReturnValue('Android');
+
+                const consoleLogSpy = jest
+                    .spyOn(console, 'log')
+                    .mockImplementation();
+
+                await diveAR.Launch();
+
+                expect(DIVESceneViewer.Launch).toHaveBeenCalledWith(
+                    scene,
+                    undefined,
+                );
+
+                expect(consoleLogSpy).toHaveBeenCalled();
+                consoleLogSpy.mockRestore();
+            });
+        });
+
+        describe('WebXR', () => {
+            it('should launch WebXR on Android with useWebXR option', async () => {
+                jest.spyOn(DIVEInfo, 'GetSystem').mockReturnValue('Android');
+                jest.spyOn(DIVEInfo, 'GetSupportsWebXR').mockResolvedValue(
+                    true,
+                );
+
+                const consoleLogSpy = jest
+                    .spyOn(console, 'log')
+                    .mockImplementation();
+                const consoleWarnSpy = jest
+                    .spyOn(console, 'warn')
+                    .mockImplementation();
+
+                await diveAR.Launch({
+                    useWebXR: true,
+                } as unknown as DIVEAROptions);
+
+                expect(DIVEWebXR.Launch).toHaveBeenCalledWith(
+                    renderer,
+                    scene,
+                    controller,
+                );
+                expect(consoleWarnSpy).toHaveBeenCalled();
+                consoleWarnSpy.mockRestore();
+
+                expect(consoleLogSpy).toHaveBeenCalled();
+                consoleLogSpy.mockRestore();
+            });
+
+            it('should not launch WebXR on Android with useWebXR option', async () => {
+                jest.spyOn(DIVEInfo, 'GetSystem').mockReturnValue('Android');
+                jest.spyOn(DIVEInfo, 'GetSupportsWebXR').mockResolvedValue(
+                    false,
+                );
+
+                const consoleLogSpy = jest
+                    .spyOn(console, 'log')
+                    .mockImplementation();
+                const consoleWarnSpy = jest
+                    .spyOn(console, 'warn')
+                    .mockImplementation();
+
+                await diveAR
+                    .Launch({
+                        useWebXR: true,
+                    } as unknown as DIVEAROptions)
+                    .catch(() => {});
+
+                expect(DIVEWebXR.Launch).toHaveBeenCalledWith(
+                    renderer,
+                    scene,
+                    controller,
+                );
+                expect(consoleWarnSpy).toHaveBeenCalled();
+                consoleWarnSpy.mockRestore();
+
+                expect(consoleLogSpy).toHaveBeenCalled();
+                consoleLogSpy.mockRestore();
+            });
+        });
+
+        it('should log AR not supported on non-mobile systems', async () => {
+            const consoleLogSpy = jest
+                .spyOn(console, 'log')
+                .mockImplementation();
+
+            jest.spyOn(DIVEInfo, 'GetSystem').mockReturnValue('Windows');
+
+            await diveAR.Launch();
+
+            expect(consoleLogSpy).toHaveBeenCalled();
+        });
+    });
+});

package/src/ar/arquicklook/ARQuickLook.ts

@@ -1,11 +1,15 @@
 import { Object3D } from 'three';
+import { DIVEUSDZExporter } from '../../exporters/usdz/USDZExporter';
 import { type DIVEScene } from '../../scene/Scene';
-import { USDZExporter } from 'three/examples/jsm/exporters/USDZExporter';
+import { type DIVEAROptions } from '../AR';
 
 export class DIVEARQuickLook {
-    private static _usdzExporter: USDZExporter = new USDZExporter();
+    private static _usdzExporter: DIVEUSDZExporter = new DIVEUSDZExporter();
 
-    public static Launch(scene: DIVEScene): Promise<void> {
+    public static Launch(
+        scene: DIVEScene,
+        options?: DIVEAROptions,
+    ): Promise<void> {
         // create node to build usdz from
         const quickLookScene = new Object3D();
 
@@ -13,7 +17,7 @@ export class DIVEARQuickLook {
         quickLookScene.add(...this.extractModels(scene));
 
         // launch ARQuickLook
-        return this.launchARFromNode(quickLookScene);
+        return this.launchARFromNode(quickLookScene, options);
     }
 
     private static extractModels(scene: DIVEScene): Object3D[] {
@@ -21,14 +25,32 @@ export class DIVEARQuickLook {
         return scene.Root.children;
     }
 
-    private static launchARFromNode(node: Object3D): Promise<void> {
+    private static launchARFromNode(
+        node: Object3D,
+        options?: DIVEAROptions,
+    ): Promise<void> {
         // bundle USDZ
         return this._usdzExporter
-            .parse(node, { quickLookCompatible: true })
+            .parse(node, {
+                quickLookCompatible: true,
+                ar: {
+                    anchoring: { type: 'plane' },
+                    planeAnchoring: {
+                        alignment:
+                            options?.arPlacement === 'vertical'
+                                ? 'vertical'
+                                : 'horizontal',
+                    },
+                },
+            })
             .then((usdz: Uint8Array) => {
                 // create blob
                 const blob = new Blob([usdz], { type: 'model/vnd.usdz+zip' });
-                const url = URL.createObjectURL(blob);
+                let url = URL.createObjectURL(blob);
+
+                if (options?.arScale === 'fixed') {
+                    url = url.concat('#allowsContentScaling=0');
+                }
 
                 // launch ARQuickLook
                 const a = document.createElement('a');