postprocessing with some effects

Author: nartc

apps/sandbox/src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { NgIf } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, Component, computed, signal } from '@angular/core';
 import { NgtArgs, NgtCanvas, extend } from 'angular-three';
+import { NgtpBloom, NgtpEffectComposer } from 'angular-three-postprocessing';
 import { NgtsGrid } from 'angular-three-soba/abstractions';
 import { NgtsOrbitControls } from 'angular-three-soba/controls';
 import { injectNgtsGLTFLoader } from 'angular-three-soba/loaders';
@@ -17,8 +18,12 @@ extend(THREE);
 		<ngt-primitive *args="[bot()]" [ref]="animations.ref" [position]="[0, -1, 0]" />
 		<ngts-orbit-controls />
 		<ngts-grid [position]="[0, -1, 0]" [args]="[10, 10]" />
+
+		<ngtp-effect-composer>
+			<ngtp-bloom [intensity]="1.5" />
+		</ngtp-effect-composer>
 	`,
-	imports: [NgtArgs, NgtsOrbitControls, NgtsGrid],
+	imports: [NgtArgs, NgtsOrbitControls, NgtsGrid, NgtpEffectComposer, NgtpBloom],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class Scene {

libs/core/src/lib/directives/args.ts

@@ -6,8 +6,7 @@ export class NgtArgs<TArgs extends any[] = any[]> extends NgtCommonDirective {
 	private injectedArgs: TArgs = [] as unknown as TArgs;
 
 	@Input() set args(args: TArgs | null) {
-		if (args == null || !Array.isArray(args) || args.length === 0 || (args.length === 1 && args[0] === null))
-			return;
+		if (args == null || !Array.isArray(args) || (args.length === 1 && args[0] === null)) return;
 		this.injected = false;
 		this.injectedArgs = args;
 		this.createView();

libs/core/src/lib/directives/common.ts

@@ -35,14 +35,14 @@ export abstract class NgtCommonDirective {
 	abstract validate(): boolean;
 
 	protected createView() {
-		if (this.shouldCreateView) {
-			if (this.view && !this.view.destroyed) {
-				this.view.destroy();
-			}
-			this.zone.runOutsideAngular(() => {
+		this.zone.runOutsideAngular(() => {
+			if (this.shouldCreateView) {
+				if (this.view && !this.view.destroyed) {
+					this.view.destroy();
+				}
 				this.view = this.vcr.createEmbeddedView(this.template);
 				safeDetectChanges(this.view);
-			});
-		}
+			}
+		});
 	}
 }

libs/core/src/lib/renderer/index.ts

@@ -23,7 +23,14 @@ import { is } from '../utils/is';
 import { injectNgtCatalogue, type NgtAnyConstructor } from './catalogue';
 import { HTML, ROUTED_SCENE, SPECIAL_DOM_TAG } from './constants';
 import { NGT_COMPOUND_PREFIXES, NgtRendererStore, type NgtRendererNode, type NgtRendererState } from './store';
-import { NgtRendererClassId, attachThreeChild, kebabToPascal, processThreeEvent, removeThreeChild } from './utils';
+import {
+	NgtCompoundClassId,
+	NgtRendererClassId,
+	attachThreeChild,
+	kebabToPascal,
+	processThreeEvent,
+	removeThreeChild,
+} from './utils';
 
 @Injectable()
 class NgtRendererFactory implements RendererFactory2 {
@@ -189,12 +196,12 @@ class NgtRenderer implements Renderer2 {
 			return;
 		}
 
-		if (cRS[NgtRendererClassId.type] === 'comment') {
+		if (cRS?.[NgtRendererClassId.type] === 'comment') {
 			this.store.setParent(newChild, parent);
 			return;
 		}
 
-		if (cRS[NgtRendererClassId.injectedParent]) {
+		if (cRS?.[NgtRendererClassId.injectedParent]) {
 			if (is.ref(cRS[NgtRendererClassId.injectedParent])) {
 				const injector = cRS[NgtRendererClassId.injectorFactory]().get(Injector, null);
 				if (!injector) {
@@ -228,7 +235,7 @@ class NgtRenderer implements Renderer2 {
 		this.store.addChild(parent, newChild);
 
 		// if new child is a portal
-		if (cRS[NgtRendererClassId.type] === 'portal') {
+		if (cRS?.[NgtRendererClassId.type] === 'portal') {
 			this.store.processPortalContainer(newChild);
 			if (cRS[NgtRendererClassId.portalContainer]) {
 				this.appendChild(parent, cRS[NgtRendererClassId.portalContainer]);
@@ -246,7 +253,7 @@ class NgtRenderer implements Renderer2 {
 		}
 
 		// if both are three instances, straightforward case
-		if (pRS[NgtRendererClassId.type] === 'three' && cRS[NgtRendererClassId.type] === 'three') {
+		if (pRS[NgtRendererClassId.type] === 'three' && cRS?.[NgtRendererClassId.type] === 'three') {
 			// if child already attached to a parent, skip
 			if (getLocalState(newChild).parent && untracked(getLocalState(newChild).parent)) return;
 			// attach THREE child
@@ -261,7 +268,7 @@ class NgtRenderer implements Renderer2 {
 
 		// if only the parent is the THREE instance
 		if (pRS[NgtRendererClassId.type] === 'three') {
-			for (const renderChild of cRS[NgtRendererClassId.children]) {
+			for (const renderChild of cRS?.[NgtRendererClassId.children]) {
 				this.appendChild(parent, renderChild);
 			}
 		}
@@ -386,12 +393,12 @@ class NgtRenderer implements Renderer2 {
 			}
 
 			if (rS[NgtRendererClassId.compounded].__ngt_renderer__[NgtRendererClassId.compound]) {
-				Object.assign(rS[NgtRendererClassId.compounded].__ngt_renderer__[NgtRendererClassId.compound], {
-					props: Object.assign(
-						rS[NgtRendererClassId.compounded].__ngt_renderer__[NgtRendererClassId.compound],
-						{ [name]: value },
-					),
-				});
+				Object.assign(
+					rS[NgtRendererClassId.compounded].__ngt_renderer__[NgtRendererClassId.compound][
+						NgtCompoundClassId.props
+					],
+					{ [name]: value },
+				);
 			}
 			this.setProperty(rS[NgtRendererClassId.compounded], name, value);
 			return;

libs/core/src/lib/renderer/store.ts

@@ -123,6 +123,19 @@ export class NgtRendererStore {
 	}
 
 	setCompound(compound: NgtRendererNode, instance: NgtRendererNode) {
+		const instanceRS = instance.__ngt_renderer__;
+
+		if (instanceRS && instanceRS[NgtRendererClassId.parent]) {
+			const parentRS = instanceRS[NgtRendererClassId.parent].__ngt_renderer__;
+			// NOTE: if instance is already compounded by its parent. skip
+			if (
+				parentRS[NgtRendererClassId.type] === 'compound' &&
+				parentRS[NgtRendererClassId.compounded] === instance
+			) {
+				return;
+			}
+		}
+
 		const rS = compound.__ngt_renderer__;
 		rS[NgtRendererClassId.compounded] = instance;
 		const attributes = Object.keys(rS[NgtRendererClassId.attributes]);
@@ -391,8 +404,12 @@ export class NgtRendererStore {
 
 		if (rS[NgtRendererClassId.ref]) {
 			// nullify ref
-			rS[NgtRendererClassId.ref].nativeElement = null;
-			rS[NgtRendererClassId.ref] = undefined!;
+			// but we do it later so that it doesn't hinder render
+			// TODO: will this cause memory leak?
+			requestAnimationFrame(() => {
+				rS[NgtRendererClassId.ref].nativeElement = null;
+				rS[NgtRendererClassId.ref] = undefined!;
+			});
 		}
 
 		// nullify parent

libs/postprocessing/package.json

@@ -1,12 +1,37 @@
 {
 	"name": "angular-three-postprocessing",
-	"version": "0.0.1",
+	"version": "0.0.0-replace",
+	"publishConfig": {
+		"access": "public"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/angular-threejs/angular-three/tree/main/libs/postprocessing"
+	},
+	"author": {
+		"name": "Chau Tran",
+		"email": "nartc7789@gmail.com",
+		"url": "https://nartc.me"
+	},
+	"description": "Postprocessing integration with Angular Three",
+	"keywords": [
+		"angular",
+		"threejs",
+		"renderer",
+		"postprocessing"
+	],
+	"license": "MIT",
 	"peerDependencies": {
-		"@angular/common": "^16.1.0",
-		"@angular/core": "^16.1.0"
+		"@angular/common": "^16.0.0",
+		"@angular/core": " ^16.0.0",
+		"angular-three": "^2.0.0",
+		"postprocessing": "^6.0.0",
+		"three": ">=0.148.0"
 	},
 	"dependencies": {
-		"tslib": "^2.3.0"
+		"tslib": "^2.3.0",
+		"@nx/devkit": "^16.0.0",
+		"nx": "^16.0.0"
 	},
 	"sideEffects": false
 }

libs/postprocessing/project.json

@@ -22,6 +22,9 @@
 			},
 			"defaultConfiguration": "production"
 		},
+		"package": {
+			"command": "pnpm exec nx build postprocessing"
+		},
 		"test": {
 			"executor": "@nx/jest:jest",
 			"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],

libs/postprocessing/src/index.ts

@@ -0,0 +1,3 @@
+export * from './lib/effect';
+export * from './lib/effect-composer';
+export * from './lib/effects';