Skip to content

Commit 43070b5

Browse files
nartcnartc
committed
docs(examples): update postprocessing routes
1 parent 25f8ac3 commit 43070b5

File tree

8 files changed

+237
-8
lines changed

8 files changed

+237
-8
lines changed

‎apps/kitchen-sink-new/src/app/app.routes.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ export const appRoutes: Route[] = [
77
// loadChildren: () => import('./cannon/cannon.routes'),
88
// title: 'Cannon - Angular Three Demo',
99
// },
10-
// {
11-
// path: 'postprocessing',
12-
// loadComponent: () => import('./postprocessing/postprocessing'),
13-
// loadChildren: () => import('./postprocessing/postprocessing.routes'),
14-
// title: 'Postprocessing - Angular Three Demo',
15-
// },
10+
{
11+
path: 'postprocessing',
12+
loadComponent: () => import('./postprocessing/postprocessing'),
13+
loadChildren: () => import('./postprocessing/postprocessing.routes'),
14+
title: 'Postprocessing - Angular Three Demo',
15+
},
1616
// {
1717
// path: 'soba',
1818
// loadComponent: () => import('./soba/soba'),

‎apps/kitchen-sink-new/src/app/postprocessing/basic/basic.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { NgtCanvas, NgtCanvasContent } from 'angular-three/dom';
3+
import { SceneGraph } from './scene';
4+
5+
@Component({
6+
template: `
7+
<ngt-canvas [camera]="{ position: [0, 0, 10] }">
8+
<app-scene-graph *canvasContent />
9+
</ngt-canvas>
10+
`,
11+
changeDetection: ChangeDetectionStrategy.OnPush,
12+
imports: [NgtCanvas, NgtCanvasContent, SceneGraph],
13+
host: { class: 'basic-postprocessing' },
14+
})
15+
export default class Basic {}

‎apps/kitchen-sink-new/src/app/postprocessing/basic/scene.ts

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import {
2+
CUSTOM_ELEMENTS_SCHEMA,
3+
ChangeDetectionStrategy,
4+
Component,
5+
ElementRef,
6+
input,
7+
viewChild,
8+
} from '@angular/core';
9+
import { NgtArgs, injectBeforeRender } from 'angular-three';
10+
import { NgtpEffectComposer, NgtpGodRays } from 'angular-three-postprocessing';
11+
import { Group, Mesh } from 'three';
12+
13+
// NOTE: this is to be used with GodRaysEffect as the effect needs a sun source
14+
@Component({
15+
selector: 'app-sun',
16+
template: `
17+
<ngt-mesh #sun [position]="position()">
18+
<ngt-sphere-geometry *args="[4, 36, 36]" />
19+
<ngt-mesh-basic-material [color]="color()" />
20+
</ngt-mesh>
21+
`,
22+
imports: [NgtArgs],
23+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
24+
changeDetection: ChangeDetectionStrategy.OnPush,
25+
})
26+
export class Sun {
27+
color = input('#00FF00');
28+
position = input([0, 0, -15]);
29+
sunRef = viewChild.required<ElementRef<Mesh>>('sun');
30+
}
31+
32+
@Component({
33+
selector: 'app-scene-graph',
34+
template: `
35+
<ngt-color *args="['#171717']" attach="background" />
36+
37+
<app-sun #sun color="yellow" />
38+
39+
<ngt-group #group>
40+
<ngt-mesh>
41+
<ngt-torus-knot-geometry />
42+
<ngt-mesh-basic-material color="pink" />
43+
</ngt-mesh>
44+
45+
<ngt-mesh [position]="[2, 2, 2]">
46+
<ngt-sphere-geometry />
47+
<ngt-mesh-basic-material color="aquamarine" />
48+
</ngt-mesh>
49+
50+
<ngt-mesh [position]="[-2, -2, -2]">
51+
<ngt-box-geometry />
52+
<ngt-mesh-basic-material color="goldenrod" />
53+
</ngt-mesh>
54+
</ngt-group>
55+
56+
<ngtp-effect-composer>
57+
<ngtp-god-rays [options]="{ sun: sun.sunRef }" />
58+
</ngtp-effect-composer>
59+
`,
60+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
61+
imports: [NgtpEffectComposer, NgtArgs, NgtpGodRays, Sun],
62+
changeDetection: ChangeDetectionStrategy.OnPush,
63+
host: { class: 'experience-basic-postprocessing' },
64+
})
65+
export class SceneGraph {
66+
private group = viewChild.required<ElementRef<Group>>('group');
67+
68+
constructor() {
69+
injectBeforeRender(() => {
70+
const { nativeElement } = this.group();
71+
nativeElement.rotation.x += 0.005;
72+
nativeElement.rotation.y += 0.005;
73+
});
74+
}
75+
}

‎apps/kitchen-sink-new/src/app/postprocessing/outline/outline.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { NgtCanvas, NgtCanvasContent } from 'angular-three/dom';
3+
import { SceneGraph } from './scene';
4+
5+
@Component({
6+
template: `
7+
<ngt-canvas>
8+
<app-scene-graph *canvasContent />
9+
</ngt-canvas>
10+
`,
11+
changeDetection: ChangeDetectionStrategy.OnPush,
12+
host: { class: 'postprocessing-outline' },
13+
imports: [NgtCanvas, NgtCanvasContent, SceneGraph],
14+
})
15+
export default class PostprocessingOutline {}

‎apps/kitchen-sink-new/src/app/postprocessing/outline/scene.ts

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, signal } from '@angular/core';
2+
import { NgtArgs, NgtSelect, NgtSelection } from 'angular-three';
3+
import { NgtpEffectComposer, NgtpOutline, NgtpSMAA } from 'angular-three-postprocessing';
4+
import { NgtsOrbitControls } from 'angular-three-soba/controls';
5+
import { KernelSize } from 'postprocessing';
6+
7+
/**
8+
* There are multiple ways to use the Outline effect.
9+
*
10+
* 1. Via NgtSelection and NgtSelect
11+
* This is the recommended way to use the Outline effect.
12+
*
13+
* 1a. We can use NgtSelection as hostDirective (as shown) to enable Selection on the entire scene.
14+
* NgtpOutline will automatically be aware of the NgtSelection context and will use it for the selected objects.
15+
*
16+
* 1b. We can wrap `<ng-container ngtSelection>` around the objects we want to select AS WELL AS the Outline effect.
17+
*
18+
* ngtSelect can be used on ngt-group or ngt-mesh. ngt-group will select all children, ngt-mesh will only select itself.
19+
*
20+
* 2. Via selection input on NgtpOutline
21+
* If we want to control the selection ourselves, we can pass in the selection input an Array of Object3D or ElementRef<Object3D>
22+
* then we control this selection collection based on our own logic.
23+
*
24+
* <ngtp-outline [options]="{ selection: selection(), edgeStrength: 100, pulseSpeed: 0 }" />
25+
*
26+
*/
27+
28+
@Component({
29+
selector: 'app-scene-graph',
30+
template: `
31+
<ngt-color attach="background" *args="['black']" />
32+
33+
<ngts-orbit-controls />
34+
35+
<ngt-ambient-light />
36+
<ngt-point-light [position]="[0, -1, -1]" [decay]="0" color="green" />
37+
<ngt-directional-light [position]="[0, 1, 1]" />
38+
39+
<ngt-group [ngtSelect]="hovered()" (pointerenter)="hovered.set(true)" (pointerleave)="hovered.set(false)">
40+
<ngt-mesh>
41+
<ngt-box-geometry />
42+
<ngt-mesh-standard-material color="hotpink" />
43+
</ngt-mesh>
44+
<ngt-mesh [position]="[0.5, -0.25, 0.75]">
45+
<ngt-sphere-geometry *args="[0.25]" />
46+
<ngt-mesh-standard-material color="orange" />
47+
</ngt-mesh>
48+
<ngt-mesh [position]="[-0.5, -0.25, 0.75]">
49+
<ngt-cone-geometry *args="[0.25, 0.5]" />
50+
<ngt-mesh-standard-material color="yellow" />
51+
</ngt-mesh>
52+
</ngt-group>
53+
54+
<ngtp-effect-composer [options]="{ autoClear: false, multisampling: 0 }">
55+
<ngtp-outline [options]="{ edgeStrength: 2.5, pulseSpeed: 0, blur: true, kernelSize: KernelSize.SMALL }" />
56+
<ngtp-smaa />
57+
</ngtp-effect-composer>
58+
`,
59+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
60+
changeDetection: ChangeDetectionStrategy.OnPush,
61+
host: { class: 'postprocessing-sample' },
62+
hostDirectives: [NgtSelection],
63+
imports: [NgtsOrbitControls, NgtSelect, NgtpEffectComposer, NgtpOutline, NgtArgs, NgtpSMAA],
64+
})
65+
export class SceneGraph {
66+
protected KernelSize = KernelSize;
67+
protected hovered = signal(false);
68+
}

‎apps/kitchen-sink-new/src/app/postprocessing/postprocessing.routes.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Routes } from '@angular/router';
2+
3+
const routes: Routes = [
4+
{
5+
path: 'basic',
6+
loadComponent: () => import('./basic/basic'),
7+
},
8+
{
9+
path: 'outline',
10+
loadComponent: () => import('./outline/outline'),
11+
},
12+
{
13+
path: '',
14+
redirectTo: 'basic',
15+
pathMatch: 'full',
16+
},
17+
];
18+
19+
export default routes;

‎apps/kitchen-sink-new/src/app/postprocessing/postprocessing.ts

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
3+
import { extend } from 'angular-three';
4+
import * as THREE from 'three';
5+
import routes from './postprocessing.routes';
6+
7+
extend(THREE);
8+
9+
@Component({
10+
template: `
11+
<div class="h-svh">
12+
<router-outlet />
13+
</div>
14+
15+
<ul class=" absolute left-12 bottom-12 grid grid-cols-6 gap-4">
16+
@for (example of examples; track example) {
17+
<li class="h-6 w-6">
18+
<a
19+
routerLinkActive
20+
#rla="routerLinkActive"
21+
class="inline-block h-full w-full rounded-full"
22+
[class]="rla.isActive ? 'bg-red-500' : 'bg-white'"
23+
[routerLinkActiveOptions]="{ exact: true }"
24+
[routerLink]="['/postprocessing', example]"
25+
[title]="'Navigate to ' + example"
26+
></a>
27+
</li>
28+
}
29+
</ul>
30+
`,
31+
imports: [RouterOutlet, RouterLink, RouterLinkActive],
32+
changeDetection: ChangeDetectionStrategy.OnPush,
33+
host: { class: 'postprocessing' },
34+
})
35+
export default class Postprocessing {
36+
protected examples = routes.filter((route) => !!route.path).map((route) => route.path);
37+
}

‎libs/postprocessing/src/lib/effects/lens-flare.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,8 @@ export class LensFlareEffect extends Effect {
7878
flareShape = 0.01,
7979
animated = true,
8080
anamorphic = false,
81-
colorGain = new Color(20, 20, 20),
82-
lensDirtTexture = null as Texture | null,
81+
colorGain = new THREE.Color(20, 20, 20),
82+
lensDirtTexture = null as THREE.Texture | null,
8383
haloScale = 0.5,
8484
secondaryGhosts = true,
8585
aditionalStreaks = true,

0 commit comments

Comments
 (0)