angular-three-soba 2.0.0-beta.26 → 2.0.0-beta.261

package/fesm2022/angular-three-soba-cameras.mjs

@@ -1,394 +1,347 @@
 import * as i0 from '@angular/core';
-import { inject, TemplateRef, Directive, Input, runInInjectionContext, computed, effect, untracked, DestroyRef, ViewContainerRef, Component, CUSTOM_ELEMENTS_SCHEMA, ContentChild, ViewChild } from '@angular/core';
-import * as THREE from 'three';
-import { Group, OrthographicCamera, PerspectiveCamera } from 'three';
-import { NgTemplateOutlet, NgIf } from '@angular/common';
-import { assertInjectionContext, injectNgtStore, extend, signalStore, injectNgtRef, injectBeforeRender, NgtArgs } from 'angular-three';
-import { injectNgtsFBO } from 'angular-three-soba/misc';
+import { Directive, computed, untracked, input, viewChild, contentChild, TemplateRef, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, afterNextRender } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { injectStore, merge, pick, omit, extend, injectBeforeRender, NgtArgs } from 'angular-three';
+import { assertInjector } from 'ngxtension/assert-injector';
+import { injectAutoEffect } from 'ngxtension/auto-effect';
+import { mergeInputs } from 'ngxtension/inject-inputs';
+import { WebGLCubeRenderTarget, HalfFloatType, CubeCamera, Group, OrthographicCamera, PerspectiveCamera } from 'three';
+import { injectFBO } from 'angular-three-soba/misc';
 
 class NgtsCameraContent {
-    constructor() {
-        this.template = inject(TemplateRef);
-        this.ngtsCameraContent = '';
-    }
     static ngTemplateContextGuard(_, ctx) {
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsCameraContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.2", type: NgtsCameraContent, isStandalone: true, selector: "ng-template[ngtsCameraContent]", inputs: { ngtsCameraContent: "ngtsCameraContent" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NgtsCameraContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: NgtsCameraContent, isStandalone: true, selector: "ng-template[cameraContent]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsCameraContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NgtsCameraContent, decorators: [{
             type: Directive,
-            args: [{ selector: 'ng-template[ngtsCameraContent]', standalone: true }]
-        }], propDecorators: { ngtsCameraContent: [{
-                type: Input
-            }] } });
+            args: [{ standalone: true, selector: 'ng-template[cameraContent]' }]
+        }] });
 
-const defaultCubeCameraState = {
-    resolution: 256,
-    near: 0.1,
-    far: 1000,
-};
-function injectNgtsCubeCamera(cubeCameraState, { injector } = {}) {
-    injector = assertInjectionContext(injectNgtsCubeCamera, injector);
-    return runInInjectionContext(injector, () => {
-        const state = computed(() => ({ ...defaultCubeCameraState, ...cubeCameraState() }));
-        const resolution = computed(() => state().resolution);
-        const near = computed(() => state().near);
-        const far = computed(() => state().far);
-        const store = injectNgtStore();
-        const _gl = store.select('gl');
-        const _scene = store.select('scene');
-        const _fbo = computed(() => {
-            const renderTarget = new THREE.WebGLCubeRenderTarget(resolution());
-            renderTarget.texture.type = THREE.HalfFloatType;
-            return renderTarget;
+function injectCubeCamera(options, { injector } = {}) {
+    return assertInjector(injectCubeCamera, injector, () => {
+        const autoEffect = injectAutoEffect();
+        const store = injectStore();
+        const gl = store.select('gl');
+        const scene = store.select('scene');
+        // backfill the options with default values
+        const mergedOptions = merge(options, { resolution: 256, near: 0.1, far: 1000 }, 'backfill');
+        const resolution = pick(mergedOptions, 'resolution');
+        const near = pick(mergedOptions, 'near');
+        const far = pick(mergedOptions, 'far');
+        const fbo = computed(() => {
+            const fbo = new WebGLCubeRenderTarget(resolution());
+            fbo.texture.type = HalfFloatType;
+            return fbo;
+        });
+        autoEffect(() => {
+            const _fbo = fbo();
+            return () => {
+                _fbo.dispose();
+            };
         });
-        effect((onCleanup) => {
-            const fbo = _fbo();
-            onCleanup(() => fbo.dispose());
+        const camera = computed(() => {
+            return new CubeCamera(near(), far(), fbo());
         });
-        const _camera = computed(() => new THREE.CubeCamera(near(), far(), _fbo()));
-        let originalFog;
-        let originalBackground;
         const update = computed(() => {
-            const [scene, gl, camera, { envMap, fog }] = [_scene(), _gl(), _camera(), untracked(state)];
+            const [_scene, _gl, _camera, { envMap, fog }] = [scene(), gl(), camera(), untracked(mergedOptions)];
+            let originalFog;
+            let originalBackground;
             return () => {
-                originalFog = scene.fog;
-                originalBackground = scene.background;
-                scene.background = envMap || originalBackground;
-                scene.fog = fog || originalFog;
-                camera.update(gl, scene);
-                scene.fog = originalFog;
-                scene.background = originalBackground;
+                originalFog = _scene.fog;
+                originalBackground = _scene.background;
+                _scene.background = envMap || originalBackground;
+                _scene.fog = fog || originalFog;
+                _camera.update(_gl, _scene);
+                _scene.fog = originalFog;
+                _scene.background = originalBackground;
             };
         });
-        return { fbo: _fbo, camera: _camera, update };
+        return { fbo, camera, update };
     });
 }
-extend({ Group });
-class NgtsCubeCameraContent {
-    static ngTemplateContextGuard(_, ctx) {
-        return true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsCubeCameraContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.2", type: NgtsCubeCameraContent, isStandalone: true, selector: "ng-template[ngtsCubeCameraContent]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsCubeCameraContent, decorators: [{
-            type: Directive,
-            args: [{ selector: 'ng-template[ngtsCubeCameraContent]', standalone: true }]
-        }] });
+const defaultOptions$2 = {
+    frames: Infinity,
+    resolution: 256,
+    near: 0.1,
+    far: 1000,
+};
 class NgtsCubeCamera {
-    /** Resolution of the FBO, 256 */
-    set _resolution(resolution) {
-        this.inputs.set({ resolution });
-    }
-    /** Camera near, 0.1 */
-    set _near(near) {
-        this.inputs.set({ near });
-    }
-    /** Camera far, 1000 */
-    set _far(far) {
-        this.inputs.set({ far });
-    }
-    /** Custom environment map that is temporarily set as the scenes background */
-    set _envMap(envMap) {
-        this.inputs.set({ envMap });
-    }
-    /** Custom fog that is temporarily set as the scenes fog */
-    set _fog(fog) {
-        this.inputs.set({ fog });
-    }
     constructor() {
-        this.inputs = signalStore({ frames: Infinity });
-        this.cameraRef = injectNgtRef();
-        this.cubeCamera = injectNgtsCubeCamera(this.inputs.state);
-        this.texture = computed(() => this.cubeCamera.fbo().texture);
-        this.beforeRender();
-        inject(DestroyRef).onDestroy(() => {
-            this.contentRef?.destroy();
-        });
-    }
-    ngOnInit() {
-        this.contentRef = this.anchor.createEmbeddedView(this.cameraContent, { texture: this.texture });
-    }
-    beforeRender() {
+        this.options = input(defaultOptions$2, { transform: mergeInputs(defaultOptions$2) });
+        this.parameters = omit(this.options, ['fog', 'near', 'far', 'envMap', 'resolution', 'frames']);
+        this.cubeCamera = injectCubeCamera(pick(this.options, ['near', 'far', 'envMap', 'fog', 'resolution']));
+        this.camera = this.cubeCamera.camera;
+        this.texture = pick(this.cubeCamera.fbo, 'texture');
+        this.group = viewChild.required('group');
+        this.cameraContent = contentChild(NgtsCameraContent, { read: TemplateRef });
+        extend({ Group });
         let count = 0;
         injectBeforeRender(() => {
-            const camera = this.cameraRef.nativeElement;
-            if (!camera)
+            const group = this.group().nativeElement;
+            if (!group)
                 return;
+            const frames = this.options().frames;
             const update = this.cubeCamera.update();
-            const frames = this.inputs.get('frames');
             if (frames === Infinity || count < frames) {
-                camera.visible = false;
+                group.visible = false;
                 update();
-                camera.visible = true;
+                group.visible = true;
                 count++;
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsCubeCamera, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtsCubeCamera, isStandalone: true, selector: "ngts-cube-camera", inputs: { cameraRef: "cameraRef", _resolution: ["resolution", "_resolution"], _near: ["near", "_near"], _far: ["far", "_far"], _envMap: ["envMap", "_envMap"], _fog: ["fog", "_fog"] }, queries: [{ propertyName: "cameraContent", first: true, predicate: NgtsCubeCameraContent, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
-		<ngt-group ngtCompound>
-			<ngt-primitive *args="[cubeCamera.camera()]" />
-			<ngt-group [ref]="cameraRef">
-				<ng-container #anchor />
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NgtsCubeCamera, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.1.0", type: NgtsCubeCamera, isStandalone: true, selector: "ngts-cube-camera", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "cameraContent", first: true, predicate: NgtsCameraContent, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "group", first: true, predicate: ["group"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-group [parameters]="parameters()">
+			<ngt-primitive *args="[camera()]" />
+			<ngt-group #group>
+				<ng-container [ngTemplateOutlet]="cameraContent() ?? null" [ngTemplateOutletContext]="{ $implicit: texture }" />
 			</ngt-group>
 		</ngt-group>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsCubeCamera, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NgtsCubeCamera, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-cube-camera',
                     standalone: true,
                     template: `
-		<ngt-group ngtCompound>
-			<ngt-primitive *args="[cubeCamera.camera()]" />
-			<ngt-group [ref]="cameraRef">
-				<ng-container #anchor />
+		<ngt-group [parameters]="parameters()">
+			<ngt-primitive *args="[camera()]" />
+			<ngt-group #group>
+				<ng-container [ngTemplateOutlet]="cameraContent() ?? null" [ngTemplateOutletContext]="{ $implicit: texture }" />
 			</ngt-group>
 		</ngt-group>
 	`,
                     imports: [NgtArgs, NgTemplateOutlet],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { cameraRef: [{
-                type: Input
-            }], cameraContent: [{
-                type: ContentChild,
-                args: [NgtsCubeCameraContent, { static: true, read: TemplateRef }]
-            }], anchor: [{
-                type: ViewChild,
-                args: ['anchor', { static: true, read: ViewContainerRef }]
-            }], _resolution: [{
-                type: Input,
-                args: [{ alias: 'resolution' }]
-            }], _near: [{
-                type: Input,
-                args: [{ alias: 'near' }]
-            }], _far: [{
-                type: Input,
-                args: [{ alias: 'far' }]
-            }], _envMap: [{
-                type: Input,
-                args: [{ alias: 'envMap' }]
-            }], _fog: [{
-                type: Input,
-                args: [{ alias: 'fog' }]
-            }] } });
+        }], ctorParameters: () => [] });
 
-class NgtsCamera {
-    set _makeDefault(makeDefault) {
-        this.inputs.set({ makeDefault });
-    }
-    set _manual(manual) {
-        this.inputs.set({ manual });
-    }
-    set _frames(frames) {
-        this.inputs.set({ frames });
-    }
-    set _resolution(resolution) {
-        this.inputs.set({ resolution });
-    }
-    set _envMap(envMap) {
-        this.inputs.set({ envMap });
-    }
+extend({ OrthographicCamera, Group });
+const defaultOptions$1 = {
+    frames: Infinity,
+    resolution: 256,
+    makeDefault: false,
+    manual: false,
+};
+class NgtsOrthographicCamera {
     constructor() {
-        this.inputs = signalStore({
-            resolution: 256,
-            frames: Infinity,
-            makeDefault: false,
-            manual: false,
+        this.options = input(defaultOptions$1, { transform: mergeInputs(defaultOptions$1) });
+        this.parameters = omit(this.options, [
+            'envMap',
+            'makeDefault',
+            'manual',
+            'frames',
+            'resolution',
+            'left',
+            'top',
+            'bottom',
+            'right',
+        ]);
+        this.content = contentChild(TemplateRef);
+        this.cameraContent = contentChild(NgtsCameraContent, { read: TemplateRef });
+        this.cameraRef = viewChild.required('camera');
+        this.groupRef = viewChild.required('group');
+        this.autoEffect = injectAutoEffect();
+        this.store = injectStore();
+        this.camera = this.store.select('camera');
+        this.size = this.store.select('size');
+        this.left = computed(() => this.options().left ?? this.size().width / -2);
+        this.right = computed(() => this.options().right ?? this.size().width / 2);
+        this.top = computed(() => this.options().top ?? this.size().height / 2);
+        this.bottom = computed(() => this.options().bottom ?? this.size().height / -2);
+        this.manual = pick(this.options, 'manual');
+        this.makeDefault = pick(this.options, 'makeDefault');
+        this.resolution = pick(this.options, 'resolution');
+        this.fbo = injectFBO(() => ({ width: this.resolution() }));
+        this.texture = pick(this.fbo, 'texture');
+        afterNextRender(() => {
+            this.autoEffect(() => {
+                if (!this.manual()) {
+                    this.cameraRef().nativeElement.updateProjectionMatrix();
+                }
+            });
+            this.autoEffect(() => {
+                if (this.makeDefault()) {
+                    const oldCam = untracked(this.camera);
+                    this.store.update({ camera: this.cameraRef().nativeElement });
+                    return () => this.store.update(() => ({ camera: oldCam }));
+                }
+                return;
+            });
+            this.cameraRef().nativeElement.updateProjectionMatrix();
         });
-        this.cameraRef = injectNgtRef();
-        this.cameraResolution = this.inputs.select('resolution');
-        this.store = injectNgtStore();
-        this.fboRef = injectNgtsFBO(() => ({ width: this.cameraResolution() }));
-        this.setDefaultCamera();
-        this.updateProjectionMatrix();
-    }
-    setDefaultCamera() {
-        const makeDefault = this.inputs.select('makeDefault');
-        effect((onCleanup) => {
-            const camera = this.cameraRef.nativeElement;
-            if (camera && makeDefault()) {
-                const { camera: oldCamera } = this.store.get();
-                this.store.set({ camera });
-                onCleanup(() => this.store.set({ camera: oldCamera }));
+        let count = 0;
+        let oldEnvMap = null;
+        injectBeforeRender(({ gl, scene }) => {
+            const [{ frames, envMap }, group, camera, fbo] = [
+                this.options(),
+                this.groupRef().nativeElement,
+                this.cameraRef().nativeElement,
+                this.fbo(),
+            ];
+            if (this.cameraContent() && group && camera && fbo && (frames === Infinity || count < frames)) {
+                group.visible = false;
+                gl.setRenderTarget(fbo);
+                oldEnvMap = scene.background;
+                if (envMap)
+                    scene.background = envMap;
+                gl.render(scene, camera);
+                scene.background = oldEnvMap;
+                gl.setRenderTarget(null);
+                group.visible = true;
+                count++;
             }
         });
     }
-    updateProjectionMatrix() {
-        const manual = this.inputs.select('manual');
-        effect(() => {
-            const camera = this.cameraRef.nativeElement;
-            if (!manual() && camera)
-                camera.updateProjectionMatrix();
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsCamera, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.2", type: NgtsCamera, inputs: { _makeDefault: ["makeDefault", "_makeDefault"], _manual: ["manual", "_manual"], _frames: ["frames", "_frames"], _resolution: ["resolution", "_resolution"], _envMap: ["envMap", "_envMap"], cameraRef: "cameraRef" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsCamera, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return []; }, propDecorators: { _makeDefault: [{
-                type: Input,
-                args: [{ alias: 'makeDefault' }]
-            }], _manual: [{
-                type: Input,
-                args: [{ alias: 'manual' }]
-            }], _frames: [{
-                type: Input,
-                args: [{ alias: 'frames' }]
-            }], _resolution: [{
-                type: Input,
-                args: [{ alias: 'resolution' }]
-            }], _envMap: [{
-                type: Input,
-                args: [{ alias: 'envMap' }]
-            }], cameraRef: [{
-                type: Input
-            }] } });
-
-extend({ OrthographicCamera, Group });
-class NgtsOrthographicCamera extends NgtsCamera {
-    constructor() {
-        super(...arguments);
-        this.orthographicInputs = signalStore({
-            left: 0,
-            right: 0,
-            top: 0,
-            bottom: 0,
-        });
-        this.left = this.orthographicInputs.select('left');
-        this.right = this.orthographicInputs.select('right');
-        this.top = this.orthographicInputs.select('top');
-        this.bottom = this.orthographicInputs.select('bottom');
-        this.size = this.store.select('size');
-        this.cameraLeft = computed(() => this.left() || this.size().width / -2);
-        this.cameraRight = computed(() => this.right() || this.size().width / 2);
-        this.cameraTop = computed(() => this.top() || this.size().height / 2);
-        this.cameraBottom = computed(() => this.bottom() || this.size().height / -2);
-    }
-    set _left(left) {
-        this.orthographicInputs.set({ left });
-    }
-    set _right(right) {
-        this.orthographicInputs.set({ right });
-    }
-    set _top(top) {
-        this.orthographicInputs.set({ top });
-    }
-    set _bottom(bottom) {
-        this.orthographicInputs.set({ bottom });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsOrthographicCamera, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtsOrthographicCamera, isStandalone: true, selector: "ngts-orthographic-camera", inputs: { _left: ["left", "_left"], _right: ["right", "_right"], _top: ["top", "_top"], _bottom: ["bottom", "_bottom"] }, queries: [{ propertyName: "cameraContent", first: true, predicate: NgtsCameraContent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NgtsOrthographicCamera, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.1.0", type: NgtsOrthographicCamera, isStandalone: true, selector: "ngts-orthographic-camera", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "cameraContent", first: true, predicate: NgtsCameraContent, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "cameraRef", first: true, predicate: ["camera"], descendants: true, isSignal: true }, { propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-orthographic-camera
-			ngtCompound
-			[ref]="cameraRef"
-			[left]="cameraLeft()"
-			[right]="cameraRight()"
-			[top]="cameraTop()"
-			[bottom]="cameraBottom()"
+			#camera
+			[left]="left()"
+			[right]="right()"
+			[top]="top()"
+			[bottom]="bottom()"
+			[parameters]="parameters()"
 		>
-			<ng-container
-				*ngIf="cameraContent && !cameraContent.ngtsCameraContent"
-				[ngTemplateOutlet]="cameraContent.template"
-			/>
+			<ng-container [ngTemplateOutlet]="content() ?? null" />
 		</ngt-orthographic-camera>
-		<ngt-group #group *ngIf="cameraContent && cameraContent.ngtsCameraContent">
-			<ng-container *ngTemplateOutlet="cameraContent.template; context: { fbo: fboRef.nativeElement, group }" />
+
+		<ngt-group #group>
+			<ng-container [ngTemplateOutlet]="cameraContent() ?? null" [ngTemplateOutletContext]="{ $implicit: texture }" />
 		</ngt-group>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsOrthographicCamera, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NgtsOrthographicCamera, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-orthographic-camera',
                     standalone: true,
                     template: `
 		<ngt-orthographic-camera
-			ngtCompound
-			[ref]="cameraRef"
-			[left]="cameraLeft()"
-			[right]="cameraRight()"
-			[top]="cameraTop()"
-			[bottom]="cameraBottom()"
+			#camera
+			[left]="left()"
+			[right]="right()"
+			[top]="top()"
+			[bottom]="bottom()"
+			[parameters]="parameters()"
 		>
-			<ng-container
-				*ngIf="cameraContent && !cameraContent.ngtsCameraContent"
-				[ngTemplateOutlet]="cameraContent.template"
-			/>
+			<ng-container [ngTemplateOutlet]="content() ?? null" />
 		</ngt-orthographic-camera>
-		<ngt-group #group *ngIf="cameraContent && cameraContent.ngtsCameraContent">
-			<ng-container *ngTemplateOutlet="cameraContent.template; context: { fbo: fboRef.nativeElement, group }" />
+
+		<ngt-group #group>
+			<ng-container [ngTemplateOutlet]="cameraContent() ?? null" [ngTemplateOutletContext]="{ $implicit: texture }" />
 		</ngt-group>
 	`,
-                    imports: [NgIf, NgTemplateOutlet],
+                    imports: [NgTemplateOutlet],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { cameraContent: [{
-                type: ContentChild,
-                args: [NgtsCameraContent]
-            }], _left: [{
-                type: Input,
-                args: [{ alias: 'left' }]
-            }], _right: [{
-                type: Input,
-                args: [{ alias: 'right' }]
-            }], _top: [{
-                type: Input,
-                args: [{ alias: 'top' }]
-            }], _bottom: [{
-                type: Input,
-                args: [{ alias: 'bottom' }]
-            }] } });
+        }], ctorParameters: () => [] });
 
 extend({ PerspectiveCamera, Group });
-class NgtsPerspectiveCamera extends NgtsCamera {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsPerspectiveCamera, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtsPerspectiveCamera, isStandalone: true, selector: "ngts-perspective-camera", queries: [{ propertyName: "cameraContent", first: true, predicate: NgtsCameraContent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
-		<ngt-perspective-camera [ref]="cameraRef" ngtCompound>
-			<ng-container
-				*ngIf="cameraContent && !cameraContent.ngtsCameraContent"
-				[ngTemplateOutlet]="cameraContent.template"
-			/>
+const defaultOptions = {
+    frames: Infinity,
+    resolution: 256,
+    makeDefault: false,
+    manual: false,
+};
+class NgtsPerspectiveCamera {
+    constructor() {
+        this.options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
+        this.parameters = omit(this.options, ['envMap', 'makeDefault', 'manual', 'frames', 'resolution']);
+        this.content = contentChild(TemplateRef);
+        this.cameraContent = contentChild(NgtsCameraContent, { read: TemplateRef });
+        this.cameraRef = viewChild.required('camera');
+        this.groupRef = viewChild.required('group');
+        this.autoEffect = injectAutoEffect();
+        this.store = injectStore();
+        this.camera = this.store.select('camera');
+        this.size = this.store.select('size');
+        this.manual = pick(this.options, 'manual');
+        this.makeDefault = pick(this.options, 'makeDefault');
+        this.resolution = pick(this.options, 'resolution');
+        this.fbo = injectFBO(() => ({ width: this.resolution() }));
+        this.texture = pick(this.fbo, 'texture');
+        afterNextRender(() => {
+            this.autoEffect(() => {
+                if (!this.manual()) {
+                    this.cameraRef().nativeElement.aspect = this.size().width / this.size().height;
+                    this.cameraRef().nativeElement.updateProjectionMatrix();
+                }
+            });
+            this.autoEffect(() => {
+                if (this.makeDefault()) {
+                    const oldCam = untracked(this.camera);
+                    this.store.update({ camera: this.cameraRef().nativeElement });
+                    return () => this.store.update(() => ({ camera: oldCam }));
+                }
+                return;
+            });
+            this.cameraRef().nativeElement.updateProjectionMatrix();
+        });
+        let count = 0;
+        let oldEnvMap = null;
+        injectBeforeRender(({ gl, scene }) => {
+            const [{ frames, envMap }, group, camera, fbo] = [
+                this.options(),
+                this.groupRef().nativeElement,
+                this.cameraRef().nativeElement,
+                this.fbo(),
+            ];
+            if (this.cameraContent() && group && camera && fbo && (frames === Infinity || count < frames)) {
+                group.visible = false;
+                gl.setRenderTarget(fbo);
+                oldEnvMap = scene.background;
+                if (envMap)
+                    scene.background = envMap;
+                gl.render(scene, camera);
+                scene.background = oldEnvMap;
+                gl.setRenderTarget(null);
+                group.visible = true;
+                count++;
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NgtsPerspectiveCamera, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.1.0", type: NgtsPerspectiveCamera, isStandalone: true, selector: "ngts-perspective-camera", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "cameraContent", first: true, predicate: NgtsCameraContent, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "cameraRef", first: true, predicate: ["camera"], descendants: true, isSignal: true }, { propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-perspective-camera #camera [parameters]="parameters()">
+			<ng-container [ngTemplateOutlet]="content() ?? null" />
 		</ngt-perspective-camera>
-		<ngt-group #group *ngIf="cameraContent && cameraContent.ngtsCameraContent">
-			<ng-container *ngTemplateOutlet="cameraContent.template; context: { fbo: fboRef.nativeElement, group }" />
+
+		<ngt-group #group>
+			<ng-container [ngTemplateOutlet]="cameraContent() ?? null" [ngTemplateOutletContext]="{ $implicit: texture }" />
 		</ngt-group>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsPerspectiveCamera, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NgtsPerspectiveCamera, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-perspective-camera',
                     standalone: true,
                     template: `
-		<ngt-perspective-camera [ref]="cameraRef" ngtCompound>
-			<ng-container
-				*ngIf="cameraContent && !cameraContent.ngtsCameraContent"
-				[ngTemplateOutlet]="cameraContent.template"
-			/>
+		<ngt-perspective-camera #camera [parameters]="parameters()">
+			<ng-container [ngTemplateOutlet]="content() ?? null" />
 		</ngt-perspective-camera>
-		<ngt-group #group *ngIf="cameraContent && cameraContent.ngtsCameraContent">
-			<ng-container *ngTemplateOutlet="cameraContent.template; context: { fbo: fboRef.nativeElement, group }" />
+
+		<ngt-group #group>
+			<ng-container [ngTemplateOutlet]="cameraContent() ?? null" [ngTemplateOutletContext]="{ $implicit: texture }" />
 		</ngt-group>
 	`,
-                    imports: [NgIf, NgTemplateOutlet],
+                    imports: [NgTemplateOutlet],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { cameraContent: [{
-                type: ContentChild,
-                args: [NgtsCameraContent]
-            }] } });
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgtsCameraContent, NgtsCubeCamera, NgtsCubeCameraContent, NgtsOrthographicCamera, NgtsPerspectiveCamera, injectNgtsCubeCamera };
+export { NgtsCameraContent, NgtsCubeCamera, NgtsOrthographicCamera, NgtsPerspectiveCamera, injectCubeCamera };
 //# sourceMappingURL=angular-three-soba-cameras.mjs.map