feat(postprocessing): port missing effects from react-postprocessing

- add ramp, texture, ssao, autofocus effects
- update lens-flare: replace minified shader with readable version, rename uniforms iTime→time, iResolution→screenRes
- expose normalPass/downSamplingPass from effect-composer for ssao

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: nartc

libs/postprocessing/src/lib/effect-composer.ts

@@ -255,6 +255,8 @@ export class NgtpEffectComposer {
 	 * Can be used to access the composer directly for advanced use cases.
 	 */
 	effectComposer = pick(this.composerData, 'composer');
+	normalPass = pick(this.composerData, 'normalPass');
+	downSamplingPass = pick(this.composerData, 'downSamplingPass');
 
 	constructor() {
 		extend({ Group });

libs/postprocessing/src/lib/effects/autofocus.ts

@@ -0,0 +1,153 @@
+import {
+	CUSTOM_ELEMENTS_SCHEMA,
+	ChangeDetectionStrategy,
+	Component,
+	DestroyRef,
+	ElementRef,
+	computed,
+	effect,
+	inject,
+	input,
+	viewChild,
+} from '@angular/core';
+import { NgtArgs, NgtVector3, beforeRender, injectStore, pick, vector3 } from 'angular-three';
+import { easing } from 'maath';
+import { mergeInputs } from 'ngxtension/inject-inputs';
+import { CopyPass, DepthOfFieldEffect, DepthPickingPass } from 'postprocessing';
+import * as THREE from 'three';
+import { NgtpEffectComposer } from '../effect-composer';
+
+type DOFOptions = NonNullable<ConstructorParameters<typeof DepthOfFieldEffect>[1]>;
+
+export type AutofocusOptions = DOFOptions & {
+	target?: NgtVector3;
+	mouse?: boolean;
+	debug?: number;
+	manual?: boolean;
+	smoothTime?: number;
+};
+
+const defaultOptions: AutofocusOptions = {
+	mouse: false,
+	manual: false,
+	smoothTime: 0.25,
+};
+
+@Component({
+	selector: 'ngtp-autofocus',
+	template: `
+		<ngt-primitive *args="[dofEffect()]" [dispose]="null" />
+		@if (debugSize(); as debugSize) {
+			<ngt-mesh #hitpointMesh>
+				<ngt-sphere-geometry *args="[debugSize, 16, 16]" />
+				<ngt-mesh-basic-material [color]="'#00ff00'" [opacity]="1" [transparent]="true" [depthWrite]="false" />
+			</ngt-mesh>
+			<ngt-mesh #targetMesh>
+				<ngt-sphere-geometry *args="[debugSize / 2, 16, 16]" />
+				<ngt-mesh-basic-material
+					[color]="'#00ff00'"
+					[opacity]="0.5"
+					[transparent]="true"
+					[depthWrite]="false"
+				/>
+			</ngt-mesh>
+		}
+	`,
+	imports: [NgtArgs],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NgtpAutofocus {
+	options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
+
+	private effectComposer = inject(NgtpEffectComposer);
+	private store = injectStore();
+
+	private hitpoint = new THREE.Vector3(0, 0, 0);
+	private ndc = new THREE.Vector3(0, 0, 0);
+
+	private depthPickingPass = new DepthPickingPass();
+	private copyPass = new CopyPass();
+
+	debugSize = pick(this.options, 'debug');
+
+	private hitpointMeshRef = viewChild<ElementRef<THREE.Mesh>>('hitpointMesh');
+	private targetMeshRef = viewChild<ElementRef<THREE.Mesh>>('targetMesh');
+
+	private target = vector3(this.options, 'target', true);
+
+	dofEffect = computed(() => {
+		const [camera, options] = [this.effectComposer.camera(), this.options()];
+		const { target: _, mouse: __, debug: ___, manual: ____, smoothTime: _____, ...dofOptions } = options;
+		const dof = new DepthOfFieldEffect(camera, dofOptions);
+		dof.target = new THREE.Vector3().copy(this.hitpoint);
+		return dof;
+	});
+
+	constructor() {
+		// add passes to composer
+		effect((onCleanup) => {
+			const composer = this.effectComposer.effectComposer();
+			if (!composer) return;
+
+			composer.addPass(this.depthPickingPass);
+			composer.addPass(this.copyPass);
+
+			onCleanup(() => {
+				composer.removePass(this.depthPickingPass);
+				composer.removePass(this.copyPass);
+			});
+		});
+
+		inject(DestroyRef).onDestroy(() => {
+			this.depthPickingPass.dispose();
+			this.copyPass.dispose();
+		});
+
+		// cleanup dof effect
+		effect((onCleanup) => {
+			const dof = this.dofEffect();
+			onCleanup(() => dof.dispose());
+		});
+
+		beforeRender(({ delta }) => {
+			const dof = this.dofEffect();
+			if (!dof?.target) return;
+
+			const { mouse: followMouse, smoothTime, manual } = this.options();
+			if (manual) return;
+
+			const target = this.target();
+			const camera = this.effectComposer.camera();
+
+			if (target) {
+				this.hitpoint.copy(target);
+			} else {
+				const { x, y } = followMouse ? this.store.snapshot.pointer : { x: 0, y: 0 };
+				this.ndc.x = x;
+				this.ndc.y = y;
+
+				this.depthPickingPass.readDepth(this.ndc).then((depth) => {
+					this.ndc.z = depth * 2.0 - 1.0;
+					const hit = 1 - this.ndc.z > 0.0000001;
+					if (hit) {
+						const unprojected = this.ndc.clone().unproject(camera);
+						this.hitpoint.copy(unprojected);
+					}
+				});
+			}
+
+			if (smoothTime && smoothTime > 0 && delta > 0) {
+				easing.damp3(dof.target, this.hitpoint, smoothTime, delta);
+			} else {
+				dof.target.copy(this.hitpoint);
+			}
+
+			const hitpointMesh = this.hitpointMeshRef()?.nativeElement;
+			if (hitpointMesh) hitpointMesh.position.copy(this.hitpoint);
+
+			const targetMesh = this.targetMeshRef()?.nativeElement;
+			if (targetMesh) targetMesh.position.copy(dof.target);
+		});
+	}
+}

libs/postprocessing/src/lib/effects/index.ts

@@ -1,4 +1,5 @@
 export * from './ascii';
+export * from './autofocus';
 export * from './bloom';
 export * from './brightness-contrast';
 export * from './chromatic-abberation';
@@ -17,11 +18,14 @@ export * from './lut';
 export * from './noise';
 export * from './outline';
 export * from './pixelation';
+export * from './ramp';
 export * from './scanline';
 export * from './selective-bloom';
 export * from './sepia';
+export * from './ssao';
 export * from './shock-wave';
 export * from './smaa';
+export * from './texture';
 export * from './tilt-shift';
 export * from './tilt-shift-2';
 export * from './tone-mapping';