docs: update injectFBO usage

Author: nartc

apps/examples/src/app/misc/particle-maxime/scene.ts

@@ -96,7 +96,7 @@ export class FBOParticles {
 		0,
 		1, // top-left
 	]);
-	protected renderTarget = injectFBO(() => ({
+	private renderTarget = injectFBO(() => ({
 		width: this.size,
 		height: this.size,
 		settings: {
@@ -127,15 +127,15 @@ export class FBOParticles {
 
 	constructor() {
 		injectBeforeRender(({ gl, clock }) => {
-			gl.setRenderTarget(this.renderTarget());
+			gl.setRenderTarget(this.renderTarget);
 			gl.clear();
 			gl.render(this.virtualScene, this.virtualCamera);
 			gl.setRenderTarget(null);
 
 			const simulationMaterial = this.simulationMaterialRef()?.nativeElement;
 			if (!simulationMaterial) return;
 
-			this.uniforms['uPositions'].value = this.renderTarget().texture;
+			this.uniforms['uPositions'].value = this.renderTarget.texture;
 			simulationMaterial.uniforms['uFrequency'].value = this.frequency();
 			simulationMaterial.uniforms['uTime'].value = clock.elapsedTime * this.timeScale();
 		});

apps/examples/src/app/soba/bruno-simons-20k/bruno-simons-20k.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgtTweakCheckbox, NgtTweakPane } from 'angular-three-tweakpane';
 import { NgtCanvas } from 'angular-three/dom';
-import { ToggleButton } from '../../toggle-button';
 import { debug, SceneGraph, withN8ao } from './scene';
 
 @Component({
@@ -14,14 +14,14 @@ import { debug, SceneGraph, withN8ao } from './scene';
 			<app-bruno-scene-graph *canvasContent />
 		</ngt-canvas>
 
-		<div class="absolute top-10 right-2 flex gap-2 items-center">
-			<button [(toggleButton)]="debug">Toggle debug</button>
-			<button [(toggleButton)]="withN8ao">Toggle N8ao</button>
-		</div>
+		<ngt-tweak-pane title="Bruno Simons 20k">
+			<ngt-tweak-checkbox [(value)]="debug" label="debug" />
+			<ngt-tweak-checkbox [(value)]="withN8ao" label="withN8ao" />
+		</ngt-tweak-pane>
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: { class: 'bruno-simons-2k-soba' },
-	imports: [NgtCanvas, ToggleButton, SceneGraph],
+	imports: [NgtCanvas, SceneGraph, NgtTweakPane, NgtTweakCheckbox],
 })
 export default class BrunoSimons20k {
 	protected debug = debug;

apps/examples/src/app/soba/inverted-stencil-buffer/angular.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, CUSTOM_ELEMENTS_SCHEMA, effect, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, CUSTOM_ELEMENTS_SCHEMA, input } from '@angular/core';
 import { injectGLTF } from 'angular-three-soba/loaders';
 import { mask } from 'angular-three-soba/staging';
 import { Mesh, MeshPhongMaterial, MeshStandardMaterial } from 'three';
@@ -37,10 +37,4 @@ export class Angular {
 		const stencilParameters = this.stencilParameters();
 		return new MeshPhongMaterial({ color: '#E72BAA', ...stencilParameters });
 	});
-
-	constructor() {
-		effect(() => {
-			console.log(this.gltf());
-		});
-	}
 }

apps/examples/src/app/soba/inverted-stencil-buffer/inverted-stencil-buffer.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgtTweakCheckbox, NgtTweakList, NgtTweakPane } from 'angular-three-tweakpane';
 import { NgtCanvas } from 'angular-three/dom';
 import { SceneGraph, invert, logo } from './scene';
 
@@ -7,35 +8,17 @@ import { SceneGraph, invert, logo } from './scene';
 		<ngt-canvas shadows [gl]="{ stencil: true }">
 			<app-inverted-stencil-buffer-scene-graph *canvasContent />
 		</ngt-canvas>
-		<div
-			class="absolute top-2 right-2 p-4 flex flex-col gap-4 items-center rounded border border-black border-dotted font-mono"
-		>
-			<label class="flex gap-2 items-center">
-				<input type="checkbox" [value]="invert()" (change)="onInvertChange($event)" />
-				invert
-			</label>
-			<select [value]="logo()" (change)="onLogoChange($event)">
-				<option value="angular">Angular</option>
-				<option value="nx">Nx</option>
-				<option value="nx-cloud">Nx Cloud</option>
-			</select>
-		</div>
+
+		<ngt-tweak-pane title="Inverted Stencil Buffer">
+			<ngt-tweak-checkbox [(value)]="invert" label="invert" />
+			<ngt-tweak-list [(value)]="logo" [options]="['angular', 'nx', 'nx-cloud']" label="logo" />
+		</ngt-tweak-pane>
 	`,
 	host: { class: 'inverted-stencil-buffer-soba' },
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [NgtCanvas, SceneGraph],
+	imports: [NgtCanvas, SceneGraph, NgtTweakPane, NgtTweakCheckbox, NgtTweakList],
 })
 export default class InvertedStencilBuffer {
 	protected invert = invert;
 	protected logo = logo;
-
-	onInvertChange(event: Event) {
-		const target = event.target as HTMLInputElement;
-		this.invert.set(target.checked);
-	}
-
-	onLogoChange(event: Event) {
-		const target = event.target as HTMLSelectElement;
-		this.logo.set(target.value as 'angular' | 'nx' | 'nx-cloud');
-	}
 }

apps/examples/src/app/soba/inverted-stencil-buffer/scene.ts

@@ -110,15 +110,13 @@ export class Box {
 				</ngts-float>
 				<ng-container [ngTemplateOutlet]="boxes" />
 			</ngts-bounds>
+			<ngts-orbit-controls [options]="{ makeDefault: true }" />
 		} @else {
 			<ng-container [ngTemplateOutlet]="logos" />
 			<ng-container [ngTemplateOutlet]="boxes" />
 		}
 
 		<ngts-environment [options]="{ preset: 'city' }" />
-		@if (!asRenderTexture()) {
-			<ngts-orbit-controls [options]="{ makeDefault: true }" />
-		}
 
 		<ng-template #logos>
 			@switch (logo()) {

apps/examples/src/app/soba/shoe-configuration/scene.ts

@@ -110,8 +110,9 @@ export class Shoe {
 	});
 
 	constructor() {
-		effect(() => {
+		effect((onCleanup) => {
 			this.document.body.style.cursor = `url('data:image/svg+xml;base64,${this.cursor()}'), auto`;
+			onCleanup(() => (this.document.body.style.cursor = 'auto'));
 		});
 	}
 }

libs/soba/src/cameras/cube-camera.stories.ts

@@ -18,7 +18,7 @@ import { storyDecorators, storyFunction } from '../setup-canvas';
 		<ngts-cube-camera [options]="options()">
 			<ngt-mesh *cameraContent="let texture" #mesh>
 				<ngt-sphere-geometry *args="[5, 64, 64]" />
-				<ngt-mesh-standard-material [roughness]="0" [metalness]="1" [envMap]="texture()" />
+				<ngt-mesh-standard-material [roughness]="0" [metalness]="1" [envMap]="texture" />
 			</ngt-mesh>
 		</ngts-cube-camera>
 	`,

libs/soba/src/materials/mesh-refraction-materials.stories.ts

@@ -49,7 +49,7 @@ injectLoader.preload(
 								[rotation]="rotation()"
 								[position]="position()"
 							>
-								<ngts-mesh-refraction-material [options]="options()" [envMap]="cameraTexture()" />
+								<ngts-mesh-refraction-material [options]="options()" [envMap]="cameraTexture" />
 							</ngt-mesh>
 						</ngts-caustics>
 					}

libs/soba/src/staging/spot-light.stories.ts

@@ -117,13 +117,13 @@ class DefaultSpotLightStory {
 	depthBuffer = injectDepthBuffer();
 
 	spotLightOneOptions = computed(() => ({
-		depthBuffer: this.depthBuffer(),
+		depthBuffer: this.depthBuffer,
 		position: [3, 2, 0],
 		color: '#ff005b',
 		...this.options(),
 	}));
 	spotLightTwoOptions = computed(() => ({
-		depthBuffer: this.depthBuffer(),
+		depthBuffer: this.depthBuffer,
 		position: [-3, 2, 0],
 		color: '#0EEC82',
 		...this.options(),