webgl2-sdf 0.0.4 → 0.0.5
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 +76 -65
- package/browser/index.min.js +1 -1
- package/node/bezier/bezier-curves-to-line-segs.d.ts +1 -1
- package/node/bezier/bezier-curves-to-line-segs.js +2 -2
- package/node/bezier/bezier-curves-to-line-segs.js.map +1 -1
- package/node/bezier/split-into-line-segments.d.ts +1 -1
- package/node/bezier/split-into-line-segments.js +5 -4
- package/node/bezier/split-into-line-segments.js.map +1 -1
- package/node/generate-sdf.d.ts +21 -16
- package/node/generate-sdf.js +28 -23
- package/node/generate-sdf.js.map +1 -1
- package/node/index.d.ts +2 -2
- package/node/index.js +2 -2
- package/node/index.js.map +1 -1
- package/node/main-program.d.ts +1 -1
- package/node/main-program.js +3 -2
- package/node/main-program.js.map +1 -1
- package/node/prepare-buffers.d.ts +1 -1
- package/node/prepare-buffers.js +2 -2
- package/node/prepare-buffers.js.map +1 -1
- package/node/shaders/fragment.d.ts +2 -0
- package/node/shaders/{main.fragment.js → fragment.js} +5 -4
- package/node/shaders/fragment.js.map +1 -0
- package/node/shaders/vertex.d.ts +2 -0
- package/node/shaders/{main.vertex.js → vertex.js} +9 -5
- package/node/shaders/vertex.js.map +1 -0
- package/node/utils/seg-box-x.js +27 -17
- package/node/utils/seg-box-x.js.map +1 -1
- package/node/webgl-utils/{get-gl-context.js → get-web-gl-context.js} +1 -1
- package/node/webgl-utils/get-web-gl-context.js.map +1 -0
- package/package.json +3 -3
- package/src/bezier/bezier-curves-to-line-segs.ts +2 -3
- package/src/bezier/split-into-line-segments.ts +7 -5
- package/src/generate-sdf.ts +31 -27
- package/src/index.ts +2 -2
- package/src/main-program.ts +4 -2
- package/src/prepare-buffers.ts +1 -2
- package/src/shaders/{main.fragment.ts → fragment.ts} +4 -3
- package/src/shaders/{main.vertex.ts → vertex.ts} +8 -4
- package/src/utils/seg-box-x.ts +30 -17
- package/node/shaders/main.fragment.d.ts +0 -2
- package/node/shaders/main.fragment.js.map +0 -1
- package/node/shaders/main.vertex.d.ts +0 -2
- package/node/shaders/main.vertex.js.map +0 -1
- package/node/webgl-utils/get-gl-context.js.map +0 -1
- /package/node/webgl-utils/{get-gl-context.d.ts → get-web-gl-context.d.ts} +0 -0
- /package/src/webgl-utils/{get-gl-context.ts → get-web-gl-context.ts} +0 -0
package/node/prepare-buffers.js
CHANGED
|
@@ -8,10 +8,10 @@ import { ROW_COUNT } from './row-count.js';
|
|
|
8
8
|
import { clipLineSegmentToStrips } from './utils/clip-line-segment-to-strips.js';
|
|
9
9
|
import { mapToViewbox } from './utils/map-to-viewbox.js';
|
|
10
10
|
// import { sum } from './utils/sum.js'; // testing
|
|
11
|
-
function prepareBuffers(psss, width, height, colCount, cellSize, maxDistance, padCount,
|
|
11
|
+
function prepareBuffers(psss, width, height, colCount, cellSize, maxDistance, padCount, viewbox = [0, 0, width, height], stretch = 1) {
|
|
12
12
|
////////////////////////////////////////////////////////////////////////////
|
|
13
13
|
const psss_ = mapToViewbox(viewbox, width, height / stretch, psss);
|
|
14
|
-
const lineSegs = bezierCurvesToLineSegs(psss_
|
|
14
|
+
const lineSegs = bezierCurvesToLineSegs(psss_);
|
|
15
15
|
const grid = createEmptyGrid(colCount, padCount);
|
|
16
16
|
const strips = new Array(ROW_COUNT).fill(undefined).map(v => []);
|
|
17
17
|
for (let i = 0; i < lineSegs.length; i++) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"prepare-buffers.js","sourceRoot":"","sources":["../src/prepare-buffers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,oDAAoD;AAGpD,SAAS,cAAc,CACf,IAAsB,EACtB,KAAa,EACb,MAAc,EACd,QAAgB,EAChB,QAAgB,EAChB,WAAmB,EACnB,QAAgB,EAChB,
|
|
1
|
+
{"version":3,"file":"prepare-buffers.js","sourceRoot":"","sources":["../src/prepare-buffers.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ROW_COUNT } from "../row-count.js";
|
|
2
2
|
const cache = {};
|
|
3
|
-
function
|
|
3
|
+
function getFragment(colCount, padCount) {
|
|
4
4
|
const fragment = cache[1024 * colCount + padCount];
|
|
5
5
|
if (fragment !== undefined) {
|
|
6
6
|
return fragment;
|
|
@@ -132,7 +132,8 @@ void main() {
|
|
|
132
132
|
///////////////////////////////////////////////////////////////////////////
|
|
133
133
|
|
|
134
134
|
// DEBUG!
|
|
135
|
-
float alpha = ((instanceId + instanceId/${ROW_COUNT}) % 2 == 0 ? 0.3 : 0.5);
|
|
135
|
+
// float alpha = ((instanceId + instanceId/${ROW_COUNT}) % 2 == 0 ? 0.3 : 0.5);
|
|
136
|
+
float alpha = res == 1.0 ? 0.0 : 0.5;
|
|
136
137
|
|
|
137
138
|
float red = inside ? 0.2 : 0.8;
|
|
138
139
|
float green = abs(sin(50.0 * res));
|
|
@@ -145,5 +146,5 @@ void main() {
|
|
|
145
146
|
cache[1024 * colCount + padCount] = main_Fragment;
|
|
146
147
|
return main_Fragment;
|
|
147
148
|
}
|
|
148
|
-
export {
|
|
149
|
-
//# sourceMappingURL=
|
|
149
|
+
export { getFragment };
|
|
150
|
+
//# sourceMappingURL=fragment.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fragment.js","sourceRoot":"","sources":["../../src/shaders/fragment.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,MAAM,KAAK,GAAkD,EAAE,CAAC;AAGhE,SAAS,WAAW,CACZ,QAAgB,EAChB,QAAgB;IAEpB,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,GAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC;IACjD,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;QAAC,OAAO,QAAQ,CAAC;IAAC,CAAC;IAEpD,MAAM,aAAa;IACnB,QAAQ,CAAA;;;;;;;;;;;;gCAYwB,CAAC,SAAS,GAAG,CAAC,GAAC,QAAQ,CAAC,GAAC,CAAC,QAAQ,GAAG,CAAC,GAAC,QAAQ,CAAC,GAAG,CAAC;;;iCAGnD,SAAS,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sCAuDR,SAAS;;kEAEmB,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDAsD1B,SAAS;;;;;;;;;;CAUzD,CAAA;IAEG,KAAK,CAAC,IAAI,GAAC,QAAQ,GAAG,QAAQ,CAAC,GAAG,aAAa,CAAC;IAChD,OAAO,aAAa,CAAC;AACzB,CAAC;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
declare const vertex = "#version 300 es\n\nprecision highp float;\n\nuniform vec2 uWidthHeight;\nuniform vec2 uOffset;\nin vec2 aUV;\nin ivec2 aCloseCellIdxRangePerCell;\nin ivec2 aCrossIdxRangePerCell;\nout vec2 vXY;\nflat out int instanceId;\nflat out ivec2 closeCellIdxRange;\nflat out ivec2 crossCellIdxRange;\n\n\nvoid main() {\n instanceId = gl_InstanceID;\n closeCellIdxRange = aCloseCellIdxRangePerCell;\n crossCellIdxRange = aCrossIdxRangePerCell;\n\n // drawn column-by-column\n float i = float(instanceId / 32); // column index\n float j = float(instanceId % 32); // row index\n\n vec2 trans = vec2(\n i / float(32),\n j / float(32)\n );\n\n vec2 uv = aUV + trans;\n\n float width = uWidthHeight.x;\n float height = uWidthHeight.y;\n\n vXY = vec2(\n height * uv.x,\n height * uv.y\n );\n\n float aspectRatio = width / height;\n\n float x = (uOffset.x / 2.0*width) - 1.0;\n float y = (uOffset.y / 2.0*height) - 1.0;\n\n gl_Position = vec4(\n vec2(\n (2.0*(uv.x / aspectRatio) - 1.0),\n (2.0*uv.y - 1.0)\n ) + vec2(x,y),\n 0.0, 1.0\n );\n}\n";
|
|
2
|
+
export { vertex };
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { ROW_COUNT } from "../row-count.js";
|
|
2
|
-
const
|
|
2
|
+
const vertex = /*glsl*/ `#version 300 es
|
|
3
3
|
|
|
4
4
|
precision highp float;
|
|
5
5
|
|
|
6
6
|
uniform vec2 uWidthHeight;
|
|
7
|
+
uniform vec2 uOffset;
|
|
7
8
|
in vec2 aUV;
|
|
8
9
|
in ivec2 aCloseCellIdxRangePerCell;
|
|
9
10
|
in ivec2 aCrossIdxRangePerCell;
|
|
@@ -39,14 +40,17 @@ void main() {
|
|
|
39
40
|
|
|
40
41
|
float aspectRatio = width / height;
|
|
41
42
|
|
|
43
|
+
float x = (uOffset.x / 2.0*width) - 1.0;
|
|
44
|
+
float y = (uOffset.y / 2.0*height) - 1.0;
|
|
45
|
+
|
|
42
46
|
gl_Position = vec4(
|
|
43
47
|
vec2(
|
|
44
48
|
(2.0*(uv.x / aspectRatio) - 1.0),
|
|
45
|
-
2.0*uv.y - 1.0
|
|
46
|
-
),
|
|
49
|
+
(2.0*uv.y - 1.0)
|
|
50
|
+
) + vec2(x,y),
|
|
47
51
|
0.0, 1.0
|
|
48
52
|
);
|
|
49
53
|
}
|
|
50
54
|
`;
|
|
51
|
-
export {
|
|
52
|
-
//# sourceMappingURL=
|
|
55
|
+
export { vertex };
|
|
56
|
+
//# sourceMappingURL=vertex.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"vertex.js","sourceRoot":"","sources":["../../src/shaders/vertex.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,MAAM,MAAM,GAAG,QAAQ,CAAA;;;;;;;;;;;;;;;;;;;;;mCAqBY,SAAS;mCACT,SAAS;;;oBAGxB,SAAS;oBACT,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;CA0B5B,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA"}
|
package/node/utils/seg-box-x.js
CHANGED
|
@@ -15,16 +15,18 @@ function segBoxX(seg, square) {
|
|
|
15
15
|
const dx = x1 - x0;
|
|
16
16
|
const dy = y1 - y0;
|
|
17
17
|
// Parametric line equation: P(t) = P1 + t*(P2-P1), where 0 <= t <= 1
|
|
18
|
-
const ts = [];
|
|
19
|
-
const ps = [];
|
|
18
|
+
// const ts: number[] = [];
|
|
19
|
+
// const ps: number[][] = [];
|
|
20
|
+
const xs = [];
|
|
20
21
|
if (dx !== 0) {
|
|
21
22
|
// Check intersection with left edge (x = minX)
|
|
22
23
|
const tL = (minX - x0) / dx;
|
|
23
24
|
if (tL >= 0 && tL <= 1) {
|
|
24
25
|
const y = y0 + tL * dy;
|
|
25
26
|
if (y >= minY && y <= maxY) {
|
|
26
|
-
ts.push(tL);
|
|
27
|
-
ps.push([minX, y]);
|
|
27
|
+
// ts.push(tL);
|
|
28
|
+
// ps.push([minX, y]);
|
|
29
|
+
xs.push({ t: tL, p: [minX, y] });
|
|
28
30
|
}
|
|
29
31
|
}
|
|
30
32
|
// Check intersection with right edge (x = maxX)
|
|
@@ -32,8 +34,9 @@ function segBoxX(seg, square) {
|
|
|
32
34
|
if (tR >= 0 && tR <= 1) {
|
|
33
35
|
const y = y0 + tR * dy;
|
|
34
36
|
if (y >= minY && y <= maxY) {
|
|
35
|
-
ts.push(tR);
|
|
36
|
-
ps.push([maxX, y]);
|
|
37
|
+
// ts.push(tR);
|
|
38
|
+
// ps.push([maxX, y]);
|
|
39
|
+
xs.push({ t: tR, p: [maxX, y] });
|
|
37
40
|
}
|
|
38
41
|
}
|
|
39
42
|
}
|
|
@@ -43,8 +46,9 @@ function segBoxX(seg, square) {
|
|
|
43
46
|
if (tT >= 0 && tT <= 1) {
|
|
44
47
|
const x = x0 + tT * dx;
|
|
45
48
|
if (x >= minX && x <= maxX) {
|
|
46
|
-
ts.push(tT);
|
|
47
|
-
ps.push([x, minY]);
|
|
49
|
+
// ts.push(tT);
|
|
50
|
+
// ps.push([x, minY]);
|
|
51
|
+
xs.push({ t: tT, p: [x, minY] });
|
|
48
52
|
}
|
|
49
53
|
}
|
|
50
54
|
// Check intersection with top edge (y = maxY)
|
|
@@ -52,18 +56,24 @@ function segBoxX(seg, square) {
|
|
|
52
56
|
if (tB >= 0 && tB <= 1) {
|
|
53
57
|
const x = x0 + tB * dx;
|
|
54
58
|
if (x >= minX && x <= maxX) {
|
|
55
|
-
ts.push(tB);
|
|
56
|
-
ps.push([x, maxY]);
|
|
59
|
+
// ts.push(tB);
|
|
60
|
+
// ps.push([x, maxY]);
|
|
61
|
+
xs.push({ t: tB, p: [x, maxY] });
|
|
57
62
|
}
|
|
58
63
|
}
|
|
59
64
|
}
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
65
|
+
const seen = new Set(); // Store unique t values
|
|
66
|
+
const xs_ = xs.filter(x => {
|
|
67
|
+
const { t } = x;
|
|
68
|
+
if (seen.has(t)) {
|
|
69
|
+
return false;
|
|
70
|
+
}
|
|
71
|
+
else {
|
|
72
|
+
seen.add(t);
|
|
73
|
+
return true;
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
return xs_.sort((a, b) => a.t - b.t).map(x => x.p);
|
|
67
77
|
}
|
|
68
78
|
export { segBoxX };
|
|
69
79
|
//# sourceMappingURL=seg-box-x.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"seg-box-x.js","sourceRoot":"","sources":["../../src/utils/seg-box-x.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AACH,SAAS,OAAO,CACR,GAAe,EACf,MAAkB;IAEtB,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC;IACrB,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC;IACpB,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC;IAEpB,MAAM,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC;IAE5C,gEAAgE;IAChE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACnB,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAEnB,qEAAqE;IAErE,
|
|
1
|
+
{"version":3,"file":"seg-box-x.js","sourceRoot":"","sources":["../../src/utils/seg-box-x.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AACH,SAAS,OAAO,CACR,GAAe,EACf,MAAkB;IAEtB,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC;IACrB,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC;IACpB,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC;IAEpB,MAAM,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC;IAE5C,gEAAgE;IAChE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACnB,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAEnB,qEAAqE;IAErE,2BAA2B;IAC3B,6BAA6B;IAC7B,MAAM,EAAE,GAGF,EAAE,CAAC;IAET,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC;QACX,+CAA+C;QAC/C,MAAM,EAAE,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,GAAC,EAAE,CAAC;QAC1B,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC;YACrB,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE,GAAC,EAAE,CAAC;YACrB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;gBACzB,eAAe;gBACf,sBAAsB;gBACtB,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YACrC,CAAC;QACL,CAAC;QAED,gDAAgD;QAChD,MAAM,EAAE,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,GAAC,EAAE,CAAC;QAC1B,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC;YACrB,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE,GAAC,EAAE,CAAC;YACrB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;gBACzB,eAAe;gBACf,sBAAsB;gBACtB,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YACrC,CAAC;QACL,CAAC;IACL,CAAC;IAED,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC;QACX,iDAAiD;QACjD,MAAM,EAAE,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,GAAC,EAAE,CAAC;QAC1B,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC;YACrB,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE,GAAC,EAAE,CAAC;YACrB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;gBACzB,eAAe;gBACf,sBAAsB;gBACtB,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;YACrC,CAAC;QACL,CAAC;QAED,8CAA8C;QAC9C,MAAM,EAAE,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,GAAC,EAAE,CAAC;QAC1B,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC;YACrB,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE,GAAC,EAAE,CAAC;YACrB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;gBACzB,eAAe;gBACf,sBAAsB;gBACtB,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;YACrC,CAAC;QACL,CAAC;IACL,CAAC;IAGD,MAAM,IAAI,GAAG,IAAI,GAAG,EAAU,CAAC,CAAE,wBAAwB;IACzD,MAAM,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;QACtB,MAAM,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC;QAChB,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;YACd,OAAO,KAAK,CAAC;QACjB,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YACZ,OAAO,IAAI,CAAC;QAChB,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,OAAO,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,EAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACtD,CAAC;AAGD,OAAO,EAAE,OAAO,EAAE,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get-web-gl-context.js","sourceRoot":"","sources":["../../src/webgl-utils/get-web-gl-context.ts"],"names":[],"mappings":"AAKA,MAAM,KAAK,GAAG,IAAI,OAAO,EAAqC,CAAC;AAG/D;;;;;;GAMG;AACH,SAAS,eAAe,CAChB,EAA0B;IAE9B,CAAC;QACG,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAChC,IAAI,SAAS,EAAE,CAAC;YAAC,OAAO,SAAS,CAAC;QAAC,CAAC;IACxC,CAAC;IAED,MAAM,QAAQ,GAAgC,EAAE,CAAC;IACjD,MAAM,QAAQ,GAAgC,EAAE,CAAC;IAEjD,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,CAAC,CAAC,EAAE;QAC/C,aAAa,EAAE,CAAC;QAChB,CAAC,CAAC,cAAc,EAAE,CAAC;IACvB,CAAC,EAAE,KAAK,CAAC,CAAC;IAEV,MAAM,SAAS,GAAc;QACzB,EAAE;QACF,aAAa;QACb,QAAQ;QACR,QAAQ;KACX,CAAC;IAEF,KAAK,CAAC,GAAG,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;IAEzB,OAAO,SAAS,CAAC;IAGjB,wBAAwB;IAExB,SAAS,aAAa;QAClB,cAAc,CAAC,QAAQ,CAAC,CAAC;QACzB,cAAc,CAAC,QAAQ,CAAC,CAAC;IAC7B,CAAC;AACL,CAAC;AAGD,SAAS,cAAc,CAAC,CAA6B;IACjD,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,GAAG,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACtD,CAAC;AAGD,OAAO,EAAE,eAAe,EAAE,CAAA"}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "webgl2-sdf",
|
|
3
3
|
"sideEffects": false,
|
|
4
4
|
"description": "Fast sdf generator from bezier curves or svg string.",
|
|
5
|
-
"version": "0.0.
|
|
5
|
+
"version": "0.0.5",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "Floris Steenkamp"
|
|
8
8
|
},
|
|
@@ -31,14 +31,14 @@
|
|
|
31
31
|
],
|
|
32
32
|
"dependencies": {},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@types/node": "^25.0.
|
|
34
|
+
"@types/node": "^25.0.10",
|
|
35
35
|
"c8": "^10.1.3",
|
|
36
36
|
"rimraf": "^6.1.2",
|
|
37
37
|
"ts-loader": "^9.5.4",
|
|
38
38
|
"ts-node": "^10.9.2",
|
|
39
39
|
"typescript": "^5.9.3",
|
|
40
40
|
"webpack": "^5.104.1",
|
|
41
|
-
"webpack-bundle-analyzer": "^5.
|
|
41
|
+
"webpack-bundle-analyzer": "^5.2.0",
|
|
42
42
|
"webpack-cli": "^6.0.1",
|
|
43
43
|
"source-map-support": "^0.5.21"
|
|
44
44
|
},
|
|
@@ -11,8 +11,7 @@ import { splitIntoLineSegments } from "./split-into-line-segments.js";
|
|
|
11
11
|
* from the line connecting it's endpoints are less than this value
|
|
12
12
|
*/
|
|
13
13
|
function bezierCurvesToLineSegs(
|
|
14
|
-
bezierLoops: (number[][])[][]
|
|
15
|
-
resolution: 0.5|1) {
|
|
14
|
+
bezierLoops: (number[][])[][]) {
|
|
16
15
|
|
|
17
16
|
let lineSegs: number[][][] = [];
|
|
18
17
|
for (let i=0; i<bezierLoops.length; i++) {
|
|
@@ -26,7 +25,7 @@ function bezierCurvesToLineSegs(
|
|
|
26
25
|
continue;
|
|
27
26
|
}
|
|
28
27
|
|
|
29
|
-
const lineSegs_ = splitIntoLineSegments(ps
|
|
28
|
+
const lineSegs_ = splitIntoLineSegments(ps);
|
|
30
29
|
|
|
31
30
|
lineSegs.push(...lineSegs_.filter(ps => !isReallyPoint(ps)));
|
|
32
31
|
}
|
|
@@ -4,6 +4,9 @@ import { splitByDeviationFromStraighLine_Cubic_Crude } from './split-by-deviatio
|
|
|
4
4
|
import { splitByDeviationFromStraighLine_Quad } from './split-by-deviation-from-straight-line-quad.js';
|
|
5
5
|
|
|
6
6
|
|
|
7
|
+
const RESOLUTION = 0.5;
|
|
8
|
+
|
|
9
|
+
|
|
7
10
|
/**
|
|
8
11
|
* Returns the result of splitting the given bezier curve into straight line
|
|
9
12
|
* segments up to `maxDeviation`
|
|
@@ -13,13 +16,12 @@ import { splitByDeviationFromStraighLine_Quad } from './split-by-deviation-from-
|
|
|
13
16
|
* @param maxDeviation maximum deviation from straight line
|
|
14
17
|
*/
|
|
15
18
|
function splitIntoLineSegments(
|
|
16
|
-
ps: number[][]
|
|
17
|
-
maxDeviation: number) {
|
|
19
|
+
ps: number[][]) {
|
|
18
20
|
|
|
19
21
|
const ts = ps.length === 3
|
|
20
|
-
? splitByDeviationFromStraighLine_Quad(ps,
|
|
21
|
-
// : splitByDeviationFromStraighLine_Cubic_Precise(ps,
|
|
22
|
-
: splitByDeviationFromStraighLine_Cubic_Crude(ps,
|
|
22
|
+
? splitByDeviationFromStraighLine_Quad(ps, RESOLUTION)
|
|
23
|
+
// : splitByDeviationFromStraighLine_Cubic_Precise(ps, RESOLUTION)
|
|
24
|
+
: splitByDeviationFromStraighLine_Cubic_Crude(ps, RESOLUTION)
|
|
23
25
|
|
|
24
26
|
const segs: number[][][] = [];
|
|
25
27
|
for (let i=0; i<ts.length - 1; i++) {
|
package/src/generate-sdf.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// import { getWebGLContext } from './webgl-utils/get-gl-context.js';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { vertex } from './shaders/vertex.js';
|
|
3
|
+
import { getFragment } from './shaders/fragment.js';
|
|
4
4
|
import { initProgram } from './webgl-utils/use-program.js';
|
|
5
5
|
import { mainProgram } from './main-program.js';
|
|
6
6
|
import { ROW_COUNT } from './row-count.js';
|
|
@@ -13,24 +13,29 @@ const { ceil, min, max } = Math;
|
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
/**
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
* @param
|
|
20
|
-
* @param
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
* @param
|
|
26
|
-
* @param
|
|
27
|
-
* @param
|
|
28
|
-
* @param
|
|
29
|
-
* @param
|
|
16
|
+
* Generates an sdf (signed distance field) from the given bezier curves,
|
|
17
|
+
* viewbox, etc. and renders the result
|
|
18
|
+
*
|
|
19
|
+
* @param glContext a `GlConext` previously created by `getWebGlContext(gl: WebGL2RenderingContext)`
|
|
20
|
+
* @param bezierCurves_or_svgStr either of
|
|
21
|
+
* * an array of linear (lines), quadratic or cubic bezier curves (or a mix
|
|
22
|
+
* thereof) given by given by their ordered control points,
|
|
23
|
+
* e.g. `[ [[0,0],[1,1],[2,1],[2,0]], [[2,0],[7,2],[1,5],[8,6]], ... ]` **OR**
|
|
24
|
+
* * an SVG string, e.g. "M26.53 478.83 C028.89 481.61 031.33 484.32 ..."
|
|
25
|
+
* @param width the width of the drawing rectangle
|
|
26
|
+
* @param height the height of the drawing rectangle
|
|
27
|
+
* @param viewbox the viewbox
|
|
28
|
+
* @param maxDistance maximum sdf distance
|
|
29
|
+
* @param sdfExponent TODO
|
|
30
|
+
* @param inclInside if `true` the sdf will be calculate for the inside of the shape
|
|
31
|
+
* @param inclOutside if `true` the sdf will be calculate for the outside of the shape
|
|
32
|
+
* @param x the position where to draw, x-coordinate
|
|
33
|
+
* @param y the position where to draw, y-coordinate
|
|
34
|
+
* @param channel TODO
|
|
30
35
|
*/
|
|
31
|
-
function
|
|
36
|
+
function generateSdf(
|
|
32
37
|
glContext: GlContext,
|
|
33
|
-
|
|
38
|
+
bezierCurves_or_svgStr: (number[][])[][] | string,
|
|
34
39
|
width: number,
|
|
35
40
|
height: number,
|
|
36
41
|
viewbox: [number,number,number,number],
|
|
@@ -39,14 +44,13 @@ function generateIntoFramebuffer(
|
|
|
39
44
|
inclInside = true,
|
|
40
45
|
inclOutside = true,
|
|
41
46
|
x = 0, y = 0,
|
|
42
|
-
channel = 0
|
|
43
|
-
resolution: 0.5|1 = 0.5) {
|
|
47
|
+
channel = 0) {
|
|
44
48
|
|
|
45
49
|
// debugShaders(gl); // comment for production
|
|
46
50
|
|
|
47
|
-
const
|
|
48
|
-
? getPathsFromStr(
|
|
49
|
-
:
|
|
51
|
+
const psss = typeof bezierCurves_or_svgStr === 'string'
|
|
52
|
+
? getPathsFromStr(bezierCurves_or_svgStr)
|
|
53
|
+
: bezierCurves_or_svgStr;
|
|
50
54
|
|
|
51
55
|
// const glContext = getWebGLContext(gl);
|
|
52
56
|
|
|
@@ -69,15 +73,15 @@ function generateIntoFramebuffer(
|
|
|
69
73
|
|
|
70
74
|
const programMain = initProgram(
|
|
71
75
|
glContext, `main${colCount}-${padCount}`,
|
|
72
|
-
|
|
76
|
+
vertex, getFragment(colCount, padCount)
|
|
73
77
|
);
|
|
74
78
|
|
|
75
79
|
const { gl } = glContext;
|
|
76
80
|
|
|
77
81
|
gl.useProgram(programMain.program);
|
|
78
82
|
mainProgram(
|
|
79
|
-
glContext, programMain,
|
|
80
|
-
viewbox, maxDistance, sdfExponent, width, height, colCount,
|
|
83
|
+
glContext, programMain, psss,
|
|
84
|
+
viewbox, maxDistance, sdfExponent, x, y, width, height, colCount,
|
|
81
85
|
cellSize, inclInside, inclOutside, padCount, stretch
|
|
82
86
|
);
|
|
83
87
|
|
|
@@ -90,4 +94,4 @@ function generateIntoFramebuffer(
|
|
|
90
94
|
}
|
|
91
95
|
|
|
92
96
|
|
|
93
|
-
export {
|
|
97
|
+
export { generateSdf }
|
package/src/index.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
|
|
2
|
-
export {
|
|
2
|
+
export { generateSdf } from './generate-sdf.js';
|
|
3
3
|
export { freeGlContext } from './webgl-utils/free-gl-context.js';
|
|
4
|
-
export { getWebGlContext } from './webgl-utils/get-gl-context.js';
|
|
4
|
+
export { getWebGlContext } from './webgl-utils/get-web-gl-context.js';
|
package/src/main-program.ts
CHANGED
|
@@ -17,11 +17,12 @@ const CROSS_TEX_INDEX = 2;
|
|
|
17
17
|
function mainProgram(
|
|
18
18
|
glContext: GlContext,
|
|
19
19
|
programMain: Program,
|
|
20
|
-
resolution: 0.5|1,
|
|
21
20
|
psss: number[][][][],
|
|
22
21
|
viewbox: [number,number,number,number],
|
|
23
22
|
maxDistance: number,
|
|
24
23
|
sdfExponent = 1,
|
|
24
|
+
x: number,
|
|
25
|
+
y: number,
|
|
25
26
|
width: number,
|
|
26
27
|
height: number,
|
|
27
28
|
colCount: number,
|
|
@@ -53,7 +54,7 @@ function mainProgram(
|
|
|
53
54
|
segIdxs_PerStrip_Range_Arr
|
|
54
55
|
} = prepareBuffers(
|
|
55
56
|
psss, width, height, colCount, cellSize, maxDistance,
|
|
56
|
-
padCount,
|
|
57
|
+
padCount, viewbox, stretch
|
|
57
58
|
);
|
|
58
59
|
|
|
59
60
|
// Init/update attributes
|
|
@@ -77,6 +78,7 @@ function mainProgram(
|
|
|
77
78
|
);
|
|
78
79
|
|
|
79
80
|
// Init/update uniforms
|
|
81
|
+
setUniform_('2f', 'uOffset', x, y);
|
|
80
82
|
setUniform_('2f', 'uWidthHeight', width, height);
|
|
81
83
|
setUniform_('1f', 'uMaxDistance', maxDistance);
|
|
82
84
|
setUniform_('1f', 'uExponent', sdfExponent); // TODO
|
package/src/prepare-buffers.ts
CHANGED
|
@@ -18,14 +18,13 @@ function prepareBuffers(
|
|
|
18
18
|
cellSize: number,
|
|
19
19
|
maxDistance: number,
|
|
20
20
|
padCount: number,
|
|
21
|
-
resolution: 0.5|1 = 0.5,
|
|
22
21
|
viewbox: [number,number,number,number] = [0,0,width,height],
|
|
23
22
|
stretch = 1) {
|
|
24
23
|
|
|
25
24
|
////////////////////////////////////////////////////////////////////////////
|
|
26
25
|
const psss_ = mapToViewbox(viewbox, width, height/stretch, psss);
|
|
27
26
|
|
|
28
|
-
const lineSegs = bezierCurvesToLineSegs(psss_
|
|
27
|
+
const lineSegs = bezierCurvesToLineSegs(psss_);
|
|
29
28
|
const grid = createEmptyGrid(colCount, padCount);
|
|
30
29
|
const strips = new Array(ROW_COUNT).fill(undefined).map(v => []);
|
|
31
30
|
|
|
@@ -4,7 +4,7 @@ import { ROW_COUNT } from "../row-count.js";
|
|
|
4
4
|
const cache: { [padCount_times_colCount: number]: string } = {};
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
function
|
|
7
|
+
function getFragment(
|
|
8
8
|
colCount: number,
|
|
9
9
|
padCount: number): string {
|
|
10
10
|
|
|
@@ -138,7 +138,8 @@ void main() {
|
|
|
138
138
|
///////////////////////////////////////////////////////////////////////////
|
|
139
139
|
|
|
140
140
|
// DEBUG!
|
|
141
|
-
float alpha = ((instanceId + instanceId/${ROW_COUNT}) % 2 == 0 ? 0.3 : 0.5);
|
|
141
|
+
// float alpha = ((instanceId + instanceId/${ROW_COUNT}) % 2 == 0 ? 0.3 : 0.5);
|
|
142
|
+
float alpha = res == 1.0 ? 0.0 : 0.5;
|
|
142
143
|
|
|
143
144
|
float red = inside ? 0.2 : 0.8;
|
|
144
145
|
float green = abs(sin(50.0 * res));
|
|
@@ -154,4 +155,4 @@ void main() {
|
|
|
154
155
|
}
|
|
155
156
|
|
|
156
157
|
|
|
157
|
-
export {
|
|
158
|
+
export { getFragment }
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { ROW_COUNT } from "../row-count.js";
|
|
2
2
|
|
|
3
|
-
const
|
|
3
|
+
const vertex = /*glsl*/`#version 300 es
|
|
4
4
|
|
|
5
5
|
precision highp float;
|
|
6
6
|
|
|
7
7
|
uniform vec2 uWidthHeight;
|
|
8
|
+
uniform vec2 uOffset;
|
|
8
9
|
in vec2 aUV;
|
|
9
10
|
in ivec2 aCloseCellIdxRangePerCell;
|
|
10
11
|
in ivec2 aCrossIdxRangePerCell;
|
|
@@ -40,15 +41,18 @@ void main() {
|
|
|
40
41
|
|
|
41
42
|
float aspectRatio = width / height;
|
|
42
43
|
|
|
44
|
+
float x = (uOffset.x / 2.0*width) - 1.0;
|
|
45
|
+
float y = (uOffset.y / 2.0*height) - 1.0;
|
|
46
|
+
|
|
43
47
|
gl_Position = vec4(
|
|
44
48
|
vec2(
|
|
45
49
|
(2.0*(uv.x / aspectRatio) - 1.0),
|
|
46
|
-
2.0*uv.y - 1.0
|
|
47
|
-
),
|
|
50
|
+
(2.0*uv.y - 1.0)
|
|
51
|
+
) + vec2(x,y),
|
|
48
52
|
0.0, 1.0
|
|
49
53
|
);
|
|
50
54
|
}
|
|
51
55
|
`;
|
|
52
56
|
|
|
53
57
|
|
|
54
|
-
export {
|
|
58
|
+
export { vertex }
|
package/src/utils/seg-box-x.ts
CHANGED
|
@@ -23,8 +23,12 @@ function segBoxX(
|
|
|
23
23
|
|
|
24
24
|
// Parametric line equation: P(t) = P1 + t*(P2-P1), where 0 <= t <= 1
|
|
25
25
|
|
|
26
|
-
const ts: number[] = [];
|
|
27
|
-
const ps: number[][] = [];
|
|
26
|
+
// const ts: number[] = [];
|
|
27
|
+
// const ps: number[][] = [];
|
|
28
|
+
const xs: {
|
|
29
|
+
t: number,
|
|
30
|
+
p: number[]
|
|
31
|
+
}[] = [];
|
|
28
32
|
|
|
29
33
|
if (dx !== 0) {
|
|
30
34
|
// Check intersection with left edge (x = minX)
|
|
@@ -32,8 +36,9 @@ function segBoxX(
|
|
|
32
36
|
if (tL >= 0 && tL <= 1) {
|
|
33
37
|
const y = y0 + tL*dy;
|
|
34
38
|
if (y >= minY && y <= maxY) {
|
|
35
|
-
ts.push(tL);
|
|
36
|
-
ps.push([minX, y]);
|
|
39
|
+
// ts.push(tL);
|
|
40
|
+
// ps.push([minX, y]);
|
|
41
|
+
xs.push({ t: tL, p: [minX, y] });
|
|
37
42
|
}
|
|
38
43
|
}
|
|
39
44
|
|
|
@@ -42,8 +47,9 @@ function segBoxX(
|
|
|
42
47
|
if (tR >= 0 && tR <= 1) {
|
|
43
48
|
const y = y0 + tR*dy;
|
|
44
49
|
if (y >= minY && y <= maxY) {
|
|
45
|
-
ts.push(tR);
|
|
46
|
-
ps.push([maxX, y]);
|
|
50
|
+
// ts.push(tR);
|
|
51
|
+
// ps.push([maxX, y]);
|
|
52
|
+
xs.push({ t: tR, p: [maxX, y] });
|
|
47
53
|
}
|
|
48
54
|
}
|
|
49
55
|
}
|
|
@@ -54,8 +60,9 @@ function segBoxX(
|
|
|
54
60
|
if (tT >= 0 && tT <= 1) {
|
|
55
61
|
const x = x0 + tT*dx;
|
|
56
62
|
if (x >= minX && x <= maxX) {
|
|
57
|
-
ts.push(tT);
|
|
58
|
-
ps.push([x, minY]);
|
|
63
|
+
// ts.push(tT);
|
|
64
|
+
// ps.push([x, minY]);
|
|
65
|
+
xs.push({ t: tT, p: [x, minY] });
|
|
59
66
|
}
|
|
60
67
|
}
|
|
61
68
|
|
|
@@ -64,20 +71,26 @@ function segBoxX(
|
|
|
64
71
|
if (tB >= 0 && tB <= 1) {
|
|
65
72
|
const x = x0 + tB*dx;
|
|
66
73
|
if (x >= minX && x <= maxX) {
|
|
67
|
-
ts.push(tB);
|
|
68
|
-
ps.push([x, maxY]);
|
|
74
|
+
// ts.push(tB);
|
|
75
|
+
// ps.push([x, maxY]);
|
|
76
|
+
xs.push({ t: tB, p: [x, maxY] });
|
|
69
77
|
}
|
|
70
78
|
}
|
|
71
79
|
}
|
|
72
80
|
|
|
73
|
-
// TODO might be more than 2!!
|
|
74
|
-
if (ts.length === 2) {
|
|
75
|
-
return ts[0] < ts[1]
|
|
76
|
-
? ps
|
|
77
|
-
: [ps[1],ps[0]];
|
|
78
|
-
}
|
|
79
81
|
|
|
80
|
-
|
|
82
|
+
const seen = new Set<number>(); // Store unique t values
|
|
83
|
+
const xs_ = xs.filter(x => {
|
|
84
|
+
const { t } = x;
|
|
85
|
+
if (seen.has(t)) {
|
|
86
|
+
return false;
|
|
87
|
+
} else {
|
|
88
|
+
seen.add(t);
|
|
89
|
+
return true;
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
|
|
93
|
+
return xs_.sort((a,b) => a.t - b.t).map(x => x.p);
|
|
81
94
|
}
|
|
82
95
|
|
|
83
96
|
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"main.fragment.js","sourceRoot":"","sources":["../../src/shaders/main.fragment.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,MAAM,KAAK,GAAkD,EAAE,CAAC;AAGhE,SAAS,eAAe,CAChB,QAAgB,EAChB,QAAgB;IAEpB,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,GAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC;IACjD,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;QAAC,OAAO,QAAQ,CAAC;IAAC,CAAC;IAEpD,MAAM,aAAa;IACnB,QAAQ,CAAA;;;;;;;;;;;;gCAYwB,CAAC,SAAS,GAAG,CAAC,GAAC,QAAQ,CAAC,GAAC,CAAC,QAAQ,GAAG,CAAC,GAAC,QAAQ,CAAC,GAAG,CAAC;;;iCAGnD,SAAS,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sCAuDR,SAAS;;kEAEmB,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8CAsD7B,SAAS;;;;;;;;;CAStD,CAAA;IAEG,KAAK,CAAC,IAAI,GAAC,QAAQ,GAAG,QAAQ,CAAC,GAAG,aAAa,CAAC;IAChD,OAAO,aAAa,CAAC;AACzB,CAAC;AAGD,OAAO,EAAE,eAAe,EAAE,CAAA"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
declare const main_Vertex = "#version 300 es\n\nprecision highp float;\n\nuniform vec2 uWidthHeight;\nin vec2 aUV;\nin ivec2 aCloseCellIdxRangePerCell;\nin ivec2 aCrossIdxRangePerCell;\nout vec2 vXY;\nflat out int instanceId;\nflat out ivec2 closeCellIdxRange;\nflat out ivec2 crossCellIdxRange;\n\n\nvoid main() {\n instanceId = gl_InstanceID;\n closeCellIdxRange = aCloseCellIdxRangePerCell;\n crossCellIdxRange = aCrossIdxRangePerCell;\n\n // drawn column-by-column\n float i = float(instanceId / 32); // column index\n float j = float(instanceId % 32); // row index\n\n vec2 trans = vec2(\n i / float(32),\n j / float(32)\n );\n\n vec2 uv = aUV + trans;\n\n float width = uWidthHeight.x;\n float height = uWidthHeight.y;\n\n vXY = vec2(\n height * uv.x,\n height * uv.y\n );\n\n float aspectRatio = width / height;\n\n gl_Position = vec4(\n vec2(\n (2.0*(uv.x / aspectRatio) - 1.0),\n 2.0*uv.y - 1.0\n ),\n 0.0, 1.0\n );\n}\n";
|
|
2
|
-
export { main_Vertex };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"main.vertex.js","sourceRoot":"","sources":["../../src/shaders/main.vertex.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,MAAM,WAAW,GAAG,QAAQ,CAAA;;;;;;;;;;;;;;;;;;;;mCAoBO,SAAS;mCACT,SAAS;;;oBAGxB,SAAS;oBACT,SAAS;;;;;;;;;;;;;;;;;;;;;;;CAuB5B,CAAC;AAGF,OAAO,EAAE,WAAW,EAAE,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"get-gl-context.js","sourceRoot":"","sources":["../../src/webgl-utils/get-gl-context.ts"],"names":[],"mappings":"AAKA,MAAM,KAAK,GAAG,IAAI,OAAO,EAAqC,CAAC;AAG/D;;;;;;GAMG;AACH,SAAS,eAAe,CAChB,EAA0B;IAE9B,CAAC;QACG,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAChC,IAAI,SAAS,EAAE,CAAC;YAAC,OAAO,SAAS,CAAC;QAAC,CAAC;IACxC,CAAC;IAED,MAAM,QAAQ,GAAgC,EAAE,CAAC;IACjD,MAAM,QAAQ,GAAgC,EAAE,CAAC;IAEjD,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,CAAC,CAAC,EAAE;QAC/C,aAAa,EAAE,CAAC;QAChB,CAAC,CAAC,cAAc,EAAE,CAAC;IACvB,CAAC,EAAE,KAAK,CAAC,CAAC;IAEV,MAAM,SAAS,GAAc;QACzB,EAAE;QACF,aAAa;QACb,QAAQ;QACR,QAAQ;KACX,CAAC;IAEF,KAAK,CAAC,GAAG,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;IAEzB,OAAO,SAAS,CAAC;IAGjB,wBAAwB;IAExB,SAAS,aAAa;QAClB,cAAc,CAAC,QAAQ,CAAC,CAAC;QACzB,cAAc,CAAC,QAAQ,CAAC,CAAC;IAC7B,CAAC;AACL,CAAC;AAGD,SAAS,cAAc,CAAC,CAA6B;IACjD,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,GAAG,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACtD,CAAC;AAGD,OAAO,EAAE,eAAe,EAAE,CAAA"}
|
|
File without changes
|
|
File without changes
|