webgl2-sdf 0.0.3 → 0.0.5

package/node/utils/seg-box-x.js

@@ -15,16 +15,18 @@ function segBoxX(seg, square) {
     const dx = x1 - x0;
     const dy = y1 - y0;
     // Parametric line equation: P(t) = P1 + t*(P2-P1), where 0 <= t <= 1
-    const ts = [];
-    const ps = [];
+    // const ts: number[] = [];
+    // const ps: number[][] = [];
+    const xs = [];
     if (dx !== 0) {
         // Check intersection with left edge (x = minX)
         const tL = (minX - x0) / dx;
         if (tL >= 0 && tL <= 1) {
             const y = y0 + tL * dy;
             if (y >= minY && y <= maxY) {
-                ts.push(tL);
-                ps.push([minX, y]);
+                // ts.push(tL);
+                // ps.push([minX, y]);
+                xs.push({ t: tL, p: [minX, y] });
             }
         }
         // Check intersection with right edge (x = maxX)
@@ -32,8 +34,9 @@ function segBoxX(seg, square) {
         if (tR >= 0 && tR <= 1) {
             const y = y0 + tR * dy;
             if (y >= minY && y <= maxY) {
-                ts.push(tR);
-                ps.push([maxX, y]);
+                // ts.push(tR);
+                // ps.push([maxX, y]);
+                xs.push({ t: tR, p: [maxX, y] });
             }
         }
     }
@@ -43,8 +46,9 @@ function segBoxX(seg, square) {
         if (tT >= 0 && tT <= 1) {
             const x = x0 + tT * dx;
             if (x >= minX && x <= maxX) {
-                ts.push(tT);
-                ps.push([x, minY]);
+                // ts.push(tT);
+                // ps.push([x, minY]);
+                xs.push({ t: tT, p: [x, minY] });
             }
         }
         // Check intersection with top edge (y = maxY)
@@ -52,18 +56,24 @@ function segBoxX(seg, square) {
         if (tB >= 0 && tB <= 1) {
             const x = x0 + tB * dx;
             if (x >= minX && x <= maxX) {
-                ts.push(tB);
-                ps.push([x, maxY]);
+                // ts.push(tB);
+                // ps.push([x, maxY]);
+                xs.push({ t: tB, p: [x, maxY] });
             }
         }
     }
-    // TODO might be more than 2!!
-    if (ts.length === 2) {
-        return ts[0] < ts[1]
-            ? ps
-            : [ps[1], ps[0]];
-    }
-    return ps;
+    const seen = new Set(); // Store unique t values
+    const xs_ = xs.filter(x => {
+        const { t } = x;
+        if (seen.has(t)) {
+            return false;
+        }
+        else {
+            seen.add(t);
+            return true;
+        }
+    });
+    return xs_.sort((a, b) => a.t - b.t).map(x => x.p);
 }
 export { segBoxX };
 //# sourceMappingURL=seg-box-x.js.map

package/node/utils/seg-box-x.js.map

@@ -1 +1 @@
-{"version":3,"file":"seg-box-x.js","sourceRoot":"","sources":["../../src/utils/seg-box-x.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"seg-box-x.js","sourceRoot":"","sources":["../../src/utils/seg-box-x.ts"],"names":[],"mappings":"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"}

package/node/webgl-utils/free-gl-context.d.ts

@@ -0,0 +1,3 @@
+import { GlContext } from '../types/gl-context.js';
+declare function freeGlContext(glContext: GlContext | undefined): void;
+export { freeGlContext };

package/node/webgl-utils/free-gl-context.js

@@ -0,0 +1,26 @@
+function freeGlContext(glContext) {
+    if (glContext === undefined) {
+        return;
+    }
+    const { gl, programs, textures } = glContext;
+    for (let key in programs) {
+        const { attributes, fragmentShader, vertexShader, uniformBlocks, program } = programs[key];
+        for (let key in uniformBlocks) {
+            const { buf } = uniformBlocks[key];
+            gl.deleteBuffer(buf);
+        }
+        for (let key in attributes) {
+            const { buf } = attributes[key];
+            gl.deleteBuffer(buf);
+        }
+        gl.deleteShader(fragmentShader);
+        gl.deleteShader(vertexShader);
+        gl.deleteProgram(program);
+    }
+    for (let key in textures) {
+        const { tex } = textures[key];
+        gl.deleteTexture(tex);
+    }
+}
+export { freeGlContext };
+//# sourceMappingURL=free-gl-context.js.map

package/node/webgl-utils/free-gl-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"free-gl-context.js","sourceRoot":"","sources":["../../src/webgl-utils/free-gl-context.ts"],"names":[],"mappings":"AAGA,SAAS,aAAa,CACd,SAAgC;IAEpC,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;QAAC,OAAO;IAAC,CAAC;IAExC,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC;IAE7C,KAAK,IAAI,GAAG,IAAI,QAAQ,EAAE,CAAC;QACvB,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;QAE3F,KAAK,IAAI,GAAG,IAAI,aAAa,EAAE,CAAC;YAC5B,MAAM,EAAE,GAAG,EAAE,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;YACnC,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;QACzB,CAAC;QACD,KAAK,IAAI,GAAG,IAAI,UAAU,EAAE,CAAC;YACzB,MAAM,EAAE,GAAG,EAAE,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;YAChC,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;QACzB,CAAC;QACD,EAAE,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;QAChC,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;QAC9B,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAED,KAAK,IAAI,GAAG,IAAI,QAAQ,EAAE,CAAC;QACvB,MAAM,EAAE,GAAG,EAAE,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC9B,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAE1B,CAAC;AACL,CAAC;AAGD,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/node/webgl-utils/{get-gl-context.d.ts → get-web-gl-context.d.ts}

@@ -6,5 +6,5 @@ import type { GlContext } from "../types/gl-context.js";
  * @param gl the `WebGL2RenderingContext` context to wrap
  * @param callback
  */
-declare function getWebGLContext<T>(gl: WebGL2RenderingContext): GlContext;
-export { getWebGLContext };
+declare function getWebGlContext(gl: WebGL2RenderingContext): GlContext;
+export { getWebGlContext };

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

@@ -6,7 +6,7 @@ const cache = new WeakMap();
  * @param gl the `WebGL2RenderingContext` context to wrap
  * @param callback
  */
-function getWebGLContext(gl) {
+function getWebGlContext(gl) {
     {
         const glContext = cache.get(gl);
         if (glContext) {
@@ -15,29 +15,26 @@ function getWebGLContext(gl) {
     }
     const programs = {};
     const textures = {};
-    const framebufferStack = [];
     gl.canvas.addEventListener('webglcontextlost', e => {
-        handleContextLoss();
+        onContextLoss();
         e.preventDefault();
     }, false);
     const glContext = {
         gl,
-        onContextLoss: handleContextLoss,
+        onContextLoss,
         textures,
-        programs,
-        framebufferStack
+        programs
     };
     cache.set(gl, glContext);
     return glContext;
     ////////////////////////
-    function handleContextLoss() {
+    function onContextLoss() {
         deleteAllProps(programs);
         deleteAllProps(textures);
-        framebufferStack.length = 0;
     }
 }
 function deleteAllProps(o) {
     Object.keys(o).forEach(key => { delete o[key]; });
 }
-export { getWebGLContext };
-//# sourceMappingURL=get-gl-context.js.map
+export { getWebGlContext };
+//# sourceMappingURL=get-web-gl-context.js.map

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

@@ -0,0 +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/node/webgl-utils/set-attribute.js

@@ -26,7 +26,7 @@ function setAttribute(program) {
     return (name, size, type, usage, data, instancingDivisor = 0, stride = 0, offset = 0) => {
         const { gl, attributes } = program;
         const attr = attributes[name] = attributes[name] ?? {
-            buf: gl.createBuffer(), // TODO should we destroy our buffers?
+            buf: gl.createBuffer(),
             loc: gl.getAttribLocation(program.program, name),
             data: null
         };

package/node/webgl-utils/set-attribute.js.map

@@ -1 +1 @@
-{"version":3,"file":"set-attribute.js","sourceRoot":"","sources":["../../src/webgl-utils/set-attribute.ts"],"names":[],"mappings":"AAKA,MAAM;AACF,gBAAgB;AAChB,IAAI,EAAa,OAAO;AACxB,aAAa,EAAI,OAAO;AACxB,KAAK,EAAY,OAAO;AACxB,cAAc,EAAG,OAAO;AACxB,GAAG,EAAc,OAAO;AACxB,YAAY,EAAK,OAAO;AACxB,cAAc;AACd,KAAK,EAAY,OAAO;AACxB,UAAU,EAAO,OAAO;AAExB,kBAAkB,EAAY,QAAQ;AACtC,2BAA2B,CAAG,QAAQ;EACzC,GAAG,sBAAsB,CAAC;AAG3B;;;;;;;;;GASG;AACH,SAAS,YAAY,CACb,OAAgB;IAEpB,OAAO,CAAC,IAAY,EACZ,IAAY,EACZ,IAAgB,EAChB,KAAc,EACd,IAAoC,EACpC,iBAAiB,GAAG,CAAC,EACrB,MAAM,GAAG,CAAC,EACV,MAAM,GAAG,CAAC,EAAE,EAAE;QAElB,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC;QAEnC,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI;YAChD,GAAG,EAAE,EAAE,CAAC,YAAY,EAAE,EAAE,sCAAsC;YAC9D,GAAG,EAAE,EAAE,CAAC,iBAAiB,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC;YAChD,IAAI,EAAE,IAAI;SACb,CAAA;QAED,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;QAE1B,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC;QACpC,IAAI,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;YACxC,EAAE,CAAC,mBAAmB,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;QACnE,CAAC;aAAM,CAAC;YACJ,EAAE,CAAC,oBAAoB,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;QAC7D,CAAC;QACD,EAAE,CAAC,uBAAuB,CAAC,GAAG,CAAC,CAAC;QAChC,IAAI,iBAAiB,KAAK,CAAC,EAAE,CAAC;YAC1B,EAAE,CAAC,mBAAmB,CAAC,GAAG,EAAE,iBAAiB,CAAC,CAAC;QACnD,CAAC;QAED,IAAI,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;YACrB,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;YAC5C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACrB,CAAC;IACL,CAAC,CAAA;AACL,CAAC;AAGD,OAAO,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"set-attribute.js","sourceRoot":"","sources":["../../src/webgl-utils/set-attribute.ts"],"names":[],"mappings":"AAKA,MAAM;AACF,gBAAgB;AAChB,IAAI,EAAa,OAAO;AACxB,aAAa,EAAI,OAAO;AACxB,KAAK,EAAY,OAAO;AACxB,cAAc,EAAG,OAAO;AACxB,GAAG,EAAc,OAAO;AACxB,YAAY,EAAK,OAAO;AACxB,cAAc;AACd,KAAK,EAAY,OAAO;AACxB,UAAU,EAAO,OAAO;AAExB,kBAAkB,EAAY,QAAQ;AACtC,2BAA2B,CAAG,QAAQ;EACzC,GAAG,sBAAsB,CAAC;AAG3B;;;;;;;;;GASG;AACH,SAAS,YAAY,CACb,OAAgB;IAEpB,OAAO,CAAC,IAAY,EACZ,IAAY,EACZ,IAAgB,EAChB,KAAc,EACd,IAAoC,EACpC,iBAAiB,GAAG,CAAC,EACrB,MAAM,GAAG,CAAC,EACV,MAAM,GAAG,CAAC,EAAE,EAAE;QAElB,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC;QAEnC,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI;YAChD,GAAG,EAAE,EAAE,CAAC,YAAY,EAAE;YACtB,GAAG,EAAE,EAAE,CAAC,iBAAiB,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC;YAChD,IAAI,EAAE,IAAI;SACb,CAAA;QAED,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;QAE1B,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC;QACpC,IAAI,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;YACxC,EAAE,CAAC,mBAAmB,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;QACnE,CAAC;aAAM,CAAC;YACJ,EAAE,CAAC,oBAAoB,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;QAC7D,CAAC;QACD,EAAE,CAAC,uBAAuB,CAAC,GAAG,CAAC,CAAC;QAChC,IAAI,iBAAiB,KAAK,CAAC,EAAE,CAAC;YAC1B,EAAE,CAAC,mBAAmB,CAAC,GAAG,EAAE,iBAAiB,CAAC,CAAC;QACnD,CAAC;QAED,IAAI,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;YACrB,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;YAC5C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACrB,CAAC;IACL,CAAC,CAAA;AACL,CAAC;AAGD,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/node/webgl-utils/set-uniform-block.js

@@ -21,10 +21,8 @@ function setUniformBlock(program_) {
             gl.bindBuffer(gl.UNIFORM_BUFFER, uniformBlock.buf);
         }
         const { buf } = uniformBlock;
-        gl.bufferData(gl.UNIFORM_BUFFER, buffer, gl.DYNAMIC_DRAW);
-        // gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+        gl.bufferData(gl.UNIFORM_BUFFER, buffer, gl.STATIC_DRAW);
         gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, buf);
-        // gl.bindBufferRange(gl.UNIFORM_BUFFER, bindingPoint, ubo, 0, sizeInBytes);
     };
 }
 export { setUniformBlock };

package/node/webgl-utils/set-uniform-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"set-uniform-block.js","sourceRoot":"","sources":["../../src/webgl-utils/set-uniform-block.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,SAAS,eAAe,CAChB,QAAiB;IAErB,OAAO,CAAC,SAAiB,EACjB,YAAoB,EACpB,MAA+B,EAAE,EAAE;QAEvC,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,QAAQ,CAAC;QAEhD,yCAAyC;QAEzC,IAAI,YAAY,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;QAC5C,IAAI,aAAa,CAAC,SAAS,CAAC,KAAK,SAAS,EAAE,CAAC;YACzC,MAAM,UAAU,GAAG,EAAE,CAAC,oBAAoB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;YAC/D,EAAE,CAAC,mBAAmB,CAAC,OAAO,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC;YAC1D,MAAM,GAAG,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC;YAE9B,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,cAAc,EAAE,GAAG,CAAC,CAAC;YAEtC,YAAY,GAAG,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC;YAC9C,aAAa,CAAC,SAAS,CAAC,GAAG,YAAY,CAAC;QAC5C,CAAC;aAAM,CAAC;YACJ,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,cAAc,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC;QACvD,CAAC;QAED,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,CAAC;QAE7B,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC;QAC1D,0CAA0C;QAC1C,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC,cAAc,EAAE,YAAY,EAAE,GAAG,CAAC,CAAC;QACxD,4EAA4E;IAChF,CAAC,CAAA;AACL,CAAC;AAGD,OAAO,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"set-uniform-block.js","sourceRoot":"","sources":["../../src/webgl-utils/set-uniform-block.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,SAAS,eAAe,CAChB,QAAiB;IAErB,OAAO,CAAC,SAAiB,EACjB,YAAoB,EACpB,MAA+B,EAAE,EAAE;QAEvC,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,QAAQ,CAAC;QAEhD,yCAAyC;QAEzC,IAAI,YAAY,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;QAC5C,IAAI,aAAa,CAAC,SAAS,CAAC,KAAK,SAAS,EAAE,CAAC;YACzC,MAAM,UAAU,GAAG,EAAE,CAAC,oBAAoB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;YAC/D,EAAE,CAAC,mBAAmB,CAAC,OAAO,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC;YAC1D,MAAM,GAAG,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC;YAE9B,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,cAAc,EAAE,GAAG,CAAC,CAAC;YAEtC,YAAY,GAAG,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC;YAC9C,aAAa,CAAC,SAAS,CAAC,GAAG,YAAY,CAAC;QAC5C,CAAC;aAAM,CAAC;YACJ,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,cAAc,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC;QACvD,CAAC;QAED,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,CAAC;QAE7B,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC;QACzD,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC,cAAc,EAAE,YAAY,EAAE,GAAG,CAAC,CAAC;IAC5D,CAAC,CAAA;AACL,CAAC;AAGD,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/node/webgl-utils/use-program.js

@@ -21,10 +21,20 @@ function initProgram(glContext, name, vert, frag) {
     const uniforms = {};
     const uniformBlocks = {};
     const program = gl.createProgram();
-    gl.attachShader(program, compileShader(gl, vert, gl.VERTEX_SHADER));
-    gl.attachShader(program, compileShader(gl, frag, gl.FRAGMENT_SHADER));
+    const vertexShader = compileShader(gl, vert, gl.VERTEX_SHADER);
+    const fragmentShader = compileShader(gl, frag, gl.FRAGMENT_SHADER);
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
     gl.linkProgram(program);
-    programs[name] = { gl, program, attributes, uniforms, uniformBlocks };
+    programs[name] = {
+        gl,
+        program,
+        attributes,
+        uniforms,
+        uniformBlocks,
+        vertexShader,
+        fragmentShader
+    };
     return programs[name];
 }
 export { initProgram };

package/node/webgl-utils/use-program.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-program.js","sourceRoot":"","sources":["../../src/webgl-utils/use-program.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGpD;;;;;;;;;;;;GAYG;AACH,SAAS,WAAW,CACR,SAAoB,EACpB,IAAY,EACZ,IAAY,EACZ,IAAY;IAEpB,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC;IAEnC,IAAI,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;QACjB,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAED,MAAM,UAAU,GAAkC,EAAE,CAAC;IACrD,MAAM,QAAQ,GAAoD,EAAE,CAAC;IACrE,MAAM,aAAa,GAAqC,EAAE,CAAC;IAE3D,MAAM,OAAO,GAAG,EAAE,CAAC,aAAa,EAAE,CAAC;IACnC,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,aAAa,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IACpE,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,aAAa,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IACtE,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAExB,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC;IAEtE,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"use-program.js","sourceRoot":"","sources":["../../src/webgl-utils/use-program.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGpD;;;;;;;;;;;;GAYG;AACH,SAAS,WAAW,CACR,SAAoB,EACpB,IAAY,EACZ,IAAY,EACZ,IAAY;IAEpB,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC;IAEnC,IAAI,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;QACjB,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAED,MAAM,UAAU,GAAkC,EAAE,CAAC;IACrD,MAAM,QAAQ,GAAoD,EAAE,CAAC;IACrE,MAAM,aAAa,GAAqC,EAAE,CAAC;IAE3D,MAAM,OAAO,GAAG,EAAE,CAAC,aAAa,EAAE,CAAC;IACnC,MAAM,YAAY,GAAG,aAAa,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC;IAC/D,MAAM,cAAc,GAAG,aAAa,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC;IAEnE,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;IACvC,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;IACzC,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAExB,QAAQ,CAAC,IAAI,CAAC,GAAG;QACb,EAAE;QACF,OAAO;QACP,UAAU;QACV,QAAQ;QACR,aAAa;QACb,YAAY;QACZ,cAAc;KACjB,CAAC;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC;AAGD,OAAO,EAAE,WAAW,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.3",
+    "version": "0.0.5",
     "author": {
         "name": "Floris Steenkamp"
     },
@@ -31,14 +31,14 @@
     ],
     "dependencies": {},
     "devDependencies": {
-        "@types/node": "^25.0.9",
+        "@types/node": "^25.0.10",
         "c8": "^10.1.3",
         "rimraf": "^6.1.2",
         "ts-loader": "^9.5.4",
         "ts-node": "^10.9.2",
         "typescript": "^5.9.3",
         "webpack": "^5.104.1",
-        "webpack-bundle-analyzer": "^5.1.1",
+        "webpack-bundle-analyzer": "^5.2.0",
         "webpack-cli": "^6.0.1",
         "source-map-support": "^0.5.21"
     },

package/src/bezier/bezier-curves-to-line-segs.ts

@@ -11,8 +11,7 @@ import { splitIntoLineSegments } from "./split-into-line-segments.js";
  * from the line connecting it's endpoints are less than this value
  */
 function bezierCurvesToLineSegs(
-        bezierLoops: (number[][])[][],
-        resolution: 0.5|1) {
+        bezierLoops: (number[][])[][]) {
 
     let lineSegs: number[][][] = [];
     for (let i=0; i<bezierLoops.length; i++) {
@@ -26,7 +25,7 @@ function bezierCurvesToLineSegs(
                 continue;
             }
 
-            const lineSegs_ = splitIntoLineSegments(ps, resolution);
+            const lineSegs_ = splitIntoLineSegments(ps);
 
             lineSegs.push(...lineSegs_.filter(ps => !isReallyPoint(ps)));
         }

package/src/bezier/split-into-line-segments.ts

@@ -4,6 +4,9 @@ import { splitByDeviationFromStraighLine_Cubic_Crude } from './split-by-deviatio
 import { splitByDeviationFromStraighLine_Quad } from './split-by-deviation-from-straight-line-quad.js';
 
 
+const RESOLUTION = 0.5;
+
+
 /**
  * Returns the result of splitting the given bezier curve into straight line
  * segments up to `maxDeviation`
@@ -13,13 +16,12 @@ import { splitByDeviationFromStraighLine_Quad } from './split-by-deviation-from-
  * @param maxDeviation maximum deviation from straight line
  */
 function splitIntoLineSegments(
-        ps: number[][],
-        maxDeviation: number) {
+        ps: number[][]) {
     
     const ts = ps.length === 3
-        ? splitByDeviationFromStraighLine_Quad(ps, maxDeviation)
-        // : splitByDeviationFromStraighLine_Cubic_Precise(ps, maxDeviation)
-        : splitByDeviationFromStraighLine_Cubic_Crude(ps, maxDeviation)
+        ? splitByDeviationFromStraighLine_Quad(ps, RESOLUTION)
+        // : splitByDeviationFromStraighLine_Cubic_Precise(ps, RESOLUTION)
+        : splitByDeviationFromStraighLine_Cubic_Crude(ps, RESOLUTION)
 
     const segs: number[][][] = [];
     for (let i=0; i<ts.length - 1; i++) {

package/src/generate-sdf.ts

@@ -1,35 +1,41 @@
-import { getWebGLContext } from './webgl-utils/get-gl-context.js';
-import { main_Vertex } from './shaders/main.vertex.js';
-import { getMainFragment } from './shaders/main.fragment.js';
+// import { getWebGLContext } from './webgl-utils/get-gl-context.js';
+import { vertex } from './shaders/vertex.js';
+import { getFragment } from './shaders/fragment.js';
 import { initProgram } from './webgl-utils/use-program.js';
 import { mainProgram } from './main-program.js';
 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';
 
 const { ceil, min, max } = Math;
 
 
 /**
+ * Generates an sdf (signed distance field) from the given bezier curves,
+ * viewbox, etc. and renders the result
  * 
- * @param gl 
- * @param psss 
- * @param width 
- * @param height 
- * @param viewbox 
- * @param maxDistance 
- * @param sdfExponent 
- * @param inclInside 
- * @param inclOutside 
- * @param x 
- * @param y 
- * @param channel 
- * @param resolution 
+ * @param glContext a `GlConext` previously created by `getWebGlContext(gl: WebGL2RenderingContext)`
+ * @param bezierCurves_or_svgStr either of
+ * * an array of linear (lines), quadratic or cubic bezier curves (or a mix
+ * thereof) given by given by their ordered control points,
+ * e.g. `[ [[0,0],[1,1],[2,1],[2,0]], [[2,0],[7,2],[1,5],[8,6]], ... ]` **OR**
+ * * an SVG string, e.g. "M26.53 478.83 C028.89 481.61 031.33 484.32 ..."
+ * @param width the width of the drawing rectangle
+ * @param height the height of the drawing rectangle
+ * @param viewbox the viewbox
+ * @param maxDistance maximum sdf distance
+ * @param sdfExponent TODO
+ * @param inclInside if `true` the sdf will be calculate for the inside of the shape
+ * @param inclOutside if `true` the sdf will be calculate for the outside of the shape
+ * @param x the position where to draw, x-coordinate
+ * @param y the position where to draw, y-coordinate
+ * @param channel TODO
  */
-function generateIntoFramebuffer(
-        gl: WebGL2RenderingContext,
-        psss: (number[][])[][] | string,
+function generateSdf(
+        glContext: GlContext,
+        bezierCurves_or_svgStr: (number[][])[][] | string,
         width: number,
         height: number,
         viewbox: [number,number,number,number],
@@ -37,18 +43,16 @@ function generateIntoFramebuffer(
         sdfExponent = 1,
         inclInside = true,
         inclOutside = true,
-        // framebuffer: WebGLFramebuffer | null,
         x = 0, y = 0,
-        channel = 0,
-        resolution: 0.5|1 = 0.5) {
+        channel = 0) {
 
     // debugShaders(gl);  // comment for production
 
-    const psss_ = typeof psss === 'string'
-        ? getPathsFromStr(psss)
-        : psss;
+    const psss = typeof bezierCurves_or_svgStr === 'string'
+        ? getPathsFromStr(bezierCurves_or_svgStr)
+        : bezierCurves_or_svgStr;
 
-    const glContext = getWebGLContext(gl);
+    // const glContext = getWebGLContext(gl);
 
     const { onContextLoss } = glContext;
 
@@ -69,13 +73,15 @@ function generateIntoFramebuffer(
 
     const programMain = initProgram(
         glContext, `main${colCount}-${padCount}`,
-        main_Vertex, getMainFragment(colCount, padCount)
+        vertex, getFragment(colCount, padCount)
     );
 
+    const { gl } = glContext;
+
     gl.useProgram(programMain.program);
     mainProgram(
-        glContext, programMain, resolution, psss_,
-        viewbox, maxDistance, sdfExponent, width, height, colCount,
+        glContext, programMain, psss,
+        viewbox, maxDistance, sdfExponent, x, y, width, height, colCount,
         cellSize, inclInside, inclOutside, padCount, stretch
     );
 
@@ -88,4 +94,4 @@ function generateIntoFramebuffer(
 }
 
 
-export { generateIntoFramebuffer }
+export { generateSdf }

package/src/index.ts

@@ -1,2 +1,4 @@
 
-export { generateIntoFramebuffer } from './generate-sdf.js';
+export { generateSdf } from './generate-sdf.js';
+export { freeGlContext } from './webgl-utils/free-gl-context.js';
+export { getWebGlContext } from './webgl-utils/get-web-gl-context.js';

package/src/main-program.ts

@@ -17,11 +17,12 @@ const CROSS_TEX_INDEX = 2;
 function mainProgram(
         glContext: GlContext,
         programMain: Program,
-        resolution: 0.5|1,
         psss: number[][][][],
         viewbox: [number,number,number,number],
         maxDistance: number,
         sdfExponent = 1,
+        x: number,
+        y: number,
         width: number,
         height: number,
         colCount: number,
@@ -53,7 +54,7 @@ function mainProgram(
         segIdxs_PerStrip_Range_Arr
     } = prepareBuffers(
         psss, width, height, colCount, cellSize, maxDistance,
-        padCount, resolution, viewbox, stretch
+        padCount, viewbox, stretch
     );
 
     // Init/update attributes
@@ -77,11 +78,11 @@ 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_('1f', 'uStretch', stretch);  // TODO
 
     setUniformBlock(programMain)('SegIdxRangePerCellBlock', 0, segIdxs_PerCell_Range_Arr);
     setUniformBlock(programMain)('SegIdxRangePerStripBlock', 1, segIdxs_PerStrip_Range_Arr);

package/src/prepare-buffers.ts

@@ -5,10 +5,9 @@ import { createEmptyGrid } from './utils/create-empty-grid.js';
 import { findCrossingCells } from './utils/find-crossing-cells.js';
 import { TEX_WIDTH } from './tex-width.js';
 import { ROW_COUNT } from './row-count.js';
-import { createEmptyStrips } from './utils/create-empty-strips.js';
 import { clipLineSegmentToStrips } from './utils/clip-line-segment-to-strips.js';
 import { mapToViewbox } from './utils/map-to-viewbox.js';
-// import { sum } from './utils/sum.js';
+// import { sum } from './utils/sum.js';  // testing
 
 
 function prepareBuffers(
@@ -19,20 +18,20 @@ function prepareBuffers(
         cellSize: number,
         maxDistance: number,
         padCount: number,
-        resolution: 0.5|1 = 0.5,
         viewbox: [number,number,number,number] = [0,0,width,height],
         stretch = 1) {
 
     ////////////////////////////////////////////////////////////////////////////
     const psss_ = mapToViewbox(viewbox, width, height/stretch, psss);
 
-    const lineSegs = bezierCurvesToLineSegs(psss_, resolution);
+    const lineSegs = bezierCurvesToLineSegs(psss_);
     const grid = createEmptyGrid(colCount, padCount);
-    const strips = createEmptyStrips();
+    const strips = new Array(ROW_COUNT).fill(undefined).map(v => []);
+
     for (let i=0; i<lineSegs.length; i++) {
         const seg = lineSegs[i];
         // Split the line segment into multiple segments that fit within grid cells
-        clipLineSegmentToGrid(grid, width, height, colCount, cellSize, seg, padCount);  // add segments to grid
+        clipLineSegmentToGrid(grid, width, height, cellSize, seg, padCount);  // add segments to grid
         clipLineSegmentToStrips(strips, height, seg);  // add segments to strips
     }
 
@@ -96,8 +95,7 @@ function prepareBuffers(
     // Add line segs from strips
     const segIdxs_PerStrip_Range: [number,number][] = [];
     for (let i=0; i<ROW_COUNT; i++) {
-        const strip = strips[i];
-        const { lineSegs } = strip;
+        const lineSegs = strips[i];
 
         //////////
         const L = lineSegs.length;

package/src/shaders/{main.fragment.ts → fragment.ts}

@@ -4,7 +4,7 @@ import { ROW_COUNT } from "../row-count.js";
 const cache: { [padCount_times_colCount: number]: string } = {};
 
 
-function getMainFragment(
+function getFragment(
         colCount: number,
         padCount: number): string {
 
@@ -138,7 +138,8 @@ void main() {
     ///////////////////////////////////////////////////////////////////////////
 
     // DEBUG!
-    float alpha = ((instanceId + instanceId/${ROW_COUNT}) % 2 == 0 ? 0.3 : 0.5);
+    // float alpha = ((instanceId + instanceId/${ROW_COUNT}) % 2 == 0 ? 0.3 : 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));
@@ -154,4 +155,4 @@ void main() {
 }
 
 
-export { getMainFragment }
+export { getFragment }

package/src/shaders/{main.vertex.ts → vertex.ts}

@@ -1,11 +1,11 @@
 import { ROW_COUNT } from "../row-count.js";
 
-const main_Vertex = /*glsl*/`#version 300 es
+const vertex = /*glsl*/`#version 300 es
 
 precision highp float;
 
 uniform vec2 uWidthHeight;
-uniform float uStretch;
+uniform vec2 uOffset;
 in vec2 aUV;
 in ivec2 aCloseCellIdxRangePerCell;
 in ivec2 aCrossIdxRangePerCell;
@@ -41,15 +41,18 @@ 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
-        ),
+            (2.0*uv.y - 1.0)
+        ) + vec2(x,y),
         0.0, 1.0
     );
 }
 `;
 
 
-export { main_Vertex }
+export { vertex }

package/src/types/gl-context.ts

@@ -20,7 +20,6 @@ interface GlContext {
     readonly gl: WebGL2RenderingContext;
     readonly textures: { [index:string]: Texture };
     readonly programs: { [index:string]: Program };
-    readonly framebufferStack: WebGLFramebuffer[];
     readonly onContextLoss: () => void;
 }
 

package/src/types/program.ts

@@ -8,6 +8,8 @@ interface Program {
     readonly attributes: { [index:string]: Attribute };
     readonly uniforms: { [index:string]: WebGLUniformLocation | null };
     readonly uniformBlocks: { [index:string]: UniformBlock };
+    readonly vertexShader: WebGLShader;
+    readonly fragmentShader: WebGLShader;
 }
 
 

package/src/utils/calc-circs.ts

@@ -50,8 +50,6 @@ function calcCircs() {
         ranges.sort((a,b) => (a.from - b.from));
     }
 
-
-
     return ranges;
 }