feat(postprocessing): migrate all simple effects

Author: Chau Tran

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

@@ -0,0 +1,19 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import { NgtArgs, extend } from 'angular-three';
+import { NgtpEffect } from 'angular-three-postprocessing';
+import { BrightnessContrastEffect } from 'postprocessing';
+
+extend({ BrightnessContrastEffect });
+
+@Component({
+    selector: 'ngtp-brightness-contrast',
+    standalone: true,
+    template: `
+        <ngt-brightness-contrast-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+            <ng-content />
+        </ngt-brightness-contrast-effect>
+    `,
+    imports: [NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class NgtpBrightnessContrast extends NgtpEffect<BrightnessContrastEffect> {}

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

@@ -0,0 +1,19 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import { NgtArgs, extend } from 'angular-three';
+import { NgtpEffect } from 'angular-three-postprocessing';
+import { ColorDepthEffect } from 'postprocessing';
+
+extend({ ColorDepthEffect });
+
+@Component({
+    selector: 'ngtp-color-depth',
+    standalone: true,
+    template: `
+        <ngt-color-depth-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+            <ng-content />
+        </ngt-color-depth-effect>
+    `,
+    imports: [NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class NgtpColorDepth extends NgtpEffect<ColorDepthEffect> {}

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

@@ -0,0 +1,19 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import { NgtArgs, extend } from 'angular-three';
+import { NgtpEffect } from 'angular-three-postprocessing';
+import { DepthEffect } from 'postprocessing';
+
+extend({ DepthEffect });
+
+@Component({
+    selector: 'ngtp-depth',
+    standalone: true,
+    template: `
+        <ngt-depth-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+            <ng-content />
+        </ngt-depth-effect>
+    `,
+    imports: [NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class NgtpDepth extends NgtpEffect<DepthEffect> {}

libs/postprocessing/effects/src/hue-saturation/hue-saturation.ts

@@ -0,0 +1,19 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import { NgtArgs, extend } from 'angular-three';
+import { NgtpEffect } from 'angular-three-postprocessing';
+import { HueSaturationEffect } from 'postprocessing';
+
+extend({ HueSaturationEffect });
+
+@Component({
+    selector: 'ngtp-hue-saturation',
+    standalone: true,
+    template: `
+        <ngt-hue-saturation-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+            <ng-content />
+        </ngt-hue-saturation-effect>
+    `,
+    imports: [NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class NgtpHueSaturation extends NgtpEffect<HueSaturationEffect> {}

libs/postprocessing/effects/src/index.ts

@@ -1,3 +1,14 @@
 export * from './bloom/bloom';
+export * from './brightness-contrast/brightness-contrast';
+export * from './color-depth/color-depth';
+export * from './depth/depth';
 export * from './dot-screen/dot-screen';
+export * from './hue-saturation/hue-saturation';
+export * from './noise/noise';
 export * from './scanline/scanline';
+export * from './sepia/sepia';
+export * from './shock-wave/shock-wave';
+export * from './smaa/smaa';
+export * from './tilt-shift/tilt-shift';
+export * from './tone-mapping/tone-mapping';
+export * from './vignette/vignette';

libs/postprocessing/effects/src/noise/noise.ts

@@ -0,0 +1,21 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import { NgtArgs, extend } from 'angular-three';
+import { NgtpEffect } from 'angular-three-postprocessing';
+import { BlendFunction, NoiseEffect } from 'postprocessing';
+
+extend({ NoiseEffect });
+
+@Component({
+    selector: 'ngtp-noise',
+    standalone: true,
+    template: `
+        <ngt-noise-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+            <ng-content />
+        </ngt-noise-effect>
+    `,
+    imports: [NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class NgtpNoise extends NgtpEffect<NoiseEffect> {
+    override defaultBlendFunction = BlendFunction.COLOR_DODGE;
+}

libs/postprocessing/effects/src/sepia/sepia.ts

@@ -0,0 +1,19 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import { NgtArgs, extend } from 'angular-three';
+import { NgtpEffect } from 'angular-three-postprocessing';
+import { SepiaEffect } from 'postprocessing';
+
+extend({ SepiaEffect });
+
+@Component({
+    selector: 'ngtp-sepia',
+    standalone: true,
+    template: `
+        <ngt-sepia-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+            <ng-content />
+        </ngt-sepia-effect>
+    `,
+    imports: [NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class NgtpSepia extends NgtpEffect<SepiaEffect> {}

libs/postprocessing/effects/src/shock-wave/shock-wave.ts

@@ -0,0 +1,19 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import { NgtArgs, extend } from 'angular-three';
+import { NgtpEffect } from 'angular-three-postprocessing';
+import { ShockWaveEffect } from 'postprocessing';
+
+extend({ ShockWaveEffect });
+
+@Component({
+    selector: 'ngtp-noise',
+    standalone: true,
+    template: `
+        <ngt-shock-wave-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+            <ng-content />
+        </ngt-shock-wave-effect>
+    `,
+    imports: [NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class NgtpShockWave extends NgtpEffect<ShockWaveEffect> {}

libs/postprocessing/effects/src/smaa/smaa.ts

@@ -0,0 +1,19 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import { NgtArgs, extend } from 'angular-three';
+import { NgtpEffect } from 'angular-three-postprocessing';
+import { SMAAEffect } from 'postprocessing';
+
+extend({ SMAAEffect });
+
+@Component({
+    selector: 'ngtp-SMAA',
+    standalone: true,
+    template: `
+        <ngt-SMAA-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+            <ng-content />
+        </ngt-SMAA-effect>
+    `,
+    imports: [NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class NgtpSMAA extends NgtpEffect<SMAAEffect> {}

libs/postprocessing/effects/src/tilt-shift/tilt-shift.ts

@@ -0,0 +1,21 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import { NgtArgs, extend } from 'angular-three';
+import { NgtpEffect } from 'angular-three-postprocessing';
+import { BlendFunction, TiltShiftEffect } from 'postprocessing';
+
+extend({ TiltShiftEffect });
+
+@Component({
+    selector: 'ngtp-tilt-shift',
+    standalone: true,
+    template: `
+        <ngt-tilt-shift-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+            <ng-content />
+        </ngt-tilt-shift-effect>
+    `,
+    imports: [NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class NgtpTiltShift extends NgtpEffect<TiltShiftEffect> {
+    override defaultBlendFunction = BlendFunction.ADD;
+}

libs/postprocessing/effects/src/tone-mapping/tone-mapping.ts

@@ -0,0 +1,19 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import { NgtArgs, extend } from 'angular-three';
+import { NgtpEffect } from 'angular-three-postprocessing';
+import { ToneMappingEffect } from 'postprocessing';
+
+extend({ ToneMappingEffect });
+
+@Component({
+    selector: 'ngtp-tone-mapping',
+    standalone: true,
+    template: `
+        <ngt-tone-mapping-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+            <ng-content />
+        </ngt-tone-mapping-effect>
+    `,
+    imports: [NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class NgtpToneMapping extends NgtpEffect<ToneMappingEffect> {}

libs/postprocessing/effects/src/vignette/vignette.ts

@@ -0,0 +1,19 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import { NgtArgs, extend } from 'angular-three';
+import { NgtpEffect } from 'angular-three-postprocessing';
+import { VignetteEffect } from 'postprocessing';
+
+extend({ VignetteEffect });
+
+@Component({
+    selector: 'ngtp-vignette',
+    standalone: true,
+    template: `
+        <ngt-vignette-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+            <ng-content />
+        </ngt-vignette-effect>
+    `,
+    imports: [NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class NgtpVignette extends NgtpEffect<VignetteEffect> {}