docs: add instanced vertex colors

Author: nartc

apps/kitchen-sink/src/app/soba/instanced-vertex-colors/experience.ts

@@ -0,0 +1,118 @@
+import {
+	ChangeDetectionStrategy,
+	Component,
+	CUSTOM_ELEMENTS_SCHEMA,
+	ElementRef,
+	signal,
+	untracked,
+	viewChild,
+} from '@angular/core';
+import { injectBeforeRender, NgtArgs, NgtThreeEvent } from 'angular-three';
+import { NgtpBloom, NgtpEffectComposer } from 'angular-three-postprocessing';
+import { NgtpN8AO } from 'angular-three-postprocessing/n8ao';
+import { Color, InstancedMesh, Object3D } from 'three';
+import niceColors from '../../colors';
+
+const tempObject = new Object3D();
+const tempColor = new Color();
+const data = Array.from({ length: 1000 }, () => ({ color: niceColors[Math.floor(Math.random() * 5)], scale: 1 }));
+
+@Component({
+	selector: 'app-boxes',
+	standalone: true,
+	template: `
+		<ngt-instanced-mesh
+			#mesh
+			*args="[undefined, undefined, 1000]"
+			(pointermove)="onPointerMove($any($event))"
+			(pointerout)="onPointerOut($any($event))"
+		>
+			<ngt-box-geometry *args="[0.6, 0.6, 0.6]">
+				<ngt-instanced-buffer-attribute attach="attributes.color" *args="[colors, 3]" />
+			</ngt-box-geometry>
+			<ngt-mesh-basic-material [vertexColors]="true" [toneMapped]="false" />
+		</ngt-instanced-mesh>
+	`,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [NgtArgs],
+})
+export class Boxes {
+	private meshRef = viewChild<ElementRef<InstancedMesh>>('mesh');
+
+	protected colors = Float32Array.from(
+		Array.from({ length: 1000 }, (_, i) => i).flatMap((_, i) => tempColor.set(data[i].color).toArray()),
+	);
+
+	protected hovered = signal<number | undefined>(undefined);
+	protected prev?: number;
+
+	constructor() {
+		injectBeforeRender(({ clock }) => {
+			const instanced = this.meshRef()?.nativeElement;
+			if (!instanced) return;
+
+			const time = clock.getElapsedTime();
+			instanced.rotation.x = Math.sin(time / 4);
+			instanced.rotation.y = Math.sin(time / 2);
+
+			const hovered = this.hovered();
+
+			let i = 0;
+			for (let x = 0; x < 10; x++) {
+				for (let y = 0; y < 10; y++) {
+					for (let z = 0; z < 10; z++) {
+						const id = i++;
+						tempObject.position.set(5 - x, 5 - y, 5 - z);
+						tempObject.rotation.y = Math.sin(x / 4 + time) + Math.sin(y / 4 + time) + Math.sin(z / 4 + time);
+						tempObject.rotation.z = tempObject.rotation.y * 2;
+
+						if (hovered !== this.prev) {
+							(id === hovered ? tempColor.setRGB(10, 10, 10) : tempColor.set(data[id].color)).toArray(
+								this.colors,
+								id * 3,
+							);
+							instanced.geometry.attributes['color'].needsUpdate = true;
+						}
+
+						tempObject.updateMatrix();
+						instanced.setMatrixAt(id, tempObject.matrix);
+					}
+				}
+			}
+
+			instanced.instanceMatrix.needsUpdate = true;
+		});
+	}
+
+	onPointerMove(event: NgtThreeEvent<PointerEvent>) {
+		event.stopPropagation();
+		this.prev = untracked(this.hovered);
+		this.hovered.set(event.instanceId);
+	}
+
+	onPointerOut(event: NgtThreeEvent<PointerEvent>) {
+		event.stopPropagation();
+		this.prev = untracked(this.hovered);
+		this.hovered.set(undefined);
+	}
+}
+
+@Component({
+	standalone: true,
+	template: `
+		<ngt-color attach="background" *args="['#282828']" />
+		<app-boxes />
+		<ngtp-effect-composer [options]="{ enableNormalPass: false }">
+			<ngtp-n8ao [options]="{ aoRadius: 0.5, intensity: Math.PI }" />
+			<ngtp-bloom [options]="{ luminanceThreshold: 1, intensity: 0.5 * Math.PI, levels: 9, mipmapBlur: true }" />
+		</ngtp-effect-composer>
+	`,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { class: 'instanced-vertex-colors-soba-experience' },
+	imports: [NgtArgs, Boxes, NgtpEffectComposer, NgtpN8AO, NgtpBloom],
+})
+export class Experience {
+	protected readonly Math = Math;
+}

apps/kitchen-sink/src/app/soba/instanced-vertex-colors/instanced-vertex-colors.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgtCanvas } from 'angular-three';
+import { Experience } from './experience';
+
+@Component({
+	standalone: true,
+	template: `
+		<ngt-canvas
+			[sceneGraph]="sceneGraph"
+			[gl]="{ antialias: false }"
+			[camera]="{ position: [0, 0, 15], near: 5, far: 20 }"
+		/>
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [NgtCanvas],
+	host: { class: 'instanced-vertex-colors-soba' },
+})
+export default class InstancedVertexColors {
+	protected sceneGraph = Experience;
+}

apps/kitchen-sink/src/app/soba/soba.routes.ts

@@ -65,6 +65,10 @@ const routes: Routes = [
 		path: 'bruno-simons-20k',
 		loadComponent: () => import('./bruno-simons-20k/bruno-simons-20k'),
 	},
+	{
+		path: 'instanced-vertex-colors',
+		loadComponent: () => import('./instanced-vertex-colors/instanced-vertex-colors'),
+	},
 	{
 		path: '',
 		redirectTo: 'stars',