docs: simplify postprocessing example

Author: nartc

apps/astro-docs/src/components/postprocessing/sample.ts

@@ -3,6 +3,7 @@
 import {
 	ChangeDetectionStrategy,
 	Component,
+	computed,
 	CUSTOM_ELEMENTS_SCHEMA,
 	type ElementRef,
 	input,
@@ -49,19 +50,43 @@ export class MainSphere {
 	selector: 'app-sphere-instances',
 	standalone: true,
 	template: `
-		<app-main-sphere [material]="material()" />
+		<!-- we render the material with attach="none" so we can share it between instances -->
+		<ngts-mesh-distort-material #distortMaterial attach="none" [options]="materialOptions()" />
+
+		<app-main-sphere [material]="distortMaterial.material" />
 		@for (position of initialPositions; track $index) {
-			<ngt-mesh #mesh [material]="material()" [position]="position">
+			<ngt-mesh #mesh [material]="distortMaterial.material" [position]="position">
 				<ngt-icosahedron-geometry *args="[1, 4]" />
 			</ngt-mesh>
 		}
 	`,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [MainSphere, NgtArgs],
+	imports: [MainSphere, NgtArgs, NgtsMeshDistortMaterial],
 })
 export class SphereInstances {
-	material = input.required<Material>();
+	private envMap = injectLoader(
+		// @ts-expect-error - CubeTextureLoader is ok
+		() => CubeTextureLoader,
+		() => [['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png']],
+		{ extensions: (loader) => loader.setPath('/cube/') },
+	);
+	private bumpMap = injectTexture(() => '/bump.jpg');
+
+	materialOptions = computed(() => ({
+		envMap: this.envMap()?.[0],
+		bumpMap: this.bumpMap(),
+		emissive: '#010101',
+		emissiveIntensity: 2,
+		roughness: 0.1,
+		metalness: 1,
+		bumpScale: 0.005,
+		clearcoat: 1,
+		clearcoatRoughness: 1,
+		radius: 1,
+		distort: 0.4,
+		toneMapped: false,
+	}));
 
 	initialPositions = [
 		[-4, 20, -12],
@@ -74,17 +99,17 @@ export class SphereInstances {
 		[8, 10, -20],
 	];
 
-	meshesRef = viewChildren<ElementRef<Mesh>>('mesh');
+	private meshesRef = viewChildren<ElementRef<Mesh>>('mesh');
 
 	constructor() {
 		injectBeforeRender(() => {
 			const meshes = this.meshesRef();
-			meshes.forEach((mesh) => {
-				mesh.nativeElement.position.y += 0.02;
-				if (mesh.nativeElement.position.y > 19) mesh.nativeElement.position.y = -18;
-				mesh.nativeElement.rotation.x += 0.06;
-				mesh.nativeElement.rotation.y += 0.06;
-				mesh.nativeElement.rotation.z += 0.02;
+			meshes.forEach(({ nativeElement: mesh }) => {
+				mesh.position.y += 0.02;
+				if (mesh.position.y > 19) mesh.position.y = -18;
+				mesh.rotation.x += 0.06;
+				mesh.rotation.y += 0.06;
+				mesh.rotation.z += 0.02;
 			});
 		});
 	}
@@ -96,29 +121,7 @@ export class SphereInstances {
 		<ngt-color attach="background" *args="['#050505']" />
 		<ngt-fog attach="fog" *args="['#161616', 8, 30]" />
 
-		<!-- we render the material with attach="none" so we can share it between instances -->
-		<ngts-mesh-distort-material
-			#distortMaterial
-			attach="none"
-			[options]="{
-				envMap: envMap()?.[0],
-				bumpMap: bumpMap(),
-				emissive: '#010101',
-				emissiveIntensity: 2,
-				roughness: 0.1,
-				metalness: 1,
-				bumpScale: 0.005,
-				clearcoat: 1,
-				clearcoatRoughness: 1,
-				radius: 1,
-				distort: 0.4,
-				toneMapped: false,
-			}"
-		/>
-
-		@if (distortMaterial.material) {
-			<app-sphere-instances [material]="distortMaterial.material" />
-		}
+		<app-sphere-instances />
 
 		<ngtp-effect-composer [options]="{ multisampling: 0, disableNormalPass: true }">
 			<ngtp-depth-of-field [options]="{ focusDistance: 0, focalLength: 0.02, bokehScale: 2, height: 480 }" />
@@ -128,25 +131,9 @@ export class SphereInstances {
 	`,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [
-		NgtsMeshDistortMaterial,
-		SphereInstances,
-		NgtArgs,
-		NgtpEffectComposer,
-		NgtpDepthOfField,
-		NgtpBloom,
-		NgtpVignette,
-	],
+	imports: [SphereInstances, NgtArgs, NgtpEffectComposer, NgtpDepthOfField, NgtpBloom, NgtpVignette],
 })
-export class SceneGraph {
-	envMap = injectLoader(
-		// @ts-expect-error - CubeTextureLoader is ok
-		() => CubeTextureLoader,
-		() => [['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png']],
-		{ extensions: (loader) => loader.setPath('/cube/') },
-	);
-	bumpMap = injectTexture(() => '/bump.jpg');
-}
+export class SceneGraph {}
 
 @Component({
 	standalone: true,