refactor(postprocessing): update postprocessing with new renderer

Author: nartc

libs/postprocessing/n8ao/src/lib/n8ao.ts

@@ -13,7 +13,7 @@ import {
 import { applyProps, NgtArgs, pick } from 'angular-three';
 import { NgtpEffectComposer } from 'angular-three-postprocessing';
 import { mergeInputs } from 'ngxtension/inject-inputs';
-import { ColorRepresentation } from 'three';
+import * as THREE from 'three';
 
 export interface NgtpN8AOOptions {
 	aoRadius: number;
@@ -25,7 +25,7 @@ export interface NgtpN8AOOptions {
 	aoSamples: number;
 	denoiseSamples: number;
 	denoiseRadius: number;
-	color: ColorRepresentation;
+	color: THREE.ColorRepresentation;
 	halfRes: boolean;
 	depthAwareUpsampling: boolean;
 	screenSpaceRadius: boolean;
@@ -78,7 +78,7 @@ export class NgtpN8AO {
 
 	private effectComposer = inject(NgtpEffectComposer);
 
-	effect = computed(() => {
+	protected effect = computed(() => {
 		const [scene, camera] = [this.effectComposer.scene(), this.effectComposer.camera()];
 		return new N8AOPostPass(scene, camera);
 	});

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

@@ -10,7 +10,7 @@ import {
 	input,
 	viewChild,
 } from '@angular/core';
-import { extend, getLocalState, injectBeforeRender, injectStore, pick } from 'angular-three';
+import { extend, getInstanceState, injectBeforeRender, injectStore, pick } from 'angular-three';
 import { mergeInputs } from 'ngxtension/inject-inputs';
 import {
 	DepthDownsamplingPass,
@@ -22,7 +22,8 @@ import {
 	Pass,
 	RenderPass,
 } from 'postprocessing';
-import { Camera, Group, HalfFloatType, NoToneMapping, Scene, TextureDataType } from 'three';
+import * as THREE from 'three';
+import { Group } from 'three';
 import { isWebGL2Available } from 'three-stdlib';
 
 export interface NgtpEffectComposerOptions {
@@ -34,18 +35,18 @@ export interface NgtpEffectComposerOptions {
 	autoClear: boolean;
 	resolutionScale?: number;
 	multisampling: number;
-	frameBufferType: TextureDataType;
+	frameBufferType: THREE.TextureDataType;
 	renderPriority: number;
-	camera?: Camera;
-	scene?: Scene;
+	camera?: THREE.Camera;
+	scene?: THREE.Scene;
 }
 
 const defaultOptions: NgtpEffectComposerOptions = {
 	enabled: true,
 	renderPriority: 1,
 	autoClear: true,
 	multisampling: 8,
-	frameBufferType: HalfFloatType,
+	frameBufferType: THREE.HalfFloatType,
 };
 
 function isConvolution(effect: Effect) {
@@ -67,10 +68,10 @@ export class NgtpEffectComposer {
 
 	private injector = inject(Injector);
 	private store = injectStore();
-	private size = this.store.select('size');
-	private gl = this.store.select('gl');
-	private defaultScene = this.store.select('scene');
-	private defaultCamera = this.store.select('camera');
+	// private size = this.store.select('size');
+	// private gl = this.store.select('gl');
+	// private defaultScene = this.store.select('scene');
+	// private defaultCamera = this.store.select('camera');
 
 	private depthBuffer = pick(this.options, 'depthBuffer');
 	private stencilBuffer = pick(this.options, 'stencilBuffer');
@@ -81,10 +82,10 @@ export class NgtpEffectComposer {
 	private enabled = pick(this.options, 'enabled');
 	private renderPriority = pick(this.options, 'renderPriority');
 
-	scene = computed(() => this.options().scene ?? this.defaultScene());
-	camera = computed(() => this.options().camera ?? this.defaultCamera());
+	scene = computed(() => this.options().scene ?? this.store.scene());
+	camera = computed(() => this.options().camera ?? this.store.camera());
 
-	private groupRef = viewChild.required<ElementRef<Group>>('group');
+	private groupRef = viewChild.required<ElementRef<THREE.Group>>('group');
 
 	private priority = computed(() => {
 		const enabled = this.enabled();
@@ -105,7 +106,7 @@ export class NgtpEffectComposer {
 			enableNormalPass,
 			resolutionScale,
 		] = [
-			this.gl(),
+			this.store.gl(),
 			this.scene(),
 			this.camera(),
 			this.depthBuffer(),
@@ -149,16 +150,16 @@ export class NgtpEffectComposer {
 
 		// NOTE: Disable tone mapping because threejs disallows tonemapping on render targets
 		effect((onCleanup) => {
-			const gl = this.gl();
+			const gl = this.store.gl();
 			const currentTonemapping = gl.toneMapping;
-			gl.toneMapping = NoToneMapping;
+			gl.toneMapping = THREE.NoToneMapping;
 			onCleanup(() => {
 				gl.toneMapping = currentTonemapping;
 			});
 		});
 
 		effect(() => {
-			const [{ composer }, { width, height }] = [this.composerData(), this.size()];
+			const [{ composer }, width, height] = [this.composerData(), this.store.size.width(), this.store.size.height()];
 			if (composer) {
 				composer.setSize(width, height);
 			}
@@ -174,10 +175,10 @@ export class NgtpEffectComposer {
 			const passes: Pass[] = [];
 
 			if (composer) {
-				const localState = getLocalState(group);
-				if (!localState) return;
+				const instanceState = getInstanceState(group);
+				if (!instanceState) return;
 
-				const children = localState.nonObjects();
+				const children = instanceState.nonObjects();
 				for (let i = 0; i < children.length; i++) {
 					const child = children[i];
 					if (child instanceof Effect) {
@@ -222,7 +223,7 @@ export class NgtpEffectComposer {
 					const [{ composer }, { enabled, autoClear, stencilBuffer }, gl] = [
 						this.composerData(),
 						this.options(),
-						this.gl(),
+						this.store.snapshot.gl,
 					];
 
 					if (enabled) {

libs/postprocessing/src/lib/effect.ts

@@ -31,6 +31,6 @@ export class NgtpEffect {
 	opacity = input(this.defaultEffectOptions?.opacity);
 
 	private store = injectStore();
-	camera = this.store.select('camera');
-	invalidate = this.store.select('invalidate');
+	camera = this.store.camera;
+	invalidate = this.store.invalidate;
 }

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

@@ -2,7 +2,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, computed, e
 import { NgtArgs } from 'angular-three';
 import { mergeInputs } from 'ngxtension/inject-inputs';
 import { Effect } from 'postprocessing';
-import { CanvasTexture, Color, NearestFilter, RepeatWrapping, Texture, Uniform } from 'three';
+import * as THREE from 'three';
 
 const fragment = /* language=glsl glsl */ `
 uniform sampler2D uCharacters;
@@ -63,12 +63,12 @@ export class ASCIIEffect extends Effect {
 		color = '#ffffff',
 		invert = false,
 	}: ASCIIEffectOptions = {}) {
-		const uniforms = new Map<string, Uniform>([
-			['uCharacters', new Uniform(new Texture())],
-			['uCellSize', new Uniform(cellSize)],
-			['uCharactersCount', new Uniform(characters.length)],
-			['uColor', new Uniform(new Color(color))],
-			['uInvert', new Uniform(invert)],
+		const uniforms = new Map<string, THREE.Uniform>([
+			['uCharacters', new THREE.Uniform(new THREE.Texture())],
+			['uCellSize', new THREE.Uniform(cellSize)],
+			['uCharactersCount', new THREE.Uniform(characters.length)],
+			['uColor', new THREE.Uniform(new THREE.Color(color))],
+			['uInvert', new THREE.Uniform(invert)],
 		]);
 
 		super('ASCIIEffect', fragment, { uniforms });
@@ -81,14 +81,21 @@ export class ASCIIEffect extends Effect {
 	}
 
 	/** Draws the characters on a Canvas and returns a texture */
-	public createCharactersTexture(characters: string, font: string, fontSize: number): Texture {
+	public createCharactersTexture(characters: string, font: string, fontSize: number): THREE.Texture {
 		const canvas = document.createElement('canvas');
 		const SIZE = 1024;
 		const MAX_PER_ROW = 16;
 		const CELL = SIZE / MAX_PER_ROW;
 
 		canvas.width = canvas.height = SIZE;
-		const texture = new CanvasTexture(canvas, undefined, RepeatWrapping, RepeatWrapping, NearestFilter, NearestFilter);
+		const texture = new THREE.CanvasTexture(
+			canvas,
+			undefined,
+			THREE.RepeatWrapping,
+			THREE.RepeatWrapping,
+			THREE.NearestFilter,
+			THREE.NearestFilter,
+		);
 		const context = canvas.getContext('2d');
 
 		if (!context) {
@@ -133,7 +140,8 @@ const defaultOptions: ASCIIEffectOptions = {
 })
 export class NgtpASCII {
 	options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
-	effect = computed(() => new ASCIIEffect(this.options()));
+
+	protected effect = computed(() => new ASCIIEffect(this.options()));
 
 	constructor() {
 		effect((onCleanup) => {

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

@@ -3,8 +3,6 @@ import { NgtArgs, extend } from 'angular-three';
 import { BlendFunction, BloomEffect, BloomEffectOptions } from 'postprocessing';
 import { NgtpEffect, NgtpEffectBlendMode, provideDefaultEffectOptions } from '../effect';
 
-extend({ BloomEffect });
-
 @Component({
 	selector: 'ngtp-bloom',
 	template: `
@@ -20,6 +18,11 @@ extend({ BloomEffect });
 	providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD })],
 })
 export class NgtpBloom {
-	effect = inject(NgtpEffect, { host: true });
 	options = input({} as Omit<BloomEffectOptions, 'blendFunction'>);
+
+	protected effect = inject(NgtpEffect, { host: true });
+
+	constructor() {
+		extend({ BloomEffect });
+	}
 }

libs/postprocessing/src/lib/effects/brightness-contrast.ts

@@ -3,8 +3,6 @@ import { NgtArgs, extend } from 'angular-three';
 import { BrightnessContrastEffect } from 'postprocessing';
 import { NgtpEffect, NgtpEffectBlendMode } from '../effect';
 
-extend({ BrightnessContrastEffect });
-
 export type BrightnessEffectOptions = NonNullable<ConstructorParameters<typeof BrightnessContrastEffect>[0]>;
 
 @Component({
@@ -21,6 +19,10 @@ export type BrightnessEffectOptions = NonNullable<ConstructorParameters<typeof B
 	hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
 })
 export class NgtpBrightnessContrast {
-	effect = inject(NgtpEffect, { host: true });
 	options = input({} as Omit<BrightnessEffectOptions, 'blendFunction'>);
+	protected effect = inject(NgtpEffect, { host: true });
+
+	constructor() {
+		extend({ BrightnessContrastEffect });
+	}
 }

libs/postprocessing/src/lib/effects/chromatic-abberation.ts

@@ -3,8 +3,6 @@ import { NgtArgs, extend } from 'angular-three';
 import { ChromaticAberrationEffect } from 'postprocessing';
 import { NgtpEffect, NgtpEffectBlendMode } from '../effect';
 
-extend({ ChromaticAberrationEffect });
-
 export type ChromaticAberrationEffectOptions = Partial<
 	NonNullable<ConstructorParameters<typeof ChromaticAberrationEffect>[0]>
 >;
@@ -23,6 +21,10 @@ export type ChromaticAberrationEffectOptions = Partial<
 	hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
 })
 export class NgtpChromaticAberration {
-	effect = inject(NgtpEffect, { host: true });
 	options = input({} as Omit<ChromaticAberrationEffectOptions, 'blendFunction'>);
+	protected effect = inject(NgtpEffect, { host: true });
+
+	constructor() {
+		extend({ ChromaticAberrationEffect });
+	}
 }

libs/postprocessing/src/lib/effects/color-average.ts

@@ -3,8 +3,6 @@ import { NgtArgs, extend } from 'angular-three';
 import { mergeInputs } from 'ngxtension/inject-inputs';
 import { BlendFunction, ColorAverageEffect } from 'postprocessing';
 
-extend({ ColorAverageEffect });
-
 @Component({
 	selector: 'ngtp-color-average',
 	template: `
@@ -21,4 +19,8 @@ export class NgtpColorAverage {
 		{ blendFunction: BlendFunction.NORMAL },
 		{ transform: mergeInputs({ blendFunction: BlendFunction.NORMAL }) },
 	);
+
+	constructor() {
+		extend({ ColorAverageEffect });
+	}
 }

libs/postprocessing/src/lib/effects/color-depth.ts

@@ -3,8 +3,6 @@ import { NgtArgs, extend } from 'angular-three';
 import { ColorDepthEffect } from 'postprocessing';
 import { NgtpEffect, NgtpEffectBlendMode } from '../effect';
 
-extend({ ColorDepthEffect });
-
 export type ColorDepthEffectOptions = Partial<NonNullable<ConstructorParameters<typeof ColorDepthEffect>[0]>>;
 
 @Component({
@@ -21,6 +19,10 @@ export type ColorDepthEffectOptions = Partial<NonNullable<ConstructorParameters<
 	hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
 })
 export class NgtpColorDepth {
-	effect = inject(NgtpEffect, { host: true });
 	options = input({} as Omit<ColorDepthEffectOptions, 'blendFunction'>);
+	protected effect = inject(NgtpEffect, { host: true });
+
+	constructor() {
+		extend({ ColorDepthEffect });
+	}
 }

libs/postprocessing/src/lib/effects/depth-of-field.ts

@@ -9,11 +9,11 @@ import {
 } from '@angular/core';
 import { NgtAnyRecord, NgtArgs, NgtVector3 } from 'angular-three';
 import { DepthOfFieldEffect, MaskFunction } from 'postprocessing';
-import { DepthPackingStrategies, Texture, Vector3 } from 'three';
+import * as THREE from 'three';
 import { NgtpEffectComposer } from '../effect-composer';
 
 type DOFOptions = NonNullable<ConstructorParameters<typeof DepthOfFieldEffect>[1]> &
-	Partial<{ target: NgtVector3; depthTexture: { texture: Texture; packing: DepthPackingStrategies } }>;
+	Partial<{ target: NgtVector3; depthTexture: { texture: THREE.Texture; packing: THREE.DepthPackingStrategies } }>;
 
 @Component({
 	selector: 'ngtp-depth-of-field',
@@ -27,20 +27,23 @@ type DOFOptions = NonNullable<ConstructorParameters<typeof DepthOfFieldEffect>[1
 export class NgtpDepthOfField {
 	options = input({} as DOFOptions);
 
-	private autoFocus = computed(() => this.options().target != null);
-
 	private effectComposer = inject(NgtpEffectComposer);
 
-	effect = computed(() => {
-		const [camera, options, autoFocus] = [this.effectComposer.camera(), this.options(), this.autoFocus()];
+	protected effect = computed(() => {
+		const [camera, options] = [this.effectComposer.camera(), this.options()];
+
+		const autoFocus = options.target != null;
 
 		const effect = new DepthOfFieldEffect(camera, options);
 
-		// Creating a target enables autofocus, R3F will set via props
-		if (autoFocus) effect.target = new Vector3();
+		// Creating a target enables autofocus, NGT will set via props
+		if (autoFocus) effect.target = new THREE.Vector3();
 		// Depth texture for depth picking with optional packing strategy
 		if (options.depthTexture) {
-			effect.setDepthTexture(options.depthTexture.texture, options.depthTexture.packing as DepthPackingStrategies);
+			effect.setDepthTexture(
+				options.depthTexture.texture,
+				options.depthTexture.packing as THREE.DepthPackingStrategies,
+			);
 		}
 		// Temporary fix that restores DOF 6.21.3 behavior, everything since then lets shapes leak through the blur
 		const maskPass = (effect as NgtAnyRecord)['maskPass'];

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

@@ -3,8 +3,6 @@ import { NgtArgs, extend } from 'angular-three';
 import { DepthEffect } from 'postprocessing';
 import { NgtpEffect, NgtpEffectBlendMode } from '../effect';
 
-extend({ DepthEffect });
-
 export type DepthEffectOptions = Partial<NonNullable<ConstructorParameters<typeof DepthEffect>[0]>>;
 
 @Component({
@@ -21,6 +19,10 @@ export type DepthEffectOptions = Partial<NonNullable<ConstructorParameters<typeo
 	hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
 })
 export class NgtpDepth {
-	effect = inject(NgtpEffect, { host: true });
 	options = input({} as Omit<DepthEffectOptions, 'blendFunction'>);
+	protected effect = inject(NgtpEffect, { host: true });
+
+	constructor() {
+		extend({ DepthEffect });
+	}
 }