fix(soba): make fbo return a Signal instead of NgtInjectedRef

Author: nartc

libs/soba/cameras/src/camera/camera.ts

@@ -44,7 +44,7 @@ export abstract class NgtsCamera<TCamera extends NgtCamera> {
 	private cameraResolution = this.inputs.select('resolution');
 
 	protected store = injectNgtStore();
-	protected fboRef = injectNgtsFBO(() => ({ width: this.cameraResolution() }));
+	protected fbo = injectNgtsFBO(() => ({ width: this.cameraResolution() }));
 
 	constructor() {
 		this.setDefaultCamera();

libs/soba/cameras/src/orthographic-camera/orthographic-camera.ts

@@ -41,7 +41,7 @@ declare global {
 			/>
 		</ngt-orthographic-camera>
 		<ngt-group #group *ngIf="cameraContent && cameraContent.ngtsCameraContent">
-			<ng-container *ngTemplateOutlet="cameraContent.template; context: { fbo: fboRef.nativeElement, group }" />
+			<ng-container *ngTemplateOutlet="cameraContent.template; context: { fbo: fbo(), group }" />
 		</ngt-group>
 	`,
 	imports: [NgIf, NgTemplateOutlet],

libs/soba/cameras/src/perspective-camera/perspective-camera.ts

@@ -27,7 +27,7 @@ declare global {
 			/>
 		</ngt-perspective-camera>
 		<ngt-group #group *ngIf="cameraContent && cameraContent.ngtsCameraContent">
-			<ng-container *ngTemplateOutlet="cameraContent.template; context: { fbo: fboRef.nativeElement, group }" />
+			<ng-container *ngTemplateOutlet="cameraContent.template; context: { fbo: fbo(), group }" />
 		</ngt-group>
 	`,
 	imports: [NgIf, NgTemplateOutlet],

libs/soba/materials/src/mesh-transmission-material/mesh-transmission-material.ts

@@ -74,7 +74,7 @@ declare global {
 			ngtCompound
 			*args="[samples(), transmissionSampler()]"
 			[ref]="materialRef"
-			[buffer]="buffer() || fboMainRef.nativeElement?.texture"
+			[buffer]="buffer() || fboMainRef()?.texture"
 			[_transmission]="transmission()"
 			[transmission]="transmissionSampler() ? transmission() : 0"
 			[thickness]="thickness()"
@@ -227,10 +227,7 @@ export class NgtsMeshTranmissionMaterial {
 
 			this.materialRef.nativeElement.time = state.clock.getElapsedTime();
 			// Render only if the buffer matches the built-in and no transmission sampler is set
-			if (
-				this.materialRef.nativeElement.buffer === this.fboMainRef.nativeElement?.texture &&
-				!transmissionSampler
-			) {
+			if (this.materialRef.nativeElement.buffer === this.fboMainRef()?.texture && !transmissionSampler) {
 				parent = getLocalState(this.materialRef.nativeElement).parent?.() as THREE.Object3D;
 				if (parent) {
 					// Save defaults
@@ -246,22 +243,22 @@ export class NgtsMeshTranmissionMaterial {
 
 					if (backside) {
 						// Render into the backside buffer
-						state.gl.setRenderTarget(this.fboBackRef.nativeElement);
+						state.gl.setRenderTarget(this.fboBackRef());
 						state.gl.render(state.scene, state.camera);
 						// And now prepare the material for the main render using the backside buffer
 						(parent as NgtAnyRecord)['material'] = this.materialRef.nativeElement;
-						(parent as NgtAnyRecord)['material'].buffer = this.fboBackRef.nativeElement?.texture;
+						(parent as NgtAnyRecord)['material'].buffer = this.fboBackRef()?.texture;
 						(parent as NgtAnyRecord)['material'].thickness = backsideThickness;
 						(parent as NgtAnyRecord)['material'].side = THREE.BackSide;
 					}
 
 					// Render into the main buffer
-					state.gl.setRenderTarget(this.fboMainRef.nativeElement);
+					state.gl.setRenderTarget(this.fboMainRef());
 					state.gl.render(state.scene, state.camera);
 
 					(parent as NgtAnyRecord)['material'].thickness = thickness;
 					(parent as NgtAnyRecord)['material'].side = this.side;
-					(parent as NgtAnyRecord)['material'].buffer = this.fboMainRef.nativeElement?.texture;
+					(parent as NgtAnyRecord)['material'].buffer = this.fboMainRef()?.texture;
 
 					// Set old state back
 					state.scene.background = oldBg;

libs/soba/misc/src/caustics/caustics.ts

@@ -118,11 +118,11 @@ declare global {
 			<ngt-mesh [renderOrder]="2" [ref]="planeRef" [rotation]="[-Math.PI / 2, 0, 0]">
 				<ngt-plane-geometry />
 				<ngt-caustics-projection-material
-					*ngIf="causticsTargetFbo.nativeElement && causticsTargetBFbo.nativeElement"
+					*ngIf="causticsTargetFbo() as targetFbo && causticsTargetBFbo() as targetBFbo"
 					[transparent]="true"
 					[color]="color()"
-					[causticsTexture]="causticsTargetFbo.nativeElement.texture"
-					[causticsTextureB]="causticsTargetBFbo.nativeElement.texture"
+					[causticsTexture]="targetFbo.texture"
+					[causticsTextureB]="targetBFbo.texture"
 					[blending]="CustomBlending"
 					[blendSrc]="OneFactor"
 					[blendDst]="SrcAlphaFactor"
@@ -278,10 +278,10 @@ export class NgtsCaustics {
 				this.causticsRef.nativeElement,
 				this.sceneRef.nativeElement,
 				this.cameraRef.nativeElement,
-				this.normalTargetFbo.nativeElement,
-				this.normalTargetBFbo.nativeElement,
-				this.causticsTargetFbo.nativeElement,
-				this.causticsTargetBFbo.nativeElement,
+				this.normalTargetFbo(),
+				this.normalTargetBFbo(),
+				this.causticsTargetFbo(),
+				this.causticsTargetBFbo(),
 				this.planeRef.nativeElement,
 				this.sceneChildren(),
 				this.planeChildren(),

libs/soba/misc/src/depth-buffer/depth-buffer.ts

@@ -1,5 +1,14 @@
-import { ChangeDetectorRef, computed, effect, inject, runInInjectionContext, type Injector } from '@angular/core';
-import { injectBeforeRender, injectNgtRef, injectNgtStore, safeDetectChanges } from 'angular-three';
+import {
+	ChangeDetectorRef,
+	computed,
+	effect,
+	inject,
+	runInInjectionContext,
+	signal,
+	untracked,
+	type Injector,
+} from '@angular/core';
+import { injectBeforeRender, injectNgtStore, safeDetectChanges } from 'angular-three';
 import { assertInjector } from 'ngxtension/assert-injector';
 import * as THREE from 'three';
 import { injectNgtsFBO } from '../fbo/fbo';
@@ -15,29 +24,34 @@ export function injectNgtsDepthBuffer(
 ) {
 	injector = assertInjector(injectNgtsDepthBuffer, injector);
 	return runInInjectionContext(injector, () => {
-		const depthBufferRef = injectNgtRef<THREE.DepthTexture | null>(null);
+		const depthBufferSignal = signal<THREE.DepthTexture | null>(null);
 		const store = injectNgtStore();
 		const cdr = inject(ChangeDetectorRef);
 
-		const size = store.select('size');
-		const dpr = store.select('viewport', 'dpr');
+		const [defaultWidth, defaultHeight, dpr] = [
+			store.select('size', 'width'),
+			store.select('size', 'height'),
+			store.select('viewport', 'dpr'),
+		];
 
 		const fboParams = computed(() => {
 			const params = { size: 256, frames: Infinity, ...paramsFactory() };
-			const width = params.size || size().width * dpr();
-			const height = params.size || size().height * dpr();
+			const width = params.size || defaultWidth() * dpr();
+			const height = params.size || defaultHeight() * dpr();
 			const depthTexture = new THREE.DepthTexture(width, height);
 			depthTexture.format = THREE.DepthFormat;
 			depthTexture.type = THREE.UnsignedShortType;
 			return { width, height, settings: { depthTexture } };
 		});
 
-		const fboRef = injectNgtsFBO(fboParams, { injector });
+		const _fbo = injectNgtsFBO(fboParams, { injector });
 
 		effect(() => {
-			const fbo = fboRef.nativeElement;
+			const fbo = _fbo();
 			if (fbo) {
-				depthBufferRef.nativeElement = fbo.depthTexture;
+				untracked(() => {
+					depthBufferSignal.set(fbo.depthTexture);
+				});
 				safeDetectChanges(cdr);
 			}
 		});
@@ -46,7 +60,7 @@ export function injectNgtsDepthBuffer(
 		injectBeforeRender(
 			({ gl, scene, camera }) => {
 				const params = { size: 256, frames: Infinity, ...paramsFactory() };
-				const fbo = fboRef.untracked;
+				const fbo = _fbo();
 				if ((params.frames === Infinity || count < params.frames) && fbo) {
 					gl.setRenderTarget(fbo);
 					gl.render(scene, camera);
@@ -57,6 +71,6 @@ export function injectNgtsDepthBuffer(
 			{ injector },
 		);
 
-		return depthBufferRef;
+		return depthBufferSignal.asReadonly();
 	});
 }

libs/soba/misc/src/fbo/fbo.ts

@@ -5,9 +5,11 @@ import {
 	effect,
 	inject,
 	runInInjectionContext,
+	signal,
+	untracked,
 	type Injector,
 } from '@angular/core';
-import { injectNgtRef, injectNgtStore, safeDetectChanges } from 'angular-three';
+import { injectNgtStore, safeDetectChanges } from 'angular-three';
 import { assertInjector } from 'ngxtension/assert-injector';
 import * as THREE from 'three';
 
@@ -30,37 +32,41 @@ export function injectNgtsFBO(fboParams: () => NgtsFBOParams, { injector }: { in
 		const store = injectNgtStore();
 		const cdr = inject(ChangeDetectorRef);
 
-		const targetRef = injectNgtRef<THREE.WebGLRenderTarget | null>(null);
+		const targetSignal = signal<THREE.WebGLRenderTarget | null>(null);
 
-		inject(DestroyRef).onDestroy(() => targetRef.nativeElement?.dispose());
+		inject(DestroyRef).onDestroy(() => targetSignal()?.dispose());
 
-		const size = store.select('size');
-		const dpr = store.select('viewport', 'dpr');
+		const [defaultWidth, defaultHeight, dpr] = [
+			store.select('size', 'width'),
+			store.select('size', 'height'),
+			store.select('viewport', 'dpr'),
+		];
 		const fboSettings = computed(() => {
 			const { width, height, settings } = fboParams();
-			const _width = typeof width === 'number' ? width : size().width * dpr();
-			const _height = typeof height === 'number' ? height : size().height * dpr();
-			const _settings = (typeof width === 'number' ? settings : (width as FBOSettings)) || {};
-
-			return { width: _width, height: _height, settings: _settings };
+			return [
+				typeof width === 'number' ? width : defaultWidth() * dpr(),
+				typeof height === 'number' ? height : defaultHeight() * dpr(),
+				(typeof width === 'number' ? settings : (width as FBOSettings)) || {},
+			] as const;
 		});
 
 		effect(() => {
-			const { width, height, settings } = fboSettings();
-			const { samples = 0, depth, ...targetSettings } = settings;
-			let untrackedTarget = targetRef.untracked;
+			const [width, height, { samples = 0, depth, ...settings }] = fboSettings();
+			let untrackedTarget = untracked(targetSignal);
 			if (!untrackedTarget) {
 				const target = new THREE.WebGLRenderTarget(width, height, {
 					minFilter: THREE.LinearFilter,
 					magFilter: THREE.LinearFilter,
 					type: THREE.HalfFloatType,
-					...targetSettings,
+					...settings,
 				});
 				if (depth) target.depthTexture = new THREE.DepthTexture(width, height, THREE.FloatType);
 
 				target.samples = samples;
-				targetRef.nativeElement = target;
-				untrackedTarget = targetRef.untracked;
+				untracked(() => {
+					targetSignal.set(target);
+				});
+				untrackedTarget = untracked(targetSignal);
 			}
 
 			if (untrackedTarget) {
@@ -70,6 +76,6 @@ export function injectNgtsFBO(fboParams: () => NgtsFBOParams, { injector }: { in
 			}
 		});
 
-		return targetRef;
+		return targetSignal.asReadonly();
 	});
 }