feat: add effects

Author: nartc

libs/angular-three-postprocessing/.eslintrc.json

@@ -9,6 +9,9 @@
                 "@angular-eslint/directive-class-suffix": "off",
                 "@angular-eslint/component-selector": "off",
                 "@angular-eslint/component-class-suffix": "off",
+                "@angular-eslint/no-inputs-metadata-property": "off",
+                "@angular-eslint/no-outputs-metadata-property": "off",
+                "@angular-eslint/no-output-native": "off",
                 "@typescript-eslint/no-empty-function": "off",
                 "@typescript-eslint/ban-ts-comment": "off",
                 "@typescript-eslint/no-explicit-any": "off",

libs/angular-three-postprocessing/effects/README.md

@@ -0,0 +1,3 @@
+# angular-three-postprocessing/effects
+
+Secondary entry point of `angular-three-postprocessing`. It can be used by importing from `angular-three-postprocessing/effects`.

libs/angular-three-postprocessing/effects/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "src/index.ts"
+    }
+}

libs/angular-three-postprocessing/effects/src/index.ts

@@ -0,0 +1,14 @@
+export * from './lib/bloom/bloom';
+export * from './lib/brightness-contrast/brightness-contrast';
+export * from './lib/color-depth/color-depth';
+export * from './lib/depth/depth';
+export * from './lib/dot-screen/dot-screen';
+export * from './lib/hue-saturation/hue-saturation';
+export * from './lib/lut/lut';
+export * from './lib/noise/noise';
+export * from './lib/scanline/scanline';
+export * from './lib/sepia/sepia';
+export * from './lib/ssao/ssao';
+export * from './lib/tilt-shift/tilt-shift';
+export * from './lib/tone-mapping/tone-mapping';
+export * from './lib/vignette/vignette';

libs/angular-three-postprocessing/effects/src/lib/bloom/bloom.ts

@@ -0,0 +1,33 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgtArgs } from 'angular-three';
+import { NgtpEffect } from 'angular-three-postprocessing';
+import { BlendFunction, BloomEffect } from 'postprocessing';
+
+@Component({
+    selector: 'ngtp-bloom',
+    standalone: true,
+    template: `
+        <ngt-primitive *args="[get('effect')]" ngtCompound />
+    `,
+    imports: [NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    inputs: [
+        'mipmapBlur',
+        'luminanceThreshold',
+        'luminanceSmoothing',
+        'intensity',
+        'resolutionScale',
+        'resolutionX',
+        'resolutionY',
+        'width',
+        'height',
+        'kernelSize',
+    ],
+})
+export class NgtpBloom extends NgtpEffect<BloomEffect> {
+    override get effectConstructor() {
+        return BloomEffect;
+    }
+
+    override defaultBlendMode: BlendFunction = BlendFunction.ADD;
+}

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

@@ -0,0 +1,20 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgtArgs } from 'angular-three';
+import { NgtpEffect } from 'angular-three-postprocessing';
+import { BrightnessContrastEffect } from 'postprocessing';
+
+@Component({
+    selector: 'ngtp-brightness-contrast',
+    standalone: true,
+    template: `
+        <ngt-primitive *args="[get('effect')]" ngtCompound />
+    `,
+    imports: [NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    inputs: ['brightness', 'contrast'],
+})
+export class NgtpBrightnessContrast extends NgtpEffect<BrightnessContrastEffect> {
+    override get effectConstructor() {
+        return BrightnessContrastEffect;
+    }
+}

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

@@ -0,0 +1,20 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgtArgs } from 'angular-three';
+import { NgtpEffect } from 'angular-three-postprocessing';
+import { ColorDepthEffect } from 'postprocessing';
+
+@Component({
+    selector: 'ngtp-color-depth',
+    standalone: true,
+    template: `
+        <ngt-primitive *args="[get('effect')]" ngtCompound />
+    `,
+    imports: [NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    inputs: ['bits'],
+})
+export class NgtpColorDepth extends NgtpEffect<ColorDepthEffect> {
+    override get effectConstructor() {
+        return ColorDepthEffect;
+    }
+}

libs/angular-three-postprocessing/effects/src/lib/depth/depth.ts

@@ -0,0 +1,20 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgtArgs } from 'angular-three';
+import { NgtpEffect } from 'angular-three-postprocessing';
+import { DepthEffect } from 'postprocessing';
+
+@Component({
+    selector: 'ngtp-depth',
+    standalone: true,
+    template: `
+        <ngt-primitive *args="[get('effect')]" ngtCompound />
+    `,
+    imports: [NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    inputs: ['inverted'],
+})
+export class NgtpDepth extends NgtpEffect<DepthEffect> {
+    override get effectConstructor() {
+        return DepthEffect;
+    }
+}

libs/angular-three-postprocessing/effects/src/lib/dot-screen/dot-screen.ts

@@ -0,0 +1,20 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgtArgs } from 'angular-three';
+import { NgtpEffect } from 'angular-three-postprocessing';
+import { DotScreenEffect } from 'postprocessing';
+
+@Component({
+    selector: 'ngtp-dot-screen',
+    standalone: true,
+    template: `
+        <ngt-primitive *args="[get('effect')]" ngtCompound />
+    `,
+    imports: [NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    inputs: ['angle', 'scale'],
+})
+export class NgtpDotScreen extends NgtpEffect<DotScreenEffect> {
+    override get effectConstructor() {
+        return DotScreenEffect;
+    }
+}

libs/angular-three-postprocessing/effects/src/lib/hue-saturation/hue-saturation.ts

@@ -0,0 +1,20 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgtArgs } from 'angular-three';
+import { NgtpEffect } from 'angular-three-postprocessing';
+import { HueSaturationEffect } from 'postprocessing';
+
+@Component({
+    selector: 'ngtp-hue-saturation',
+    standalone: true,
+    template: `
+        <ngt-primitive *args="[get('effect')]" ngtCompound />
+    `,
+    imports: [NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    inputs: ['hue', 'saturation'],
+})
+export class NgtpHueSaturation extends NgtpEffect<HueSaturationEffect> {
+    override get effectConstructor() {
+        return HueSaturationEffect;
+    }
+}