@shopware-ag/dive 1.16.24 → 1.16.26-beta.0

package/src/com/Communication.ts

@@ -21,6 +21,7 @@ import { type DIVEMediaCreator } from '../mediacreator/MediaCreator.ts';
 import { type DIVERenderer } from '../renderer/Renderer.ts';
 import { type DIVESelectable } from '../interface/Selectable.ts';
 import { type DIVEIO } from '../io/IO.ts';
+import { type DIVEAR } from '../ar/AR.ts';
 
 type EventListener<Action extends keyof Actions> = (
     payload: Actions[Action]['PAYLOAD'],
@@ -97,6 +98,16 @@ export class DIVECommunication {
         return this._io;
     }
 
+    private _ar: DIVEAR | null;
+    private get ar(): DIVEAR {
+        if (!this._ar) {
+            const DIVEAR = require('../ar/AR.ts')
+                .DIVEAR as typeof import('../ar/AR.ts').DIVEAR;
+            this._ar = new DIVEAR(this.renderer, this.scene, this.controller);
+        }
+        return this._ar;
+    }
+
     private registered: Map<string, COMEntity> = new Map();
 
     // private listeners: { [key: string]: EventListener[] } = {};
@@ -116,6 +127,7 @@ export class DIVECommunication {
         this.toolbox = toolbox;
         this._mediaGenerator = null;
         this._io = null;
+        this._ar = null;
 
         DIVECommunication.__instances.push(this);
     }
@@ -292,6 +304,11 @@ export class DIVECommunication {
                 );
                 break;
             }
+            case 'LAUNCH_AR': {
+                this.ar.Launch();
+                returnValue = true;
+                break;
+            }
             default: {
                 console.warn(
                     `DIVECommunication.PerformAction: has been executed with unknown Action type ${action}`,

package/src/com/__test__/Communication.test.ts

@@ -21,7 +21,7 @@ import '../actions/scene/updatescene';
 import '../actions/toolbox/select/setgizmomode';
 import '../actions/toolbox/transform/setgizmovisible';
 import '../actions/camera/getcameratransform';
-import type { DIVEScene } from '../../scene/Scene';
+import { type DIVEScene } from '../../scene/Scene';
 import type DIVEToolbox from '../../toolbox/Toolbox';
 import type DIVEOrbitControls from '../../controls/OrbitControls';
 import { type DIVERenderer } from '../../renderer/Renderer';

package/src/com/actions/index.ts

@@ -52,4 +52,6 @@ export interface Actions {
     GENERATE_MEDIA: GENERATE_MEDIA;
     SET_PARENT: SET_PARENT;
     EXPORT_SCENE: EXPORT_SCENE;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    LAUNCH_AR: any;
 }

package/src/dive.ts

@@ -17,7 +17,6 @@ import { DIVECommunication } from './com/Communication.ts';
 import { DIVEAnimationSystem } from './animation/AnimationSystem.ts';
 import DIVEAxisCamera from './axiscamera/AxisCamera.ts';
 import { getObjectDelta } from './helper/getObjectDelta/getObjectDelta.ts';
-
 import { generateUUID } from 'three/src/math/MathUtils';
 import { DIVEInfo } from './info/Info.ts';
 import pkgjson from '../package.json';
@@ -63,8 +62,11 @@ export const DIVEDefaultSettings: DIVESettings = {
 
 export default class DIVE {
     // static members
-    public static QuickView(uri: string): DIVE {
-        const dive = new DIVE();
+    public static QuickView(
+        uri: string,
+        settings?: Partial<DIVESettings>,
+    ): DIVE {
+        const dive = new DIVE(settings);
 
         dive.Communication.PerformAction('SET_CAMERA_TRANSFORM', {
             position: { x: 0, y: 2, z: 2 },
@@ -92,9 +94,22 @@ export default class DIVE {
         // add loaded listener
         dive.Communication.Subscribe('MODEL_LOADED', (data) => {
             if (data.id !== modelid) return;
-            dive.Communication.PerformAction('PLACE_ON_FLOOR', {
-                id: modelid,
-            });
+
+            // console.log(
+            //     dive.Communication.PerformAction('GET_OBJECTS', {
+            //         ids: [modelid],
+            //     })[0].position,
+            // );
+
+            // dive.Communication.PerformAction('PLACE_ON_FLOOR', {
+            //     id: modelid,
+            // });
+
+            // console.log(
+            //     dive.Communication.PerformAction('GET_OBJECTS', {
+            //         ids: [modelid],
+            //     }),
+            // );
 
             const transform = dive.Communication.PerformAction(
                 'COMPUTE_ENCOMPASSING_VIEW',
@@ -277,9 +292,36 @@ export default class DIVE {
             },
         };
 
-        console.log(
-            `DIVE ${pkgjson.version} initialized ${process.env.DIVE_NODE_ENV === 'development' ? 'in development mode' : ''}`,
-        );
+        console.log(`
+                    @@@@@@@@@@@@@@@@@@@@@@@              @@@@@@@@@@@@@@@@@@@@@@@
+               @@@@+-:::::::---------------------==------------------------------=#@@@@
+            @@%=::::.......::---------------------------------------------------------+@@
+          @@+:::...........::-----------------------------------------------------------#@@
+        @@=:::.........::::::--------------${' DIVE ' + pkgjson.version.padStart(7, ' ') + ' '}---------------------------------%@
+       @%:::.......:::::::-------------------${process.env.DIVE_NODE_ENV === 'development' ? ' DEV MODE ' : '--------------'}------------------------------------#@
+      @*:::.....:::::-----------------------------------------------------------------------*@
+     @%::::::.::::---------------------------------------------------------------------------@@
+    @@-:::::::::-----------------------------------------------------------------------------=@
+    @%::::::::--------------------------------------------------------------------------------%@
+    @+::::::::--------------------------------=@@@@@%-----------------------------------------%@
+    @=:::::::--------------------------------*@@    @@+---------------------------------------#@
+    @+:::::::-------------------------------*@        @*--------------------------------------%@
+    @#::::::::-----------------------------=@@        @@=-------------------------------------%@
+    @@-::::::::----------------------------@@          @@------------------------------------=@
+     @%:::::::::--------------------------*@            @*-----------------------------------@@
+      @*:::::::::-------------------------@@            @@----------------------------------%@
+       @#::::::::::----------------------%@              @%--------------------------------%@
+        @#:::::::::::-------------------=@@              @@=------------------------------%@
+         @@-::::::::::::----------------%@                @%----------------------------=@@
+          @@#::::::::::::::------------*@                  @*--------------------------#@@
+            @@+::::::::::::::::--------@@                  @@------------------------+@@
+              @@*:::::::::::::::::----@@                    @@---------------------+@@
+                @@@-:::::::::::::::--#@                      @#-----------------=%@@
+                   @@%-::::::::::::-%@                        @%-------------=%@@
+                      @@@@+:::::::#@@                          @@*-------*@@@@
+                           @@@@@@@                                @@@@@@
+
+        `);
     }
 
     public Dispose(): void {

package/src/events/EventExecutor.ts

@@ -0,0 +1,35 @@
+export class DIVEEventExecutor<T> {
+    private _listeners: Map<keyof T, ((payload: T[keyof T]) => void)[]> =
+        new Map();
+
+    public Subscribe<S extends keyof T>(
+        type: S,
+        listener: (payload: T[S]) => void,
+    ): () => boolean {
+        if (!this._listeners.get(type)) this._listeners.set(type, []);
+
+        this._listeners
+            .get(type)!
+            .push(listener as (payload: T[keyof T]) => void);
+
+        return () => {
+            const listenerArray = this._listeners.get(type);
+            if (!listenerArray) return false;
+
+            const existingIndex = listenerArray.findIndex(
+                (entry) => entry === listener,
+            );
+            if (existingIndex === -1) return false;
+
+            listenerArray.splice(existingIndex, 1);
+            return true;
+        };
+    }
+
+    protected dispatch<S extends keyof T>(type: S, payload?: T[S]): void {
+        const listenerArray = this._listeners.get(type);
+        if (!listenerArray) return;
+
+        listenerArray.forEach((listener) => listener(payload as T[S]));
+    }
+}

package/src/helper/findSceneRecursive/findSceneRecursive.ts

@@ -1,5 +1,5 @@
-import type { Object3D } from 'three';
-import type { DIVEScene } from '../../scene/Scene';
+import { type Object3D } from 'three';
+import { type DIVEScene } from '../../scene/Scene';
 
 /**
  * Find the scene object of an object.

package/src/info/Info.ts

@@ -1,5 +1,14 @@
+export enum WebXRUnsupportedReason {
+    'UNKNWON_ERROR' = 0,
+    'NO_HTTPS' = 1,
+    'IMMERSIVE_AR_NOT_SUPPORTED_BY_DEVICE' = 2,
+    'AR_SESSION_NOT_ALLOWED' = 3,
+}
+
 export class DIVEInfo {
     private static _supportsWebXR: boolean | null = null;
+    private static _webXRUnsupportedReason: WebXRUnsupportedReason | null =
+        null;
 
     /**
      *
@@ -30,21 +39,48 @@ export class DIVEInfo {
             return this._supportsWebXR;
         }
 
+        // check if XRSystem is available && if https enabled
         if (!navigator.xr) {
             this._supportsWebXR = false;
+
+            if (window.isSecureContext === false) {
+                this._webXRUnsupportedReason = WebXRUnsupportedReason.NO_HTTPS;
+            } else {
+                this._webXRUnsupportedReason =
+                    WebXRUnsupportedReason.UNKNWON_ERROR;
+            }
+
             return this._supportsWebXR;
         }
+
         // Check if immersive-vr session mode is supported
         try {
             const supported =
-                await navigator.xr.isSessionSupported('immersive-ar');
+                await navigator.xr!.isSessionSupported('immersive-ar');
+            if (!supported) {
+                this._webXRUnsupportedReason =
+                    WebXRUnsupportedReason.IMMERSIVE_AR_NOT_SUPPORTED_BY_DEVICE;
+            }
             this._supportsWebXR = supported;
         } catch (error) {
             this._supportsWebXR = false;
+            this._webXRUnsupportedReason =
+                WebXRUnsupportedReason.AR_SESSION_NOT_ALLOWED;
         }
         return this._supportsWebXR;
     }
 
+    /**
+     * @returns The reason why WebXR is not supported on the user's device. Returns null if WebXR is supported nor not has been checked yet.
+     */
+    public static GetWebXRUnsupportedReason(): WebXRUnsupportedReason | null {
+        if (this._supportsWebXR === null) {
+            console.log('WebXR support has not been checked yet.');
+            return null;
+        }
+        return this._webXRUnsupportedReason;
+    }
+
     /**
      * @returns A boolean indicating whether the user's device supports AR Quick Look.
      */

package/src/info/__test__/Info.test.ts

@@ -1,4 +1,4 @@
-import { DIVEInfo } from '../Info';
+import { DIVEInfo, WebXRUnsupportedReason } from '../Info';
 
 const mockNavigator = (navigator: any) => {
     Object.defineProperty(global, 'navigator', {
@@ -60,7 +60,6 @@ describe('dive/info/DIVEInfo', () => {
     });
 
     it('should support webXR', async () => {
-        DIVEInfo['_supportsWebXR'] = null;
         mockNavigator({
             xr: {
                 isSessionSupported: jest.fn().mockResolvedValue(true),
@@ -71,16 +70,50 @@ describe('dive/info/DIVEInfo', () => {
     });
 
     it('should not support webXR (xr undefined)', async () => {
-        DIVEInfo['_supportsWebXR'] = null;
         mockNavigator({
             xr: undefined,
         });
         const supports = await DIVEInfo.GetSupportsWebXR();
         expect(supports).toBe(false);
+
+        const reason = DIVEInfo.GetWebXRUnsupportedReason();
+        expect(reason).toBe(WebXRUnsupportedReason.UNKNWON_ERROR);
+    });
+
+    it('should not support webXR (xr undefined & isSecureContext false)', async () => {
+        window.isSecureContext = false;
+        mockNavigator({
+            xr: undefined,
+        });
+        const supports = await DIVEInfo.GetSupportsWebXR();
+        expect(supports).toBe(false);
+
+        const reason = DIVEInfo.GetWebXRUnsupportedReason();
+        expect(reason).toBe(WebXRUnsupportedReason.NO_HTTPS);
+    });
+
+    it('should get empty reason (not checked)', async () => {
+        mockNavigator({
+            xr: {
+                isSessionSupported: jest.fn().mockResolvedValue(true),
+            },
+        });
+        console.log = jest.fn();
+        const reason = DIVEInfo.GetWebXRUnsupportedReason();
+        expect(reason).toBe(null);
+    });
+
+    it('should get empty reason (webXR supported)', async () => {
+        mockNavigator({
+            xr: {
+                isSessionSupported: jest.fn().mockResolvedValue(true),
+            },
+        });
+        const reason = DIVEInfo.GetWebXRUnsupportedReason();
+        expect(reason).toBe(null);
     });
 
     it('should not support webXR', async () => {
-        DIVEInfo['_supportsWebXR'] = null;
         mockNavigator({
             xr: {
                 isSessionSupported: jest.fn().mockResolvedValue(false),
@@ -88,10 +121,14 @@ describe('dive/info/DIVEInfo', () => {
         });
         const supports = await DIVEInfo.GetSupportsWebXR();
         expect(supports).toBe(false);
+
+        const reason = DIVEInfo.GetWebXRUnsupportedReason();
+        expect(reason).toBe(
+            WebXRUnsupportedReason.IMMERSIVE_AR_NOT_SUPPORTED_BY_DEVICE,
+        );
     });
 
     it('should not support webXR on error', async () => {
-        DIVEInfo['_supportsWebXR'] = null;
         mockNavigator({
             xr: {
                 isSessionSupported: jest.fn().mockRejectedValue('error'),
@@ -99,6 +136,9 @@ describe('dive/info/DIVEInfo', () => {
         });
         const supports = await DIVEInfo.GetSupportsWebXR();
         expect(supports).toBe(false);
+
+        const reason = DIVEInfo.GetWebXRUnsupportedReason();
+        expect(reason).toBe(WebXRUnsupportedReason.AR_SESSION_NOT_ALLOWED);
     });
 
     it('should return cached value', async () => {

package/src/mediacreator/MediaCreator.ts

@@ -1,8 +1,8 @@
 import DIVEPerspectiveCamera from '../camera/PerspectiveCamera.ts';
-import { DIVEScene } from '../scene/Scene.ts';
-import { DIVERenderer } from '../renderer/Renderer.ts';
-import DIVEOrbitControls from '../controls/OrbitControls.ts';
-import { Vector3Like } from 'three';
+import { type DIVEScene } from '../scene/Scene.ts';
+import { type DIVERenderer } from '../renderer/Renderer.ts';
+import type DIVEOrbitControls from '../controls/OrbitControls.ts';
+import { type Vector3Like } from 'three';
 
 /**
  * Creates renderings of the current scene

package/src/mediacreator/__test__/MediaCreator.test.ts

@@ -17,8 +17,13 @@ const mock_toDataURL = jest.fn();
 
 jest.mock('../../scene/Scene', () => {
     return {
-        DIVEScene: jest.fn(() => {
-            return {};
+        DIVEScene: jest.fn(function () {
+            this.add = jest.fn();
+            this.children = [];
+            this.Root = {
+                children: [],
+            };
+            return this;
         }),
     };
 });

package/src/renderer/Renderer.ts

@@ -29,6 +29,11 @@ export const DIVERendererDefaultSettings: DIVERendererSettings = {
     canvas: undefined,
 };
 
+export type DIVERenderCallback = (
+    time: DOMHighResTimeStamp,
+    frame: XRFrame,
+) => void;
+
 /**
  * A changed version of the WebGLRenderer.
  *
@@ -44,13 +49,13 @@ export class DIVERenderer extends WebGLRenderer {
     private force: boolean = false;
 
     // pre- and post-render callbacks
-    private preRenderCallbacks: Map<string, () => void> = new Map<
+    private preRenderCallbacks: Map<string, DIVERenderCallback> = new Map<
         string,
-        () => void
+        DIVERenderCallback
     >();
-    private postRenderCallbacks: Map<string, () => void> = new Map<
+    private postRenderCallbacks: Map<string, DIVERenderCallback> = new Map<
         string,
-        () => void
+        DIVERenderCallback
     >();
 
     constructor(
@@ -88,8 +93,8 @@ export class DIVERenderer extends WebGLRenderer {
 
     // Starts the renderer with the given scene and camera.
     public StartRenderer(scene: Scene, cam: Camera): void {
-        this.setAnimationLoop(() => {
-            this.internal_render(scene, cam);
+        this.setAnimationLoop((time: DOMHighResTimeStamp, frame: XRFrame) => {
+            this.internal_render(scene, cam, time, frame);
         });
         this.running = true;
     }
@@ -120,7 +125,7 @@ export class DIVERenderer extends WebGLRenderer {
      * @param callback Executed before rendering.
      * @returns uuid to remove the callback.
      */
-    public AddPreRenderCallback(callback: () => void): string {
+    public AddPreRenderCallback(callback: DIVERenderCallback): string {
         // add callback to renderloop
         const newUUID = MathUtils.generateUUID();
         this.preRenderCallbacks.set(newUUID, callback);
@@ -148,7 +153,7 @@ export class DIVERenderer extends WebGLRenderer {
      * @param callback Executed after rendering.
      * @returns uuid to remove the callback.
      */
-    public AddPostRenderCallback(callback: () => void): string {
+    public AddPostRenderCallback(callback: DIVERenderCallback): string {
         // add callback to renderloop
         const newUUID = MathUtils.generateUUID();
         this.postRenderCallbacks.set(newUUID, callback);
@@ -185,19 +190,24 @@ export class DIVERenderer extends WebGLRenderer {
      * @param scene Scene to render.
      * @param cam Camera to render with.
      */
-    private internal_render(scene: Scene, cam: Camera): void {
+    private internal_render(
+        scene: Scene,
+        cam: Camera,
+        time: DOMHighResTimeStamp,
+        frame: XRFrame,
+    ): void {
         // execute background render loop callbacks
         if ((this.paused || !this.running) && !this.force) return;
 
         // execute render loop callbacks
         this.preRenderCallbacks.forEach((callback) => {
-            callback();
+            callback(time, frame);
         });
 
         this.render(scene, cam);
 
         this.postRenderCallbacks.forEach((callback) => {
-            callback();
+            callback(time, frame);
         });
 
         this.force = false;

package/src/renderer/__test__/Renderer.test.ts

@@ -1,5 +1,5 @@
 import type DIVEPerspectiveCamera from '../../camera/PerspectiveCamera';
-import type { DIVEScene } from '../../scene/Scene';
+import { type DIVEScene } from '../../scene/Scene';
 import { DIVERenderer, DIVERendererDefaultSettings } from '../Renderer';
 
 /**
@@ -123,6 +123,8 @@ describe('dive/renderer/DIVERenderer', () => {
             renderer['internal_render'](
                 {} as DIVEScene,
                 {} as DIVEPerspectiveCamera,
+                0.016,
+                {} as XRFrame,
             );
         }).not.toThrow();
         expect(mock_render).toHaveBeenCalledTimes(1);
@@ -139,6 +141,8 @@ describe('dive/renderer/DIVERenderer', () => {
         renderer['internal_render'](
             {} as DIVEScene,
             {} as DIVEPerspectiveCamera,
+            0.016,
+            {} as XRFrame,
         );
         expect(mock_render).toHaveBeenCalledTimes(0);
     });
@@ -148,6 +152,8 @@ describe('dive/renderer/DIVERenderer', () => {
         renderer['internal_render'](
             {} as DIVEScene,
             {} as DIVEPerspectiveCamera,
+            0.016,
+            {} as XRFrame,
         );
         expect(mock_render).toHaveBeenCalledTimes(1);
 
@@ -155,6 +161,8 @@ describe('dive/renderer/DIVERenderer', () => {
         renderer['internal_render'](
             {} as DIVEScene,
             {} as DIVEPerspectiveCamera,
+            0.016,
+            {} as XRFrame,
         );
         expect(mock_render).toHaveBeenCalledTimes(1);
     });
@@ -164,6 +172,8 @@ describe('dive/renderer/DIVERenderer', () => {
         renderer['internal_render'](
             {} as DIVEScene,
             {} as DIVEPerspectiveCamera,
+            0.016,
+            {} as XRFrame,
         );
         expect(mock_render).toHaveBeenCalledTimes(1);
 
@@ -171,6 +181,8 @@ describe('dive/renderer/DIVERenderer', () => {
         renderer['internal_render'](
             {} as DIVEScene,
             {} as DIVEPerspectiveCamera,
+            0.016,
+            {} as XRFrame,
         );
         expect(mock_render).toHaveBeenCalledTimes(1);
     });
@@ -181,6 +193,8 @@ describe('dive/renderer/DIVERenderer', () => {
         renderer['internal_render'](
             {} as DIVEScene,
             {} as DIVEPerspectiveCamera,
+            0.016,
+            {} as XRFrame,
         );
         expect(mock_render).toHaveBeenCalledTimes(0);
 
@@ -188,6 +202,8 @@ describe('dive/renderer/DIVERenderer', () => {
         renderer['internal_render'](
             {} as DIVEScene,
             {} as DIVEPerspectiveCamera,
+            0.016,
+            {} as XRFrame,
         );
         expect(mock_render).toHaveBeenCalledTimes(1);
     });
@@ -233,6 +249,8 @@ describe('dive/renderer/DIVERenderer', () => {
         renderer['internal_render'](
             {} as DIVEScene,
             {} as DIVEPerspectiveCamera,
+            0.016,
+            {} as XRFrame,
         );
         expect(precallback).toHaveBeenCalledTimes(1);
         expect(postcallback).toHaveBeenCalledTimes(1);

package/src/scene/Scene.ts

@@ -4,6 +4,8 @@ import { DIVERoot } from './root/Root';
 import { DIVEGrid } from '../grid/Grid';
 import { DIVEFloor } from '../primitive/floor/Floor';
 import { type DIVESceneObject } from '../types';
+import { DIVEXRRoot } from './xrroot/XRRoot';
+import { type DIVERenderer } from '../renderer/Renderer';
 
 /**
  * A basic scene class.
@@ -14,20 +16,25 @@ import { type DIVESceneObject } from '../types';
  */
 
 export class DIVEScene extends Scene {
-    private root: DIVERoot;
-    private floor: DIVEFloor;
-    private grid: DIVEGrid;
+    private _root: DIVERoot;
+    private _floor: DIVEFloor;
+    private _grid: DIVEGrid;
 
     public get Root(): DIVERoot {
-        return this.root;
+        return this._root;
+    }
+
+    private _xrRoot: DIVEXRRoot;
+    public get XRRoot(): DIVEXRRoot {
+        return this._xrRoot;
     }
 
     public get Floor(): DIVEFloor {
-        return this.floor;
+        return this._floor;
     }
 
     public get Grid(): DIVEGrid {
-        return this.grid;
+        return this._grid;
     }
 
     constructor() {
@@ -35,14 +42,30 @@ export class DIVEScene extends Scene {
 
         this.background = new Color(0xffffff);
 
-        this.root = new DIVERoot();
-        this.add(this.root);
+        this._root = new DIVERoot();
+        this.add(this._root);
+
+        this._floor = new DIVEFloor();
+        this.add(this._floor);
+
+        this._grid = new DIVEGrid();
+        this.add(this._grid);
 
-        this.floor = new DIVEFloor();
-        this.add(this.floor);
+        this._xrRoot = new DIVEXRRoot(this);
+        this._xrRoot.visible = false;
+        this.add(this._xrRoot);
+    }
+
+    public InitXR(renderer: DIVERenderer): void {
+        this._root.visible = false;
+        this._xrRoot.visible = true;
+        this._xrRoot.InitLightEstimation(renderer);
+    }
 
-        this.grid = new DIVEGrid();
-        this.add(this.grid);
+    public DisposeXR(): void {
+        this._root.visible = true;
+        this._xrRoot.visible = false;
+        this._xrRoot.DisposeLightEstimation();
     }
 
     public SetBackground(color: ColorRepresentation): void {