@chromatic-coherence/generative-engine 1.1.0 → 1.3.0
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 +137 -120
- package/dist/post.d.ts +13 -0
- package/dist/post.js +44 -4
- package/dist/shaders.d.ts +4 -0
- package/dist/shaders.js +362 -274
- package/dist/world.d.ts +37 -0
- package/dist/world.js +108 -2
- package/package.json +44 -44
package/README.md
CHANGED
|
@@ -1,120 +1,137 @@
|
|
|
1
|
-
<div align="center">
|
|
2
|
-
|
|
3
|
-
# generative-engine
|
|
4
|
-
|
|
5
|
-
### **THE THIRD ENGINE** — the [Generative Charts](https://chromaticcoherence.ai/generative-charts) family grows into a full **WebGL2 graphics engine**.
|
|
6
|
-
|
|
7
|
-
[](./LICENSE)
|
|
8
|
-
[](#)
|
|
9
|
-
|
|
10
|
-
**[Live scenes →](https://chromaticcoherence.ai/generative-engine)** · **[The charts sibling →](https://www.npmjs.com/package/@chromatic-coherence/generative-charts)**
|
|
11
|
-
|
|
12
|
-
</div>
|
|
13
|
-
|
|
14
|
-
---
|
|
15
|
-
|
|
16
|
-
The charts library stays what it is — small, stable, chart-first. **generative-engine** is where
|
|
17
|
-
the family expands: the same API (`createWorld` · `face` · `line` · `glow` · `grow` · `draw*` ·
|
|
18
|
-
`fade`), so chart recipes port forward by changing one import — and underneath it, a real
|
|
19
|
-
graphics engine. Zero dependencies; the browser is the only runtime.
|
|
20
|
-
|
|
21
|
-
```bash
|
|
22
|
-
npm install @chromatic-coherence/generative-engine
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
```js
|
|
26
|
-
import { createWorld, v3, icosphere, heightfield } from "@chromatic-coherence/generative-engine";
|
|
27
|
-
|
|
28
|
-
const w = createWorld({ canvas, controls: true, shadows: true });
|
|
29
|
-
w.lights.push({ p: v3(-160, 320, 120), intensity: 1.2, falloff: 500 });
|
|
30
|
-
w.mesh(heightfield((x, z) => Math.sin(x * 0.01) * 20, 800, 800), { hue: 262, sat: 38, light: 26 });
|
|
31
|
-
w.meshMorph(icosphere(70, 3), myBlob, { hue: 350, sat: 30, light: 42, gloss: 0.5, group: "blob" });
|
|
32
|
-
w.grow((t) => { w.morph("blob", 0.5 + 0.5 * Math.sin(t)); w.setTransform("blob", { rotateY: t * 0.4 }); });
|
|
33
|
-
w.start();
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
## What the engine adds over the chart editions
|
|
37
|
-
|
|
38
|
-
| | |
|
|
39
|
-
|---|---|
|
|
40
|
-
| **WebGL2 + HDR post chain** | The scene renders to a floating-point target, then: **bloom** (soft-knee bright pass, half-res gaussian), **SSAO** (depth-based contact shading), one composite pass (ACES filmic, colour grade, vignette), and **FXAA**. All art-directable (`w.bloom`, `w.ssao`, `w.fxaa`), all on by default. `post: false` opts out. |
|
|
41
|
-
| **Real shadow maps** | A depth **texture** with hardware-comparison PCF (`sampler2DShadow`) — soft, exact, 2048px by default. `shadows: { size, softness, bias }`. |
|
|
42
|
-
| **Geometry stdlib** | `plane` · `box` · `icosphere` · `tube` (parallel-transport sweep, taperable) · `lathe` · `extrude` · `heightfield` · `transformMesh` · `mergeMesh` — all pure math, all unit-tested, uploaded in one `w.mesh(geo, opts)` call with smooth normals. |
|
|
43
|
-
| **Ribbons** | `w.ribbon(points, { width })` / `w.drawRibbon(...)` — screen-space-expanded strokes with **real pixel width**, feathered edges, depth-tested. The stroke aesthetic `gl.LINES` never allowed. |
|
|
44
|
-
| **Group transforms** | `w.setTransform(group, { translate, rotateY, scale })` — geometry moves rigidly in the vertex stage, zero CPU re-tessellation, shadow pass included. |
|
|
45
|
-
| **Morph targets** | `w.meshMorph(geoA, geoB, opts)` + `w.morph(group, t)` — blend between two vertex sets in the shader (breathing, becoming). Eased like `fade`. |
|
|
46
|
-
| **8 point lights** | Up from 4; `lights[0]` casts the shadows. HDR intensities welcome — bloom catches what exceeds 1.0. |
|
|
47
|
-
| **The carried light model** | Everything the chart edition learned rides along: GGX + Fresnel specular, procedural micro-relief, the perfusion term (`blood`, `bloodPulse`), pore noise, subsurface rim, coloured hemispheric ambient, fog — now resolving toward a real background colour the engine owns. |
|
|
48
|
-
|
|
49
|
-
**The ink edition** (`theme: "light"`) still renders any recipe on paper instead of night —
|
|
50
|
-
lightness inverts, strokes blend normally, SSAO becomes pencil shading. Bloom stays dark-only.
|
|
51
|
-
|
|
52
|
-
## Objectives — scenes that know where they're going
|
|
53
|
-
|
|
54
|
-
A scene gets a **goal** and the engine drives motion toward it; a live **movement meter**
|
|
55
|
-
tells you whether the scene is moving or settled — and names what is moving.
|
|
56
|
-
|
|
57
|
-
```ts
|
|
58
|
-
import { createWorld, attachObjectives } from "@chromatic-coherence/generative-engine";
|
|
59
|
-
|
|
60
|
-
const w = createWorld({ canvas });
|
|
61
|
-
const obj = attachObjectives(w);
|
|
62
|
-
|
|
63
|
-
obj.define("reveal", {
|
|
64
|
-
morph: { group: "terrain", to: 1 }, // blend the terrain to its B shape
|
|
65
|
-
camera: { dist: 420, pitch: 0.62 }, // settle the camera in close
|
|
66
|
-
fade: { group: "veil", to: 0 }, // dissolve the veil
|
|
67
|
-
pace: 3, // seconds to ~95% of the way there
|
|
68
|
-
});
|
|
69
|
-
|
|
70
|
-
obj.onReading(r => {
|
|
71
|
-
// { name, progress, level, floor, moving, settled, driving: ["morph:terrain","camera",...] }
|
|
72
|
-
if (r.settled) console.log(`${r.name}: settled`);
|
|
73
|
-
});
|
|
74
|
-
|
|
75
|
-
// later — the goal itself moves; motion continues from the current state, no snap,
|
|
76
|
-
// and the meter lights up again:
|
|
77
|
-
obj.retarget("reveal", { camera: { dist: 300 } });
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
Channels: `transform` (group rigid-body spec) · `morph` · `fade` · `camera` · `custom`
|
|
81
|
-
(an `apply(progress, dt)` escape hatch). `readings()` is the pull form of `onReading`.
|
|
82
|
-
|
|
83
|
-
**The meter's semantics** come from the objective-movement measurement work this engine's
|
|
84
|
-
org ran first as science: movement is a **level sustained above a settled floor**, not a
|
|
85
|
-
discrete event. `driving` names the elevated channels — movement you can name; `settled`
|
|
86
|
-
is the sustained fall to the floor. Options: `attachObjectives(w, { floor, settleAfter })`.
|
|
87
|
-
|
|
88
|
-
The layer rides the frame loop as a `grow()` hook and drives the World through its public
|
|
89
|
-
verbs only — the renderer is untouched, and everything composes with hand-written `grow()`
|
|
90
|
-
animation.
|
|
91
|
-
|
|
92
|
-
## Demo
|
|
93
|
-
|
|
94
|
-
`demo/index.html` — serve the package folder (`python -m http.server`) and open
|
|
95
|
-
`/demo/`. Drag to orbit, ctrl+wheel to zoom; `?theme=light`, `?post=0`, `?still`.
|
|
96
|
-
|
|
97
|
-
## Falling back
|
|
98
|
-
|
|
99
|
-
`createWorld` **throws** (never a blank page) when WebGL2 is missing. Catch it and build the
|
|
100
|
-
same recipe through the chart editions — the API is a subset, so the fallback chain
|
|
101
|
-
engine → charts-3d → charts-2d is three imports of the same code. Browsers cap live GL
|
|
102
|
-
contexts per page: on teardown call `dispose(true)` to release the context immediately, and
|
|
103
|
-
mount a **fresh** canvas if you rebuild (a lost context is dead on its canvas).
|
|
104
|
-
|
|
105
|
-
##
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
1
|
+
<div align="center">
|
|
2
|
+
|
|
3
|
+
# generative-engine
|
|
4
|
+
|
|
5
|
+
### **THE THIRD ENGINE** — the [Generative Charts](https://chromaticcoherence.ai/generative-charts) family grows into a full **WebGL2 graphics engine**.
|
|
6
|
+
|
|
7
|
+
[](./LICENSE)
|
|
8
|
+
[](#)
|
|
9
|
+
|
|
10
|
+
**[Live scenes →](https://chromaticcoherence.ai/generative-engine)** · **[The charts sibling →](https://www.npmjs.com/package/@chromatic-coherence/generative-charts)**
|
|
11
|
+
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
The charts library stays what it is — small, stable, chart-first. **generative-engine** is where
|
|
17
|
+
the family expands: the same API (`createWorld` · `face` · `line` · `glow` · `grow` · `draw*` ·
|
|
18
|
+
`fade`), so chart recipes port forward by changing one import — and underneath it, a real
|
|
19
|
+
graphics engine. Zero dependencies; the browser is the only runtime.
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm install @chromatic-coherence/generative-engine
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
```js
|
|
26
|
+
import { createWorld, v3, icosphere, heightfield } from "@chromatic-coherence/generative-engine";
|
|
27
|
+
|
|
28
|
+
const w = createWorld({ canvas, controls: true, shadows: true });
|
|
29
|
+
w.lights.push({ p: v3(-160, 320, 120), intensity: 1.2, falloff: 500 });
|
|
30
|
+
w.mesh(heightfield((x, z) => Math.sin(x * 0.01) * 20, 800, 800), { hue: 262, sat: 38, light: 26 });
|
|
31
|
+
w.meshMorph(icosphere(70, 3), myBlob, { hue: 350, sat: 30, light: 42, gloss: 0.5, group: "blob" });
|
|
32
|
+
w.grow((t) => { w.morph("blob", 0.5 + 0.5 * Math.sin(t)); w.setTransform("blob", { rotateY: t * 0.4 }); });
|
|
33
|
+
w.start();
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## What the engine adds over the chart editions
|
|
37
|
+
|
|
38
|
+
| | |
|
|
39
|
+
|---|---|
|
|
40
|
+
| **WebGL2 + HDR post chain** | The scene renders to a floating-point target, then: **bloom** (soft-knee bright pass, half-res gaussian), **SSAO** (depth-based contact shading), one composite pass (ACES filmic, colour grade, vignette), and **FXAA**. All art-directable (`w.bloom`, `w.ssao`, `w.fxaa`), all on by default. `post: false` opts out. |
|
|
41
|
+
| **Real shadow maps** | A depth **texture** with hardware-comparison PCF (`sampler2DShadow`) — soft, exact, 2048px by default. `shadows: { size, softness, bias }`. |
|
|
42
|
+
| **Geometry stdlib** | `plane` · `box` · `icosphere` · `tube` (parallel-transport sweep, taperable) · `lathe` · `extrude` · `heightfield` · `transformMesh` · `mergeMesh` — all pure math, all unit-tested, uploaded in one `w.mesh(geo, opts)` call with smooth normals. |
|
|
43
|
+
| **Ribbons** | `w.ribbon(points, { width })` / `w.drawRibbon(...)` — screen-space-expanded strokes with **real pixel width**, feathered edges, depth-tested. The stroke aesthetic `gl.LINES` never allowed. |
|
|
44
|
+
| **Group transforms** | `w.setTransform(group, { translate, rotateY, scale })` — geometry moves rigidly in the vertex stage, zero CPU re-tessellation, shadow pass included. |
|
|
45
|
+
| **Morph targets** | `w.meshMorph(geoA, geoB, opts)` + `w.morph(group, t)` — blend between two vertex sets in the shader (breathing, becoming). Eased like `fade`. |
|
|
46
|
+
| **8 point lights** | Up from 4; `lights[0]` casts the shadows. HDR intensities welcome — bloom catches what exceeds 1.0. |
|
|
47
|
+
| **The carried light model** | Everything the chart edition learned rides along: GGX + Fresnel specular, procedural micro-relief, the perfusion term (`blood`, `bloodPulse`), pore noise, subsurface rim, coloured hemispheric ambient, fog — now resolving toward a real background colour the engine owns. |
|
|
48
|
+
|
|
49
|
+
**The ink edition** (`theme: "light"`) still renders any recipe on paper instead of night —
|
|
50
|
+
lightness inverts, strokes blend normally, SSAO becomes pencil shading. Bloom stays dark-only.
|
|
51
|
+
|
|
52
|
+
## Objectives — scenes that know where they're going
|
|
53
|
+
|
|
54
|
+
A scene gets a **goal** and the engine drives motion toward it; a live **movement meter**
|
|
55
|
+
tells you whether the scene is moving or settled — and names what is moving.
|
|
56
|
+
|
|
57
|
+
```ts
|
|
58
|
+
import { createWorld, attachObjectives } from "@chromatic-coherence/generative-engine";
|
|
59
|
+
|
|
60
|
+
const w = createWorld({ canvas });
|
|
61
|
+
const obj = attachObjectives(w);
|
|
62
|
+
|
|
63
|
+
obj.define("reveal", {
|
|
64
|
+
morph: { group: "terrain", to: 1 }, // blend the terrain to its B shape
|
|
65
|
+
camera: { dist: 420, pitch: 0.62 }, // settle the camera in close
|
|
66
|
+
fade: { group: "veil", to: 0 }, // dissolve the veil
|
|
67
|
+
pace: 3, // seconds to ~95% of the way there
|
|
68
|
+
});
|
|
69
|
+
|
|
70
|
+
obj.onReading(r => {
|
|
71
|
+
// { name, progress, level, floor, moving, settled, driving: ["morph:terrain","camera",...] }
|
|
72
|
+
if (r.settled) console.log(`${r.name}: settled`);
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
// later — the goal itself moves; motion continues from the current state, no snap,
|
|
76
|
+
// and the meter lights up again:
|
|
77
|
+
obj.retarget("reveal", { camera: { dist: 300 } });
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
Channels: `transform` (group rigid-body spec) · `morph` · `fade` · `camera` · `custom`
|
|
81
|
+
(an `apply(progress, dt)` escape hatch). `readings()` is the pull form of `onReading`.
|
|
82
|
+
|
|
83
|
+
**The meter's semantics** come from the objective-movement measurement work this engine's
|
|
84
|
+
org ran first as science: movement is a **level sustained above a settled floor**, not a
|
|
85
|
+
discrete event. `driving` names the elevated channels — movement you can name; `settled`
|
|
86
|
+
is the sustained fall to the floor. Options: `attachObjectives(w, { floor, settleAfter })`.
|
|
87
|
+
|
|
88
|
+
The layer rides the frame loop as a `grow()` hook and drives the World through its public
|
|
89
|
+
verbs only — the renderer is untouched, and everything composes with hand-written `grow()`
|
|
90
|
+
animation.
|
|
91
|
+
|
|
92
|
+
## Demo
|
|
93
|
+
|
|
94
|
+
`demo/index.html` — serve the package folder (`python -m http.server`) and open
|
|
95
|
+
`/demo/`. Drag to orbit, ctrl+wheel to zoom; `?theme=light`, `?post=0`, `?still`.
|
|
96
|
+
|
|
97
|
+
## Falling back
|
|
98
|
+
|
|
99
|
+
`createWorld` **throws** (never a blank page) when WebGL2 is missing. Catch it and build the
|
|
100
|
+
same recipe through the chart editions — the API is a subset, so the fallback chain
|
|
101
|
+
engine → charts-3d → charts-2d is three imports of the same code. Browsers cap live GL
|
|
102
|
+
contexts per page: on teardown call `dispose(true)` to release the context immediately, and
|
|
103
|
+
mount a **fresh** canvas if you rebuild (a lost context is dead on its canvas).
|
|
104
|
+
|
|
105
|
+
## Instancing, depth of field, motion blur (v1.2)
|
|
106
|
+
|
|
107
|
+
- **`w.meshInstanced(geo, transforms, opts)`** — upload a mesh once, draw it at every
|
|
108
|
+
transform in a single instanced call, shadow pass included. A forest is one draw.
|
|
109
|
+
Instances ride their group's fade / morph / transform like any other geometry.
|
|
110
|
+
- **`w.dof = { on, focus, range, maxBlur }`** — depth of field: blur grows with distance
|
|
111
|
+
from the focus plane (world units), sharp subjects protected per-tap.
|
|
112
|
+
- **`w.motionBlur = { on, strength }`** — camera motion blur by depth reprojection into
|
|
113
|
+
the previous frame; streaks clamp to 4 % of the screen.
|
|
114
|
+
|
|
115
|
+
## GPU wind (v1.3)
|
|
116
|
+
|
|
117
|
+
`meshInstanced(geo, transforms, { ..., sway: { amp, freq? } })` — every instance sways
|
|
118
|
+
individually in the vertex stage (shadow pass included): per-instance scattered phase,
|
|
119
|
+
height-scaled displacement, a second harmonic so the motion breathes. `w.wind = { dir,
|
|
120
|
+
speed }` is the one wind that blows through every swaying batch. Zero CPU per frame.
|
|
121
|
+
|
|
122
|
+
## Roadmap
|
|
123
|
+
|
|
124
|
+
Planar mirrors · real water · skeletal figures. The chart editions stay lean.
|
|
125
|
+
|
|
126
|
+
## Licence
|
|
127
|
+
|
|
128
|
+
**Source-available, not open source.** Free for individuals, charities and small businesses
|
|
129
|
+
(fewer than 25 people and under £1M annual revenue); a one-off **£100** covers any larger
|
|
130
|
+
organisation. Full terms in [LICENSE](./LICENSE); commercial licensing:
|
|
131
|
+
[hello@chromaticcoherence.ai](mailto:hello@chromaticcoherence.ai).
|
|
132
|
+
|
|
133
|
+
---
|
|
134
|
+
|
|
135
|
+
<div align="center">
|
|
136
|
+
<sub>© 2026 Chromatic Coherence. All rights reserved.</sub>
|
|
137
|
+
</div>
|
package/dist/post.d.ts
CHANGED
|
@@ -23,6 +23,16 @@ export type PostParams = {
|
|
|
23
23
|
fxaa: boolean;
|
|
24
24
|
near: number;
|
|
25
25
|
far: number;
|
|
26
|
+
/** depth of field (W8): blur scaled by distance from the focus plane */
|
|
27
|
+
dofOn?: boolean;
|
|
28
|
+
dofFocus?: number;
|
|
29
|
+
dofRange?: number;
|
|
30
|
+
dofMaxBlur?: number;
|
|
31
|
+
/** camera motion blur (W8): depth reprojection into the previous frame */
|
|
32
|
+
moOn?: boolean;
|
|
33
|
+
moStrength?: number;
|
|
34
|
+
invVP?: Float32Array;
|
|
35
|
+
prevVP?: Float32Array;
|
|
26
36
|
};
|
|
27
37
|
export declare class PostChain {
|
|
28
38
|
readonly hdr: boolean;
|
|
@@ -33,6 +43,8 @@ export declare class PostChain {
|
|
|
33
43
|
private pAoBlur;
|
|
34
44
|
private pComposite;
|
|
35
45
|
private pFxaa;
|
|
46
|
+
private pDof;
|
|
47
|
+
private pMoblur;
|
|
36
48
|
private scene;
|
|
37
49
|
sceneDepth: WebGLTexture | null;
|
|
38
50
|
private bloomA;
|
|
@@ -40,6 +52,7 @@ export declare class PostChain {
|
|
|
40
52
|
private aoA;
|
|
41
53
|
private aoB;
|
|
42
54
|
private ldr;
|
|
55
|
+
private ldrB;
|
|
43
56
|
private W;
|
|
44
57
|
private H;
|
|
45
58
|
constructor(gl: WebGL2RenderingContext);
|
package/dist/post.js
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
// texture; then bright-pass -> half-res separable gaussian (ping-pong) for
|
|
5
5
|
// bloom, depth-based half-res SSAO + blur, one composite pass (bloom add,
|
|
6
6
|
// ACES filmic, grade, vignette), and an optional FXAA pass last.
|
|
7
|
-
import { FST_VS, BRIGHT_FS, BLUR_FS, SSAO_FS, AOBLUR_FS, COMPOSITE_FS, FXAA_FS, } from "./shaders.js";
|
|
7
|
+
import { FST_VS, BRIGHT_FS, BLUR_FS, SSAO_FS, AOBLUR_FS, COMPOSITE_FS, FXAA_FS, DOF_FS, MOBLUR_FS, } from "./shaders.js";
|
|
8
8
|
export function makeProg(gl, vs, fs) {
|
|
9
9
|
const sh = (type, src) => {
|
|
10
10
|
const s = gl.createShader(type);
|
|
@@ -48,6 +48,7 @@ export class PostChain {
|
|
|
48
48
|
this.aoA = null;
|
|
49
49
|
this.aoB = null;
|
|
50
50
|
this.ldr = null;
|
|
51
|
+
this.ldrB = null;
|
|
51
52
|
this.W = 0;
|
|
52
53
|
this.H = 0;
|
|
53
54
|
this.gl = gl;
|
|
@@ -58,6 +59,8 @@ export class PostChain {
|
|
|
58
59
|
this.pAoBlur = new PInfo(gl, FST_VS, AOBLUR_FS);
|
|
59
60
|
this.pComposite = new PInfo(gl, FST_VS, COMPOSITE_FS);
|
|
60
61
|
this.pFxaa = new PInfo(gl, FST_VS, FXAA_FS);
|
|
62
|
+
this.pDof = new PInfo(gl, FST_VS, DOF_FS);
|
|
63
|
+
this.pMoblur = new PInfo(gl, FST_VS, MOBLUR_FS);
|
|
61
64
|
}
|
|
62
65
|
makeTarget(w, h, hdrFmt, filter) {
|
|
63
66
|
const gl = this.gl;
|
|
@@ -114,6 +117,7 @@ export class PostChain {
|
|
|
114
117
|
this.aoA = this.makeTarget(hw, hh, false, gl.LINEAR);
|
|
115
118
|
this.aoB = this.makeTarget(hw, hh, false, gl.LINEAR);
|
|
116
119
|
this.ldr = this.makeTarget(w, h, false, gl.LINEAR);
|
|
120
|
+
this.ldrB = this.makeTarget(w, h, false, gl.LINEAR);
|
|
117
121
|
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
118
122
|
}
|
|
119
123
|
/** Bind the scene target — the world's render pass draws into this. */
|
|
@@ -173,6 +177,9 @@ export class PostChain {
|
|
|
173
177
|
gl.uniform2f(this.pAoBlur.u("uPx"), 1 / this.aoA.w, 1 / this.aoA.h);
|
|
174
178
|
this.fst(this.pAoBlur, this.aoB);
|
|
175
179
|
}
|
|
180
|
+
// remaining LDR passes after composite — each renders src -> dst (null = the canvas)
|
|
181
|
+
const dofOn = !!o.dofOn, moOn = !!(o.moOn && o.invVP && o.prevVP);
|
|
182
|
+
const tail = (dofOn ? 1 : 0) + (moOn ? 1 : 0) + (o.fxaa ? 1 : 0);
|
|
176
183
|
this.pComposite.use();
|
|
177
184
|
this.bindTex(0, this.scene.tex);
|
|
178
185
|
this.bindTex(1, o.bloomOn ? this.bloomA.tex : null);
|
|
@@ -186,10 +193,42 @@ export class PostChain {
|
|
|
186
193
|
gl.uniform1f(this.pComposite.u("uGrade"), o.grade ? 1 : 0);
|
|
187
194
|
gl.uniform1f(this.pComposite.u("uVig"), o.vignette);
|
|
188
195
|
gl.uniform1f(this.pComposite.u("uInk"), o.ink ? 1 : 0);
|
|
189
|
-
|
|
196
|
+
let src = tail > 0 ? this.ldr : null;
|
|
197
|
+
this.fst(this.pComposite, src);
|
|
198
|
+
let left = tail;
|
|
199
|
+
const next = () => (--left > 0 ? (src === this.ldr ? this.ldrB : this.ldr) : null);
|
|
200
|
+
if (dofOn) {
|
|
201
|
+
const dst = next();
|
|
202
|
+
this.pDof.use();
|
|
203
|
+
this.bindTex(0, src.tex);
|
|
204
|
+
this.bindTex(1, this.sceneDepth);
|
|
205
|
+
gl.uniform1i(this.pDof.u("uTex"), 0);
|
|
206
|
+
gl.uniform1i(this.pDof.u("uDepth"), 1);
|
|
207
|
+
gl.uniform1f(this.pDof.u("uNear"), o.near);
|
|
208
|
+
gl.uniform1f(this.pDof.u("uFar"), o.far);
|
|
209
|
+
gl.uniform1f(this.pDof.u("uFocus"), o.dofFocus ?? 700);
|
|
210
|
+
gl.uniform1f(this.pDof.u("uRange"), o.dofRange ?? 420);
|
|
211
|
+
gl.uniform1f(this.pDof.u("uMaxBlur"), o.dofMaxBlur ?? 10);
|
|
212
|
+
gl.uniform2f(this.pDof.u("uPx"), 1 / this.W, 1 / this.H);
|
|
213
|
+
this.fst(this.pDof, dst);
|
|
214
|
+
src = dst;
|
|
215
|
+
}
|
|
216
|
+
if (moOn) {
|
|
217
|
+
const dst = next();
|
|
218
|
+
this.pMoblur.use();
|
|
219
|
+
this.bindTex(0, src.tex);
|
|
220
|
+
this.bindTex(1, this.sceneDepth);
|
|
221
|
+
gl.uniform1i(this.pMoblur.u("uTex"), 0);
|
|
222
|
+
gl.uniform1i(this.pMoblur.u("uDepth"), 1);
|
|
223
|
+
gl.uniformMatrix4fv(this.pMoblur.u("uInvVP"), false, o.invVP);
|
|
224
|
+
gl.uniformMatrix4fv(this.pMoblur.u("uPrevVP"), false, o.prevVP);
|
|
225
|
+
gl.uniform1f(this.pMoblur.u("uStrength"), o.moStrength ?? 0.6);
|
|
226
|
+
this.fst(this.pMoblur, dst);
|
|
227
|
+
src = dst;
|
|
228
|
+
}
|
|
190
229
|
if (o.fxaa) {
|
|
191
230
|
this.pFxaa.use();
|
|
192
|
-
this.bindTex(0,
|
|
231
|
+
this.bindTex(0, src.tex);
|
|
193
232
|
gl.uniform1i(this.pFxaa.u("uTex"), 0);
|
|
194
233
|
gl.uniform2f(this.pFxaa.u("uPx"), 1 / this.W, 1 / this.H);
|
|
195
234
|
this.fst(this.pFxaa, null);
|
|
@@ -205,9 +244,10 @@ export class PostChain {
|
|
|
205
244
|
this.drop(this.aoA);
|
|
206
245
|
this.drop(this.aoB);
|
|
207
246
|
this.drop(this.ldr);
|
|
247
|
+
this.drop(this.ldrB);
|
|
208
248
|
if (this.sceneDepth)
|
|
209
249
|
this.gl.deleteTexture(this.sceneDepth);
|
|
210
|
-
this.scene = this.bloomA = this.bloomB = this.aoA = this.aoB = this.ldr = null;
|
|
250
|
+
this.scene = this.bloomA = this.bloomB = this.aoA = this.aoB = this.ldr = this.ldrB = null;
|
|
211
251
|
this.sceneDepth = null;
|
|
212
252
|
}
|
|
213
253
|
}
|
package/dist/shaders.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
export declare const FACE_VS = "#version 300 es\nin vec3 aPos; in vec3 aNorm; in vec4 aCol; in float aBlood; in float aGrp;\nin vec3 aPos2; in vec3 aNorm2;\nuniform mat4 uVP; uniform mat4 uSVP;\nuniform mat4 uGM[8]; uniform mat3 uNM[8]; uniform float uMW[8]; uniform float uGA[8];\nout vec3 vPos; out vec3 vNorm; out vec4 vCol; out float vZ; out vec4 vSh;\nout float vGA; out float vBlood;\nvoid main(){\n int g = int(aGrp + 0.5);\n float w = uMW[g];\n vec3 p = mix(aPos, aPos2, w), n = mix(aNorm, aNorm2, w);\n vec4 wp = uGM[g] * vec4(p, 1.0);\n vPos = wp.xyz; vNorm = uNM[g] * n; vCol = aCol; vGA = uGA[g]; vBlood = aBlood;\n vec4 cp = uVP * wp; vZ = cp.w; vSh = uSVP * wp; gl_Position = cp;\n}";
|
|
2
2
|
export declare const FACE_FS = "#version 300 es\nprecision highp float;\nin vec3 vPos; in vec3 vNorm; in vec4 vCol; in float vZ; in vec4 vSh;\nin float vGA; in float vBlood;\nuniform vec3 uLdir; uniform float uAmb; uniform float uDif; uniform float uSigned;\nuniform vec3 uLp[8]; uniform float uLi[8]; uniform float uLf[8]; uniform int uLn;\nuniform vec3 uCam; uniform float uFogK; uniform float uSpec; uniform vec3 uBg;\nuniform vec3 uSkyC; uniform vec3 uGroundC; uniform float uPulse;\nuniform float uShadowOn; uniform float uShadowSoft; uniform float uShadowBias;\nuniform lowp sampler2DShadow uShadow; uniform float uShadowPx;\nout vec4 fragColor;\nfloat h3(vec3 p){ return fract(sin(dot(p, vec3(12.9898, 78.233, 37.719))) * 43758.5453); }\nfloat vnoise(vec3 p){ vec3 i = floor(p), f = fract(p); f = f * f * (3.0 - 2.0 * f);\n return mix(mix(mix(h3(i), h3(i + vec3(1,0,0)), f.x), mix(h3(i + vec3(0,1,0)), h3(i + vec3(1,1,0)), f.x), f.y),\n mix(mix(h3(i + vec3(0,0,1)), h3(i + vec3(1,0,1)), f.x), mix(h3(i + vec3(0,1,1)), h3(i + vec3(1,1,1)), f.x), f.y), f.z); }\nfloat shadowFactor(){\n vec3 pr = vSh.xyz / vSh.w * 0.5 + 0.5;\n if (pr.x < 0.0 || pr.x > 1.0 || pr.y < 0.0 || pr.y > 1.0 || pr.z > 1.0) return 1.0;\n float ref = pr.z - uShadowBias;\n // 3x3 taps over a hardware-compared (LINEAR sampler2DShadow => free 2x2 PCF each) map\n float s = 0.0;\n for (int sy = -1; sy <= 1; sy++)\n for (int sx = -1; sx <= 1; sx++)\n s += texture(uShadow, vec3(pr.xy + vec2(float(sx), float(sy)) * uShadowPx * uShadowSoft, ref));\n s /= 9.0;\n return 0.35 + 0.65 * s;\n}\nvoid main(){\n vec3 n = normalize(vNorm);\n vec3 V = normalize(uCam - vPos);\n float skin = clamp(vBlood * 5.0, 0.0, 1.0);\n { // procedural micro-relief: perturb the shading normal by a fine noise gradient\n float bs = 5.5, e = 0.12, n0 = vnoise(vPos * bs);\n vec3 g = vec3(vnoise(vPos * bs + vec3(e, 0.0, 0.0)) - n0,\n vnoise(vPos * bs + vec3(0.0, e, 0.0)) - n0,\n vnoise(vPos * bs + vec3(0.0, 0.0, e)) - n0) / e;\n n = normalize(n - g * (0.10 + 0.30 * skin));\n }\n float d = dot(n, normalize(uLdir));\n float shade = uAmb + uDif * mix(abs(d), max(d, 0.0), uSigned);\n float spec = 0.0;\n float sh = uShadowOn > 0.5 ? shadowFactor() : 1.0;\n for (int i = 0; i < 8; i++) { if (i >= uLn) break;\n vec3 v = uLp[i] - vPos; float d2 = dot(v, v); vec3 L = v * inversesqrt(d2 + 1e-4);\n float lam = dot(n, L); lam = mix(abs(lam), max(lam, 0.0), uSigned);\n float fall = 1.0 / (1.0 + d2 / (uLf[i] * uLf[i]));\n float k = (i == 0) ? sh : 1.0;\n shade += uLi[i] * lam * fall * k;\n // GGX microfacet + Fresnel \u2014 roughness from the face's gloss (colour alpha slot)\n vec3 H = normalize(L + V);\n float nh = max(dot(n, H), 0.0);\n float rough = clamp(1.0 - vCol.a, 0.08, 1.0), a2 = rough * rough; a2 = a2 * a2;\n float dnm = nh * nh * (a2 - 1.0) + 1.0;\n float ggx = a2 / (3.14159 * dnm * dnm);\n float fres = 0.04 + 0.96 * pow(1.0 - max(dot(H, V), 0.0), 5.0);\n spec += uLi[i] * min(ggx, 6.0) * fres * fall * k * 0.16;\n }\n // coloured hemispheric ambient: cool from above, warm from below\n vec3 tint = mix(uGroundC, uSkyC, n.y * 0.5 + 0.5);\n vec3 lit = vCol.rgb * (uAmb * tint + vec3(shade - uAmb));\n // the perfusion term: blood near the surface changes how it meets the light\n float b = clamp(vBlood + uPulse * vBlood * 6.0, 0.0, 1.0);\n lit *= mix(vec3(1.0), vec3(1.07, 0.95, 0.94), b);\n lit += vec3(0.62, 0.06, 0.08) * (b * 0.20 * (1.0 - abs(d)));\n // pore noise, only where there is blood (skin, not cloth)\n float pore = vnoise(vPos * 2.4) * 0.6 + vnoise(vPos * 6.0) * 0.4;\n lit *= 1.0 + (pore - 0.5) * 0.09 * skin;\n // subsurface rim: grazing light bleeds through thin tissue, warm\n float fres = pow(1.0 - clamp(dot(n, V), 0.0, 1.0), 3.0);\n lit += vec3(0.55, 0.09, 0.10) * fres * skin * (0.28 + 0.5 * b);\n float fog = clamp(uFogK / vZ, 0.08, 1.0);\n vec3 outC = lit + vec3(1.0) * spec * uSpec * vCol.a;\n // fog and fades resolve toward the REAL background colour (the engine owns its ground)\n fragColor = vec4(mix(uBg, outC, fog * vGA), 1.0);\n}";
|
|
3
|
+
export declare const FACE_INST_VS = "#version 300 es\nin vec3 aPos; in vec3 aNorm; in vec4 aCol; in float aBlood; in float aGrp;\nin vec3 aPos2; in vec3 aNorm2;\nin vec4 aI0; in vec4 aI1; in vec4 aI2; in vec4 aI3; in vec4 aIP;\nuniform mat4 uVP; uniform mat4 uSVP; uniform float uT; uniform vec3 uWindDir;\nuniform mat4 uGM[8]; uniform mat3 uNM[8]; uniform float uMW[8]; uniform float uGA[8];\nout vec3 vPos; out vec3 vNorm; out vec4 vCol; out float vZ; out vec4 vSh;\nout float vGA; out float vBlood;\nvoid main(){\n int g = int(aGrp + 0.5);\n float w = uMW[g];\n mat4 inst = mat4(aI0, aI1, aI2, aI3);\n vec3 p = mix(aPos, aPos2, w), n = mix(aNorm, aNorm2, w);\n // W9 GPU WIND: per-instance (phase, freq, amp); displacement grows with height,\n // plus a second harmonic so the sway breathes instead of ticking\n float sw = sin(uT * aIP.y + aIP.x) + 0.5 * sin(uT * aIP.y * 2.3 + aIP.x * 1.7);\n p += uWindDir * (sw * aIP.z * max(p.y, 0.0));\n vec4 wp = uGM[g] * (inst * vec4(p, 1.0));\n vPos = wp.xyz; vNorm = uNM[g] * (mat3(inst) * n); vCol = aCol; vGA = uGA[g]; vBlood = aBlood;\n vec4 cp = uVP * wp; vZ = cp.w; vSh = uSVP * wp; gl_Position = cp;\n}";
|
|
4
|
+
export declare const DEPTH_INST_VS = "#version 300 es\nin vec3 aPos; in float aGrp; in vec3 aPos2;\nin vec4 aI0; in vec4 aI1; in vec4 aI2; in vec4 aI3; in vec4 aIP;\nuniform mat4 uVP; uniform float uT; uniform vec3 uWindDir;\nuniform mat4 uGM[8]; uniform mat3 uNM[8]; uniform float uMW[8]; uniform float uGA[8];\nvoid main(){\n int g = int(aGrp + 0.5);\n vec3 p = mix(aPos, aPos2, uMW[g]);\n float sw = sin(uT * aIP.y + aIP.x) + 0.5 * sin(uT * aIP.y * 2.3 + aIP.x * 1.7);\n p += uWindDir * (sw * aIP.z * max(p.y, 0.0));\n gl_Position = uVP * (uGM[g] * (mat4(aI0, aI1, aI2, aI3) * vec4(p, 1.0)));\n}";
|
|
3
5
|
export declare const DEPTH_VS = "#version 300 es\nin vec3 aPos; in float aGrp; in vec3 aPos2;\nuniform mat4 uVP;\nuniform mat4 uGM[8]; uniform mat3 uNM[8]; uniform float uMW[8]; uniform float uGA[8];\nvoid main(){\n int g = int(aGrp + 0.5);\n vec3 p = mix(aPos, aPos2, uMW[g]);\n gl_Position = uVP * (uGM[g] * vec4(p, 1.0));\n}";
|
|
4
6
|
export declare const DEPTH_FS = "#version 300 es\nprecision mediump float;\nvoid main(){}";
|
|
5
7
|
export declare const LINE_VS = "#version 300 es\nin vec3 aPos; in vec4 aCol; in float aGrp;\nuniform mat4 uVP;\nuniform mat4 uGM[8]; uniform mat3 uNM[8]; uniform float uMW[8]; uniform float uGA[8];\nout vec4 vCol; out float vZ; out float vGA;\nvoid main(){\n int g = int(aGrp + 0.5);\n vCol = aCol; vGA = uGA[g];\n vec4 p = uVP * (uGM[g] * vec4(aPos, 1.0)); vZ = p.w; gl_Position = p;\n}";
|
|
@@ -14,4 +16,6 @@ export declare const BLUR_FS = "#version 300 es\nprecision mediump float;\nin ve
|
|
|
14
16
|
export declare const SSAO_FS = "#version 300 es\nprecision highp float;\nin vec2 vUv; uniform sampler2D uDepth;\nuniform float uNear; uniform float uFar; uniform float uRadius; uniform vec2 uRes;\nout vec4 fragColor;\nfloat viewZ(vec2 uv){\n float d = texture(uDepth, uv).r * 2.0 - 1.0;\n return 2.0 * uNear * uFar / (uFar + uNear - d * (uFar - uNear));\n}\nfloat hash(vec2 p){ return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); }\nvoid main(){\n float z0 = viewZ(vUv);\n // screen-space sample radius shrinks with distance (a world-ish radius)\n float rad = uRadius / z0;\n float ang = hash(vUv * uRes) * 6.2831853;\n float occ = 0.0;\n for (int i = 0; i < 12; i++) {\n float fi = float(i);\n float a = ang + fi * 2.3999632; // golden-angle spiral\n float r = rad * (0.25 + 0.75 * fract(fi * 0.618034));\n vec2 uv = vUv + vec2(cos(a), sin(a)) * r;\n float dz = z0 - viewZ(uv); // positive => sample nearer camera => occluder\n occ += smoothstep(z0 * 0.002, z0 * 0.02, dz) * smoothstep(z0 * 0.35, 0.0, dz);\n }\n float ao = 1.0 - occ / 12.0;\n fragColor = vec4(vec3(ao), 1.0);\n}";
|
|
15
17
|
export declare const AOBLUR_FS = "#version 300 es\nprecision mediump float;\nin vec2 vUv; uniform sampler2D uTex; uniform vec2 uPx;\nout vec4 fragColor;\nvoid main(){\n float s = 0.0;\n for (int y = -1; y <= 2; y++)\n for (int x = -1; x <= 2; x++)\n s += texture(uTex, vUv + vec2(float(x) - 0.5, float(y) - 0.5) * uPx).r;\n fragColor = vec4(vec3(s / 16.0), 1.0);\n}";
|
|
16
18
|
export declare const COMPOSITE_FS = "#version 300 es\nprecision mediump float;\nin vec2 vUv;\nuniform sampler2D uScene; uniform sampler2D uBloom; uniform sampler2D uAO;\nuniform float uBloomStr; uniform float uAOStr;\nuniform float uFilm; uniform float uGrade; uniform float uVig; uniform float uInk;\nout vec4 fragColor;\nvoid main(){\n vec3 c = texture(uScene, vUv).rgb;\n c *= mix(1.0, texture(uAO, vUv).r, uAOStr);\n c += texture(uBloom, vUv).rgb * uBloomStr;\n if (uFilm > 0.5) { // ACES-ish filmic: highlights roll off instead of clipping\n c = (c * (2.51 * c + 0.03)) / (c * (2.43 * c + 0.59) + 0.14);\n }\n c = clamp(c, 0.0, 1.0);\n if (uGrade > 0.5) { // violet-cool shadows, warm highlights\n float luma = dot(c, vec3(0.299, 0.587, 0.114));\n c *= mix(vec3(0.85, 0.83, 1.07), vec3(1.07, 0.99, 0.92), smoothstep(0.12, 0.72, luma));\n c = clamp(c, 0.0, 1.0);\n }\n if (uVig > 0.0) { // cinematic vignette, in the composite now (off the overlay)\n vec2 q = vUv - vec2(0.5, 0.54);\n float r = smoothstep(0.35, 0.9, length(q * vec2(1.15, 1.0)));\n vec3 dk = uInk > 0.5 ? vec3(0.20, 0.19, 0.30) : vec3(0.024, 0.016, 0.055);\n c = mix(c, dk, uVig * r * (uInk > 0.5 ? 0.3 : 1.0));\n }\n fragColor = vec4(c, 1.0);\n}";
|
|
19
|
+
export declare const DOF_FS = "#version 300 es\nprecision highp float;\nin vec2 vUv; uniform sampler2D uTex; uniform sampler2D uDepth;\nuniform float uNear; uniform float uFar; uniform float uFocus; uniform float uRange;\nuniform float uMaxBlur; uniform vec2 uPx;\nout vec4 fragColor;\nfloat lin(float d){ return uNear * uFar / (uFar - d * (uFar - uNear)); }\nconst vec2 DISC[12] = vec2[](\n vec2(-0.326, -0.406), vec2(-0.840, -0.074), vec2(-0.696, 0.457), vec2(-0.203, 0.621),\n vec2(0.962, -0.195), vec2(0.473, -0.480), vec2(0.519, 0.767), vec2(0.185, -0.893),\n vec2(0.507, 0.064), vec2(0.896, 0.412), vec2(-0.322, -0.933), vec2(-0.792, -0.598));\nvoid main(){\n float z = lin(texture(uDepth, vUv).r);\n float coc = clamp(abs(z - uFocus) / max(1.0, uRange), 0.0, 1.0) * uMaxBlur;\n vec3 acc = texture(uTex, vUv).rgb;\n float wsum = 1.0;\n for (int i = 0; i < 12; i++) {\n vec2 off = DISC[i] * coc * uPx;\n // a sharp (in-focus) neighbour must not bleed into a blurred one: weight each tap\n // by ITS OWN CoC so foreground focus stays crisp against a soft background\n float zt = lin(texture(uDepth, vUv + off).r);\n float ct = clamp(abs(zt - uFocus) / max(1.0, uRange), 0.0, 1.0);\n float w = 0.25 + 0.75 * ct;\n acc += texture(uTex, vUv + off).rgb * w;\n wsum += w;\n }\n fragColor = vec4(acc / wsum, 1.0);\n}";
|
|
20
|
+
export declare const MOBLUR_FS = "#version 300 es\nprecision highp float;\nin vec2 vUv; uniform sampler2D uTex; uniform sampler2D uDepth;\nuniform mat4 uInvVP; uniform mat4 uPrevVP; uniform float uStrength;\nout vec4 fragColor;\nvoid main(){\n float d = texture(uDepth, vUv).r;\n vec4 ndc = vec4(vUv * 2.0 - 1.0, d * 2.0 - 1.0, 1.0);\n vec4 wp = uInvVP * ndc; wp /= wp.w;\n vec4 pc = uPrevVP * wp;\n vec2 prevUv = (pc.xy / pc.w) * 0.5 + 0.5;\n vec2 vel = (vUv - prevUv) * uStrength;\n float vlen = length(vel);\n if (vlen < 1e-5 || pc.w <= 0.0) { fragColor = vec4(texture(uTex, vUv).rgb, 1.0); return; }\n vel = vlen > 0.04 ? vel * (0.04 / vlen) : vel; // clamp the streak to 4% of the screen\n vec3 acc = vec3(0.0);\n for (int i = 0; i < 8; i++) {\n float t = (float(i) / 7.0) - 0.5;\n acc += texture(uTex, clamp(vUv + vel * t, vec2(0.001), vec2(0.999))).rgb;\n }\n fragColor = vec4(acc / 8.0, 1.0);\n}";
|
|
17
21
|
export declare const FXAA_FS = "#version 300 es\nprecision mediump float;\nin vec2 vUv; uniform sampler2D uTex; uniform vec2 uPx;\nout vec4 fragColor;\nfloat luma(vec3 c){ return dot(c, vec3(0.299, 0.587, 0.114)); }\nvoid main(){\n vec3 cM = texture(uTex, vUv).rgb;\n float lM = luma(cM);\n float lN = luma(texture(uTex, vUv + vec2(0.0, -uPx.y)).rgb);\n float lS = luma(texture(uTex, vUv + vec2(0.0, uPx.y)).rgb);\n float lW = luma(texture(uTex, vUv + vec2(-uPx.x, 0.0)).rgb);\n float lE = luma(texture(uTex, vUv + vec2(uPx.x, 0.0)).rgb);\n float lMin = min(lM, min(min(lN, lS), min(lW, lE)));\n float lMax = max(lM, max(max(lN, lS), max(lW, lE)));\n float range = lMax - lMin;\n if (range < max(0.0312, lMax * 0.125)) { fragColor = vec4(cM, 1.0); return; }\n vec2 dir = normalize(vec2((lE + lS) - (lW + lN), (lN + lE) - (lS + lW)) + 1e-6);\n vec3 a = texture(uTex, vUv + dir * uPx * 0.5).rgb;\n vec3 b = texture(uTex, vUv - dir * uPx * 0.5).rgb;\n fragColor = vec4(mix(cM, (a + b) * 0.5, 0.75), 1.0);\n}";
|