refactor(soba): adjust staging with new renderer

Author: nartc

libs/soba/staging/src/lib/accumulative-shadows.ts

@@ -11,12 +11,13 @@ import {
 	untracked,
 	viewChild,
 } from '@angular/core';
-import { NgtGroup, extend, getLocalState, injectBeforeRender, injectStore, omit, pick } from 'angular-three';
+import { NgtThreeElements, extend, getInstanceState, injectBeforeRender, injectStore, omit, pick } from 'angular-three';
 import { ProgressiveLightMap, SoftShadowMaterial } from 'angular-three-soba/vanilla-exports';
 import { mergeInputs } from 'ngxtension/inject-inputs';
+import * as THREE from 'three';
 import { Group, Mesh, PlaneGeometry } from 'three';
 
-export interface NgtsAccumulativeShadowsOptions extends Partial<NgtGroup> {
+export interface NgtsAccumulativeShadowsOptions extends Partial<NgtThreeElements['ngt-group']> {
 	/** How many frames it can render, more yields cleaner results but takes more time, 40 */
 	frames: number;
 	/** If frames === Infinity blend controls the refresh ratio, 100 */
@@ -98,14 +99,11 @@ export class NgtsAccumulativeShadows {
 		'toneMapped',
 	]);
 
-	lightsRef = viewChild.required<ElementRef<Group>>('lights');
-	planeRef = viewChild.required<ElementRef<Mesh<PlaneGeometry, InstanceType<typeof SoftShadowMaterial>>>>('plane');
+	lightsRef = viewChild.required<ElementRef<THREE.Group>>('lights');
+	planeRef =
+		viewChild.required<ElementRef<THREE.Mesh<THREE.PlaneGeometry, InstanceType<typeof SoftShadowMaterial>>>>('plane');
 
 	private store = injectStore();
-	private gl = this.store.select('gl');
-	private camera = this.store.select('camera');
-	private scene = this.store.select('scene');
-	private invalidate = this.store.select('invalidate');
 
 	private opacity = pick(this.options, 'opacity');
 	private alphaTest = pick(this.options, 'alphaTest');
@@ -117,22 +115,22 @@ export class NgtsAccumulativeShadows {
 		if (this.previousPLM) {
 			this.previousPLM.clear();
 		}
-		return (this.previousPLM = new ProgressiveLightMap(this.gl(), this.scene(), this.resolution()));
+		return (this.previousPLM = new ProgressiveLightMap(this.store.gl(), this.store.scene(), this.resolution()));
 	});
 
-	scale = pick(this.options, 'scale');
-	toneMapped = pick(this.options, 'toneMapped');
-	color = pick(this.options, 'color');
-	colorBlend = pick(this.options, 'colorBlend');
-	map = computed(() => this.pLM().progressiveLightMap2.texture);
+	protected scale = pick(this.options, 'scale');
+	protected toneMapped = pick(this.options, 'toneMapped');
+	protected color = pick(this.options, 'color');
+	protected colorBlend = pick(this.options, 'colorBlend');
+	protected map = computed(() => this.pLM().progressiveLightMap2.texture);
 
 	lightsMap = new Map<string, () => void>();
-	temporal = computed(() => !!this.options().temporal);
-	frames = computed(() => Math.max(2, this.options().frames));
-	blend = computed(() =>
+	private temporal = computed(() => !!this.options().temporal);
+	private frames = computed(() => Math.max(2, this.options().frames));
+	private blend = computed(() =>
 		Math.max(2, this.options().frames === Infinity ? this.options().blend : this.options().frames),
 	);
-	count = 0;
+	private count = 0;
 
 	constructor() {
 		extend({ Group, SoftShadowMaterial, Mesh, PlaneGeometry });
@@ -142,13 +140,13 @@ export class NgtsAccumulativeShadows {
 		});
 
 		effect(() => {
-			const sceneLS = getLocalState(this.scene());
-			if (!sceneLS) return;
+			const sceneInstanceState = getInstanceState(this.store.scene());
+			if (!sceneInstanceState) return;
 
 			// track deps
 			this.planeRef();
 			this.options();
-			sceneLS.objects();
+			sceneInstanceState.objects();
 
 			// Reset internals, buffers, ...
 			this.reset();
@@ -157,7 +155,12 @@ export class NgtsAccumulativeShadows {
 		});
 
 		injectBeforeRender(() => {
-			const [frames, temporal, invalidate, limit] = [this.frames(), !!this.temporal(), this.invalidate(), this.limit()];
+			const [frames, temporal, invalidate, limit] = [
+				this.frames(),
+				!!this.temporal(),
+				this.store.snapshot.invalidate,
+				this.limit(),
+			];
 			if ((temporal || frames === Infinity) && this.count < frames && this.count < limit) {
 				invalidate();
 				this.update();
@@ -202,7 +205,7 @@ export class NgtsAccumulativeShadows {
 		// Update the lightmap and the accumulative lights
 		for (let i = 0; i < frames; i++) {
 			this.lightsMap.forEach((lightUpdate) => lightUpdate());
-			this.pLM().update(this.camera(), this.blend());
+			this.pLM().update(this.store.camera(), this.blend());
 		}
 		// Switch lights off
 		this.lightsRef().nativeElement.visible = false;

libs/soba/staging/src/lib/backdrop.ts

@@ -7,15 +7,16 @@ import {
 	input,
 	viewChild,
 } from '@angular/core';
-import { checkUpdate, extend, NgtArgs, NgtGroup, omit, pick } from 'angular-three';
+import { checkUpdate, extend, NgtArgs, NgtThreeElements, omit, pick } from 'angular-three';
 import { mergeInputs } from 'ngxtension/inject-inputs';
-import { BufferAttribute, Group, Mesh, PlaneGeometry } from 'three';
+import * as THREE from 'three';
+import { Group, Mesh, PlaneGeometry } from 'three';
 
 function easeInExpo(x: number) {
 	return x === 0 ? 0 : Math.pow(2, 10 * x - 10);
 }
 
-export interface NgtsBackdropOptions extends Partial<NgtGroup> {
+export interface NgtsBackdropOptions extends Partial<NgtThreeElements['ngt-group']> {
 	floor: number;
 	segments: number;
 	receiveShadow?: boolean;
@@ -44,13 +45,13 @@ export class NgtsBackdrop {
 	protected readonly Math = Math;
 
 	options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
-	parameters = omit(this.options, ['floor', 'segments', 'receiveShadow']);
+	protected parameters = omit(this.options, ['floor', 'segments', 'receiveShadow']);
 
-	groupRef = viewChild.required<ElementRef<Group>>('group');
-	planeRef = viewChild<ElementRef<PlaneGeometry>>('plane');
+	groupRef = viewChild.required<ElementRef<THREE.Group>>('group');
+	planeRef = viewChild<ElementRef<THREE.PlaneGeometry>>('plane');
 
-	receiveShadow = pick(this.options, 'receiveShadow');
-	segments = pick(this.options, 'segments');
+	protected receiveShadow = pick(this.options, 'receiveShadow');
+	protected segments = pick(this.options, 'segments');
 	private floor = pick(this.options, 'floor');
 
 	constructor() {
@@ -64,7 +65,7 @@ export class NgtsBackdrop {
 
 			let i = 0;
 			const offset = segments / segments / 2;
-			const position = plane.attributes['position'] as BufferAttribute;
+			const position = plane.attributes['position'] as THREE.BufferAttribute;
 			for (let x = 0; x < segments + 1; x++) {
 				for (let y = 0; y < segments + 1; y++) {
 					position.setXYZ(

libs/soba/staging/src/lib/bb-anchor.ts

@@ -8,13 +8,22 @@ import {
 	signal,
 	viewChild,
 } from '@angular/core';
-import { NgtGroup, NgtVector3, extend, getLocalState, injectBeforeRender, omit, vector3 } from 'angular-three';
-import { Box3, Group, Object3D, Vector3 } from 'three';
+import {
+	NgtThreeElements,
+	NgtVector3,
+	extend,
+	getInstanceState,
+	injectBeforeRender,
+	omit,
+	vector3,
+} from 'angular-three';
+import * as THREE from 'three';
+import { Group } from 'three';
 
-const boundingBox = new Box3();
-const boundingBoxSize = new Vector3();
+const boundingBox = new THREE.Box3();
+const boundingBoxSize = new THREE.Vector3();
 
-export interface NgtsBBAnchorOptions extends Partial<NgtGroup> {
+export interface NgtsBBAnchorOptions extends Partial<NgtThreeElements['ngt-group']> {
 	anchor: NgtVector3;
 }
 
@@ -32,9 +41,9 @@ export class NgtsBBAnchor {
 	options = input.required<NgtsBBAnchorOptions>();
 	parameters = omit(this.options, ['anchor']);
 
-	bbAnchorRef = viewChild.required<ElementRef<Group>>('bbAnchor');
+	bbAnchorRef = viewChild.required<ElementRef<THREE.Group>>('bbAnchor');
 
-	parent = signal<Object3D | null>(null);
+	private parent = signal<THREE.Object3D | null>(null);
 	private anchor = vector3(this.options, 'anchor');
 
 	constructor() {
@@ -44,11 +53,11 @@ export class NgtsBBAnchor {
 		// so it becomes a sibling of its initial parent.
 		// We do that so the children have no impact on a bounding box of a parent.
 		effect(() => {
-			const bbAnchorLS = getLocalState(this.bbAnchorRef().nativeElement);
-			const bbAnchorParent = bbAnchorLS?.parent();
-			if (bbAnchorParent?.parent) {
-				this.parent.set(bbAnchorParent);
-				bbAnchorParent.parent.add(this.bbAnchorRef().nativeElement);
+			const bbAnchorInstanceState = getInstanceState(this.bbAnchorRef().nativeElement);
+			const bbAnchorParent = bbAnchorInstanceState?.parent();
+			if (bbAnchorParent && 'parent' in bbAnchorParent) {
+				this.parent.set(bbAnchorParent as unknown as THREE.Object3D);
+				bbAnchorParent['parent'].add(this.bbAnchorRef().nativeElement);
 			}
 		});