feat(soba): materials

Author: nartc

libs/soba/materials/src/lib/custom-shader-material.ts

@@ -29,7 +29,7 @@ export class NgtsCustomShaderMaterial {
 	options = input({} as Omit<ConstructorParameters<typeof CustomShaderMaterial>[0], 'baseMaterial'>);
 	parameters = omit(this.options, ['fragmentShader', 'vertexShader', 'uniforms', 'cacheKey']);
 
-	base = computed(() => {
+	private base = computed(() => {
 		const baseMaterial = this.baseMaterial();
 		return is.ref(baseMaterial) ? baseMaterial.nativeElement : baseMaterial;
 	});

libs/soba/materials/src/lib/mesh-distort-material.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, DestroyRef, inject, input } from '@angular/core';
 import { injectBeforeRender, NgtArgs, NgtAttachable, NgtMeshPhysicalMaterial, omit, pick } from 'angular-three';
 import { MeshDistortMaterial, MeshDistortMaterialParameters } from 'angular-three-soba/vanilla-exports';
 import { mergeInputs } from 'ngxtension/inject-inputs';
@@ -36,6 +36,8 @@ export class NgtsMeshDistortMaterial {
 	private speed = pick(this.options, 'speed');
 
 	constructor() {
+		inject(DestroyRef).onDestroy(() => this.material.dispose());
+
 		injectBeforeRender(({ clock }) => {
 			this.material.time = clock.getElapsedTime() * this.speed();
 		});

libs/soba/materials/src/lib/mesh-portal-material.ts

@@ -1,6 +1,5 @@
 import { NgTemplateOutlet } from '@angular/common';
 import {
-	afterNextRender,
 	ChangeDetectionStrategy,
 	Component,
 	computed,
@@ -92,17 +91,19 @@ export class ManagePortalScene {
 			return [quad, blend] as const;
 		});
 
+		effect(() => {
+			portalScene().matrixAutoUpdate = false;
+		});
+
 		effect(() => {
 			const [events, setEvents] = [this.events(), portalSetEvents()];
 			if (!events) return;
 			setEvents({ enabled: events });
 		});
 
-		afterNextRender(() => {
-			portalScene().matrixAutoUpdate = false;
-		});
-
 		effect((onCleanup) => {
+			const priority = this.priority();
+
 			// we start the before render in effect because we need the priority input to be resolved
 			const sub = injectBeforeRender(
 				({ gl, camera }) => {
@@ -115,9 +116,8 @@ export class ManagePortalScene {
 					if (!parent) return;
 
 					const materialBlend = 'blend' in material && typeof material.blend === 'number' ? material.blend : 0;
-					const [worldUnits, priority, rootScene, scene, [quad, blend]] = [
+					const [worldUnits, rootScene, scene, [quad, blend]] = [
 						this.worldUnits(),
-						this.priority(),
 						this.rootScene(),
 						portalScene(),
 						fullScreenQuad(),
@@ -150,7 +150,7 @@ export class ManagePortalScene {
 						}
 					}
 				},
-				{ injector, priority: this.priority() },
+				{ injector, priority },
 			);
 			onCleanup(() => sub());
 		});
@@ -285,19 +285,22 @@ export class NgtsMeshPortalMaterial {
 	constructor() {
 		extend({ MeshPortalMaterial });
 
-		afterNextRender(() => {
-			const material = this.materialRef().nativeElement;
+		effect(
+			() => {
+				const material = this.materialRef().nativeElement;
 
-			const localState = getLocalState(material);
-			if (!localState) return;
+				const localState = getLocalState(material);
+				if (!localState) return;
 
-			const materialParent = localState.parent();
-			if (!materialParent || !(materialParent instanceof Mesh)) return;
+				const materialParent = localState.parent();
+				if (!materialParent || !(materialParent instanceof Mesh)) return;
 
-			// Since the ref above is not tied to a mesh directly (we're inside a material),
-			// it has to be tied to the parent mesh here
-			this.parent.set(materialParent);
-		});
+				// Since the ref above is not tied to a mesh directly (we're inside a material),
+				// it has to be tied to the parent mesh here
+				this.parent.set(materialParent);
+			},
+			{ allowSignalWrites: true },
+		);
 
 		effect(() => {
 			const events = this.events();

libs/soba/materials/src/lib/mesh-wobble-material.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, DestroyRef, inject, input } from '@angular/core';
 import { injectBeforeRender, NgtArgs, NgtAttachable, NgtMeshStandardMaterial, omit } from 'angular-three';
 import { MeshWobbleMaterial, MeshWobbleMaterialParameters } from 'angular-three-soba/vanilla-exports';
 import { mergeInputs } from 'ngxtension/inject-inputs';
@@ -31,6 +31,8 @@ export class NgtsMeshWobbleMaterial {
 	material = new MeshWobbleMaterial();
 
 	constructor() {
+		inject(DestroyRef).onDestroy(() => this.material.dispose());
+
 		injectBeforeRender(({ clock }) => {
 			const material = this.material;
 			material.time = clock.elapsedTime * this.options().speed;

libs/soba/materials/src/lib/point-material.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, DestroyRef, inject, input } from '@angular/core';
 import { NgtArgs, NgtAttachable } from 'angular-three';
 import { PointMaterial } from 'angular-three-soba/shaders';
 import { PointsMaterialParameters } from 'three';
@@ -20,4 +20,8 @@ export class NgtsPointMaterial {
 	options = input({} as PointsMaterialParameters);
 
 	material = new PointMaterial(this.options());
+
+	constructor() {
+		inject(DestroyRef).onDestroy(() => this.material.dispose());
+	}
 }