more postprocessing

ctran · ctran · commit d01bce3cd3ae · 2024-06-20T20:56:03.000-05:00
diff --git a/apps/kitchen-sink/src/app/postprocessing/basic/experience.ts b/apps/kitchen-sink/src/app/postprocessing/basic/experience.ts
@@ -1,6 +1,6 @@
 import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, ElementRef, viewChild } from '@angular/core';
 import { NgtArgs, extend, injectBeforeRender } from 'angular-three';
-import { NgtpDepthOfField, NgtpEffectComposer, NgtpEffects } from 'angular-three-postprocessing';
+import { NgtpEffectComposer, NgtpEffects, NgtpGlitch } from 'angular-three-postprocessing';
 import * as THREE from 'three';
 import { Group, Vector2 } from 'three';
 
@@ -30,12 +30,12 @@ extend(THREE);
 
 		<ngtp-effect-composer>
 			<ng-template effects>
-				<ngtp-depth-of-field [options]="{ focusDistance: 0, focalLength: 0.02, bokehScale: 2 }" />
+				<ngtp-glitch />
 			</ng-template>
 		</ngtp-effect-composer>
 	`,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
-	imports: [NgtpEffectComposer, NgtpEffects, NgtArgs, NgtpDepthOfField],
+	imports: [NgtpEffectComposer, NgtpEffects, NgtArgs, NgtpGlitch],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: { class: 'experience-basic-postprocessing' },
 })
diff --git a/libs/postprocessing/src/lib/effects/dot-screen.ts b/libs/postprocessing/src/lib/effects/dot-screen.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
+import { NgtArgs, extend } from 'angular-three';
+import { DotScreenEffect } from 'postprocessing';
+import { NgtpEffect, NgtpEffectBlendMode, NgtpEffectHostDirective } from '../effect';
+
+extend({ DotScreenEffect });
+
+export type DotScreenEffectOptions = Partial<NonNullable<ConstructorParameters<typeof DotScreenEffect>[0]>>;
+
+@Component({
+	selector: 'ngtp-dot-screen',
+	template: `
+		<ngt-dot-screen-effect *args="[options()]" [camera]="effect.camera()" [ref]="effect.effectRef()" ngtCompound>
+			<ngtp-effect-blend-mode />
+			<ng-content />
+		</ngt-dot-screen-effect>
+	`,
+	standalone: true,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [NgtArgs, NgtpEffectBlendMode],
+	hostDirectives: [NgtpEffectHostDirective],
+})
+export class NgtpDotScreen {
+	effect = inject(NgtpEffect, { host: true });
+	options = input({} as Omit<DotScreenEffectOptions, 'blendFunction'>);
+}
diff --git a/libs/postprocessing/src/lib/effects/fxaa.ts b/libs/postprocessing/src/lib/effects/fxaa.ts
@@ -0,0 +1,27 @@
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
+import { NgtArgs, extend } from 'angular-three';
+import { FXAAEffect } from 'postprocessing';
+import { NgtpEffect, NgtpEffectBlendMode, NgtpEffectHostDirective } from '../effect';
+
+extend({ FXAAEffect });
+
+export type FXAAEffectOptions = Partial<NonNullable<ConstructorParameters<typeof FXAAEffect>[0]>>;
+
+@Component({
+	selector: 'ngtp-fxaa',
+	template: `
+		<ngt-fXAA-effect *args="[options()]" [camera]="effect.camera()" [ref]="effect.effectRef()" ngtCompound>
+			<ngtp-effect-blend-mode />
+			<ng-content />
+		</ngt-fXAA-effect>
+	`,
+	standalone: true,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [NgtArgs, NgtpEffectBlendMode],
+	hostDirectives: [NgtpEffectHostDirective],
+})
+export class NgtpFXAA {
+	effect = inject(NgtpEffect, { host: true });
+	options = input({} as Omit<FXAAEffectOptions, 'blendFunction'>);
+}
diff --git a/libs/postprocessing/src/lib/effects/glitch.ts b/libs/postprocessing/src/lib/effects/glitch.ts
@@ -0,0 +1,86 @@
+import {
+	CUSTOM_ELEMENTS_SCHEMA,
+	ChangeDetectionStrategy,
+	Component,
+	afterNextRender,
+	computed,
+	input,
+} from '@angular/core';
+import { NgtArgs, NgtVector2, injectNgtRef, injectNgtStore } from 'angular-three';
+import { injectAutoEffect } from 'ngxtension/auto-effect';
+import { mergeInputs } from 'ngxtension/inject-inputs';
+import { GlitchEffect, GlitchMode } from 'postprocessing';
+import { vector2 } from '../utils';
+
+export type GlitchProps = NonNullable<ConstructorParameters<typeof GlitchEffect>[0]> &
+	Partial<{
+		mode: GlitchMode;
+		active: boolean;
+		delay: NgtVector2;
+		duration: NgtVector2;
+		chromaticAberrationOffset: NgtVector2;
+		strength: NgtVector2;
+	}>;
+
+@Component({
+	selector: 'ngtp-glitch',
+	standalone: true,
+	template: `
+		<ngt-primitive *args="[effect()]" [ref]="effectRef()" [dispose]="null" ngtCompound />
+	`,
+	imports: [NgtArgs],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NgtpGlitch {
+	autoEffect = injectAutoEffect();
+	store = injectNgtStore();
+	invalidate = this.store.select('invalidate');
+
+	effectRef = input(injectNgtRef<GlitchEffect>());
+	options = input({ active: true } as GlitchProps, { transform: mergeInputs({ active: true }) });
+
+	active = computed(() => this.options().active);
+	mode = computed(() => this.options().mode);
+
+	delay = vector2(this.options, 'delay');
+	duration = vector2(this.options, 'duration');
+	chromaticAberrationOffset = vector2(this.options, 'chromaticAberrationOffset');
+	strength = vector2(this.options, 'strength');
+
+	effect = computed(() => {
+		const [
+			{ ratio, dtSize, columns, blendFunction, perturbationMap },
+			delay,
+			duration,
+			chromaticAberrationOffset,
+			strength,
+		] = [this.options(), this.delay(), this.duration(), this.chromaticAberrationOffset(), this.strength()];
+		return new GlitchEffect({
+			ratio,
+			dtSize,
+			columns,
+			blendFunction,
+			perturbationMap,
+			delay,
+			duration,
+			chromaticAberrationOffset,
+			strength,
+		});
+	});
+
+	constructor() {
+		afterNextRender(() => {
+			this.autoEffect(() => {
+				const effect = this.effect();
+				return () => effect.dispose();
+			});
+
+			this.autoEffect(() => {
+				const [effect, invalidate, mode, active] = [this.effect(), this.invalidate(), this.mode(), this.active()];
+				effect.mode = active ? mode || GlitchMode.SPORADIC : GlitchMode.DISABLED;
+				invalidate();
+			});
+		});
+	}
+}
diff --git a/libs/postprocessing/src/lib/effects/index.ts b/libs/postprocessing/src/lib/effects/index.ts
@@ -6,3 +6,6 @@ export * from './color-average';
 export * from './color-depth';
 export * from './depth';
 export * from './depth-of-field';
+export * from './dot-screen';
+export * from './fxaa';
+export * from './glitch';
diff --git a/libs/postprocessing/src/lib/utils.ts b/libs/postprocessing/src/lib/utils.ts
@@ -0,0 +1,11 @@
+import { Signal, computed } from '@angular/core';
+import { Vector2, Vector2Tuple } from 'three';
+
+export function vector2<TObject extends object>(options: Signal<TObject>, key: keyof TObject) {
+	return computed(() => {
+		const value = options()[key];
+		if (typeof value === 'number') return new Vector2(value, value);
+		else if (value) return new Vector2(...(value as Vector2Tuple));
+		else return new Vector2();
+	});
+}
