angular-three-postprocessing 4.0.0-next.116 → 4.0.0-next.119
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -0
- package/fesm2022/angular-three-postprocessing-n8ao.mjs +35 -0
- package/fesm2022/angular-three-postprocessing-n8ao.mjs.map +1 -1
- package/fesm2022/angular-three-postprocessing.mjs +930 -5
- package/fesm2022/angular-three-postprocessing.mjs.map +1 -1
- package/n8ao/README.md +143 -0
- package/package.json +1 -1
- package/types/angular-three-postprocessing-n8ao.d.ts +128 -0
- package/types/angular-three-postprocessing.d.ts +1156 -3
package/README.md
CHANGED
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
This is the main entry point for post-processing effects in Angular Three. It provides a way to apply various visual effects to your 3D scene after it has been rendered. This library relies on `maath`, `three-stdlib`, and `postprocessing` as dependencies.
|
|
4
4
|
|
|
5
|
+
## Documentation
|
|
6
|
+
|
|
7
|
+
All public APIs are documented with JSDoc comments. Your IDE will provide inline documentation, parameter hints, and examples as you code.
|
|
8
|
+
|
|
5
9
|
## Installation
|
|
6
10
|
|
|
7
11
|
```bash
|
|
@@ -28,11 +28,42 @@ const defaultOptions = {
|
|
|
28
28
|
transparencyAware: false,
|
|
29
29
|
accumulate: false,
|
|
30
30
|
};
|
|
31
|
+
/**
|
|
32
|
+
* Angular component that applies N8AO (N8 Ambient Occlusion) to the scene.
|
|
33
|
+
*
|
|
34
|
+
* N8AO is a high-quality screen-space ambient occlusion effect that adds
|
|
35
|
+
* realistic shadowing to crevices, corners, and areas where objects meet.
|
|
36
|
+
* It provides various quality presets and fine-grained control over the
|
|
37
|
+
* AO appearance.
|
|
38
|
+
*
|
|
39
|
+
* @example
|
|
40
|
+
* ```html
|
|
41
|
+
* <ngtp-effect-composer>
|
|
42
|
+
* <ngtp-n8ao [options]="{ intensity: 3, aoRadius: 2 }" />
|
|
43
|
+
* </ngtp-effect-composer>
|
|
44
|
+
* ```
|
|
45
|
+
*
|
|
46
|
+
* @example
|
|
47
|
+
* ```html
|
|
48
|
+
* <!-- Using quality preset -->
|
|
49
|
+
* <ngtp-effect-composer>
|
|
50
|
+
* <ngtp-n8ao [options]="{ quality: 'high' }" />
|
|
51
|
+
* </ngtp-effect-composer>
|
|
52
|
+
* ```
|
|
53
|
+
*/
|
|
31
54
|
class NgtpN8AO {
|
|
32
55
|
constructor() {
|
|
56
|
+
/**
|
|
57
|
+
* Configuration options for the N8AO effect.
|
|
58
|
+
* @see NgtpN8AOOptions
|
|
59
|
+
*/
|
|
33
60
|
this.options = input(defaultOptions, { ...(ngDevMode ? { debugName: "options" } : {}), transform: mergeInputs(defaultOptions) });
|
|
34
61
|
this.quality = pick(this.options, 'quality');
|
|
35
62
|
this.effectComposer = inject(NgtpEffectComposer);
|
|
63
|
+
/**
|
|
64
|
+
* The underlying N8AOPostPass instance.
|
|
65
|
+
* Created with the scene and camera from the effect composer.
|
|
66
|
+
*/
|
|
36
67
|
this.effect = computed(() => {
|
|
37
68
|
const [scene, camera] = [this.effectComposer.scene(), this.effectComposer.camera()];
|
|
38
69
|
return new N8AOPostPass(scene, camera);
|
|
@@ -52,6 +83,10 @@ class NgtpN8AO {
|
|
|
52
83
|
onCleanup(() => effect.dispose());
|
|
53
84
|
});
|
|
54
85
|
}
|
|
86
|
+
/**
|
|
87
|
+
* Applies a quality preset to the effect.
|
|
88
|
+
* Converts the quality string to title case and calls the effect's setQuality method.
|
|
89
|
+
*/
|
|
55
90
|
setQualityEffect() {
|
|
56
91
|
const effect = this.effect();
|
|
57
92
|
if (!effect)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"angular-three-postprocessing-n8ao.mjs","sources":["../../../../libs/postprocessing/n8ao/src/lib/n8ao.ts","../../../../libs/postprocessing/n8ao/src/angular-three-postprocessing-n8ao.ts"],"sourcesContent":["// @ts-expect-error - n8ao is not typed\nimport { N8AOPostPass } from 'n8ao';\n\nimport {\n\tChangeDetectionStrategy,\n\tComponent,\n\tcomputed,\n\tCUSTOM_ELEMENTS_SCHEMA,\n\teffect,\n\tinject,\n\tinput,\n} from '@angular/core';\nimport { applyProps, NgtArgs, pick } from 'angular-three';\nimport { NgtpEffectComposer } from 'angular-three-postprocessing';\nimport { mergeInputs } from 'ngxtension/inject-inputs';\nimport * as THREE from 'three';\n\nexport interface NgtpN8AOOptions {\n\taoRadius: number;\n\taoTones: number;\n\tdistanceFalloff: number;\n\tintensity: number;\n\tbiasOffset: number;\n\tbiasMultiplier: number;\n\taoSamples: number;\n\tdenoiseSamples: number;\n\tdenoiseRadius: number;\n\tcolor: THREE.ColorRepresentation;\n\thalfRes: boolean;\n\tdepthAwareUpsampling: boolean;\n\tscreenSpaceRadius: boolean;\n\trenderMode: 0 | 1 | 2 | 3 | 4;\n\tdenoiseIterations: number;\n\ttransparencyAware: boolean;\n\tgammaCorrection: boolean;\n\tlogarithmicDepthBuffer: boolean;\n\tcolorMultiply: boolean;\n\taccumulate: boolean;\n\tquality?: 'performance' | 'low' | 'medium' | 'high' | 'ultra';\n}\n\nconst defaultOptions: NgtpN8AOOptions = {\n\taoSamples: 16,\n\taoRadius: 5.0,\n\taoTones: 0.0,\n\tdenoiseSamples: 8,\n\tdenoiseRadius: 12,\n\tdistanceFalloff: 1.0,\n\tintensity: 5,\n\tdenoiseIterations: 2.0,\n\trenderMode: 0,\n\tbiasOffset: 0.0,\n\tbiasMultiplier: 0.0,\n\tcolor: 'black',\n\tgammaCorrection: true,\n\tlogarithmicDepthBuffer: false,\n\tscreenSpaceRadius: false,\n\thalfRes: false,\n\tdepthAwareUpsampling: true,\n\tcolorMultiply: true,\n\ttransparencyAware: false,\n\taccumulate: false,\n};\n\n@Component({\n\tselector: 'ngtp-n8ao',\n\ttemplate: `\n\t\t<ngt-primitive *args=\"[effect()]\" />\n\t`,\n\timports: [NgtArgs],\n\tschemas: [CUSTOM_ELEMENTS_SCHEMA],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgtpN8AO {\n\toptions = input(defaultOptions, { transform: mergeInputs(defaultOptions) });\n\n\tprivate quality = pick(this.options, 'quality');\n\n\tprivate effectComposer = inject(NgtpEffectComposer);\n\n\tprotected effect = computed(() => {\n\t\tconst [scene, camera] = [this.effectComposer.scene(), this.effectComposer.camera()];\n\t\treturn new N8AOPostPass(scene, camera);\n\t});\n\n\tconstructor() {\n\t\teffect(() => {\n\t\t\tconst n8aoEffect = this.effect();\n\t\t\tif (!n8aoEffect) return;\n\n\t\t\tconst { quality: _, ...configurations } = this.options();\n\t\t\tapplyProps(n8aoEffect.configuration, configurations);\n\t\t});\n\n\t\teffect(() => {\n\t\t\tthis.setQualityEffect();\n\t\t});\n\n\t\teffect((onCleanup) => {\n\t\t\tconst effect = this.effect();\n\t\t\tonCleanup(() => effect.dispose());\n\t\t});\n\t}\n\n\tprivate setQualityEffect() {\n\t\tconst effect = this.effect();\n\t\tif (!effect) return;\n\n\t\tconst quality = this.quality();\n\t\tif (!quality) return;\n\n\t\tconst titleCaseQuality = quality.charAt(0).toUpperCase() + quality.slice(1);\n\t\teffect.setQuality(titleCaseQuality);\n\t}\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAAA;
|
|
1
|
+
{"version":3,"file":"angular-three-postprocessing-n8ao.mjs","sources":["../../../../libs/postprocessing/n8ao/src/lib/n8ao.ts","../../../../libs/postprocessing/n8ao/src/angular-three-postprocessing-n8ao.ts"],"sourcesContent":["// @ts-expect-error - n8ao is not typed\nimport { N8AOPostPass } from 'n8ao';\n\nimport {\n\tChangeDetectionStrategy,\n\tComponent,\n\tcomputed,\n\tCUSTOM_ELEMENTS_SCHEMA,\n\teffect,\n\tinject,\n\tinput,\n} from '@angular/core';\nimport { applyProps, NgtArgs, pick } from 'angular-three';\nimport { NgtpEffectComposer } from 'angular-three-postprocessing';\nimport { mergeInputs } from 'ngxtension/inject-inputs';\nimport * as THREE from 'three';\n\n/**\n * Configuration options for the N8AO (N8 Ambient Occlusion) effect.\n *\n * N8AO is a high-quality, screen-space ambient occlusion implementation\n * that provides realistic shadowing in crevices and corners.\n */\nexport interface NgtpN8AOOptions {\n\t/**\n\t * Radius of the ambient occlusion effect in world units.\n\t * @default 5.0\n\t */\n\taoRadius: number;\n\n\t/**\n\t * Number of tones for AO gradient.\n\t * @default 0.0\n\t */\n\taoTones: number;\n\n\t/**\n\t * How quickly the AO effect falls off with distance.\n\t * @default 1.0\n\t */\n\tdistanceFalloff: number;\n\n\t/**\n\t * Intensity/strength of the ambient occlusion effect.\n\t * @default 5\n\t */\n\tintensity: number;\n\n\t/**\n\t * Bias offset for depth comparison.\n\t * @default 0.0\n\t */\n\tbiasOffset: number;\n\n\t/**\n\t * Bias multiplier for depth comparison.\n\t * @default 0.0\n\t */\n\tbiasMultiplier: number;\n\n\t/**\n\t * Number of samples for ambient occlusion calculation.\n\t * Higher values = better quality but slower.\n\t * @default 16\n\t */\n\taoSamples: number;\n\n\t/**\n\t * Number of samples for denoising.\n\t * @default 8\n\t */\n\tdenoiseSamples: number;\n\n\t/**\n\t * Radius of the denoising filter.\n\t * @default 12\n\t */\n\tdenoiseRadius: number;\n\n\t/**\n\t * Color of the ambient occlusion shadows.\n\t * @default 'black'\n\t */\n\tcolor: THREE.ColorRepresentation;\n\n\t/**\n\t * Whether to render at half resolution for better performance.\n\t * @default false\n\t */\n\thalfRes: boolean;\n\n\t/**\n\t * Whether to use depth-aware upsampling when using half resolution.\n\t * @default true\n\t */\n\tdepthAwareUpsampling: boolean;\n\n\t/**\n\t * Whether to use screen-space radius instead of world-space.\n\t * @default false\n\t */\n\tscreenSpaceRadius: boolean;\n\n\t/**\n\t * Render mode for debugging and visualization.\n\t * 0: Combined, 1: AO only, 2: Normals, 3: Depth, 4: Denoise\n\t * @default 0\n\t */\n\trenderMode: 0 | 1 | 2 | 3 | 4;\n\n\t/**\n\t * Number of iterations for the denoising filter.\n\t * @default 2.0\n\t */\n\tdenoiseIterations: number;\n\n\t/**\n\t * Whether to handle transparent objects correctly.\n\t * @default false\n\t */\n\ttransparencyAware: boolean;\n\n\t/**\n\t * Whether to apply gamma correction.\n\t * @default true\n\t */\n\tgammaCorrection: boolean;\n\n\t/**\n\t * Whether to use logarithmic depth buffer.\n\t * @default false\n\t */\n\tlogarithmicDepthBuffer: boolean;\n\n\t/**\n\t * Whether to multiply the color instead of darkening.\n\t * @default true\n\t */\n\tcolorMultiply: boolean;\n\n\t/**\n\t * Whether to accumulate samples over frames for better quality.\n\t * @default false\n\t */\n\taccumulate: boolean;\n\n\t/**\n\t * Quality preset that overrides individual settings.\n\t * Options: 'performance', 'low', 'medium', 'high', 'ultra'\n\t * @default undefined\n\t */\n\tquality?: 'performance' | 'low' | 'medium' | 'high' | 'ultra';\n}\n\nconst defaultOptions: NgtpN8AOOptions = {\n\taoSamples: 16,\n\taoRadius: 5.0,\n\taoTones: 0.0,\n\tdenoiseSamples: 8,\n\tdenoiseRadius: 12,\n\tdistanceFalloff: 1.0,\n\tintensity: 5,\n\tdenoiseIterations: 2.0,\n\trenderMode: 0,\n\tbiasOffset: 0.0,\n\tbiasMultiplier: 0.0,\n\tcolor: 'black',\n\tgammaCorrection: true,\n\tlogarithmicDepthBuffer: false,\n\tscreenSpaceRadius: false,\n\thalfRes: false,\n\tdepthAwareUpsampling: true,\n\tcolorMultiply: true,\n\ttransparencyAware: false,\n\taccumulate: false,\n};\n\n/**\n * Angular component that applies N8AO (N8 Ambient Occlusion) to the scene.\n *\n * N8AO is a high-quality screen-space ambient occlusion effect that adds\n * realistic shadowing to crevices, corners, and areas where objects meet.\n * It provides various quality presets and fine-grained control over the\n * AO appearance.\n *\n * @example\n * ```html\n * <ngtp-effect-composer>\n * <ngtp-n8ao [options]=\"{ intensity: 3, aoRadius: 2 }\" />\n * </ngtp-effect-composer>\n * ```\n *\n * @example\n * ```html\n * <!-- Using quality preset -->\n * <ngtp-effect-composer>\n * <ngtp-n8ao [options]=\"{ quality: 'high' }\" />\n * </ngtp-effect-composer>\n * ```\n */\n@Component({\n\tselector: 'ngtp-n8ao',\n\ttemplate: `\n\t\t<ngt-primitive *args=\"[effect()]\" />\n\t`,\n\timports: [NgtArgs],\n\tschemas: [CUSTOM_ELEMENTS_SCHEMA],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgtpN8AO {\n\t/**\n\t * Configuration options for the N8AO effect.\n\t * @see NgtpN8AOOptions\n\t */\n\toptions = input(defaultOptions, { transform: mergeInputs(defaultOptions) });\n\n\tprivate quality = pick(this.options, 'quality');\n\n\tprivate effectComposer = inject(NgtpEffectComposer);\n\n\t/**\n\t * The underlying N8AOPostPass instance.\n\t * Created with the scene and camera from the effect composer.\n\t */\n\tprotected effect = computed(() => {\n\t\tconst [scene, camera] = [this.effectComposer.scene(), this.effectComposer.camera()];\n\t\treturn new N8AOPostPass(scene, camera);\n\t});\n\n\tconstructor() {\n\t\teffect(() => {\n\t\t\tconst n8aoEffect = this.effect();\n\t\t\tif (!n8aoEffect) return;\n\n\t\t\tconst { quality: _, ...configurations } = this.options();\n\t\t\tapplyProps(n8aoEffect.configuration, configurations);\n\t\t});\n\n\t\teffect(() => {\n\t\t\tthis.setQualityEffect();\n\t\t});\n\n\t\teffect((onCleanup) => {\n\t\t\tconst effect = this.effect();\n\t\t\tonCleanup(() => effect.dispose());\n\t\t});\n\t}\n\n\t/**\n\t * Applies a quality preset to the effect.\n\t * Converts the quality string to title case and calls the effect's setQuality method.\n\t */\n\tprivate setQualityEffect() {\n\t\tconst effect = this.effect();\n\t\tif (!effect) return;\n\n\t\tconst quality = this.quality();\n\t\tif (!quality) return;\n\n\t\tconst titleCaseQuality = quality.charAt(0).toUpperCase() + quality.slice(1);\n\t\teffect.setQuality(titleCaseQuality);\n\t}\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|