Skip to content

Commit e4809e7

Browse files
nartcnartc
committed
docs: add postprocessing documentation
1 parent 338b236 commit e4809e7

File tree

13 files changed

+265
-3
lines changed

13 files changed

+265
-3
lines changed

‎apps/astro-docs/astro.config.mjs

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,14 @@ export default defineConfig({
156156
{ label: 'Debug', slug: 'cannon/debug' },
157157
],
158158
},
159+
{
160+
label: 'Postprocessing',
161+
collapsed: true,
162+
items: [
163+
{ label: 'Introduction', slug: 'postprocessing/introduction' },
164+
{ label: 'How it works', slug: 'postprocessing/how-it-works' },
165+
],
166+
},
159167
],
160168
}),
161169
tailwind({ applyBaseStyles: false }),

‎apps/astro-docs/public/bump.jpg

254 KB
Loading

‎apps/astro-docs/public/cube/nx.png

68.2 KB
Loading

‎apps/astro-docs/public/cube/ny.png

79.3 KB
Loading

‎apps/astro-docs/public/cube/nz.png

81.3 KB
Loading

‎apps/astro-docs/public/cube/px.png

68.6 KB
Loading

‎apps/astro-docs/public/cube/py.png

69.9 KB
Loading

‎apps/astro-docs/public/cube/pz.png

75.3 KB
Loading

‎apps/astro-docs/src/components/postprocessing/sample.ts

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
/* credit: https://codesandbox.io/p/sandbox/react-postprocessing-dof-blob-forked-7hj8w3?file=/src/App.js:29,15 */
2+
3+
import {
4+
ChangeDetectionStrategy,
5+
Component,
6+
CUSTOM_ELEMENTS_SCHEMA,
7+
type ElementRef,
8+
input,
9+
viewChild,
10+
viewChildren,
11+
} from '@angular/core';
12+
import { extend, injectBeforeRender, injectLoader, NgtArgs, NgtCanvas } from 'angular-three';
13+
import { NgtpBloom, NgtpDepthOfField, NgtpEffectComposer, NgtpVignette } from 'angular-three-postprocessing';
14+
import { injectTexture, NgtsLoader } from 'angular-three-soba/loaders';
15+
import { NgtsMeshDistortMaterial } from 'angular-three-soba/materials';
16+
import * as THREE from 'three';
17+
import { CubeTextureLoader, Material, MathUtils, type Mesh } from 'three';
18+
19+
extend(THREE);
20+
21+
@Component({
22+
selector: 'app-main-sphere',
23+
standalone: true,
24+
template: `
25+
<ngt-mesh #mesh [material]="material()">
26+
<ngt-icosahedron-geometry *args="[1, 4]" />
27+
</ngt-mesh>
28+
`,
29+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
30+
changeDetection: ChangeDetectionStrategy.OnPush,
31+
imports: [NgtArgs],
32+
})
33+
export class MainSphere {
34+
material = input.required<Material>();
35+
36+
meshRef = viewChild.required<ElementRef<Mesh>>('mesh');
37+
38+
constructor() {
39+
injectBeforeRender(({ clock, pointer }) => {
40+
const mesh = this.meshRef().nativeElement;
41+
mesh.rotation.z = clock.getElapsedTime();
42+
mesh.rotation.y = MathUtils.lerp(mesh.rotation.y, pointer.x * Math.PI, 0.1);
43+
mesh.rotation.x = MathUtils.lerp(mesh.rotation.x, pointer.y * Math.PI, 0.1);
44+
});
45+
}
46+
}
47+
48+
@Component({
49+
selector: 'app-sphere-instances',
50+
standalone: true,
51+
template: `
52+
<app-main-sphere [material]="material()" />
53+
@for (position of initialPositions; track $index) {
54+
<ngt-mesh #mesh [material]="material()" [position]="position">
55+
<ngt-icosahedron-geometry *args="[1, 4]" />
56+
</ngt-mesh>
57+
}
58+
`,
59+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
60+
changeDetection: ChangeDetectionStrategy.OnPush,
61+
imports: [MainSphere, NgtArgs],
62+
})
63+
export class SphereInstances {
64+
material = input.required<Material>();
65+
66+
initialPositions = [
67+
[-4, 20, -12],
68+
[-10, 12, -4],
69+
[-11, -12, -23],
70+
[-16, -6, -10],
71+
[12, -2, -3],
72+
[13, 4, -12],
73+
[14, -2, -23],
74+
[8, 10, -20],
75+
];
76+
77+
meshesRef = viewChildren<ElementRef<Mesh>>('mesh');
78+
79+
constructor() {
80+
injectBeforeRender(() => {
81+
const meshes = this.meshesRef();
82+
meshes.forEach((mesh) => {
83+
mesh.nativeElement.position.y += 0.02;
84+
if (mesh.nativeElement.position.y > 19) mesh.nativeElement.position.y = -18;
85+
mesh.nativeElement.rotation.x += 0.06;
86+
mesh.nativeElement.rotation.y += 0.06;
87+
mesh.nativeElement.rotation.z += 0.02;
88+
});
89+
});
90+
}
91+
}
92+
93+
@Component({
94+
standalone: true,
95+
template: `
96+
<ngt-color attach="background" *args="['#050505']" />
97+
<ngt-fog attach="fog" *args="['#161616', 8, 30]" />
98+
99+
<!-- we render the material with attach="none" so we can share it between instances -->
100+
<ngts-mesh-distort-material
101+
#distortMaterial
102+
attach="none"
103+
[options]="{
104+
envMap: envMap()?.[0],
105+
bumpMap: bumpMap(),
106+
emissive: '#010101',
107+
emissiveIntensity: 2,
108+
roughness: 0.1,
109+
metalness: 1,
110+
bumpScale: 0.005,
111+
clearcoat: 1,
112+
clearcoatRoughness: 1,
113+
radius: 1,
114+
distort: 0.4,
115+
toneMapped: false,
116+
}"
117+
/>
118+
119+
@if (distortMaterial.material) {
120+
<app-sphere-instances [material]="distortMaterial.material" />
121+
}
122+
123+
<ngtp-effect-composer [options]="{ multisampling: 0, disableNormalPass: true }">
124+
<ngtp-depth-of-field [options]="{ focusDistance: 0, focalLength: 0.02, bokehScale: 2, height: 480 }" />
125+
<ngtp-bloom [options]="{ kernelSize: 3, luminanceThreshold: 0, luminanceSmoothing: 0.9, intensity: 1.5 }" />
126+
<ngtp-vignette [options]="{ eskil: false, offset: 0.1, darkness: 1.1 }" />
127+
</ngtp-effect-composer>
128+
`,
129+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
130+
changeDetection: ChangeDetectionStrategy.OnPush,
131+
imports: [
132+
NgtsMeshDistortMaterial,
133+
SphereInstances,
134+
NgtArgs,
135+
NgtpEffectComposer,
136+
NgtpDepthOfField,
137+
NgtpBloom,
138+
NgtpVignette,
139+
],
140+
})
141+
export class SceneGraph {
142+
envMap = injectLoader(
143+
// @ts-expect-error - CubeTextureLoader is ok
144+
() => CubeTextureLoader,
145+
() => [['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png']],
146+
{ extensions: (loader) => loader.setPath('/cube/') },
147+
);
148+
bumpMap = injectTexture(() => '/bump.jpg');
149+
}
150+
151+
@Component({
152+
standalone: true,
153+
template: `
154+
<ngt-canvas [sceneGraph]="sceneGraph" [camera]="{ position: [0, 0, 3] }" />
155+
<ngts-loader />
156+
`,
157+
changeDetection: ChangeDetectionStrategy.OnPush,
158+
host: { class: 'postprocessing-sample' },
159+
imports: [NgtCanvas, NgtsLoader],
160+
})
161+
export default class PostprocessingSample {
162+
sceneGraph = SceneGraph;
163+
}

‎apps/astro-docs/src/content/docs/cannon/how-it-works.mdx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,7 @@ import { NgtcPhysics } from 'angular-three-cannon';
2525
`,
2626
schemas: [CUSTOM_ELEMENTS_SCHEMA],
2727
})
28-
export class SceneGraph {
29-
}
28+
export class SceneGraph {}
3029
```
3130

3231
### Pick a Body shape

‎apps/astro-docs/src/content/docs/cannon/introduction.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ This implementation is based on the [@react-three/cannon](https://github.com/pmn
1010
- [x] Doesn't block the main thread, runs in a web worker
1111
- [x] Supports all the features of cannon-es
1212

13-
Examples are available at [angular-three-cannon](https://angularthreedemo.netlify.app/cannon)
13+
Examples are available at [angular-three-cannon](https://demo.angularthree.org/cannon)
1414

1515
## Installation
1616

‎apps/astro-docs/src/content/docs/postprocessing/how-it-works.mdx

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
title: How it works
3+
description: How Angular Three Postprocessing works
4+
---
5+
6+
import { Tabs, TabItem, Code } from '@astrojs/starlight/components';
7+
import PostprocessingSample, { content } from '../../../components/postprocessing/sample?includeContent';
8+
9+
### Import `NgtpEffectComposer` from `angular-three-postprocessing`
10+
11+
```angular-ts
12+
import { NgtpEffectComposer } from 'angular-three-postprocessing';
13+
```
14+
15+
### Render the `NgtpEffectComposer` component in your scene graph
16+
17+
```angular-ts
18+
@Component({
19+
standalone: true,
20+
imports: [NgtpEffectComposer],
21+
template: `
22+
<ngtp-effect-composer>
23+
<!-- effects -->
24+
</ngtp-effect-composer>
25+
`,
26+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
27+
})
28+
export class SceneGraph {}
29+
```
30+
31+
### Pick an effect
32+
33+
```diff lang="angular-ts"
34+
-import { NgtpEffectComposer } from 'angular-three-postprocessing';
35+
+import { NgtpEffectComposer, NgtpBloom, NgtpNoise } from 'angular-three-postprocessing';
36+
37+
@Component({
38+
standalone: true,
39+
imports: [NgtpEffectComposer, NgtpBloom, NgtpNoise],
40+
template: `
41+
<ngtp-effect-composer>
42+
+ <ngtp-bloom />
43+
+ <ngtp-noise />
44+
</ngtp-effect-composer>
45+
`,
46+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
47+
})
48+
export class SceneGraph {}
49+
```
50+
51+
### Example
52+
53+
<Tabs>
54+
<TabItem label="Preview">
55+
<div class="h-96 w-full border border-dashed border-accent-500 rounded">
56+
<PostprocessingSample client:only />
57+
</div>
58+
</TabItem>
59+
<TabItem label="Code">
60+
<Code code={content} lang="angular-ts" />
61+
</TabItem>
62+
</Tabs>
63+
64+

‎apps/astro-docs/src/content/docs/postprocessing/introduction.mdx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
title: Introduction
3+
description: Introduction to the Angular Three Postprocessing package
4+
---
5+
6+
Angular Three Postprocessing is an integration of the [Postprocessing](https://github.com/vanruesc/postprocessing) library for use with Angular Three.
7+
8+
This implementation is based on the [@react-three/postprocessing](https://github.com/pmndrs/react-postprocessing) library.
9+
10+
:::tip[Did you know?]
11+
12+
Check out [Postprocessing](https://github.com/vanruesc/postprocessing) documentation for more information on actual usages of the library.
13+
14+
:::
15+
16+
## Installation
17+
18+
```shell
19+
npm install angular-three-postprocessing postprocessing maath three-stdlib
20+
# yarn add angular-three-postprocessing postprocessing maath three-stdlib
21+
# pnpm add angular-three-postprocessing postprocessing maath three-stdlib
22+
```
23+
24+
## Compatibility Matrix
25+
26+
| Angular Three Postprocessing Version | postprocessing version | maath version | three-stdlib version |
27+
| ------------------------------------ | ---------------------- | ------------- | -------------------- |
28+
| 2.0.0-beta.283 | ^6.0.0 | ^0.10.0 | ^2.0.0 |

0 commit comments

Comments
 (0)