docs: clean up and add tweak pane for particles

Author: nartc

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

@@ -1,4 +1,12 @@
-import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, viewChild } from '@angular/core';
+import {
+	ChangeDetectionStrategy,
+	Component,
+	CUSTOM_ELEMENTS_SCHEMA,
+	ElementRef,
+	input,
+	signal,
+	viewChild,
+} from '@angular/core';
 import { extend, injectBeforeRender, NgtArgs, NgtPortal } from 'angular-three';
 import { NgtpBloom, NgtpEffectComposer } from 'angular-three-postprocessing';
 import { NgtsPerspectiveCamera } from 'angular-three-soba/cameras';
@@ -8,6 +16,7 @@ import * as THREE from 'three';
 
 import { SimulationMaterial } from './simulation-material';
 
+import { NgtTweakNumber, NgtTweakPane } from 'angular-three-tweakpane';
 import fragmentShader from './fragment.glsl' with { loader: 'text' };
 import vertexShader from './vertex.glsl' with { loader: 'text' };
 
@@ -66,6 +75,9 @@ export class FBOParticles {
 	protected readonly fragmentShader = fragmentShader;
 	protected readonly AdditiveBlending = THREE.AdditiveBlending;
 
+	frequency = input.required<number>();
+	timeScale = input.required<number>();
+
 	protected size = 128;
 	protected virtualScene = new THREE.Scene();
 	protected virtualCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 1 / Math.pow(2, 53), 1);
@@ -124,7 +136,8 @@ export class FBOParticles {
 			if (!simulationMaterial) return;
 
 			this.uniforms['uPositions'].value = this.renderTarget().texture;
-			simulationMaterial.uniforms['uTime'].value = clock.elapsedTime;
+			simulationMaterial.uniforms['uFrequency'].value = this.frequency();
+			simulationMaterial.uniforms['uTime'].value = clock.elapsedTime * this.timeScale();
 		});
 	}
 }
@@ -137,18 +150,35 @@ export class FBOParticles {
 		<ngt-color *args="['black']" attach="background" />
 		<ngt-ambient-light [intensity]="Math.PI * 0.5" />
 
-		<app-fbo-particles />
+		<app-fbo-particles [frequency]="frequency()" [timeScale]="timeScale()" />
 
 		<ngtp-effect-composer>
 			<ngtp-bloom [options]="{ luminanceThreshold: 0, intensity: 4 }" />
 		</ngtp-effect-composer>
 
 		<ngts-orbit-controls [options]="{ enablePan: false }" />
+
+		<ngt-tweak-pane title="Particles" [top]="48" [expanded]="true">
+			<ngt-tweak-number [(value)]="frequency" label="frequency" [params]="{ min: 0.25, max: 1, step: 0.01 }" />
+			<ngt-tweak-number [(value)]="timeScale" label="timeScale" [params]="{ min: 0.5, max: 1.5, step: 0.01 }" />
+		</ngt-tweak-pane>
 	`,
-	imports: [NgtsPerspectiveCamera, NgtsOrbitControls, NgtArgs, FBOParticles, NgtpEffectComposer, NgtpBloom],
+	imports: [
+		NgtsPerspectiveCamera,
+		NgtsOrbitControls,
+		NgtArgs,
+		FBOParticles,
+		NgtpEffectComposer,
+		NgtpBloom,
+		NgtTweakPane,
+		NgtTweakNumber,
+	],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class SceneGraph {
 	protected readonly Math = Math;
+
+	protected frequency = signal(0.5);
+	protected timeScale = signal(1);
 }

apps/examples/src/app/misc/particle-maxime/simulation-material.ts

@@ -17,7 +17,7 @@ function generateRandomPointInTriangle(v1: THREE.Vector3, v2: THREE.Vector3, v3:
 		.addScaledVector(v3, r3 / sum);
 }
 
-function createGeometryFromCurve(curveData: any, matrix: THREE.Matrix4) {
+function createGeometryFromCurve(curveData: (typeof shapes)['curve']) {
 	const geometry = new THREE.BufferGeometry();
 	geometry.setAttribute('position', new THREE.Float32BufferAttribute(curveData.data.attributes.position.array, 3));
 	geometry.setAttribute('normal', new THREE.Float32BufferAttribute(curveData.data.attributes.normal.array, 3));
@@ -44,7 +44,7 @@ function getRandomData(width: number, height: number) {
 			.setPosition(positions[shapeIndex])
 			.scale(new THREE.Vector3(scale, scale, scale));
 
-		const geometry = createGeometryFromCurve(curveData, matrix);
+		const geometry = createGeometryFromCurve(curveData);
 		const positionsArr = geometry.attributes['position'].array;
 		const indices = curveData.data.index.array;