Skip to content

Commit 0e9bd05

Browse files
nartcnartc
committed
postprocessing with some effects
1 parent 0097f9b commit 0e9bd05

File tree

32 files changed

+1155
-37
lines changed

32 files changed

+1155
-37
lines changed

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { NgIf } from '@angular/common';
22
import { CUSTOM_ELEMENTS_SCHEMA, Component, computed, signal } from '@angular/core';
33
import { NgtArgs, NgtCanvas, extend } from 'angular-three';
4+
import { NgtpBloom, NgtpEffectComposer } from 'angular-three-postprocessing';
45
import { NgtsGrid } from 'angular-three-soba/abstractions';
56
import { NgtsOrbitControls } from 'angular-three-soba/controls';
67
import { injectNgtsGLTFLoader } from 'angular-three-soba/loaders';
@@ -17,8 +18,12 @@ extend(THREE);
1718
<ngt-primitive *args="[bot()]" [ref]="animations.ref" [position]="[0, -1, 0]" />
1819
<ngts-orbit-controls />
1920
<ngts-grid [position]="[0, -1, 0]" [args]="[10, 10]" />
21+
22+
<ngtp-effect-composer>
23+
<ngtp-bloom [intensity]="1.5" />
24+
</ngtp-effect-composer>
2025
`,
21-
imports: [NgtArgs, NgtsOrbitControls, NgtsGrid],
26+
imports: [NgtArgs, NgtsOrbitControls, NgtsGrid, NgtpEffectComposer, NgtpBloom],
2227
schemas: [CUSTOM_ELEMENTS_SCHEMA],
2328
})
2429
export class Scene {

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ export class NgtArgs<TArgs extends any[] = any[]> extends NgtCommonDirective {
66
private injectedArgs: TArgs = [] as unknown as TArgs;
77

88
@Input() set args(args: TArgs | null) {
9-
if (args == null || !Array.isArray(args) || args.length === 0 || (args.length === 1 && args[0] === null))
10-
return;
9+
if (args == null || !Array.isArray(args) || (args.length === 1 && args[0] === null)) return;
1110
this.injected = false;
1211
this.injectedArgs = args;
1312
this.createView();

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,14 @@ export abstract class NgtCommonDirective {
3535
abstract validate(): boolean;
3636

3737
protected createView() {
38-
if (this.shouldCreateView) {
39-
if (this.view && !this.view.destroyed) {
40-
this.view.destroy();
41-
}
42-
this.zone.runOutsideAngular(() => {
38+
this.zone.runOutsideAngular(() => {
39+
if (this.shouldCreateView) {
40+
if (this.view && !this.view.destroyed) {
41+
this.view.destroy();
42+
}
4343
this.view = this.vcr.createEmbeddedView(this.template);
4444
safeDetectChanges(this.view);
45-
});
46-
}
45+
}
46+
});
4747
}
4848
}

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

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,14 @@ import { is } from '../utils/is';
2323
import { injectNgtCatalogue, type NgtAnyConstructor } from './catalogue';
2424
import { HTML, ROUTED_SCENE, SPECIAL_DOM_TAG } from './constants';
2525
import { NGT_COMPOUND_PREFIXES, NgtRendererStore, type NgtRendererNode, type NgtRendererState } from './store';
26-
import { NgtRendererClassId, attachThreeChild, kebabToPascal, processThreeEvent, removeThreeChild } from './utils';
26+
import {
27+
NgtCompoundClassId,
28+
NgtRendererClassId,
29+
attachThreeChild,
30+
kebabToPascal,
31+
processThreeEvent,
32+
removeThreeChild,
33+
} from './utils';
2734

2835
@Injectable()
2936
class NgtRendererFactory implements RendererFactory2 {
@@ -189,12 +196,12 @@ class NgtRenderer implements Renderer2 {
189196
return;
190197
}
191198

192-
if (cRS[NgtRendererClassId.type] === 'comment') {
199+
if (cRS?.[NgtRendererClassId.type] === 'comment') {
193200
this.store.setParent(newChild, parent);
194201
return;
195202
}
196203

197-
if (cRS[NgtRendererClassId.injectedParent]) {
204+
if (cRS?.[NgtRendererClassId.injectedParent]) {
198205
if (is.ref(cRS[NgtRendererClassId.injectedParent])) {
199206
const injector = cRS[NgtRendererClassId.injectorFactory]().get(Injector, null);
200207
if (!injector) {
@@ -228,7 +235,7 @@ class NgtRenderer implements Renderer2 {
228235
this.store.addChild(parent, newChild);
229236

230237
// if new child is a portal
231-
if (cRS[NgtRendererClassId.type] === 'portal') {
238+
if (cRS?.[NgtRendererClassId.type] === 'portal') {
232239
this.store.processPortalContainer(newChild);
233240
if (cRS[NgtRendererClassId.portalContainer]) {
234241
this.appendChild(parent, cRS[NgtRendererClassId.portalContainer]);
@@ -246,7 +253,7 @@ class NgtRenderer implements Renderer2 {
246253
}
247254

248255
// if both are three instances, straightforward case
249-
if (pRS[NgtRendererClassId.type] === 'three' && cRS[NgtRendererClassId.type] === 'three') {
256+
if (pRS[NgtRendererClassId.type] === 'three' && cRS?.[NgtRendererClassId.type] === 'three') {
250257
// if child already attached to a parent, skip
251258
if (getLocalState(newChild).parent && untracked(getLocalState(newChild).parent)) return;
252259
// attach THREE child
@@ -261,7 +268,7 @@ class NgtRenderer implements Renderer2 {
261268

262269
// if only the parent is the THREE instance
263270
if (pRS[NgtRendererClassId.type] === 'three') {
264-
for (const renderChild of cRS[NgtRendererClassId.children]) {
271+
for (const renderChild of cRS?.[NgtRendererClassId.children]) {
265272
this.appendChild(parent, renderChild);
266273
}
267274
}
@@ -386,12 +393,12 @@ class NgtRenderer implements Renderer2 {
386393
}
387394

388395
if (rS[NgtRendererClassId.compounded].__ngt_renderer__[NgtRendererClassId.compound]) {
389-
Object.assign(rS[NgtRendererClassId.compounded].__ngt_renderer__[NgtRendererClassId.compound], {
390-
props: Object.assign(
391-
rS[NgtRendererClassId.compounded].__ngt_renderer__[NgtRendererClassId.compound],
392-
{ [name]: value },
393-
),
394-
});
396+
Object.assign(
397+
rS[NgtRendererClassId.compounded].__ngt_renderer__[NgtRendererClassId.compound][
398+
NgtCompoundClassId.props
399+
],
400+
{ [name]: value },
401+
);
395402
}
396403
this.setProperty(rS[NgtRendererClassId.compounded], name, value);
397404
return;

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

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,19 @@ export class NgtRendererStore {
123123
}
124124

125125
setCompound(compound: NgtRendererNode, instance: NgtRendererNode) {
126+
const instanceRS = instance.__ngt_renderer__;
127+
128+
if (instanceRS && instanceRS[NgtRendererClassId.parent]) {
129+
const parentRS = instanceRS[NgtRendererClassId.parent].__ngt_renderer__;
130+
// NOTE: if instance is already compounded by its parent. skip
131+
if (
132+
parentRS[NgtRendererClassId.type] === 'compound' &&
133+
parentRS[NgtRendererClassId.compounded] === instance
134+
) {
135+
return;
136+
}
137+
}
138+
126139
const rS = compound.__ngt_renderer__;
127140
rS[NgtRendererClassId.compounded] = instance;
128141
const attributes = Object.keys(rS[NgtRendererClassId.attributes]);
@@ -391,8 +404,12 @@ export class NgtRendererStore {
391404

392405
if (rS[NgtRendererClassId.ref]) {
393406
// nullify ref
394-
rS[NgtRendererClassId.ref].nativeElement = null;
395-
rS[NgtRendererClassId.ref] = undefined!;
407+
// but we do it later so that it doesn't hinder render
408+
// TODO: will this cause memory leak?
409+
requestAnimationFrame(() => {
410+
rS[NgtRendererClassId.ref].nativeElement = null;
411+
rS[NgtRendererClassId.ref] = undefined!;
412+
});
396413
}
397414

398415
// nullify parent

‎libs/postprocessing/package.json

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,37 @@
11
{
22
"name": "angular-three-postprocessing",
3-
"version": "0.0.1",
3+
"version": "0.0.0-replace",
4+
"publishConfig": {
5+
"access": "public"
6+
},
7+
"repository": {
8+
"type": "git",
9+
"url": "https://github.com/angular-threejs/angular-three/tree/main/libs/postprocessing"
10+
},
11+
"author": {
12+
"name": "Chau Tran",
13+
"email": "nartc7789@gmail.com",
14+
"url": "https://nartc.me"
15+
},
16+
"description": "Postprocessing integration with Angular Three",
17+
"keywords": [
18+
"angular",
19+
"threejs",
20+
"renderer",
21+
"postprocessing"
22+
],
23+
"license": "MIT",
424
"peerDependencies": {
5-
"@angular/common": "^16.1.0",
6-
"@angular/core": "^16.1.0"
25+
"@angular/common": "^16.0.0",
26+
"@angular/core": " ^16.0.0",
27+
"angular-three": "^2.0.0",
28+
"postprocessing": "^6.0.0",
29+
"three": ">=0.148.0"
730
},
831
"dependencies": {
9-
"tslib": "^2.3.0"
32+
"tslib": "^2.3.0",
33+
"@nx/devkit": "^16.0.0",
34+
"nx": "^16.0.0"
1035
},
1136
"sideEffects": false
1237
}

‎libs/postprocessing/project.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@
2222
},
2323
"defaultConfiguration": "production"
2424
},
25+
"package": {
26+
"command": "pnpm exec nx build postprocessing"
27+
},
2528
"test": {
2629
"executor": "@nx/jest:jest",
2730
"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],

‎libs/postprocessing/src/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export * from './lib/effect';
2+
export * from './lib/effect-composer';
3+
export * from './lib/effects';

0 commit comments

Comments
 (0)