@shopware-ag/dive 1.6.5 → 1.8.0

package/package.json

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

package/src/__test__/DIVE.test.ts

@@ -183,6 +183,8 @@ jest.mock('../axiscamera/AxisCamera.ts', () => {
     });
 });
 
+console.log = jest.fn();
+
 describe('dive/DIVE', () => {
     it('should QuickView', () => {
         const dive = DIVE.QuickView('test_uri');
@@ -193,7 +195,6 @@ describe('dive/DIVE', () => {
         const dive = new DIVE();
         expect(dive).toBeDefined();
         expect((window as any).DIVE.PrintScene).toBeDefined();
-        console.log = jest.fn();
         expect(() => (window as any).DIVE.PrintScene()).not.toThrow();
     });
 
@@ -244,6 +245,11 @@ describe('dive/DIVE', () => {
         expect(dive.Communication).toBeDefined();
     });
 
+    it('should have Info', () => {
+        const dive = new DIVE();
+        expect(dive.Info).toBeDefined();
+    });
+
     it('should resize', () => {
         const dive = new DIVE();
         expect(() => dive.OnResize(800, 600)).not.toThrow();

package/src/camera/PerspectiveCamera.ts

@@ -25,8 +25,13 @@ export default class DIVEPerspectiveCamera extends PerspectiveCamera {
 
     public onSetCameraLayer: (mask: number) => void = () => { };
 
-    constructor(settings: DIVEPerspectiveCameraSettings = DIVEPerspectiveCameraDefaultSettings) {
-        super(settings.fov, 1, settings.near, settings.far);
+    constructor(settings: Partial<DIVEPerspectiveCameraSettings> = DIVEPerspectiveCameraDefaultSettings) {
+        super(
+            settings.fov || DIVEPerspectiveCameraDefaultSettings.fov,
+            1,
+            settings.near || DIVEPerspectiveCameraDefaultSettings.near,
+            settings.far || DIVEPerspectiveCameraDefaultSettings.far
+        );
 
         this.layers.mask = DIVEPerspectiveCamera.EDITOR_VIEW_LAYER_MASK;
     }

package/src/camera/__test__/PerspectiveCamera.test.ts

@@ -5,11 +5,20 @@ let cam: DIVEPerspectiveCamera;
 describe('dive/camera/DIVEPerspectiveCamera', () => {
     beforeEach(() => {
         jest.clearAllMocks();
-        cam = new DIVEPerspectiveCamera(DIVEPerspectiveCameraDefaultSettings);
+        cam = new DIVEPerspectiveCamera();
     });
 
     it('should instantiate', () => {
-        cam = new DIVEPerspectiveCamera();
+        cam = new DIVEPerspectiveCamera({});
+        expect(cam).toBeDefined();
+    });
+
+    it('should instantiate with settings', () => {
+        cam = new DIVEPerspectiveCamera({
+            fov: 45,
+            near: 0.1,
+            far: 100,
+        });
         expect(cam).toBeDefined();
     });
 

package/src/controls/OrbitControls.ts

@@ -1,4 +1,4 @@
-import { OrbitControls } from "three/examples/jsm/Addons.js";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
 import DIVEPerspectiveCamera from "../camera/PerspectiveCamera.ts";
 import { DIVERenderer } from "../renderer/Renderer.ts";
 import { type Box3, MathUtils, Vector3, Vector3Like } from "three";
@@ -39,7 +39,7 @@ export default class DIVEOrbitControls extends OrbitControls {
 
     private _removePreRenderCallback: () => void = () => { };
 
-    constructor(camera: DIVEPerspectiveCamera, renderer: DIVERenderer, animationSystem: DIVEAnimationSystem, settings: DIVEOrbitControlsSettings = DIVEOrbitControlsDefaultSettings) {
+    constructor(camera: DIVEPerspectiveCamera, renderer: DIVERenderer, animationSystem: DIVEAnimationSystem, settings: Partial<DIVEOrbitControlsSettings> = DIVEOrbitControlsDefaultSettings) {
         super(camera, renderer.domElement);
 
         this._animationSystem = animationSystem;
@@ -56,8 +56,13 @@ export default class DIVEOrbitControls extends OrbitControls {
             renderer.RemovePreRenderCallback(id);
         }
 
-        this.enableDamping = settings.enableDamping;
-        this.dampingFactor = settings.dampingFactor;
+        this.enableDamping = settings.enableDamping || DIVEOrbitControlsDefaultSettings.enableDamping;
+        this.dampingFactor = settings.dampingFactor || DIVEOrbitControlsDefaultSettings.dampingFactor;
+
+        // initialize camera transformation
+        this.object.position.set(0, 2, 2);
+        this.target.copy({ x: 0, y: 0.5, z: 0 });
+        this.update();
     }
 
     public Dispose(): void {

package/src/controls/__test__/OrbitControls.test.ts

@@ -12,7 +12,7 @@ jest.mock('@tweenjs/tween.js', () => {
     }
 });
 
-jest.mock('three/examples/jsm/Addons.js', () => {
+jest.mock('three/examples/jsm/controls/OrbitControls', () => {
     return {
         OrbitControls: jest.fn(function () {
             this.enableDamping = true;
@@ -42,14 +42,13 @@ jest.mock('three/examples/jsm/Addons.js', () => {
                 MIDDLE: 1,
                 RIGHT: 2,
             };
-            this.target = {
-                set: jest.fn(),
-            };
             this.update = jest.fn();
             this.dispose = jest.fn();
             this.getDistance = jest.fn();
             this.target = {
                 clone: jest.fn(),
+                set: jest.fn(),
+                copy: jest.fn(),
             };
             return this;
         }),
@@ -122,6 +121,9 @@ const mockCamera = {
         multiplyScalar: jest.fn(() => {
             return mockCamera.position;
         }),
+        set: jest.fn(() => {
+            return mockCamera.position;
+        }),
     },
     lookAt: jest.fn(),
 } as unknown as DIVEPerspectiveCamera;
@@ -148,7 +150,15 @@ describe('dive/controls/DIVEOrbitControls', () => {
     });
 
     it('should instantiate', () => {
-        const controller = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem);
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem, {});
+        expect(controller).toBeDefined();
+    });
+
+    it('should instantiate with settings', () => {
+        const controller = new DIVEOrbitControls(mockCamera, mockRenderer, mockAnimSystem, {
+            enableDamping: false,
+            dampingFactor: 0.5,
+        });
         expect(controller).toBeDefined();
     });
 

package/src/dive.ts

@@ -12,13 +12,14 @@ import type { Actions } from './com/actions/index.ts';
 import type { COMPov, COMLight, COMModel, COMEntity } from './com/types.ts';
 import { DIVEMath } from './math/index.ts';
 import { generateUUID } from "three/src/math/MathUtils";
+import { DIVEInfo } from "./info/Info.ts";
 
 export type DIVESettings = {
     autoResize: boolean;
     displayAxes: boolean;
-    renderer: DIVERendererSettings;
-    perspectiveCamera: DIVEPerspectiveCameraSettings;
-    orbitControls: DIVEOrbitControlsSettings;
+    renderer: Partial<DIVERendererSettings>;
+    perspectiveCamera: Partial<DIVEPerspectiveCameraSettings>;
+    orbitControls: Partial<DIVEOrbitControlsSettings>;
 }
 
 export const DIVEDefaultSettings: DIVESettings = {
@@ -145,6 +146,10 @@ export default class DIVE {
         return this.renderer.domElement;
     }
 
+    public get Info(): DIVEInfo {
+        return DIVEInfo;
+    }
+
     // setters
     public set Settings(settings: Partial<DIVESettings>) {
         const settingsDelta = getObjectDelta(this._settings, settings);
@@ -154,15 +159,15 @@ export default class DIVE {
 
         // apply perspective camera settings
         if (settingsDelta.perspectiveCamera) {
-            this.perspectiveCamera.fov = settingsDelta.perspectiveCamera.fov;
-            this.perspectiveCamera.near = settingsDelta.perspectiveCamera.near;
-            this.perspectiveCamera.far = settingsDelta.perspectiveCamera.far;
+            if (settingsDelta.perspectiveCamera.fov !== undefined) this.perspectiveCamera.fov = settingsDelta.perspectiveCamera.fov;
+            if (settingsDelta.perspectiveCamera.near !== undefined) this.perspectiveCamera.near = settingsDelta.perspectiveCamera.near;
+            if (settingsDelta.perspectiveCamera.far !== undefined) this.perspectiveCamera.far = settingsDelta.perspectiveCamera.far;
             this.perspectiveCamera.OnResize(this.renderer.domElement.width, this.renderer.domElement.height);
         }
         // apply orbit controls settings
         if (settingsDelta.orbitControls) {
-            this.orbitControls.enableDamping = settingsDelta.orbitControls.enableDamping;
-            this.orbitControls.dampingFactor = settingsDelta.orbitControls.dampingFactor;
+            if (settingsDelta.orbitControls.enableDamping !== undefined) this.orbitControls.enableDamping = settingsDelta.orbitControls.enableDamping;
+            if (settingsDelta.orbitControls.dampingFactor !== undefined) this.orbitControls.dampingFactor = settingsDelta.orbitControls.dampingFactor;
         }
 
         if (settingsDelta.autoResize !== this._settings.autoResize) {
@@ -224,6 +229,8 @@ export default class DIVE {
                 console.log(this.scene);
             },
         }
+
+        console.log('DIVE initialized');
     }
 
     public Dispose(): void {

package/src/info/Info.ts

@@ -0,0 +1,114 @@
+export class DIVEInfo {
+    private static _supportsWebXR: boolean | null = null;
+
+    /**
+     *
+     * @returns The system the user is using. Possible values are "Android", "iOS", "Windows", "MacOS", "Linux" or "Unknown".
+     */
+    public static GetSystem(): string {
+        const platform = navigator.platform;
+        if (/Android/.test(navigator.userAgent)) {
+            return "Android";
+        } else if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {
+            return "iOS";
+        } else if (platform.startsWith("Win")) {
+            return "Windows";
+        } else if (platform.startsWith("Mac")) {
+            return "MacOS";
+        } else if (platform.startsWith("Linux")) {
+            return "Linux";
+        } else {
+            return "Unknown";
+        }
+    }
+
+    /**
+     * @returns A promise that resolves to a boolean indicating whether the user's device supports WebXR.
+     */
+    public static async GetSupportsWebXR(): Promise<boolean> {
+        if (this._supportsWebXR !== null) {
+            return this._supportsWebXR;
+        }
+
+        if (!navigator.xr) {
+            this._supportsWebXR = false;
+            return this._supportsWebXR;
+        }
+        // Check if immersive-vr session mode is supported
+        try {
+            const supported = await navigator.xr.isSessionSupported('immersive-ar');
+            this._supportsWebXR = supported;
+        } catch (error) {
+            this._supportsWebXR = false;
+        }
+        return this._supportsWebXR;
+    }
+
+    /**
+     * @returns A boolean indicating whether the user's device supports AR Quick Look.
+     */
+    public static GetSupportsARQuickLook(): boolean {
+        const a = document.createElement("a");
+        if (a.relList.supports("ar")) {
+            return true;
+        }
+
+        // fallback check
+        const userAgent = navigator.userAgent;
+
+        // Check if the device is running iOS
+        const isIOS = /iPad|iPhone|iPod/.test(userAgent) && !(window as unknown as Window & { MSStream?: string }).MSStream;
+        if (!isIOS) {
+            return false;
+        }
+
+        // Extract iOS version
+        const match = userAgent.match(/OS (\d+)_/);
+        if (!match || match.length < 2) {
+            return false;
+        }
+        const iOSVersion = parseInt(match[1], 10);
+
+        // Minimum iOS version for QuickLook support
+        const minQuickLookVersion = 12;
+
+        // Check if the iOS version is supported
+        if (iOSVersion < minQuickLookVersion) {
+            return false;
+        }
+
+        // Check for supported browser
+        const isSupportedBrowser = /^((?!chrome|android).)*safari|CriOS|FxiOS/i.test(userAgent);
+        if (isSupportedBrowser) {
+            return true;
+        }
+
+        // Default to false if none of the conditions are met
+        return false;
+    }
+
+    /**
+     * @returns A boolean indicating whether the user's device is a mobile device.
+     */
+    public static get isMobile(): boolean {
+        return this.GetSystem() === "Android" || this.GetSystem() === "iOS";
+    }
+
+    /**
+     * @returns A boolean indicating whether the user's device is a desktop device.
+     */
+    public static get isDesktop(): boolean {
+        return !this.isMobile;
+    }
+
+    /**
+     * @returns A promise that resolves to a boolean indicating whether the user's device is capable of AR.
+     */
+    public static async GetIsARCapable(): Promise<boolean> {
+        if (this.GetSupportsARQuickLook()) {
+            return true;
+        }
+
+        return await this.GetSupportsWebXR();
+    }
+}

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

@@ -0,0 +1,267 @@
+import { DIVEInfo } from '../Info';
+
+const mockNavigator = (navigator: any) => {
+    Object.defineProperty(global, 'navigator', {
+        value: navigator,
+        writable: true
+    });
+};
+
+describe('dive/info/DIVEInfo', () => {
+    beforeEach(() => {
+        DIVEInfo['_supportsWebXR'] = null;
+        jest.clearAllMocks();
+    });
+
+    it('should get system: Windows', () => {
+        mockNavigator({
+            platform: 'Win64'
+        });
+        expect(DIVEInfo.GetSystem()).toBe('Windows');
+    });
+
+    it('should get system: MacOS', () => {
+        mockNavigator({
+            platform: 'MacIntel'
+        });
+        expect(DIVEInfo.GetSystem()).toBe('MacOS');
+    });
+
+    it('should get system: Linux', () => {
+        mockNavigator({
+            platform: 'Linux'
+        });
+        expect(DIVEInfo.GetSystem()).toBe('Linux');
+    });
+
+    it('should get system: Android', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3',
+            platform: 'Linux'
+        });
+        expect(DIVEInfo.GetSystem()).toBe('Android');
+    });
+
+    it('should get system: iOS', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0_1 like Mac OS X) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3',
+            platform: 'iPhone'
+        });
+        expect(DIVEInfo.GetSystem()).toBe('iOS');
+    });
+
+    it('should get system: Unknown', () => {
+        mockNavigator({
+            platform: 'Unknown'
+        });
+        expect(DIVEInfo.GetSystem()).toBe('Unknown');
+    });
+
+    it('should support webXR', async () => {
+        DIVEInfo['_supportsWebXR'] = null;
+        mockNavigator({
+            xr: {
+                isSessionSupported: jest.fn().mockResolvedValue(true),
+            }
+        });
+        const supports = await DIVEInfo.GetSupportsWebXR();
+        expect(supports).toBe(true);
+    });
+
+    it('should not support webXR (xr undefined)', async () => {
+        DIVEInfo['_supportsWebXR'] = null;
+        mockNavigator({
+            xr: undefined
+        });
+        const supports = await DIVEInfo.GetSupportsWebXR();
+        expect(supports).toBe(false);
+    });
+
+    it('should not support webXR', async () => {
+        DIVEInfo['_supportsWebXR'] = null;
+        mockNavigator({
+            xr: {
+                isSessionSupported: jest.fn().mockResolvedValue(false),
+            }
+        });
+        const supports = await DIVEInfo.GetSupportsWebXR();
+        expect(supports).toBe(false);
+    });
+
+    it('should not support webXR on error', async () => {
+        DIVEInfo['_supportsWebXR'] = null;
+        mockNavigator({
+            xr: {
+                isSessionSupported: jest.fn().mockRejectedValue('error'),
+            }
+        });
+        const supports = await DIVEInfo.GetSupportsWebXR();
+        expect(supports).toBe(false);
+    });
+
+    it('should return cached value', async () => {
+        DIVEInfo['_supportsWebXR'] = true;
+        mockNavigator({
+            xr: {
+                isSessionSupported: jest.fn().mockRejectedValue('error'),
+            }
+        });
+        const supports = await DIVEInfo.GetSupportsWebXR();
+        expect(supports).toBe(true);
+    });
+
+    it('should return cached value (false)', async () => {
+        DIVEInfo['_supportsWebXR'] = false;
+        mockNavigator({
+            xr: {
+                isSessionSupported: jest.fn().mockRejectedValue('error'),
+            }
+        });
+        const supports = await DIVEInfo.GetSupportsWebXR();
+        expect(supports).toBe(false);
+    });
+
+    it('should support ARQuickLook with feature detection', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.1 Mobile/15E148 Safari/604.'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => true } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(true);
+    });
+
+    it('should support ARQuickLook (iPhone, iOS 15, Safari)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.1 Mobile/15E148 Safari/604.'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(true);
+    });
+
+    it('should support ARQuickLook (iPhone, iOS 17, Google)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) GSA/277.0.555192628 Mobile/15E148 Safari/604.'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(true);
+    });
+
+    it('should support ARQuickLook (iPhone, iOS 17, Chrome)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/126.0.6478.153 Mobile/15E148 Safari/604.'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(true);
+    });
+
+    it('should support ARQuickLook (iPhone, iOS 17, Chrome)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_1 like Mac OS X) AppleWebKit/605.1.11 (KHTML, like Gecko) Version/11.1 Mobile/11E148 CriOS/604.'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(true);
+    });
+
+    it('should support ARQuickLook (iPhone, iOS 17, Firefox)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_1 like Mac OS X) AppleWebKit/605.1.11 (KHTML, like Gecko) Version/11.1 Mobile/11E148 FxiOS/604.'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(true);
+    });
+
+    it('should not support ARQuickLook (Android)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Mobile Safari/537.3'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(false);
+    });
+
+    it('should not support ARQuickLook (iPhone, no iOS version)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS like Mac OS X) AppleWebKit/605.1.11 (KHTML, like Gecko) Version/11.1 Mobile/11E148 Safari/604.'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(false);
+    });
+
+    it('should not support ARQuickLook (iPhone, iOS 17, no browser)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_1 like Mac OS X)'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(false);
+    });
+
+    it('should not support ARQuickLook (iPhone, iOS <12, Safari)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_1 like Mac OS X) AppleWebKit/605.1.11 (KHTML, like Gecko) Version/11.1 Mobile/11E148 Safari/604.'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(false);
+    });
+
+    it('should be mobile (iOS)', () => {
+        jest.spyOn(DIVEInfo, 'GetSystem').mockReturnValue('iOS');
+        expect(DIVEInfo.isMobile).toBe(true);
+        expect(DIVEInfo.isDesktop).toBe(false);
+    });
+
+    it('should be mobile (Android)', () => {
+        jest.spyOn(DIVEInfo, 'GetSystem').mockReturnValue('Android');
+        expect(DIVEInfo.isMobile).toBe(true);
+        expect(DIVEInfo.isDesktop).toBe(false);
+    });
+
+    it('should be desktop (Windows)', () => {
+        jest.spyOn(DIVEInfo, 'GetSystem').mockReturnValue('Windows');
+        expect(DIVEInfo.isMobile).toBe(false);
+        expect(DIVEInfo.isDesktop).toBe(true);
+    });
+
+    it('should be desktop (MacOS)', () => {
+        jest.spyOn(DIVEInfo, 'GetSystem').mockReturnValue('MacOS');
+        expect(DIVEInfo.isMobile).toBe(false);
+        expect(DIVEInfo.isDesktop).toBe(true);
+    });
+
+    it('should be desktop (Linux)', () => {
+        jest.spyOn(DIVEInfo, 'GetSystem').mockReturnValue('Linux');
+        expect(DIVEInfo.isMobile).toBe(false);
+        expect(DIVEInfo.isDesktop).toBe(true);
+    });
+
+    it('should be desktop (Unknown)', () => {
+        jest.spyOn(DIVEInfo, 'GetSystem').mockReturnValue('Unknown');
+        expect(DIVEInfo.isMobile).toBe(false);
+        expect(DIVEInfo.isDesktop).toBe(true);
+    });
+
+    it('should be capable of AR (ARQuickLook)', async () => {
+        jest.spyOn(DIVEInfo, 'GetSupportsARQuickLook').mockReturnValue(true);
+        jest.spyOn(DIVEInfo, 'GetSupportsWebXR').mockResolvedValue(false);
+        expect(await DIVEInfo.GetIsARCapable()).toBe(true);
+    });
+
+    it('should be capable of AR (WebXR)', async () => {
+        jest.spyOn(DIVEInfo, 'GetSupportsARQuickLook').mockReturnValue(false);
+        jest.spyOn(DIVEInfo, 'GetSupportsWebXR').mockResolvedValue(true);
+        expect(await DIVEInfo.GetIsARCapable()).toBe(true);
+    });
+
+    it('should not be capable of AR', async () => {
+        jest.spyOn(DIVEInfo, 'GetSupportsARQuickLook').mockReturnValue(false);
+        jest.spyOn(DIVEInfo, 'GetSupportsWebXR').mockResolvedValue(false);
+        expect(await DIVEInfo.GetIsARCapable()).toBe(false);
+    });
+});

package/src/renderer/Renderer.ts

@@ -7,6 +7,7 @@ export type DIVERendererSettings = {
     shadowMapEnabled: boolean;
     shadowMapType: ShadowMapType;
     toneMapping: ToneMapping;
+    canvas?: HTMLCanvasElement;
 }
 
 export const DIVERendererDefaultSettings: DIVERendererSettings = {
@@ -16,6 +17,7 @@ export const DIVERendererDefaultSettings: DIVERendererSettings = {
     shadowMapEnabled: true,
     shadowMapType: PCFSoftShadowMap,
     toneMapping: NoToneMapping,
+    canvas: undefined,
 }
 
 /**
@@ -36,18 +38,19 @@ export class DIVERenderer extends WebGLRenderer {
     private preRenderCallbacks: Map<string, () => void> = new Map<string, () => void>();
     private postRenderCallbacks: Map<string, () => void> = new Map<string, () => void>();
 
-    constructor(rendererSettings: DIVERendererSettings = DIVERendererDefaultSettings) {
+    constructor(rendererSettings: Partial<DIVERendererSettings> = DIVERendererDefaultSettings) {
         super({
-            antialias: rendererSettings.antialias,
-            alpha: rendererSettings.alpha,
-            preserveDrawingBuffer: true
+            antialias: rendererSettings.antialias || DIVERendererDefaultSettings.antialias,
+            alpha: rendererSettings.alpha || DIVERendererDefaultSettings.alpha,
+            preserveDrawingBuffer: true,
+            canvas: rendererSettings.canvas,
         });
         this.setPixelRatio(window.devicePixelRatio);
 
-        this.shadowMap.enabled = rendererSettings.shadowMapEnabled;
-        this.shadowMap.type = rendererSettings.shadowMapType;
+        this.shadowMap.enabled = rendererSettings.shadowMapEnabled || DIVERendererDefaultSettings.shadowMapEnabled;
+        this.shadowMap.type = rendererSettings.shadowMapType || DIVERendererDefaultSettings.shadowMapType;
 
-        this.toneMapping = rendererSettings.toneMapping;
+        this.toneMapping = rendererSettings.toneMapping || DIVERendererDefaultSettings.toneMapping;
 
         this.debug.checkShaderErrors = false;
     }

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

@@ -48,9 +48,20 @@ describe('dive/renderer/DIVERenderer', () => {
     });
 
     it('should instantiate', () => {
+        renderer = new DIVERenderer({});
         expect(renderer).toBeDefined();
     });
 
+    it('should instantiate', () => {
+        renderer = new DIVERenderer({
+            alpha: true,
+            shadowMapEnabled: true,
+            shadowMapType: 1,
+            toneMapping: 1,
+            antialias: true,
+        });
+    });
+
     it('should instantiate with settings parameter', () => {
         renderer = new DIVERenderer(DIVERendererDefaultSettings);
         expect(renderer).toBeDefined();