angular-three 2.0.0-beta.273 → 2.0.0-beta.275

package/fesm2022/angular-three.mjs

@@ -3,7 +3,7 @@ import { untracked, computed, signal, ElementRef, input, inject, ViewContainerRe
 import { takeUntilDestroyed, outputFromObservable } from '@angular/core/rxjs-interop';
 import { injectAutoEffect } from 'ngxtension/auto-effect';
 import { provideResizeOptions, NgxResize } from 'ngxtension/resize';
-import { MathUtils, WebGLRenderer, OrthographicCamera, PerspectiveCamera, Vector3, Layers, Color, ColorManagement, Texture, RGBAFormat, UnsignedByteType, Raycaster, Scene, PCFSoftShadowMap, BasicShadowMap, PCFShadowMap, VSMShadowMap, NoToneMapping, ACESFilmicToneMapping, Vector2, Clock } from 'three';
+import { MathUtils, WebGLRenderer, OrthographicCamera, PerspectiveCamera, Vector3, Vector2, Clock, Layers, Color, ColorManagement, Texture, RGBAFormat, UnsignedByteType, Raycaster, Scene, PCFSoftShadowMap, BasicShadowMap, PCFShadowMap, VSMShadowMap, NoToneMapping, ACESFilmicToneMapping } from 'three';
 import { DOCUMENT } from '@angular/common';
 import { Subject, filter } from 'rxjs';
 import { createInjectionToken } from 'ngxtension/create-injection-token';
@@ -814,526 +814,145 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
             args: [{ selector: 'ng-template[args]', standalone: true }]
         }], ctorParameters: () => [] });
 
-// This function prepares a set of changes to be applied to the instance
-function diffProps(instance, props) {
-    const propsEntries = Object.entries(props);
-    const changes = [];
-    for (const [propKey, propValue] of propsEntries) {
-        let key = propKey;
-        if (is.colorSpaceExist(instance)) {
-            if (propKey === 'encoding') {
-                key = 'colorSpace';
-            }
-            else if (propKey === 'outputEncoding') {
-                key = 'outputColorSpace';
-            }
-        }
-        if (is.equ(propValue, instance[key]))
-            continue;
-        changes.push([propKey, propValue]);
+const roots = new Map();
+function createSubs(callback, subs) {
+    const sub = { callback };
+    subs.add(sub);
+    return () => void subs.delete(sub);
+}
+const globalEffects = new Set();
+const globalAfterEffects = new Set();
+const globalTailEffects = new Set();
+/**
+ * Adds a global render callback which is called each frame.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
+ */
+const addEffect = (callback) => createSubs(callback, globalEffects);
+/**
+ * Adds a global after-render callback which is called each frame.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
+ */
+const addAfterEffect = (callback) => createSubs(callback, globalAfterEffects);
+/**
+ * Adds a global callback which is called when rendering stops.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
+ */
+const addTail = (callback) => createSubs(callback, globalTailEffects);
+function run(effects, timestamp) {
+    if (!effects.size)
+        return;
+    for (const { callback } of effects.values()) {
+        callback(timestamp);
     }
-    return changes;
 }
-// This function applies a set of changes to the instance
-function applyProps(instance, props) {
-    // if props is empty
-    if (!Object.keys(props).length)
-        return instance;
-    // filter equals, and reserved props
-    const localState = getLocalState(instance);
-    const rootState = localState?.store?.snapshot ?? {};
-    const changes = diffProps(instance, props);
-    for (let i = 0; i < changes.length; i++) {
-        let [key, value] = changes[i];
-        // Alias (output)encoding => (output)colorSpace (since r152)
-        // https://github.com/pmndrs/react-three-fiber/pull/2829
-        if (is.colorSpaceExist(instance)) {
-            const sRGBEncoding = 3001;
-            const SRGBColorSpace = 'srgb';
-            const LinearSRGBColorSpace = 'srgb-linear';
-            if (key === 'encoding') {
-                key = 'colorSpace';
-                value = value === sRGBEncoding ? SRGBColorSpace : LinearSRGBColorSpace;
-            }
-            else if (key === 'outputEncoding') {
-                key = 'outputColorSpace';
-                value = value === sRGBEncoding ? SRGBColorSpace : LinearSRGBColorSpace;
+function flushGlobalEffects(type, timestamp) {
+    switch (type) {
+        case 'before':
+            return run(globalEffects, timestamp);
+        case 'after':
+            return run(globalAfterEffects, timestamp);
+        case 'tail':
+            return run(globalTailEffects, timestamp);
+    }
+}
+function render(timestamp, store, frame) {
+    const state = store.snapshot;
+    // Run local effects
+    let delta = state.clock.getDelta();
+    // In frameloop='never' mode, clock times are updated using the provided timestamp
+    if (state.frameloop === 'never' && typeof timestamp === 'number') {
+        delta = timestamp - state.clock.elapsedTime;
+        state.clock.oldTime = state.clock.elapsedTime;
+        state.clock.elapsedTime = timestamp;
+    }
+    // Call subscribers (beforeRender)
+    const subscribers = state.internal.subscribers;
+    for (let i = 0; i < subscribers.length; i++) {
+        const subscription = subscribers[i];
+        subscription.callback({ ...subscription.store.snapshot, delta, frame });
+    }
+    // Render content
+    if (!state.internal.priority && state.gl.render)
+        state.gl.render(state.scene, state.camera);
+    // Decrease frame count
+    state.internal.frames = Math.max(0, state.internal.frames - 1);
+    return state.frameloop === 'always' ? 1 : state.internal.frames;
+}
+function createLoop(roots) {
+    let running = false;
+    let repeat;
+    let frame;
+    let beforeRenderInProgress = false;
+    function loop(timestamp) {
+        frame = requestAnimationFrame(loop);
+        running = true;
+        repeat = 0;
+        // Run effects
+        flushGlobalEffects('before', timestamp);
+        // Render all roots
+        beforeRenderInProgress = true;
+        for (const root of roots.values()) {
+            const state = root.snapshot;
+            // If the frameloop is invalidated, do not run another frame
+            if (state.internal.active &&
+                (state.frameloop === 'always' || state.internal.frames > 0) &&
+                !state.gl.xr?.isPresenting) {
+                repeat += render(timestamp, root);
             }
         }
-        const currentInstance = instance;
-        const targetProp = currentInstance[key];
-        // special treatmen for objects with support for set/copy, and layers
-        if (targetProp && targetProp['set'] && (targetProp['copy'] || targetProp instanceof Layers)) {
-            const isColor = targetProp instanceof Color;
-            // if value is an array
-            if (Array.isArray(value)) {
-                if (targetProp['fromArray'])
-                    targetProp['fromArray'](value);
-                else
-                    targetProp['set'](...value);
-            } // test again target.copy
-            else if (targetProp['copy'] &&
-                value &&
-                value.constructor &&
-                targetProp.constructor.name === value.constructor.name) {
-                targetProp['copy'](value);
-                if (!ColorManagement && !rootState.linear && isColor)
-                    targetProp['convertSRGBToLinear']();
-            } // if nothing else fits, just set the single value, ignore undefined
-            else if (value !== undefined) {
-                const isColor = targetProp instanceof Color;
-                // allow setting array scalars
-                if (!isColor && targetProp['setScalar'])
-                    targetProp['setScalar'](value);
-                // layers have no copy function, copy the mask
-                else if (targetProp instanceof Layers && value instanceof Layers)
-                    targetProp.mask = value.mask;
-                // otherwise just set ...
-                else
-                    targetProp['set'](value);
-                // auto-convert srgb
-                if (!ColorManagement && !rootState?.linear && isColor)
-                    targetProp.convertSRGBToLinear();
-            }
-        } // else just overwrite the value
+        beforeRenderInProgress = false;
+        // Run after-effects
+        flushGlobalEffects('after', timestamp);
+        // Stop the loop if nothing invalidates it
+        if (repeat === 0) {
+            // Tail call effects, they are called when rendering stops
+            flushGlobalEffects('tail', timestamp);
+            // Flag end of operation
+            running = false;
+            return cancelAnimationFrame(frame);
+        }
+    }
+    function invalidate(store, frames = 1) {
+        const state = store?.snapshot;
+        if (!state)
+            return roots.forEach((root) => invalidate(root, frames));
+        if (state.gl.xr?.isPresenting || !state.internal.active || state.frameloop === 'never')
+            return;
+        if (frames > 1) {
+            // legacy support for people using frames parameters
+            // Increase frames, do not go higher than 60
+            state.internal.frames = Math.min(60, state.internal.frames + frames);
+        }
         else {
-            currentInstance[key] = value;
-            // auto-convert srgb textures
-            if (currentInstance[key] instanceof Texture &&
-                currentInstance[key].format === RGBAFormat &&
-                currentInstance[key].type === UnsignedByteType) {
-                const texture = currentInstance[key];
-                if (rootState?.gl) {
-                    if (is.colorSpaceExist(texture) && is.colorSpaceExist(rootState.gl))
-                        texture.colorSpace = rootState.gl.outputColorSpace;
-                    // @ts-expect-error - old version of threejs
-                    else
-                        texture.encoding = rootState.gl.outputEncoding;
-                }
+            if (beforeRenderInProgress) {
+                //called from within a beforeRender, it means the user wants an additional frame
+                state.internal.frames = 2;
+            }
+            else {
+                //the user need a new frame, no need to increment further than 1
+                state.internal.frames = 1;
             }
         }
-        checkUpdate(currentInstance[key]);
-        checkUpdate(targetProp);
-        invalidateInstance(instance);
-    }
-    const instanceHandlersCount = localState?.eventCount;
-    const parent = localState?.instanceStore?.get('parent');
-    if (parent && rootState.internal && instance['raycast'] && instanceHandlersCount !== localState?.eventCount) {
-        // Pre-emptively remove the instance from the interaction manager
-        const index = rootState.internal.interaction.indexOf(instance);
-        if (index > -1)
-            rootState.internal.interaction.splice(index, 1);
-        // Add the instance to the interaction manager only when it has handlers
-        if (localState?.eventCount)
-            rootState.internal.interaction.push(instance);
+        // If the render-loop isn't active, start it
+        if (!running) {
+            running = true;
+            requestAnimationFrame(loop);
+        }
     }
-    if (parent && localState?.onUpdate && changes.length) {
-        localState.onUpdate(instance);
+    function advance(timestamp, runGlobalEffects = true, store, frame) {
+        if (runGlobalEffects)
+            flushGlobalEffects('before', timestamp);
+        if (!store)
+            for (const root of roots.values())
+                render(timestamp, root);
+        else
+            render(timestamp, store, frame);
+        if (runGlobalEffects)
+            flushGlobalEffects('after', timestamp);
     }
-    return instance;
+    return { loop, invalidate, advance };
 }
-
-const shallowLoose = { objects: 'shallow', strict: false };
-const roots = new Map();
-function injectCanvasRootInitializer(injector) {
-    return assertInjector(injectCanvasRootInitializer, injector, () => {
-        const injectedStore = injectStore();
-        const loop = injectLoop();
-        return (canvas) => {
-            const exist = roots.has(canvas);
-            let store = roots.get(canvas);
-            if (store) {
-                console.warn('[NGT] Same canvas root is being created twice');
-            }
-            store ||= injectedStore;
-            if (!store) {
-                throw new Error('[NGT] No store initialized');
-            }
-            if (!exist) {
-                roots.set(canvas, store);
-            }
-            let isConfigured = false;
-            let lastCamera;
-            return {
-                isConfigured,
-                destroy: (timeout = 500) => {
-                    const root = roots.get(canvas);
-                    if (root) {
-                        root.update((state) => ({ internal: { ...state.internal, active: false } }));
-                        try {
-                            const state = root.get();
-                            state.events.disconnect?.();
-                            state.gl?.renderLists?.dispose?.();
-                            state.gl?.forceContextLoss?.();
-                            if (state.gl?.xr)
-                                state.xr.disconnect();
-                            dispose(state);
-                            roots.delete(canvas);
-                        }
-                        catch (e) {
-                            console.error('[NGT] Unexpected error while destroying Canvas Root', e);
-                        }
-                    }
-                },
-                configure: (inputs) => {
-                    const { shadows = false, linear = false, flat = false, legacy = false, orthographic = false, frameloop = 'always', dpr = [1, 2], gl: glOptions, size: sizeOptions, camera: cameraOptions, raycaster: raycasterOptions, scene: sceneOptions, events, lookAt, performance, } = inputs;
-                    const state = store.snapshot;
-                    const stateToUpdate = {};
-                    // setup renderer
-                    let gl = state.gl;
-                    if (!state.gl)
-                        stateToUpdate.gl = gl = makeRendererInstance(glOptions, canvas);
-                    // setup raycaster
-                    let raycaster = state.raycaster;
-                    if (!raycaster)
-                        stateToUpdate.raycaster = raycaster = new Raycaster();
-                    // set raycaster options
-                    const { params, ...options } = raycasterOptions || {};
-                    if (!is.equ(options, raycaster, shallowLoose))
-                        applyProps(raycaster, options);
-                    if (!is.equ(params, raycaster.params, shallowLoose)) {
-                        applyProps(raycaster, { params: { ...raycaster.params, ...(params || {}) } });
-                    }
-                    // Create default camera, don't overwrite any user-set state
-                    if (!state.camera || (state.camera === lastCamera && !is.equ(lastCamera, cameraOptions, shallowLoose))) {
-                        lastCamera = cameraOptions;
-                        const isCamera = is.camera(cameraOptions);
-                        let camera = isCamera ? cameraOptions : makeCameraInstance(orthographic, state.size);
-                        if (!isCamera) {
-                            camera.position.z = 5;
-                            if (cameraOptions) {
-                                applyProps(camera, cameraOptions);
-                                if ('aspect' in cameraOptions ||
-                                    'left' in cameraOptions ||
-                                    'right' in cameraOptions ||
-                                    'top' in cameraOptions ||
-                                    'bottom' in cameraOptions) {
-                                    Object.assign(camera, { manual: true });
-                                    camera?.updateProjectionMatrix();
-                                }
-                            }
-                            // always look at center or passed-in lookAt by default
-                            if (!state.camera && !cameraOptions?.rotation && !cameraOptions?.quaternion) {
-                                if (Array.isArray(lookAt))
-                                    camera.lookAt(lookAt[0], lookAt[1], lookAt[2]);
-                                else if (lookAt instanceof Vector3)
-                                    camera.lookAt(lookAt);
-                                else
-                                    camera.lookAt(0, 0, 0);
-                            }
-                            // update projection matrix after applyprops
-                            camera.updateProjectionMatrix?.();
-                        }
-                        if (!is.instance(camera))
-                            camera = prepare(camera, { store });
-                        stateToUpdate.camera = camera;
-                        // Configure raycaster
-                        // https://github.com/pmndrs/react-xr/issues/300
-                        raycaster.camera = camera;
-                    }
-                    // Set up scene (one time only!)
-                    if (!state.scene) {
-                        let scene;
-                        if (sceneOptions instanceof Scene) {
-                            scene = sceneOptions;
-                        }
-                        else {
-                            scene = new Scene();
-                            if (sceneOptions)
-                                applyProps(scene, sceneOptions);
-                        }
-                        applyProps(scene, {
-                            setAttribute: (name, value) => {
-                                if (canvas instanceof HTMLCanvasElement) {
-                                    if (canvas.parentElement) {
-                                        canvas.parentElement.setAttribute(name, value);
-                                    }
-                                    else {
-                                        canvas.setAttribute(name, value);
-                                    }
-                                }
-                            },
-                        });
-                        stateToUpdate.scene = prepare(scene, { store });
-                    }
-                    // Set up XR (one time only!)
-                    if (!state.xr) {
-                        // Handle frame behavior in WebXR
-                        const handleXRFrame = (timestamp, frame) => {
-                            const state = store.snapshot;
-                            if (state.frameloop === 'never')
-                                return;
-                            loop.advance(timestamp, true, store, frame);
-                        };
-                        // Toggle render switching on session
-                        const handleSessionChange = () => {
-                            const state = store.snapshot;
-                            state.gl.xr.enabled = state.gl.xr.isPresenting;
-                            state.gl.xr.setAnimationLoop(state.gl.xr.isPresenting ? handleXRFrame : null);
-                            if (!state.gl.xr.isPresenting)
-                                loop.invalidate(store);
-                        };
-                        // WebXR session manager
-                        const xr = {
-                            connect: () => {
-                                gl.xr.addEventListener('sessionstart', handleSessionChange);
-                                gl.xr.addEventListener('sessionend', handleSessionChange);
-                            },
-                            disconnect: () => {
-                                gl.xr.removeEventListener('sessionstart', handleSessionChange);
-                                gl.xr.removeEventListener('sessionend', handleSessionChange);
-                            },
-                        };
-                        // Subscribe to WebXR session events
-                        if (gl.xr && typeof gl.xr.addEventListener === 'function')
-                            xr.connect();
-                        stateToUpdate.xr = xr;
-                    }
-                    // Set shadowmap
-                    if (gl.shadowMap) {
-                        const oldEnabled = gl.shadowMap.enabled;
-                        const oldType = gl.shadowMap.type;
-                        gl.shadowMap.enabled = !!shadows;
-                        if (typeof shadows === 'boolean') {
-                            gl.shadowMap.type = PCFSoftShadowMap;
-                        }
-                        else if (typeof shadows === 'string') {
-                            const types = {
-                                basic: BasicShadowMap,
-                                percentage: PCFShadowMap,
-                                soft: PCFSoftShadowMap,
-                                variance: VSMShadowMap,
-                            };
-                            gl.shadowMap.type = types[shadows] ?? PCFSoftShadowMap;
-                        }
-                        else if (is.obj(shadows)) {
-                            Object.assign(gl.shadowMap, shadows);
-                        }
-                        if (oldEnabled !== gl.shadowMap.enabled || oldType !== gl.shadowMap.type)
-                            checkNeedsUpdate(gl.shadowMap);
-                    }
-                    // Safely set color management if available.
-                    // Avoid accessing ColorManagement to play nice with older versions
-                    if (ColorManagement) {
-                        const colorManagement = ColorManagement;
-                        if ('enabled' in colorManagement)
-                            colorManagement['enabled'] = !legacy ?? false;
-                        else if ('legacyMode' in colorManagement)
-                            colorManagement['legacyMode'] = legacy ?? true;
-                    }
-                    if (!isConfigured) {
-                        // set color space and tonemapping preferences once
-                        const LinearEncoding = 3000;
-                        const sRGBEncoding = 3001;
-                        applyProps(gl, {
-                            outputEncoding: linear ? LinearEncoding : sRGBEncoding,
-                            toneMapping: flat ? NoToneMapping : ACESFilmicToneMapping,
-                        });
-                    }
-                    // Update color management state
-                    if (state.legacy !== legacy)
-                        stateToUpdate.legacy = legacy;
-                    if (state.linear !== linear)
-                        stateToUpdate.linear = linear;
-                    if (state.flat !== flat)
-                        stateToUpdate.flat = flat;
-                    // Set gl props
-                    gl.setClearAlpha(0);
-                    gl.setPixelRatio(makeDpr(state.viewport.dpr));
-                    gl.setSize(state.size.width, state.size.height);
-                    if (is.obj(glOptions) &&
-                        !(typeof glOptions === 'function') &&
-                        !is.renderer(glOptions) &&
-                        !is.equ(glOptions, gl, shallowLoose)) {
-                        applyProps(gl, glOptions);
-                    }
-                    // Store events internally
-                    if (events && !state.events.handlers)
-                        stateToUpdate.events = events(store);
-                    // Check performance
-                    if (performance && !is.equ(performance, state.performance, shallowLoose)) {
-                        stateToUpdate.performance = { ...state.performance, ...performance };
-                    }
-                    if (Object.keys(stateToUpdate).length) {
-                        store.update(stateToUpdate);
-                    }
-                    // Check size, allow it to take on container bounds initially
-                    const size = computeInitialSize(canvas, sizeOptions);
-                    if (!is.equ(size, state.size, shallowLoose)) {
-                        state.setSize(size.width, size.height, size.top, size.left);
-                    }
-                    // Check pixelratio
-                    if (dpr && state.viewport.dpr !== makeDpr(dpr))
-                        state.setDpr(dpr);
-                    // Check frameloop
-                    if (state.frameloop !== frameloop)
-                        state.setFrameloop(frameloop);
-                    isConfigured = true;
-                },
-            };
-        };
-    });
-}
-function computeInitialSize(canvas, defaultSize) {
-    if (defaultSize) {
-        return defaultSize;
-    }
-    if (typeof HTMLCanvasElement !== 'undefined' && canvas instanceof HTMLCanvasElement && canvas.parentElement) {
-        return canvas.parentElement.getBoundingClientRect();
-    }
-    if (typeof OffscreenCanvas !== 'undefined' && canvas instanceof OffscreenCanvas) {
-        return { width: canvas.width, height: canvas.height, top: 0, left: 0 };
-    }
-    return { width: 0, height: 0, top: 0, left: 0 };
-}
-// Disposes an object and all its properties
-function dispose(obj) {
-    if (obj.dispose && obj.type !== 'Scene')
-        obj.dispose();
-    for (const p in obj) {
-        p.dispose?.();
-        delete obj[p];
-    }
-}
-
-function createSubs(callback, subs) {
-    const sub = { callback };
-    subs.add(sub);
-    return () => void subs.delete(sub);
-}
-const globalEffects = new Set();
-const globalAfterEffects = new Set();
-const globalTailEffects = new Set();
-/**
- * Adds a global render callback which is called each frame.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
- */
-const addEffect = (callback) => createSubs(callback, globalEffects);
-/**
- * Adds a global after-render callback which is called each frame.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
- */
-const addAfterEffect = (callback) => createSubs(callback, globalAfterEffects);
-/**
- * Adds a global callback which is called when rendering stops.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
- */
-const addTail = (callback) => createSubs(callback, globalTailEffects);
-function run(effects, timestamp) {
-    if (!effects.size)
-        return;
-    for (const { callback } of effects.values()) {
-        callback(timestamp);
-    }
-}
-function flushGlobalEffects(type, timestamp) {
-    switch (type) {
-        case 'before':
-            return run(globalEffects, timestamp);
-        case 'after':
-            return run(globalAfterEffects, timestamp);
-        case 'tail':
-            return run(globalTailEffects, timestamp);
-    }
-}
-function render(timestamp, store, frame) {
-    const state = store.snapshot;
-    // Run local effects
-    let delta = state.clock.getDelta();
-    // In frameloop='never' mode, clock times are updated using the provided timestamp
-    if (state.frameloop === 'never' && typeof timestamp === 'number') {
-        delta = timestamp - state.clock.elapsedTime;
-        state.clock.oldTime = state.clock.elapsedTime;
-        state.clock.elapsedTime = timestamp;
-    }
-    // Call subscribers (beforeRender)
-    const subscribers = state.internal.subscribers;
-    for (let i = 0; i < subscribers.length; i++) {
-        const subscription = subscribers[i];
-        subscription.callback({ ...subscription.store.snapshot, delta, frame });
-    }
-    // Render content
-    if (!state.internal.priority && state.gl.render)
-        state.gl.render(state.scene, state.camera);
-    // Decrease frame count
-    state.internal.frames = Math.max(0, state.internal.frames - 1);
-    return state.frameloop === 'always' ? 1 : state.internal.frames;
-}
-function createLoop(roots) {
-    let running = false;
-    let repeat;
-    let frame;
-    let beforeRenderInProgress = false;
-    function loop(timestamp) {
-        frame = requestAnimationFrame(loop);
-        running = true;
-        repeat = 0;
-        // Run effects
-        flushGlobalEffects('before', timestamp);
-        // Render all roots
-        beforeRenderInProgress = true;
-        for (const root of roots.values()) {
-            const state = root.snapshot;
-            // If the frameloop is invalidated, do not run another frame
-            if (state.internal.active &&
-                (state.frameloop === 'always' || state.internal.frames > 0) &&
-                !state.gl.xr?.isPresenting) {
-                repeat += render(timestamp, root);
-            }
-        }
-        beforeRenderInProgress = false;
-        // Run after-effects
-        flushGlobalEffects('after', timestamp);
-        // Stop the loop if nothing invalidates it
-        if (repeat === 0) {
-            // Tail call effects, they are called when rendering stops
-            flushGlobalEffects('tail', timestamp);
-            // Flag end of operation
-            running = false;
-            return cancelAnimationFrame(frame);
-        }
-    }
-    function invalidate(store, frames = 1) {
-        const state = store?.snapshot;
-        if (!state)
-            return roots.forEach((root) => invalidate(root, frames));
-        if (state.gl.xr?.isPresenting || !state.internal.active || state.frameloop === 'never')
-            return;
-        if (frames > 1) {
-            // legacy support for people using frames parameters
-            // Increase frames, do not go higher than 60
-            state.internal.frames = Math.min(60, state.internal.frames + frames);
-        }
-        else {
-            if (beforeRenderInProgress) {
-                //called from within a beforeRender, it means the user wants an additional frame
-                state.internal.frames = 2;
-            }
-            else {
-                //the user need a new frame, no need to increment further than 1
-                state.internal.frames = 1;
-            }
-        }
-        // If the render-loop isn't active, start it
-        if (!running) {
-            running = true;
-            requestAnimationFrame(loop);
-        }
-    }
-    function advance(timestamp, runGlobalEffects = true, store, frame) {
-        if (runGlobalEffects)
-            flushGlobalEffects('before', timestamp);
-        if (!store)
-            for (const root of roots.values())
-                render(timestamp, root);
-        else
-            render(timestamp, store, frame);
-        if (runGlobalEffects)
-            flushGlobalEffects('after', timestamp);
-    }
-    return { loop, invalidate, advance };
-}
-const [injectLoop] = createInjectionToken(() => createLoop(roots));
+const [injectLoop] = createInjectionToken(() => createLoop(roots));
 
 function storeFactory(previousStore) {
     const document = inject(DOCUMENT);
@@ -1509,6 +1128,125 @@ function injectStore(options) {
     return inject(NGT_STORE, options);
 }
 
+// This function prepares a set of changes to be applied to the instance
+function diffProps(instance, props) {
+    const propsEntries = Object.entries(props);
+    const changes = [];
+    for (const [propKey, propValue] of propsEntries) {
+        let key = propKey;
+        if (is.colorSpaceExist(instance)) {
+            if (propKey === 'encoding') {
+                key = 'colorSpace';
+            }
+            else if (propKey === 'outputEncoding') {
+                key = 'outputColorSpace';
+            }
+        }
+        if (is.equ(propValue, instance[key]))
+            continue;
+        changes.push([propKey, propValue]);
+    }
+    return changes;
+}
+// This function applies a set of changes to the instance
+function applyProps(instance, props) {
+    // if props is empty
+    if (!Object.keys(props).length)
+        return instance;
+    // filter equals, and reserved props
+    const localState = getLocalState(instance);
+    const rootState = localState?.store?.snapshot ?? {};
+    const changes = diffProps(instance, props);
+    for (let i = 0; i < changes.length; i++) {
+        let [key, value] = changes[i];
+        // Alias (output)encoding => (output)colorSpace (since r152)
+        // https://github.com/pmndrs/react-three-fiber/pull/2829
+        if (is.colorSpaceExist(instance)) {
+            const sRGBEncoding = 3001;
+            const SRGBColorSpace = 'srgb';
+            const LinearSRGBColorSpace = 'srgb-linear';
+            if (key === 'encoding') {
+                key = 'colorSpace';
+                value = value === sRGBEncoding ? SRGBColorSpace : LinearSRGBColorSpace;
+            }
+            else if (key === 'outputEncoding') {
+                key = 'outputColorSpace';
+                value = value === sRGBEncoding ? SRGBColorSpace : LinearSRGBColorSpace;
+            }
+        }
+        const currentInstance = instance;
+        const targetProp = currentInstance[key];
+        // special treatmen for objects with support for set/copy, and layers
+        if (targetProp && targetProp['set'] && (targetProp['copy'] || targetProp instanceof Layers)) {
+            const isColor = targetProp instanceof Color;
+            // if value is an array
+            if (Array.isArray(value)) {
+                if (targetProp['fromArray'])
+                    targetProp['fromArray'](value);
+                else
+                    targetProp['set'](...value);
+            } // test again target.copy
+            else if (targetProp['copy'] &&
+                value &&
+                value.constructor &&
+                targetProp.constructor.name === value.constructor.name) {
+                targetProp['copy'](value);
+                if (!ColorManagement && !rootState.linear && isColor)
+                    targetProp['convertSRGBToLinear']();
+            } // if nothing else fits, just set the single value, ignore undefined
+            else if (value !== undefined) {
+                const isColor = targetProp instanceof Color;
+                // allow setting array scalars
+                if (!isColor && targetProp['setScalar'])
+                    targetProp['setScalar'](value);
+                // layers have no copy function, copy the mask
+                else if (targetProp instanceof Layers && value instanceof Layers)
+                    targetProp.mask = value.mask;
+                // otherwise just set ...
+                else
+                    targetProp['set'](value);
+                // auto-convert srgb
+                if (!ColorManagement && !rootState?.linear && isColor)
+                    targetProp.convertSRGBToLinear();
+            }
+        } // else just overwrite the value
+        else {
+            currentInstance[key] = value;
+            // auto-convert srgb textures
+            if (currentInstance[key] instanceof Texture &&
+                currentInstance[key].format === RGBAFormat &&
+                currentInstance[key].type === UnsignedByteType) {
+                const texture = currentInstance[key];
+                if (rootState?.gl) {
+                    if (is.colorSpaceExist(texture) && is.colorSpaceExist(rootState.gl))
+                        texture.colorSpace = rootState.gl.outputColorSpace;
+                    // @ts-expect-error - old version of threejs
+                    else
+                        texture.encoding = rootState.gl.outputEncoding;
+                }
+            }
+        }
+        checkUpdate(currentInstance[key]);
+        checkUpdate(targetProp);
+        invalidateInstance(instance);
+    }
+    const instanceHandlersCount = localState?.eventCount;
+    const parent = localState?.instanceStore?.get('parent');
+    if (parent && rootState.internal && instance['raycast'] && instanceHandlersCount !== localState?.eventCount) {
+        // Pre-emptively remove the instance from the interaction manager
+        const index = rootState.internal.interaction.indexOf(instance);
+        if (index > -1)
+            rootState.internal.interaction.splice(index, 1);
+        // Add the instance to the interaction manager only when it has handlers
+        if (localState?.eventCount)
+            rootState.internal.interaction.push(instance);
+    }
+    if (parent && localState?.onUpdate && changes.length) {
+        localState.onUpdate(instance);
+    }
+    return instance;
+}
+
 const catalogue = {};
 function extend(objects) {
     Object.assign(catalogue, objects);
@@ -2294,24 +2032,286 @@ class NgtRenderer {
                 store = instance;
                 break;
             }
-            i--;
-        }
-        destroyed.forEach((index) => {
-            this.portalCommentsNodes.splice(index, 1);
-        });
-        return store || this.rootStore;
+            i--;
+        }
+        destroyed.forEach((index) => {
+            this.portalCommentsNodes.splice(index, 1);
+        });
+        return store || this.rootStore;
+    }
+    get data() {
+        return this.delegate.data;
+    }
+}
+function provideNgtRenderer(store) {
+    const providers = [
+        NgtRendererFactory,
+        { provide: RendererFactory2, useExisting: NgtRendererFactory },
+        provideStore(() => store),
+    ];
+    return makeEnvironmentProviders(providers);
+}
+
+const shallowLoose = { objects: 'shallow', strict: false };
+function injectCanvasRootInitializer(injector) {
+    return assertInjector(injectCanvasRootInitializer, injector, () => {
+        const injectedStore = injectStore();
+        const loop = injectLoop();
+        return (canvas) => {
+            const exist = roots.has(canvas);
+            let store = roots.get(canvas);
+            if (store) {
+                console.warn('[NGT] Same canvas root is being created twice');
+            }
+            store ||= injectedStore;
+            if (!store) {
+                throw new Error('[NGT] No store initialized');
+            }
+            if (!exist) {
+                roots.set(canvas, store);
+            }
+            let isConfigured = false;
+            let lastCamera;
+            return {
+                isConfigured,
+                destroy: (timeout = 500) => {
+                    const root = roots.get(canvas);
+                    if (root) {
+                        root.update((state) => ({ internal: { ...state.internal, active: false } }));
+                        try {
+                            const state = root.get();
+                            state.events.disconnect?.();
+                            state.gl?.renderLists?.dispose?.();
+                            state.gl?.forceContextLoss?.();
+                            if (state.gl?.xr)
+                                state.xr.disconnect();
+                            dispose(state);
+                            roots.delete(canvas);
+                        }
+                        catch (e) {
+                            console.error('[NGT] Unexpected error while destroying Canvas Root', e);
+                        }
+                    }
+                },
+                configure: (inputs) => {
+                    const { shadows = false, linear = false, flat = false, legacy = false, orthographic = false, frameloop = 'always', dpr = [1, 2], gl: glOptions, size: sizeOptions, camera: cameraOptions, raycaster: raycasterOptions, scene: sceneOptions, events, lookAt, performance, } = inputs;
+                    const state = store.snapshot;
+                    const stateToUpdate = {};
+                    // setup renderer
+                    let gl = state.gl;
+                    if (!state.gl)
+                        stateToUpdate.gl = gl = makeRendererInstance(glOptions, canvas);
+                    // setup raycaster
+                    let raycaster = state.raycaster;
+                    if (!raycaster)
+                        stateToUpdate.raycaster = raycaster = new Raycaster();
+                    // set raycaster options
+                    const { params, ...options } = raycasterOptions || {};
+                    if (!is.equ(options, raycaster, shallowLoose))
+                        applyProps(raycaster, options);
+                    if (!is.equ(params, raycaster.params, shallowLoose)) {
+                        applyProps(raycaster, { params: { ...raycaster.params, ...(params || {}) } });
+                    }
+                    // Create default camera, don't overwrite any user-set state
+                    if (!state.camera || (state.camera === lastCamera && !is.equ(lastCamera, cameraOptions, shallowLoose))) {
+                        lastCamera = cameraOptions;
+                        const isCamera = is.camera(cameraOptions);
+                        let camera = isCamera ? cameraOptions : makeCameraInstance(orthographic, state.size);
+                        if (!isCamera) {
+                            camera.position.z = 5;
+                            if (cameraOptions) {
+                                applyProps(camera, cameraOptions);
+                                if ('aspect' in cameraOptions ||
+                                    'left' in cameraOptions ||
+                                    'right' in cameraOptions ||
+                                    'top' in cameraOptions ||
+                                    'bottom' in cameraOptions) {
+                                    Object.assign(camera, { manual: true });
+                                    camera?.updateProjectionMatrix();
+                                }
+                            }
+                            // always look at center or passed-in lookAt by default
+                            if (!state.camera && !cameraOptions?.rotation && !cameraOptions?.quaternion) {
+                                if (Array.isArray(lookAt))
+                                    camera.lookAt(lookAt[0], lookAt[1], lookAt[2]);
+                                else if (lookAt instanceof Vector3)
+                                    camera.lookAt(lookAt);
+                                else
+                                    camera.lookAt(0, 0, 0);
+                            }
+                            // update projection matrix after applyprops
+                            camera.updateProjectionMatrix?.();
+                        }
+                        if (!is.instance(camera))
+                            camera = prepare(camera, { store });
+                        stateToUpdate.camera = camera;
+                        // Configure raycaster
+                        // https://github.com/pmndrs/react-xr/issues/300
+                        raycaster.camera = camera;
+                    }
+                    // Set up scene (one time only!)
+                    if (!state.scene) {
+                        let scene;
+                        if (sceneOptions instanceof Scene) {
+                            scene = sceneOptions;
+                        }
+                        else {
+                            scene = new Scene();
+                            if (sceneOptions)
+                                applyProps(scene, sceneOptions);
+                        }
+                        applyProps(scene, {
+                            setAttribute: (name, value) => {
+                                if (canvas instanceof HTMLCanvasElement) {
+                                    if (canvas.parentElement) {
+                                        canvas.parentElement.setAttribute(name, value);
+                                    }
+                                    else {
+                                        canvas.setAttribute(name, value);
+                                    }
+                                }
+                            },
+                        });
+                        stateToUpdate.scene = prepare(scene, { store });
+                    }
+                    // Set up XR (one time only!)
+                    if (!state.xr) {
+                        // Handle frame behavior in WebXR
+                        const handleXRFrame = (timestamp, frame) => {
+                            const state = store.snapshot;
+                            if (state.frameloop === 'never')
+                                return;
+                            loop.advance(timestamp, true, store, frame);
+                        };
+                        // Toggle render switching on session
+                        const handleSessionChange = () => {
+                            const state = store.snapshot;
+                            state.gl.xr.enabled = state.gl.xr.isPresenting;
+                            state.gl.xr.setAnimationLoop(state.gl.xr.isPresenting ? handleXRFrame : null);
+                            if (!state.gl.xr.isPresenting)
+                                loop.invalidate(store);
+                        };
+                        // WebXR session manager
+                        const xr = {
+                            connect: () => {
+                                gl.xr.addEventListener('sessionstart', handleSessionChange);
+                                gl.xr.addEventListener('sessionend', handleSessionChange);
+                            },
+                            disconnect: () => {
+                                gl.xr.removeEventListener('sessionstart', handleSessionChange);
+                                gl.xr.removeEventListener('sessionend', handleSessionChange);
+                            },
+                        };
+                        // Subscribe to WebXR session events
+                        if (gl.xr && typeof gl.xr.addEventListener === 'function')
+                            xr.connect();
+                        stateToUpdate.xr = xr;
+                    }
+                    // Set shadowmap
+                    if (gl.shadowMap) {
+                        const oldEnabled = gl.shadowMap.enabled;
+                        const oldType = gl.shadowMap.type;
+                        gl.shadowMap.enabled = !!shadows;
+                        if (typeof shadows === 'boolean') {
+                            gl.shadowMap.type = PCFSoftShadowMap;
+                        }
+                        else if (typeof shadows === 'string') {
+                            const types = {
+                                basic: BasicShadowMap,
+                                percentage: PCFShadowMap,
+                                soft: PCFSoftShadowMap,
+                                variance: VSMShadowMap,
+                            };
+                            gl.shadowMap.type = types[shadows] ?? PCFSoftShadowMap;
+                        }
+                        else if (is.obj(shadows)) {
+                            Object.assign(gl.shadowMap, shadows);
+                        }
+                        if (oldEnabled !== gl.shadowMap.enabled || oldType !== gl.shadowMap.type)
+                            checkNeedsUpdate(gl.shadowMap);
+                    }
+                    // Safely set color management if available.
+                    // Avoid accessing ColorManagement to play nice with older versions
+                    if (ColorManagement) {
+                        const colorManagement = ColorManagement;
+                        if ('enabled' in colorManagement)
+                            colorManagement['enabled'] = !legacy ?? false;
+                        else if ('legacyMode' in colorManagement)
+                            colorManagement['legacyMode'] = legacy ?? true;
+                    }
+                    if (!isConfigured) {
+                        // set color space and tonemapping preferences once
+                        const LinearEncoding = 3000;
+                        const sRGBEncoding = 3001;
+                        applyProps(gl, {
+                            outputEncoding: linear ? LinearEncoding : sRGBEncoding,
+                            toneMapping: flat ? NoToneMapping : ACESFilmicToneMapping,
+                        });
+                    }
+                    // Update color management state
+                    if (state.legacy !== legacy)
+                        stateToUpdate.legacy = legacy;
+                    if (state.linear !== linear)
+                        stateToUpdate.linear = linear;
+                    if (state.flat !== flat)
+                        stateToUpdate.flat = flat;
+                    // Set gl props
+                    gl.setClearAlpha(0);
+                    gl.setPixelRatio(makeDpr(state.viewport.dpr));
+                    gl.setSize(state.size.width, state.size.height);
+                    if (is.obj(glOptions) &&
+                        !(typeof glOptions === 'function') &&
+                        !is.renderer(glOptions) &&
+                        !is.equ(glOptions, gl, shallowLoose)) {
+                        applyProps(gl, glOptions);
+                    }
+                    // Store events internally
+                    if (events && !state.events.handlers)
+                        stateToUpdate.events = events(store);
+                    // Check performance
+                    if (performance && !is.equ(performance, state.performance, shallowLoose)) {
+                        stateToUpdate.performance = { ...state.performance, ...performance };
+                    }
+                    if (Object.keys(stateToUpdate).length) {
+                        store.update(stateToUpdate);
+                    }
+                    // Check size, allow it to take on container bounds initially
+                    const size = computeInitialSize(canvas, sizeOptions);
+                    if (!is.equ(size, state.size, shallowLoose)) {
+                        state.setSize(size.width, size.height, size.top, size.left);
+                    }
+                    // Check pixelratio
+                    if (dpr && state.viewport.dpr !== makeDpr(dpr))
+                        state.setDpr(dpr);
+                    // Check frameloop
+                    if (state.frameloop !== frameloop)
+                        state.setFrameloop(frameloop);
+                    isConfigured = true;
+                },
+            };
+        };
+    });
+}
+function computeInitialSize(canvas, defaultSize) {
+    if (defaultSize) {
+        return defaultSize;
     }
-    get data() {
-        return this.delegate.data;
+    if (typeof HTMLCanvasElement !== 'undefined' && canvas instanceof HTMLCanvasElement && canvas.parentElement) {
+        return canvas.parentElement.getBoundingClientRect();
+    }
+    if (typeof OffscreenCanvas !== 'undefined' && canvas instanceof OffscreenCanvas) {
+        return { width: canvas.width, height: canvas.height, top: 0, left: 0 };
     }
+    return { width: 0, height: 0, top: 0, left: 0 };
 }
-function provideNgtRenderer(store) {
-    const providers = [
-        NgtRendererFactory,
-        { provide: RendererFactory2, useExisting: NgtRendererFactory },
-        provideStore(() => store),
-    ];
-    return makeEnvironmentProviders(providers);
+// Disposes an object and all its properties
+function dispose(obj) {
+    if (obj.dispose && obj.type !== 'Scene')
+        obj.dispose();
+    for (const p in obj) {
+        p.dispose?.();
+        delete obj[p];
+    }
 }
 
 var _a$1;
@@ -2514,6 +2514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: () => [] });
+const injectRoot = injectCanvasRootInitializer;
 
 var _a;
 const NGT_HTML_DOM_ELEMENT = new InjectionToken('NGT_HTML_DOM_ELEMENT');
@@ -2971,5 +2972,5 @@ function vector3(inputOrOptions, keyOrKeepUndefined, keepUndefined) {
  * Generated bundle index. Do not edit.
  */
 
-export { HTML, NGT_STORE, NgtArgs, NgtCanvas, NgtHTML, NgtPortal, NgtPortalContent, NgtRenderer, NgtRendererFactory, NgtRoutedScene, ROUTED_SCENE, addAfterEffect, addEffect, addTail, applyProps, checkNeedsUpdate, checkUpdate, createAttachFunction, extend, getLocalState, injectBeforeRender, injectCanvasRootInitializer, injectLoader, injectObjectEvents, injectStore, invalidateInstance, is, makeCameraInstance, makeDpr, makeId, makeObjectGraph, makeRendererInstance, merge, omit, pick, prepare, provideHTMLDomElement, provideNgtRenderer, provideStore, resolveRef, signalStore, updateCamera, vector2, vector3 };
+export { HTML, NGT_STORE, NgtArgs, NgtCanvas, NgtHTML, NgtPortal, NgtPortalBeforeRender, NgtPortalContent, NgtRenderer, NgtRendererFactory, NgtRoutedScene, ROUTED_SCENE, addAfterEffect, addEffect, addTail, applyProps, attach, checkNeedsUpdate, checkUpdate, createAttachFunction, detach, dispose, extend, flushGlobalEffects, getLocalState, injectBeforeRender, injectCanvasRootInitializer, injectLoader, injectLoop, injectObjectEvents, injectRoot, injectStore, invalidateInstance, is, makeCameraInstance, makeDpr, makeId, makeObjectGraph, makeRendererInstance, merge, omit, pick, prepare, privateKeys, provideHTMLDomElement, provideNgtRenderer, provideStore, resolveRef, roots, signalStore, updateCamera, vector2, vector3 };
 //# sourceMappingURL=angular-three.mjs.map