lots of mesh materials

Author: nartc

libs/core/src/lib/directives/key.ts

@@ -19,10 +19,11 @@ export class NgtKey {
 	private lastKey = '';
 	private viewRef?: EmbeddedViewRef<unknown>;
 
-	@Input() set key(key: string) {
-		if (this.lastKey !== key) {
+	@Input() set key(key: string | number | object) {
+		const normalizedKey = key.toString();
+		if (this.lastKey !== normalizedKey) {
 			this.createView();
-			this.lastKey = key;
+			this.lastKey = normalizedKey;
 		}
 	}
 

libs/soba/abstractions/src/edges/edges.ts

@@ -0,0 +1,87 @@
+import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, Component, ContentChild, Directive, Input, TemplateRef, effect } from '@angular/core';
+import { extend, injectNgtRef, signalStore, type NgtAnyRecord, type NgtLineSegments } from 'angular-three';
+import * as THREE from 'three';
+import { LineBasicMaterial, LineSegments } from 'three';
+
+export type NgtsEdgesState = {
+	threshold: number;
+	color: THREE.ColorRepresentation;
+	geometry: THREE.BufferGeometry;
+	userData: NgtAnyRecord;
+};
+
+declare global {
+	interface HTMLElementTagNameMap {
+		/**
+		 * @extends ngt-line-segments
+		 */
+		'ngts-edges': NgtsEdgesState & NgtLineSegments;
+	}
+}
+
+extend({ LineSegments, LineBasicMaterial });
+
+@Directive({ selector: 'ng-template[ngtsEdgesContent]', standalone: true })
+export class NgtsEdgesContent {}
+
+@Component({
+	selector: 'ngts-edges',
+	standalone: true,
+	template: `
+		<ngt-line-segments [ref]="edgesRef" [raycast]="nullRaycast" ngtCompound>
+			<ng-container *ngIf="content; else defaultMaterial" [ngTemplateOutlet]="content" />
+			<ng-template #defaultMaterial>
+				<ngt-line-basic-material [color]="color()" />
+			</ng-template>
+		</ngt-line-segments>
+	`,
+	imports: [NgIf, NgTemplateOutlet],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class NgtsEdges {
+	nullRaycast = () => null;
+
+	@ContentChild(NgtsEdgesContent, { read: TemplateRef }) content?: TemplateRef<unknown>;
+
+	private inputs = signalStore<NgtsEdgesState>({ threshold: 15, color: 'black' });
+
+	@Input() edgesRef = injectNgtRef<LineSegments>();
+
+	@Input({ alias: 'threshold' }) set _threshold(threshold: number) {
+		this.inputs.set({ threshold });
+	}
+
+	@Input({ alias: 'color' }) set _color(color: THREE.ColorRepresentation) {
+		this.inputs.set({ color });
+	}
+
+	@Input({ alias: 'geometry' }) set _geometry(geometry: THREE.BufferGeometry) {
+		this.inputs.set({ geometry });
+	}
+
+	@Input({ alias: 'userData' }) set _userData(userData: NgtAnyRecord) {
+		this.inputs.set({ userData });
+	}
+
+	private geometry = this.inputs.select('geometry');
+	private threshold = this.inputs.select('threshold');
+
+	color = this.inputs.select('color');
+
+	constructor() {
+		effect(() => {
+			const edges = this.edgesRef.nativeElement;
+			if (!edges) return;
+			const parent = this.edgesRef.nativeElement.parent as THREE.Mesh;
+			if (parent) {
+				const [geometry, threshold] = [this.geometry() || parent.geometry, this.threshold()];
+				if (geometry !== edges.userData['currentGeom'] || threshold !== edges.userData['currentThreshold']) {
+					edges.userData['currentGeom'] = geometry;
+					edges.userData['currentThreshold'] = threshold;
+					edges.geometry = new THREE.EdgesGeometry(geometry, threshold);
+				}
+			}
+		});
+	}
+}

libs/soba/abstractions/src/index.ts

@@ -1,5 +1,6 @@
 export * from './billboard/billboard';
 export * from './detailed/detailed';
+export * from './edges/edges';
 export * from './grid/grid';
 export * from './text-3d/text-3d';
 export * from './text/text';

libs/soba/cameras/src/index.ts

@@ -1,3 +1,4 @@
+export * from './camera/camera-content';
 export * from './cube-camera/cube-camera';
 export * from './orthographic-camera/orthographic-camera';
 export * from './perspective-camera/perspective-camera';

libs/soba/materials/src/index.ts

@@ -1 +1,6 @@
+export * from './mesh-distort-material/mesh-distort-material';
+export * from './mesh-reflector-material/mesh-reflector-material';
+export * from './mesh-refraction-material/mesh-refraction-material';
+export * from './mesh-transmission-material/mesh-transmission-material';
+export * from './mesh-wobble-material/mesh-wobble-material';
 export * from './point-material/point-material';

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

@@ -0,0 +1,76 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import { injectBeforeRender, injectNgtRef, NgtArgs, signalStore, type NgtMeshPhysicalMaterial } from 'angular-three';
+import { injectNgtsMeshDistortMaterial, MeshDistortMaterial } from 'angular-three-soba/shaders';
+
+export type NgtsMeshDistortMaterialState = {
+	time: number;
+	distort: number;
+	radius: number;
+	speed: number;
+};
+
+declare global {
+	interface HTMLElementTagNameMap {
+		/**
+		 * @extends ngt-mesh-physical-material
+		 */
+		'ngts-mesh-distort-material': NgtsMeshDistortMaterialState & NgtMeshPhysicalMaterial;
+	}
+}
+
+@Component({
+	selector: 'ngts-mesh-distort-material',
+	standalone: true,
+	template: `
+		<ngt-primitive
+			*args="[material]"
+			[ref]="materialRef"
+			[time]="time()"
+			[distort]="distort()"
+			[radius]="radius()"
+			ngtCompound
+			attach="material"
+		/>
+	`,
+	imports: [NgtArgs],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class NgtsMeshDistortMaterial {
+	private inputs = signalStore<NgtsMeshDistortMaterialState>({
+		speed: 1,
+		time: 0,
+		distort: 0.4,
+		radius: 1,
+	});
+
+	@Input() materialRef = injectNgtRef<InstanceType<MeshDistortMaterial>>();
+
+	@Input({ alias: 'time' }) set _time(time: number) {
+		this.inputs.set({ time });
+	}
+
+	@Input({ alias: 'distort' }) set _distort(distort: number) {
+		this.inputs.set({ distort });
+	}
+
+	@Input({ alias: 'radius' }) set _radius(radius: number) {
+		this.inputs.set({ radius });
+	}
+
+	@Input({ alias: 'speed' }) set _speed(speed: number) {
+		this.inputs.set({ speed });
+	}
+
+	private MeshDistortMaterial = injectNgtsMeshDistortMaterial();
+	material = new this.MeshDistortMaterial();
+
+	time = this.inputs.select('time');
+	distort = this.inputs.select('distort');
+	radius = this.inputs.select('radius');
+
+	constructor() {
+		injectBeforeRender(({ clock }) => {
+			this.material.time = clock.getElapsedTime() * this.inputs.get('speed');
+		});
+	}
+}