@thi.ng/webgl 6.1.20 → 6.2.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/CHANGELOG.md +17 -1
- package/README.md +17 -16
- package/api/ext.d.ts +7 -0
- package/api/multipass.d.ts +7 -0
- package/index.d.ts +2 -0
- package/index.js +2 -0
- package/multipass.js +8 -4
- package/package.json +11 -11
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
-
- **Last updated**: 2022-08-
|
|
3
|
+
- **Last updated**: 2022-08-08T22:36:17Z
|
|
4
4
|
- **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
|
|
5
5
|
|
|
6
6
|
All notable changes to this project will be documented in this file.
|
|
@@ -9,6 +9,22 @@ See [Conventional Commits](https://conventionalcommits.org/) for commit guidelin
|
|
|
9
9
|
**Note:** Unlisted _patch_ versions only involve non-code or otherwise excluded changes
|
|
10
10
|
and/or version bumps of transitive dependencies.
|
|
11
11
|
|
|
12
|
+
## [6.2.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/webgl@6.2.0) (2022-08-08)
|
|
13
|
+
|
|
14
|
+
#### 🚀 Features
|
|
15
|
+
|
|
16
|
+
- update Multipass ([5f51d26](https://github.com/thi-ng/umbrella/commit/5f51d26))
|
|
17
|
+
- auto-enable EXT_float_blend extension for float outputs
|
|
18
|
+
(this silences warnings on Firefox, Chrome seemed fine)
|
|
19
|
+
- add Multipass.singlePass() to selectively execute single shader passes
|
|
20
|
+
- add more extensions to WebGLExtensionMap ([dd2e295](https://github.com/thi-ng/umbrella/commit/dd2e295))
|
|
21
|
+
|
|
22
|
+
### [6.1.22](https://github.com/thi-ng/umbrella/tree/@thi.ng/webgl@6.1.22) (2022-08-08)
|
|
23
|
+
|
|
24
|
+
#### 🩹 Bug fixes
|
|
25
|
+
|
|
26
|
+
- add missing type exports ([6b1501e](https://github.com/thi-ng/umbrella/commit/6b1501e))
|
|
27
|
+
|
|
12
28
|
## [6.1.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/webgl@6.1.0) (2021-11-17)
|
|
13
29
|
|
|
14
30
|
#### 🚀 Features
|
package/README.md
CHANGED
|
@@ -129,22 +129,23 @@ directory are using this package.
|
|
|
129
129
|
|
|
130
130
|
A selection:
|
|
131
131
|
|
|
132
|
-
| Screenshot | Description
|
|
133
|
-
|
|
134
|
-
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/shader-ast-evo.jpg" width="240"/> | Evolutionary shader generation using genetic programming
|
|
135
|
-
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/shader-ast-noise.jpg" width="240"/> | HOF shader procedural noise function composition
|
|
136
|
-
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/shader-ast/shader-ast-raymarch.jpg" width="240"/> | WebGL & JS canvas2D raymarch shader cross-compilation
|
|
137
|
-
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/shader-ast-sdf2d.jpg" width="240"/> | WebGL & JS canvas 2D SDF
|
|
138
|
-
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/shader-ast-tunnel.jpg" width="240"/> | WebGL & Canvas2D textured tunnel shader
|
|
139
|
-
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/shader-graph.jpg" width="240"/> | Minimal shader graph developed during livestream #2
|
|
140
|
-
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/soa-ecs-100k.png" width="240"/> | Entity Component System w/ 100k 3D particles
|
|
141
|
-
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/webgl-cube.png" width="240"/> | WebGL multi-colored cube mesh
|
|
142
|
-
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/webgl-cubemap.jpg" width="240"/> | WebGL cube maps with async texture loading
|
|
143
|
-
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/webgl-
|
|
144
|
-
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/webgl-
|
|
145
|
-
|
|
|
146
|
-
|
|
|
147
|
-
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/webgl-
|
|
132
|
+
| Screenshot | Description | Live demo | Source |
|
|
133
|
+
|:-----------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------|:----------------------------------------------------------|:---------------------------------------------------------------------------------------|
|
|
134
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/shader-ast-evo.jpg" width="240"/> | Evolutionary shader generation using genetic programming | [Demo](https://demo.thi.ng/umbrella/shader-ast-evo/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/shader-ast-evo) |
|
|
135
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/shader-ast-noise.jpg" width="240"/> | HOF shader procedural noise function composition | [Demo](https://demo.thi.ng/umbrella/shader-ast-noise/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/shader-ast-noise) |
|
|
136
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/shader-ast/shader-ast-raymarch.jpg" width="240"/> | WebGL & JS canvas2D raymarch shader cross-compilation | [Demo](https://demo.thi.ng/umbrella/shader-ast-raymarch/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/shader-ast-raymarch) |
|
|
137
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/shader-ast-sdf2d.jpg" width="240"/> | WebGL & JS canvas 2D SDF | [Demo](https://demo.thi.ng/umbrella/shader-ast-sdf2d/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/shader-ast-sdf2d) |
|
|
138
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/shader-ast-tunnel.jpg" width="240"/> | WebGL & Canvas2D textured tunnel shader | [Demo](https://demo.thi.ng/umbrella/shader-ast-tunnel/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/shader-ast-tunnel) |
|
|
139
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/shader-graph.jpg" width="240"/> | Minimal shader graph developed during livestream #2 | [Demo](https://demo.thi.ng/umbrella/shader-graph/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/shader-graph) |
|
|
140
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/soa-ecs-100k.png" width="240"/> | Entity Component System w/ 100k 3D particles | [Demo](https://demo.thi.ng/umbrella/soa-ecs/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/soa-ecs) |
|
|
141
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/webgl-cube.png" width="240"/> | WebGL multi-colored cube mesh | [Demo](https://demo.thi.ng/umbrella/webgl-cube/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/webgl-cube) |
|
|
142
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/webgl-cubemap.jpg" width="240"/> | WebGL cube maps with async texture loading | [Demo](https://demo.thi.ng/umbrella/webgl-cubemap/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/webgl-cubemap) |
|
|
143
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/webgl-float-fbo.jpg" width="240"/> | Drawing to floating point offscreen / multi-pass shader pipeline | [Demo](https://demo.thi.ng/umbrella/webgl-float-fbo/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/webgl-float-fbo) |
|
|
144
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/webgl-grid.jpg" width="240"/> | WebGL instancing, animated grid | [Demo](https://demo.thi.ng/umbrella/webgl-grid/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/webgl-grid) |
|
|
145
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/webgl-msdf.jpg" width="240"/> | WebGL MSDF text rendering & particle system | [Demo](https://demo.thi.ng/umbrella/webgl-msdf/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/webgl-msdf) |
|
|
146
|
+
| | Minimal multi-pass / GPGPU example | [Demo](https://demo.thi.ng/umbrella/webgl-multipass/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/webgl-multipass) |
|
|
147
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/webgl-shadertoy.jpg" width="240"/> | Shadertoy-like WebGL setup | [Demo](https://demo.thi.ng/umbrella/webgl-shadertoy/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/webgl-shadertoy) |
|
|
148
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/webgl-ssao.jpg" width="240"/> | WebGL screenspace ambient occlusion | [Demo](https://demo.thi.ng/umbrella/webgl-ssao/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/webgl-ssao) |
|
|
148
149
|
|
|
149
150
|
## API
|
|
150
151
|
|
package/api/ext.d.ts
CHANGED
|
@@ -9,11 +9,15 @@ export interface WebGLExtensionMap {
|
|
|
9
9
|
ANGLE_instanced_arrays: ANGLE_instanced_arrays;
|
|
10
10
|
EXT_blend_minmax: EXT_blend_minmax;
|
|
11
11
|
EXT_color_buffer_float: WEBGL_color_buffer_float;
|
|
12
|
+
EXT_color_buffer_half_float: EXT_color_buffer_half_float;
|
|
13
|
+
EXT_float_blend: EXT_float_blend;
|
|
12
14
|
EXT_frag_depth: EXT_frag_depth;
|
|
13
15
|
EXT_shader_texture_lod: EXT_shader_texture_lod;
|
|
14
16
|
EXT_sRGB: EXT_sRGB;
|
|
17
|
+
EXT_texture_compression_rgtc: EXT_texture_compression_rgtc;
|
|
15
18
|
EXT_texture_filter_anisotropic: EXT_texture_filter_anisotropic;
|
|
16
19
|
OES_element_index_uint: OES_element_index_uint;
|
|
20
|
+
OES_fbo_render_mipmap: OES_fbo_render_mipmap;
|
|
17
21
|
OES_standard_derivatives: OES_standard_derivatives;
|
|
18
22
|
OES_texture_float_linear: OES_texture_float_linear;
|
|
19
23
|
OES_texture_float: OES_texture_float;
|
|
@@ -22,6 +26,8 @@ export interface WebGLExtensionMap {
|
|
|
22
26
|
OES_vertex_array_object: OES_vertex_array_object;
|
|
23
27
|
WEBGL_color_buffer_float: WEBGL_color_buffer_float;
|
|
24
28
|
WEBGL_compressed_texture_astc: WEBGL_compressed_texture_astc;
|
|
29
|
+
WEBGL_compressed_texture_etc: WEBGL_compressed_texture_etc;
|
|
30
|
+
WEBGL_compressed_texture_etc1: WEBGL_compressed_texture_etc1;
|
|
25
31
|
WEBGL_compressed_texture_s3tc_srgb: WEBGL_compressed_texture_s3tc_srgb;
|
|
26
32
|
WEBGL_compressed_texture_s3tc: WEBGL_compressed_texture_s3tc;
|
|
27
33
|
WEBGL_debug_renderer_info: WEBGL_debug_renderer_info;
|
|
@@ -29,6 +35,7 @@ export interface WebGLExtensionMap {
|
|
|
29
35
|
WEBGL_depth_texture: WEBGL_depth_texture;
|
|
30
36
|
WEBGL_draw_buffers: WEBGL_draw_buffers;
|
|
31
37
|
WEBGL_lose_context: WEBGL_lose_context;
|
|
38
|
+
WEBGL_multi_draw: WEBGL_multi_draw;
|
|
32
39
|
}
|
|
33
40
|
export declare type ExtensionName = keyof WebGLExtensionMap;
|
|
34
41
|
export declare type ExtensionBehavior = "require" | "warn" | boolean;
|
package/api/multipass.d.ts
CHANGED
|
@@ -8,6 +8,13 @@ export interface Multipass {
|
|
|
8
8
|
start(): void;
|
|
9
9
|
stop(): void;
|
|
10
10
|
update(time?: number): void;
|
|
11
|
+
/**
|
|
12
|
+
* Executes a single shader pass only.
|
|
13
|
+
*
|
|
14
|
+
* @param id
|
|
15
|
+
* @param time
|
|
16
|
+
*/
|
|
17
|
+
singlePass(id: number, time: number): void;
|
|
11
18
|
fbos: IFbo[];
|
|
12
19
|
models: ModelSpec[];
|
|
13
20
|
passes: PassOpts[];
|
package/index.d.ts
CHANGED
|
@@ -5,7 +5,9 @@ export * from "./api/ext.js";
|
|
|
5
5
|
export * from "./api/glsl.js";
|
|
6
6
|
export * from "./api/material.js";
|
|
7
7
|
export * from "./api/model.js";
|
|
8
|
+
export * from "./api/multipass.js";
|
|
8
9
|
export * from "./api/shader.js";
|
|
10
|
+
export * from "./api/stencil.js";
|
|
9
11
|
export * from "./api/texture.js";
|
|
10
12
|
export * from "./buffer.js";
|
|
11
13
|
export * from "./canvas.js";
|
package/index.js
CHANGED
|
@@ -5,7 +5,9 @@ export * from "./api/ext.js";
|
|
|
5
5
|
export * from "./api/glsl.js";
|
|
6
6
|
export * from "./api/material.js";
|
|
7
7
|
export * from "./api/model.js";
|
|
8
|
+
export * from "./api/multipass.js";
|
|
8
9
|
export * from "./api/shader.js";
|
|
10
|
+
export * from "./api/stencil.js";
|
|
9
11
|
export * from "./api/texture.js";
|
|
10
12
|
export * from "./buffer.js";
|
|
11
13
|
export * from "./canvas.js";
|
package/multipass.js
CHANGED
|
@@ -25,7 +25,8 @@ export const defMultiPass = (opts) => {
|
|
|
25
25
|
const textures = initTextures(opts);
|
|
26
26
|
const passes = initPasses(opts, textures);
|
|
27
27
|
const fbos = initBuffers(opts, textures, useMainBuffer);
|
|
28
|
-
const drawPass = (i, time) => {
|
|
28
|
+
const drawPass = (i, time, isFBO = true) => {
|
|
29
|
+
isFBO && fbos[i].bind();
|
|
29
30
|
const spec = opts.passes[i];
|
|
30
31
|
const pass = passes[i];
|
|
31
32
|
const shader = pass.shader;
|
|
@@ -36,14 +37,13 @@ export const defMultiPass = (opts) => {
|
|
|
36
37
|
shader.uniforms.time && (pass.uniforms.time = time);
|
|
37
38
|
gl.viewport(0, 0, size[0], size[1]);
|
|
38
39
|
draw(pass);
|
|
40
|
+
isFBO && fbos[i].unbind();
|
|
39
41
|
};
|
|
40
42
|
const update = (time) => {
|
|
41
43
|
for (let i = 0; i < fbos.length; i++) {
|
|
42
|
-
fbos[i].bind();
|
|
43
44
|
drawPass(i, time);
|
|
44
|
-
fbos[i].unbind();
|
|
45
45
|
}
|
|
46
|
-
useMainBuffer && drawPass(numPasses - 1, time);
|
|
46
|
+
useMainBuffer && drawPass(numPasses - 1, time, false);
|
|
47
47
|
};
|
|
48
48
|
const updateRAF = () => {
|
|
49
49
|
update((Date.now() - t0) * 1e-3);
|
|
@@ -67,6 +67,9 @@ export const defMultiPass = (opts) => {
|
|
|
67
67
|
update(time) {
|
|
68
68
|
update(time);
|
|
69
69
|
},
|
|
70
|
+
singlePass(i, time) {
|
|
71
|
+
drawPass(i, time, i < fbos.length);
|
|
72
|
+
},
|
|
70
73
|
passes: opts.passes,
|
|
71
74
|
fbos,
|
|
72
75
|
models: passes,
|
|
@@ -124,6 +127,7 @@ const initShader = (gl, pass, textures) => {
|
|
|
124
127
|
if (floatOut) {
|
|
125
128
|
ext[isGL2 ? "EXT_color_buffer_float" : "WEBGL_color_buffer_float"] =
|
|
126
129
|
"require";
|
|
130
|
+
isGL2 && (ext["EXT_float_blend"] = "require");
|
|
127
131
|
}
|
|
128
132
|
return defShader(gl, spec);
|
|
129
133
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@thi.ng/webgl",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.2.0",
|
|
4
4
|
"description": "WebGL & GLSL abstraction layer",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "./index.js",
|
|
@@ -36,20 +36,20 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@thi.ng/adapt-dpi": "^2.1.9",
|
|
38
38
|
"@thi.ng/api": "^8.3.9",
|
|
39
|
-
"@thi.ng/associative": "^6.2.
|
|
39
|
+
"@thi.ng/associative": "^6.2.4",
|
|
40
40
|
"@thi.ng/checks": "^3.2.4",
|
|
41
41
|
"@thi.ng/equiv": "^2.1.9",
|
|
42
42
|
"@thi.ng/errors": "^2.1.10",
|
|
43
43
|
"@thi.ng/logger": "^1.2.0",
|
|
44
|
-
"@thi.ng/matrices": "^2.1.
|
|
44
|
+
"@thi.ng/matrices": "^2.1.20",
|
|
45
45
|
"@thi.ng/memoize": "^3.1.9",
|
|
46
|
-
"@thi.ng/pixel": "^3.4.
|
|
47
|
-
"@thi.ng/shader-ast": "^0.12.
|
|
48
|
-
"@thi.ng/shader-ast-glsl": "^0.4.
|
|
49
|
-
"@thi.ng/shader-ast-stdlib": "^0.12.
|
|
50
|
-
"@thi.ng/transducers": "^8.3.
|
|
51
|
-
"@thi.ng/vector-pools": "^3.1.
|
|
52
|
-
"@thi.ng/vectors": "^7.5.
|
|
46
|
+
"@thi.ng/pixel": "^3.4.11",
|
|
47
|
+
"@thi.ng/shader-ast": "^0.12.17",
|
|
48
|
+
"@thi.ng/shader-ast-glsl": "^0.4.17",
|
|
49
|
+
"@thi.ng/shader-ast-stdlib": "^0.12.10",
|
|
50
|
+
"@thi.ng/transducers": "^8.3.11",
|
|
51
|
+
"@thi.ng/vector-pools": "^3.1.21",
|
|
52
|
+
"@thi.ng/vectors": "^7.5.12"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@microsoft/api-extractor": "^7.25.0",
|
|
@@ -215,5 +215,5 @@
|
|
|
215
215
|
],
|
|
216
216
|
"year": 2014
|
|
217
217
|
},
|
|
218
|
-
"gitHead": "
|
|
218
|
+
"gitHead": "e579cb171fc720cbf0b71d3a5f4adfacccdaf214\n"
|
|
219
219
|
}
|