webgl2-sdf 0.0.5 → 0.0.7

package/node/shaders/fragment.js

@@ -11,7 +11,6 @@ function getFragment(colCount, padCount) {
 precision highp float;
 
 uniform float uMaxDistance;
-uniform float uExponent;
 uniform highp sampler2D uSegs;
 uniform highp isampler2D uCloseCellIdxs;
 uniform highp isampler2D uCrossCellIdxs;
@@ -35,7 +34,7 @@ float absDistToSegment(vec2 point, vec2 lineA, vec2 lineB) {
     vec2 lineDir = lineB - lineA;
     float lenSq = dot(lineDir, lineDir);
     float t = clamp(dot(point - lineA, lineDir) / lenSq, 0.0, 1.0);
-    vec2 linePt = lineA + t * lineDir;
+    vec2 linePt = lineA + t*lineDir;
 
     return distance(point, linePt);
 }
@@ -54,15 +53,16 @@ void main() {
     for (int i = crossIdxS; i < crossIdxS + crossLen; i++) {
         int crossIdx = texelFetch(uCrossCellIdxs, ivec2(i%256, i/256), 0).x;
 
-        bool isEven = crossIdx % 2 == 0;
+        ivec2 uSegIdxRange = crossIdx % 2 == 0
+            ? uSegIdxRangePerCell[crossIdx / 2].xy
+            : uSegIdxRangePerCell[crossIdx / 2].zw;
 
-        ivec4 uSegIdxRange = uSegIdxRangePerCell[crossIdx / 2];
-        int segIdx = isEven ? uSegIdxRange.x : uSegIdxRange.z;
-        int segLen = isEven ? uSegIdxRange.y : uSegIdxRange.w;
+        int segIdx = uSegIdxRange.x;
+        int segLen = uSegIdxRange.y;
 
         for (int j = segIdx; j < segIdx + segLen; j++) {
             // Fetch segment from texture
-            vec4 seg = texelFetch(uSegs, ivec2(j, 0), 0);
+            vec4 seg = texelFetch(uSegs, ivec2(j%256, j/256), 0);
 
             // line segment's min-y is excluded
             bool crossing =
@@ -76,15 +76,18 @@ void main() {
     }
 
     {
-        bool isEven = (instanceId % ${ROW_COUNT}) % 2 == 0;
+        int cellIdx = (instanceId % ${ROW_COUNT});
+
+        bool isEven = cellIdx % 2 == 0;
 
-        ivec4 uSegIdxRange = uSegIdxRangePerStrip[(instanceId % ${ROW_COUNT}) / 2];
+        ivec4 uSegIdxRange = uSegIdxRangePerStrip[cellIdx / 2];
         int segIdx = isEven ? uSegIdxRange.x : uSegIdxRange.z;
         int segLen = isEven ? uSegIdxRange.y : uSegIdxRange.w;
+        
 
         for (int j = segIdx; j < segIdx + segLen; j++) {
             // Fetch segment from texture
-            vec4 seg = texelFetch(uSegs, ivec2(j, 0), 0);
+            vec4 seg = texelFetch(uSegs, ivec2(j%256, j/256), 0);
 
             // line segment's min-y is excluded
             bool crossing =
@@ -111,20 +114,22 @@ void main() {
         for (int i = cellIdxS; i < cellIdxS + cellLen; i++) {
             int cellIdx = texelFetch(uCloseCellIdxs, ivec2(i%256, i/256), 0).x;
 
-            bool isEven = cellIdx % 2 == 0;
-            ivec4 uSegIdxRange = uSegIdxRangePerCell[cellIdx / 2];
-            int segIdx = isEven ? uSegIdxRange.x : uSegIdxRange.z;
-            int segLen = isEven ? uSegIdxRange.y : uSegIdxRange.w;
+            ivec2 uSegIdxRange = cellIdx % 2 == 0
+                ? uSegIdxRangePerCell[cellIdx / 2].xy
+                : uSegIdxRangePerCell[cellIdx / 2].zw;
+
+            int segIdx = uSegIdxRange.x;
+            int segLen = uSegIdxRange.y;
 
             for (int j = segIdx; j < segIdx + segLen; j++) {
                 // Fetch segment from texture
-                vec4 seg = texelFetch(uSegs, ivec2(j, 0), 0);
+                vec4 seg = texelFetch(uSegs, ivec2(j%256, j/256), 0);
 
                 // Find unsigned distance to the segment; only the nearest will be kept
                 float d = absDistToSegment(vXY, seg.xy, seg.zw);
-                // Apply exponential transform TODO
-                // val = pow(1.0 - clamp(d / uMaxDistance, 0.0, 1.0), uExponent) * 0.5;
+                // Apply exponential transform
                 float val = clamp(d / uMaxDistance, 0.0, 1.0);
+
                 res = min(res, val);
             }
         }
@@ -133,12 +138,15 @@ void main() {
 
     // DEBUG!
     // float alpha = ((instanceId + instanceId/${ROW_COUNT}) % 2 == 0 ? 0.3 : 0.5);
-    float alpha = res == 1.0 ? 0.0 : 0.5;
 
+
+    float exponent = 2;
+    res = pow(1.0 - val, exponent) * 0.5;
+
+    float alpha = res == 1.0 ? 0.0 : 0.5;
     float red = inside ? 0.2 : 0.8;
-    float green = abs(sin(50.0 * res));
+    float green = abs(sin(25.0 * res));
     float blue = 0.5;
-    // float alpha = inside ? 0.5 : 0.0;
 
     FragColor = vec4(red, green, blue, alpha);
 }

package/node/shaders/fragment.js.map

@@ -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"}
+{"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;;;;;;;;;;;gCAWwB,CAAC,SAAS,GAAG,CAAC,GAAC,QAAQ,CAAC,GAAC,CAAC,QAAQ,GAAG,CAAC,GAAC,QAAQ,CAAC,GAAG,CAAC;;;iCAGnD,SAAS,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sCAwDR,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA6DE,SAAS;;;;;;;;;;;;;CAazD,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"}

package/node/shaders/vertex.d.ts

@@ -1,2 +1,2 @@
-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";
+declare const 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";
 export { vertex };

package/node/shaders/vertex.js

@@ -4,7 +4,6 @@ const vertex = /*glsl*/ `#version 300 es
 precision highp float;
 
 uniform vec2 uWidthHeight;
-uniform vec2 uOffset;
 in vec2 aUV;
 in ivec2 aCloseCellIdxRangePerCell;
 in ivec2 aCrossIdxRangePerCell;
@@ -40,14 +39,11 @@ void main() {
 
     float aspectRatio = width / height;
 
-    float x = (uOffset.x / 2.0*width) - 1.0;
-    float y = (uOffset.y / 2.0*height) - 1.0;
-
     gl_Position = vec4(
         vec2(
             (2.0*(uv.x / aspectRatio) - 1.0),
             (2.0*uv.y - 1.0)
-        ) + vec2(x,y),
+        ),
         0.0, 1.0
     );
 }

package/node/shaders/vertex.js.map

@@ -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"}
+{"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;;;;;;;;;;;;;;;;;;;;mCAoBY,SAAS;mCACT,SAAS;;;oBAGxB,SAAS;oBACT,SAAS;;;;;;;;;;;;;;;;;;;;;;;CAuB5B,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/node/svg/get-paths-from-str.d.ts

@@ -3,6 +3,7 @@
  * and each bezier in turn consisting of an array of control points from the
  * given SVG path string. An array of loops are returned (as opposed to a single
  * loop) since an SVG path may have sub-paths.
+ *
  * @param str The SVG path string, e.g. 'M1 1 C 5 1 5 2 4 2 C 3 3 1 3 1 1 z'
  */
 declare function getPathsFromStr(str: string): number[][][][];

package/node/svg/get-paths-from-str.js

@@ -5,6 +5,7 @@ import { parsePathDataString } from './path-data-polyfill/parse-path-data-string
  * and each bezier in turn consisting of an array of control points from the
  * given SVG path string. An array of loops are returned (as opposed to a single
  * loop) since an SVG path may have sub-paths.
+ *
  * @param str The SVG path string, e.g. 'M1 1 C 5 1 5 2 4 2 C 3 3 1 3 1 1 z'
  */
 function getPathsFromStr(str) {

package/node/svg/get-paths-from-str.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-paths-from-str.js","sourceRoot":"","sources":["../../src/svg/get-paths-from-str.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,gDAAgD,CAAC;AAGrF;;;;;;GAMG;AACH,SAAS,eAAe,CAAC,GAAW;IAChC,OAAO,sBAAsB,CACzB,mBAAmB,CAAC,GAAG,CAAC,CAC3B,CAAC;AACN,CAAC;AAGD,OAAO,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"get-paths-from-str.js","sourceRoot":"","sources":["../../src/svg/get-paths-from-str.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,gDAAgD,CAAC;AAGrF;;;;;;;GAOG;AACH,SAAS,eAAe,CAAC,GAAW;IAChC,OAAO,sBAAsB,CACzB,mBAAmB,CAAC,GAAG,CAAC,CAC3B,CAAC;AACN,CAAC;AAGD,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/node/svg/path-data-polyfill/source.d.ts

@@ -1,4 +1,3 @@
-/** @hidden */
 declare class Source {
     _string: string;
     _currentIndex: number;

package/node/svg/path-data-polyfill/source.js

@@ -1,10 +1,8 @@
 import { parseNumber } from './parse-number.js';
-/** @hidden */
 const COMMAND_MAP = {
     Z: "Z", M: "M", L: "L", C: "C", Q: "Q", A: "A", H: "H", V: "V", S: "S", T: "T",
     z: "Z", m: "m", l: "l", c: "c", q: "q", a: "a", h: "h", v: "v", s: "s", t: "t"
 };
-/** @hidden */
 class Source {
     _string;
     _currentIndex;

package/node/svg/path-data-polyfill/source.js.map

@@ -1 +1 @@
-{"version":3,"file":"source.js","sourceRoot":"","sources":["../../../src/svg/path-data-polyfill/source.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"source.js","sourceRoot":"","sources":["../../../src/svg/path-data-polyfill/source.ts"],"names":[],"mappings":"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"}

package/node/svg/path-state.d.ts

@@ -1,4 +1,3 @@
-/** @hidden */
 interface PathState {
     initialPoint?: number[] | undefined;
     p: number[];

package/node/types/gl-context.d.ts

@@ -22,6 +22,6 @@ interface GlContext {
     readonly programs: {
         [index: string]: Program;
     };
-    readonly onContextLoss: () => void;
+    onContextLoss?: (event: Event) => void;
 }
 export type { GlContext };

package/node/webgl-utils/get-web-gl-context.js

@@ -15,23 +15,16 @@ function getWebGlContext(gl) {
     }
     const programs = {};
     const textures = {};
-    gl.canvas.addEventListener('webglcontextlost', e => {
-        onContextLoss();
-        e.preventDefault();
+    const glContext = { gl, textures, programs };
+    gl.canvas.addEventListener('webglcontextlost', event => {
+        // event.preventDefault();  // Prevent the default action (which is to not restore automatically)
+        deleteAllProps(programs);
+        deleteAllProps(textures);
+        cache.delete(gl);
+        glContext.onContextLoss?.(event);
     }, false);
-    const glContext = {
-        gl,
-        onContextLoss,
-        textures,
-        programs
-    };
     cache.set(gl, glContext);
     return glContext;
-    ////////////////////////
-    function onContextLoss() {
-        deleteAllProps(programs);
-        deleteAllProps(textures);
-    }
 }
 function deleteAllProps(o) {
     Object.keys(o).forEach(key => { delete o[key]; });

package/node/webgl-utils/get-web-gl-context.js.map

@@ -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"}
+{"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,MAAM,SAAS,GAAc,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;IAExD,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,KAAK,CAAC,EAAE;QACnD,iGAAiG;QAEjG,cAAc,CAAC,QAAQ,CAAC,CAAC;QACzB,cAAc,CAAC,QAAQ,CAAC,CAAC;QACzB,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QAEjB,SAAS,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,EAAE,KAAK,CAAC,CAAC;IAEV,KAAK,CAAC,GAAG,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;IAEzB,OAAO,SAAS,CAAC;AACrB,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

@@ -2,7 +2,7 @@
     "name": "webgl2-sdf",
     "sideEffects": false,
     "description": "Fast sdf generator from bezier curves or svg string.",
-    "version": "0.0.5",
+    "version": "0.0.7",
     "author": {
         "name": "Floris Steenkamp"
     },

package/src/debug-shaders.ts

@@ -1,5 +1,5 @@
-import { getMainFragment } from "./shaders/main.fragment.js";
-import { main_Vertex } from "./shaders/main.vertex.js";
+import { getFragment } from "./shaders/fragment.js";
+import { vertex } from "./shaders/vertex.js";
 
 
 /**
@@ -26,8 +26,8 @@ function debugShaders(
         gl: WebGL2RenderingContext) {
 
     try {
-        debugGlsl(gl, gl.VERTEX_SHADER, main_Vertex);
-        debugGlsl(gl, gl.FRAGMENT_SHADER, getMainFragment(32,4));
+        debugGlsl(gl, gl.VERTEX_SHADER, vertex);
+        debugGlsl(gl, gl.FRAGMENT_SHADER, getFragment(32,4));
     } catch (e) {
         console.log(e);
         throw e;

package/src/generate-sdf.ts

@@ -7,7 +7,7 @@ import { ROW_COUNT } from './row-count.js';
 import { getPathsFromStr } from './svg/get-paths-from-str.js';
 import { MAX_ASPECT_RATIO_BEFORE_STRETCH } from './max-aspect-ratio-before-stretch.js';
 import { GlContext } from './types/gl-context.js';
-// import { debugShaders } from './debug-shaders.js';
+import { debugShaders } from './debug-shaders.js';
 
 const { ceil, min, max } = Math;
 
@@ -36,26 +36,24 @@ const { ceil, min, max } = Math;
 function generateSdf(
         glContext: GlContext,
         bezierCurves_or_svgStr: (number[][])[][] | string,
+        viewbox: [number,number,number,number],
         width: number,
         height: number,
-        viewbox: [number,number,number,number],
+        x = 0, y = 0,
         maxDistance: number,
-        sdfExponent = 1,
         inclInside = true,
         inclOutside = true,
-        x = 0, y = 0,
+        customData: [number,number,number,number],
+        
+        // TODO
         channel = 0) {
 
-    // debugShaders(gl);  // comment for production
-
     const psss = typeof bezierCurves_or_svgStr === 'string'
         ? getPathsFromStr(bezierCurves_or_svgStr)
         : bezierCurves_or_svgStr;
 
     // const glContext = getWebGLContext(gl);
 
-    const { onContextLoss } = glContext;
-
     let stretch = 1;
     const aspectRatio = width/height;
     if (aspectRatio > MAX_ASPECT_RATIO_BEFORE_STRETCH) {
@@ -78,19 +76,15 @@ function generateSdf(
 
     const { gl } = glContext;
 
+    // debugShaders(gl);  // comment for production
+
     gl.useProgram(programMain.program);
     mainProgram(
-        glContext, programMain, psss,
-        viewbox, maxDistance, sdfExponent, x, y, width, height, colCount,
-        cellSize, inclInside, inclOutside, padCount, stretch
+        glContext, programMain,
+        psss, viewbox, maxDistance, inclInside, inclOutside, customData,
+        x, y, width, height,
+        colCount, cellSize, padCount, stretch
     );
-
-    // Handle context loss occurring during any of the above calls
-    if (gl.isContextLost()) {
-        onContextLoss();
-
-        throw new Error('Webgl2 context lost.');
-    }
 }
 
 

package/src/main-program.ts

@@ -17,18 +17,20 @@ const CROSS_TEX_INDEX = 2;
 function mainProgram(
         glContext: GlContext,
         programMain: Program,
+
         psss: number[][][][],
         viewbox: [number,number,number,number],
         maxDistance: number,
-        sdfExponent = 1,
+        inclInside: boolean,
+        inclOutside: boolean,
+        customData: [number, number, number, number],
+
         x: number,
         y: number,
         width: number,
         height: number,
         colCount: number,
         cellSize: number,
-        inclInside: boolean,
-        inclOutside: boolean,
         padCount: number,
         stretch: number) {
 
@@ -78,11 +80,10 @@ function mainProgram(
     );
 
     // Init/update uniforms
-    setUniform_('2f', 'uOffset', x, y);
     setUniform_('2f', 'uWidthHeight', width, height);
     setUniform_('1f', 'uMaxDistance', maxDistance);
-    setUniform_('1f', 'uExponent', sdfExponent);  // TODO
     setUniform_('1i', 'uIncl', (inclInside ? 1 : 0) + (inclOutside ? 2 : 0));
+    setUniform_('4f', 'uCustom', ...customData);
 
     setUniformBlock(programMain)('SegIdxRangePerCellBlock', 0, segIdxs_PerCell_Range_Arr);
     setUniformBlock(programMain)('SegIdxRangePerStripBlock', 1, segIdxs_PerStrip_Range_Arr);
@@ -90,15 +91,19 @@ function mainProgram(
     ///////////////////////////////////////
     // Create buffer for line segment data
     useTexture(glContext, SEG_TEX_INDEX, 'segs');
-    gl.texImage2D(  // really 1d
+    gl.texImage2D(
         gl.TEXTURE_2D,
-        0,           // level - irrelevant
-        gl.RGBA32F,  // internalFormat - we're using 4 floats for the 2 line segment endpoints
-        lineSegPtCoords_Arr.length/4,  // width === number of lines
-        1,           // height - linear data texture so we only need height of 1
-        0,           // border - whatever
-        gl.RGBA,     // format
-        gl.FLOAT,    // it holds floats
+        0,            // level - irrelevant
+        gl.RGBA32F,   // internalFormat - we're using 4 floats for the 2 line segment endpoints
+
+        TEX_WIDTH,  // fixed width
+        lineSegPtCoords_Arr.length / 4 / TEX_WIDTH,  // height === number of point coordinates
+        // lineSegPtCoords_Arr.length/4,
+        // 1,
+
+        0,            // border - whatever
+        gl.RGBA,      // format
+        gl.FLOAT,     // it holds floats
         lineSegPtCoords_Arr  // texture data
     );
     const segTexLoc = gl.getUniformLocation(programMain.program, "uSegs");
@@ -108,12 +113,12 @@ function mainProgram(
     ///////////////////////////////////////////////
     // Create buffer for close cell indexes per cell
     useTexture(glContext, CELL_TEX_INDEX, 'closeCellIdxsPerCell');
-    gl.texImage2D(  // really 1d
+    gl.texImage2D(
         gl.TEXTURE_2D,
         0,           // level - irrelevant
         gl.R32I,     // internalFormat - we're using 1 signed 32-bit int for indexes
-        TEX_WIDTH,   // width === number of indexes
-        closeCellIdxs_PerCell_Arr.length / TEX_WIDTH,
+        TEX_WIDTH,   // fixed width
+        closeCellIdxs_PerCell_Arr.length / TEX_WIDTH,  // height === number of indexes
         0,           // border - whatever
         gl.RED_INTEGER,  // format
         gl.INT,    // it holds ints
@@ -127,12 +132,12 @@ function mainProgram(
     ///////////////////////////////////////////////
     // Create buffer for crossing cell indexes per cell
     useTexture(glContext, CROSS_TEX_INDEX, 'crossCellIdxsPerCell');
-    gl.texImage2D(  // really 1d
+    gl.texImage2D(
         gl.TEXTURE_2D,
         0,           // level - irrelevant
         gl.R32I,     // internalFormat - we're using 1 signed 32-bit int for indexes
-        TEX_WIDTH,   // width === number of indexes
-        crossCellIdxs_PerCell_Arr.length / TEX_WIDTH,  // height - linear data texture so we only need height of 1
+        TEX_WIDTH,   // fixed width
+        crossCellIdxs_PerCell_Arr.length / TEX_WIDTH,  // height === number of indexes
         0,           // border - whatever
         gl.RED_INTEGER,  // format
         gl.INT,    // it holds ints
@@ -144,10 +149,10 @@ function mainProgram(
 
     if (stretch > 1) {
         gl.enable(gl.SCISSOR_TEST);
-        gl.scissor(0, 0, width, height/stretch)
+        gl.scissor(x, y, width, height/stretch)
     }
 
-    gl.viewport(0, 0, width, height);
+    gl.viewport(x, y, width, height);
 
     // draw a square colCount * ROW_COUNT times - 6 vertics
     gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, colCount*ROW_COUNT);

package/src/prepare-buffers.ts

@@ -26,7 +26,7 @@ function prepareBuffers(
 
     const lineSegs = bezierCurvesToLineSegs(psss_);
     const grid = createEmptyGrid(colCount, padCount);
-    const strips = new Array(ROW_COUNT).fill(undefined).map(v => []);
+    const strips = new Array(ROW_COUNT).fill(undefined).map(v => [] as number[][][]);
 
     for (let i=0; i<lineSegs.length; i++) {
         const seg = lineSegs[i];
@@ -39,16 +39,16 @@ function prepareBuffers(
     findCrossingCells(grid, colCount, padCount);  // add crossing cells
     ////////////////////////////////////////////////////////////////////////////
 
-    const allSegs: number[][][] = [];
-    const segIdxs_PerCell_Range: [number,number][] = [];
+    const allSegs: number[] = [];
+    const segIdxs_PerCell_Range: number[] = [];
 
     // close cells
     const closeCellIdxs_PerCell: number[] = [];
-    const closeCellIdxs_PerCell_Range: [number,number][] = [];
+    const closeCellIdxs_PerCell_Range: number[] = [];
 
     // crossing cells
     const crossCellIdxs_PerCell: number[] = [];
-    const crossCellIdxs_PerCell_Range: [number,number][] = [];
+    const crossCellIdxs_PerCell_Range: number[] = [];
 
     // const closeCellIdxsPerCell_: number[][] = [];  // testing
 
@@ -66,13 +66,15 @@ function prepareBuffers(
                 const { closeCells, crossingCells } = cell;
 
                 const L1 = crossingCells.length;
-                crossCellIdxs_PerCell.push(...crossingCells);
-                crossCellIdxs_PerCell_Range.push([S1, L1]);
-                S1 += L1;
-
                 const L2 = closeCells.length;
+
+                crossCellIdxs_PerCell.push(...crossingCells);
                 closeCellIdxs_PerCell.push(...closeCells);
-                closeCellIdxs_PerCell_Range.push([S2, L2]);
+
+                crossCellIdxs_PerCell_Range.push(S1, L1);
+                closeCellIdxs_PerCell_Range.push(S2, L2);
+
+                S1 += L1;
                 S2 += L2;
 
                 // closeCellIdxsPerCell_.push(closeCells);  // testing
@@ -82,16 +84,12 @@ function prepareBuffers(
             const { lineSegs } = cell;
 
             const L3 = lineSegs.length;
-            segIdxs_PerCell_Range.push([S3, L3]);
+            segIdxs_PerCell_Range.push(S3, L3);
             S3 += L3;
-            allSegs.push(...lineSegs);
+            allSegs.push(...lineSegs.flat(2));
         }
     }
 
-    // It is a requirement to fill in multiples of `TEX_WIDTH`
-    while (closeCellIdxs_PerCell.length % TEX_WIDTH !== 0) { closeCellIdxs_PerCell.push(0); }
-    while (crossCellIdxs_PerCell.length % TEX_WIDTH !== 0) { crossCellIdxs_PerCell.push(0); }
-
     // Add line segs from strips
     const segIdxs_PerStrip_Range: [number,number][] = [];
     for (let i=0; i<ROW_COUNT; i++) {
@@ -101,21 +99,26 @@ function prepareBuffers(
         const L = lineSegs.length;
         segIdxs_PerStrip_Range.push([S3, L]);
         S3 += L;
-        allSegs.push(...lineSegs);
+        allSegs.push(...lineSegs.flat(2));
     }
 
+    // It is a requirement to fill in multiples of `TEX_WIDTH`
+    while (closeCellIdxs_PerCell.length % TEX_WIDTH !== 0) { closeCellIdxs_PerCell.push(0); }
+    while (crossCellIdxs_PerCell.length % TEX_WIDTH !== 0) { crossCellIdxs_PerCell.push(0); }
+    while (allSegs.length % (4*TEX_WIDTH) !== 0) { allSegs.push(0); }
+
     
     // all line segments, with their ranges per cell and per strip
-    const lineSegPtCoords_Arr = new Float32Array(allSegs.flat(2));
-    const segIdxs_PerCell_Range_Arr = new Int32Array(segIdxs_PerCell_Range.flat());
+    const lineSegPtCoords_Arr = new Float32Array(allSegs);
+    const segIdxs_PerCell_Range_Arr = new Int32Array(segIdxs_PerCell_Range);
 
     // close cell idxs and range
-    const closeCellIdxs_PerCell_Range_Arr = new Int32Array(closeCellIdxs_PerCell_Range.flat());
+    const closeCellIdxs_PerCell_Range_Arr = new Int32Array(closeCellIdxs_PerCell_Range);
     const closeCellIdxs_PerCell_Arr = new Int32Array(closeCellIdxs_PerCell);
 
     // cross cell idxs and range
     const crossCellIdxs_PerCell_Arr = new Int32Array(crossCellIdxs_PerCell);
-    const crossCellIdxs_perCell_Range_Arr = new Int32Array(crossCellIdxs_PerCell_Range.flat());
+    const crossCellIdxs_perCell_Range_Arr = new Int32Array(crossCellIdxs_PerCell_Range);
 
     // segment index ranges per strip
     const segIdxs_PerStrip_Range_Arr = new Int32Array(segIdxs_PerStrip_Range.flat());