@thi.ng/webgl 6.9.117 → 6.10.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.
Files changed (4) hide show
  1. package/README.md +4 -3
  2. package/api/model.d.ts +1 -1
  3. package/package.json +20 -20
  4. package/shaders/phong.js +51 -51
package/README.md CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  > [!NOTE]
10
10
 
11
- > This is one of 216 standalone projects. LLM-free, human-made and
11
+ > This is one of 217 standalone projects. LLM-free, human-made and
12
12
  > cared for software, maintained as part of the
13
13
  > [@thi.ng/umbrella](https://codeberg.org/thi.ng/umbrella/) ecosystem and
14
14
  > anti-framework.
@@ -104,7 +104,7 @@ Browser ESM import:
104
104
 
105
105
  [JSDelivr documentation](https://www.jsdelivr.com/)
106
106
 
107
- Package sizes (brotli'd, pre-treeshake): ESM: 11.69 KB
107
+ Package sizes (brotli'd, pre-treeshake): ESM: 11.64 KB
108
108
 
109
109
  ## Dependencies
110
110
 
@@ -129,7 +129,7 @@ Note: @thi.ng/api is in _most_ cases a type-only import (not used at runtime)
129
129
 
130
130
  ## Usage examples
131
131
 
132
- 25 projects in this repo's
132
+ 26 projects in this repo's
133
133
  [/examples](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples)
134
134
  directory are using this package:
135
135
 
@@ -153,6 +153,7 @@ directory are using this package:
153
153
  | <img src="https://codeberg.org/thi.ng/umbrella/media/branch/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://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/webgl-float-fbo) |
154
154
  | <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/webgl-game-of-life.png" width="240"/> | Game of Life implemented as WebGL2 multi-pass shader pipeline | [Demo](https://demo.thi.ng/umbrella/webgl-game-of-life/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/webgl-game-of-life) |
155
155
  | <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/webgl-grid.jpg" width="240"/> | WebGL instancing, animated grid | [Demo](https://demo.thi.ng/umbrella/webgl-grid/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/webgl-grid) |
156
+ | <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/webgl-mesh.avif" width="240"/> | Basic thi.ng/geom-mesh creation and conversion from OBJ import | [Demo](https://demo.thi.ng/umbrella/webgl-mesh/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/webgl-mesh) |
156
157
  | <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/webgl-msdf.jpg" width="240"/> | WebGL MSDF text rendering & particle system | [Demo](https://demo.thi.ng/umbrella/webgl-msdf/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/webgl-msdf) |
157
158
  | | Minimal multi-pass / GPGPU example | [Demo](https://demo.thi.ng/umbrella/webgl-multipass/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/webgl-multipass) |
158
159
  | <img src="https://codeberg.org/thi.ng/umbrella/media/branch/develop/assets/examples/webgl-obj.avif" width="240"/> | Basic 3D OBJ model loading & interactive arcball camera control | [Demo](https://demo.thi.ng/umbrella/webgl-obj/) | [Source](https://codeberg.org/thi.ng/umbrella/src/branch/develop/examples/webgl-obj) |
package/api/model.d.ts CHANGED
@@ -66,7 +66,7 @@ export interface ModelSpec {
66
66
  * been compiled yet and the latter is only specified as {@link ShaderSpec}.
67
67
  */
68
68
  export interface UncompiledModelSpec extends Omit<ModelSpec, "shader"> {
69
- shader: ShaderSpec;
69
+ shader: ShaderSpec | IShader;
70
70
  }
71
71
  /**
72
72
  * Data specification of a single WebGL attribute
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thi.ng/webgl",
3
- "version": "6.9.117",
3
+ "version": "6.10.0",
4
4
  "description": "WebGL & GLSL abstraction layer",
5
5
  "type": "module",
6
6
  "module": "./index.js",
@@ -44,26 +44,26 @@
44
44
  "tool:tangle": "../../node_modules/.bin/tangle src/**/*.ts"
45
45
  },
46
46
  "dependencies": {
47
- "@thi.ng/api": "^8.12.27",
48
- "@thi.ng/canvas": "^1.1.19",
49
- "@thi.ng/checks": "^3.11.0",
50
- "@thi.ng/equiv": "^2.1.116",
51
- "@thi.ng/errors": "^2.6.16",
52
- "@thi.ng/logger": "^3.3.10",
53
- "@thi.ng/matrices": "^3.0.53",
54
- "@thi.ng/memoize": "^4.0.51",
55
- "@thi.ng/object-utils": "^1.3.20",
56
- "@thi.ng/pixel": "^7.5.37",
57
- "@thi.ng/shader-ast": "^1.1.56",
58
- "@thi.ng/shader-ast-glsl": "^1.0.75",
59
- "@thi.ng/shader-ast-stdlib": "^1.0.75",
60
- "@thi.ng/transducers": "^9.6.42",
61
- "@thi.ng/vector-pools": "^3.2.106",
62
- "@thi.ng/vectors": "^8.6.38"
47
+ "@thi.ng/api": "^8.12.28",
48
+ "@thi.ng/canvas": "^1.1.20",
49
+ "@thi.ng/checks": "^3.11.1",
50
+ "@thi.ng/equiv": "^2.1.117",
51
+ "@thi.ng/errors": "^2.6.17",
52
+ "@thi.ng/logger": "^3.3.11",
53
+ "@thi.ng/matrices": "^3.0.54",
54
+ "@thi.ng/memoize": "^4.0.52",
55
+ "@thi.ng/object-utils": "^1.3.21",
56
+ "@thi.ng/pixel": "^7.5.38",
57
+ "@thi.ng/shader-ast": "^1.1.57",
58
+ "@thi.ng/shader-ast-glsl": "^1.0.76",
59
+ "@thi.ng/shader-ast-stdlib": "^1.1.0",
60
+ "@thi.ng/transducers": "^9.6.43",
61
+ "@thi.ng/vector-pools": "^3.2.107",
62
+ "@thi.ng/vectors": "^8.7.0"
63
63
  },
64
64
  "devDependencies": {
65
- "esbuild": "^0.28.1",
66
- "typedoc": "^0.28.19",
65
+ "esbuild": "^0.28.2",
66
+ "typedoc": "^0.28.20",
67
67
  "typescript": "^6.0.3"
68
68
  },
69
69
  "keywords": [
@@ -228,5 +228,5 @@
228
228
  ],
229
229
  "year": 2014
230
230
  },
231
- "gitHead": "6a4e7c564ebc476770d213d98a2aa6257a41ac15"
231
+ "gitHead": "57ce96457ee0b8de5b17f9d371e6707780c64bd7"
232
232
  }
package/shaders/phong.js CHANGED
@@ -1,70 +1,70 @@
1
- import { F, M4, V3 } from "@thi.ng/shader-ast/api/types";
2
- import { diffuseLighting } from "@thi.ng/shader-ast-stdlib/light/lambert";
1
+ import { perspectiveDivide } from "@thi.ng/shader-ast-stdlib/matrix/convert";
2
+ import { transformMVP } from "@thi.ng/shader-ast-stdlib/matrix/mvp";
3
3
  import { surfaceNormal } from "@thi.ng/shader-ast-stdlib/matrix/normal";
4
+ import { F, M4, S2D, V2, V3 } from "@thi.ng/shader-ast/api/types";
4
5
  import { assign } from "@thi.ng/shader-ast/ast/assign";
5
- import { ternary } from "@thi.ng/shader-ast/ast/controlflow";
6
6
  import { defMain } from "@thi.ng/shader-ast/ast/function";
7
7
  import { FLOAT0, vec4 } from "@thi.ng/shader-ast/ast/lit";
8
- import { add, gt, mul, sub } from "@thi.ng/shader-ast/ast/ops";
9
- import { $ } from "@thi.ng/shader-ast/ast/swizzle";
8
+ import { add, mul } from "@thi.ng/shader-ast/ast/ops";
9
+ import { $xyz } from "@thi.ng/shader-ast/ast/swizzle";
10
10
  import { sym } from "@thi.ng/shader-ast/ast/sym";
11
11
  import { dot, max, normalize, pow } from "@thi.ng/shader-ast/builtin/math";
12
+ import { texture } from "@thi.ng/shader-ast/builtin/texture";
12
13
  import { defMaterial } from "../material.js";
13
- import { autoNormalMatrix1 } from "../matrices.js";
14
+ import { autoNormalMatrix2 } from "../matrices.js";
14
15
  import { colorAttrib, positionAttrib } from "../utils.js";
15
16
  const PHONG = (opts = {}) => ({
16
17
  vs: (gl, unis, ins, outs) => [
17
- defMain(() => {
18
- let worldPos;
19
- return [
20
- worldPos = sym(
21
- mul(unis.model, vec4(positionAttrib(opts, ins), 1))
22
- ),
23
- assign(outs.vnormal, surfaceNormal(ins.normal, unis.normalMat)),
24
- assign(outs.vlight, sub(unis.lightPos, $(worldPos, "xyz"))),
25
- assign(outs.veye, sub(unis.eyePos, $(worldPos, "xyz"))),
26
- assign(outs.vcolor, colorAttrib(opts, ins, unis.diffuseCol)),
27
- assign(
28
- gl.gl_Position,
29
- mul(mul(unis.proj, unis.view), worldPos)
18
+ defMain(() => [
19
+ assign(
20
+ gl.gl_Position,
21
+ transformMVP(
22
+ positionAttrib(opts, ins),
23
+ unis.model,
24
+ unis.view,
25
+ unis.proj
30
26
  )
31
- ];
32
- })
27
+ ),
28
+ assign(outs.vposition, perspectiveDivide(gl.gl_Position)),
29
+ assign(outs.vnormal, surfaceNormal(ins.normal, unis.normalMat)),
30
+ assign(outs.vcolor, colorAttrib(opts, ins, unis.diffuseCol)),
31
+ opts.uv ? assign(outs.vuv, ins[opts.uv]) : null
32
+ ])
33
33
  ],
34
34
  fs: (_, unis, ins, outs) => [
35
35
  defMain(() => {
36
36
  let normal;
37
- let light;
38
- let directional;
37
+ let lightDir;
38
+ let halfDir;
39
+ let diffuse;
39
40
  let specular;
40
41
  return [
41
42
  normal = sym(normalize(ins.vnormal)),
42
- light = sym(normalize(ins.vlight)),
43
- directional = sym(max(dot(normal, light), FLOAT0)),
43
+ lightDir = sym(normalize(unis.lightDir)),
44
+ halfDir = sym(
45
+ normalize(add(normalize(ins.vposition), lightDir))
46
+ ),
47
+ diffuse = sym(max(dot(normal, lightDir), FLOAT0)),
44
48
  specular = sym(
45
- ternary(
46
- gt(directional, FLOAT0),
47
- pow(
48
- dot(
49
- normal,
50
- normalize(add(light, normalize(ins.veye)))
51
- ),
52
- unis.shininess
53
- ),
54
- FLOAT0
55
- )
49
+ pow(max(dot(halfDir, normal), FLOAT0), unis.shininess)
56
50
  ),
57
51
  assign(
58
52
  outs.fragColor,
59
53
  vec4(
60
54
  add(
61
- diffuseLighting(
62
- directional,
63
- ins.vcolor,
64
- unis.lightCol,
65
- unis.ambientCol
66
- ),
67
- mul(unis.specularCol, specular)
55
+ unis.ambientCol,
56
+ add(
57
+ mul(
58
+ opts.uv ? mul(
59
+ $xyz(
60
+ texture(unis.tex, ins.vuv)
61
+ ),
62
+ ins.vcolor
63
+ ) : ins.vcolor,
64
+ diffuse
65
+ ),
66
+ mul(unis.specularCol, specular)
67
+ )
68
68
  ),
69
69
  1
70
70
  )
@@ -75,26 +75,26 @@ const PHONG = (opts = {}) => ({
75
75
  attribs: {
76
76
  position: V3,
77
77
  normal: V3,
78
+ ...opts.uv ? { [opts.uv]: V2 } : null,
78
79
  ...opts.color && !opts.instanceColor ? { [opts.color]: V3 } : null,
79
80
  ...opts.instancePos ? { [opts.instancePos]: V3 } : null,
80
81
  ...opts.instanceColor ? { [opts.instanceColor]: V3 } : null
81
82
  },
82
83
  varying: {
84
+ vposition: V3,
83
85
  vnormal: V3,
84
- veye: V3,
85
- vlight: V3,
86
- vcolor: V3
86
+ vcolor: V3,
87
+ ...opts.uv ? { vuv: V2 } : null
87
88
  },
88
89
  uniforms: {
89
90
  model: M4,
90
- normalMat: [M4, autoNormalMatrix1()],
91
91
  view: M4,
92
92
  proj: M4,
93
+ normalMat: [M4, autoNormalMatrix2()],
93
94
  shininess: [F, 32],
94
- eyePos: V3,
95
- lightPos: [V3, [0, 0, 2]],
96
- lightCol: [V3, [1, 1, 1]],
97
- ...defMaterial(opts.material)
95
+ lightDir: [V3, [0, 1, 0]],
96
+ ...defMaterial(opts.material),
97
+ ...opts.uv ? { tex: S2D } : null
98
98
  },
99
99
  state: {
100
100
  depth: true,