webgl2-sdf 0.0.6 → 0.0.7

package/README.md

@@ -9,8 +9,6 @@ of bezier curves (lines, quadratics, cubics), typically some closed shape(s).
 * *dozens of times faster* than [webgl-sdf-generator](https://github.com/lojjic/webgl-sdf-generator) for real-time (60+ fps)
 applications even on slow on-board GPUs
 
-* drop-in replacement for [webgl-sdf-generator](https://github.com/lojjic/webgl-sdf-generator) with a few additional options
-
 The bezier curves can be given in raw form or as an SVG path string (except, arcs are
 not supported yet).
 
@@ -23,7 +21,7 @@ npm install webgl2-sdf
 ```
 
 ## How so fast?
-Two basic concepts were used:
+Two basic concepts are used:
 * *dynamically* split the bezier curves into line segments up to a specified
 accuracy - reduces the number of line segments to check
 * divide and pre-filter the number of curve segments within the cells of
@@ -33,58 +31,71 @@ calculation
 
 ## Usage
 ```typescript
-import { getWebGlContext, generateIntoFramebuffer } from "webgl2-sdf";
+import { getWebGlContext, generateSdf } from "webgl2-sdf";
 
-const gl: WebGL2RenderingContext = canvas.getContext(
-    'webgl2',
-    {
-        depth: false, stencil: false, antialias: false,
-        premultipliedAlpha: false
-    }
-);
-
-const { width: canvasWidth, height: canvasHeight } = canvas.getBoundingClientRect();
-
-// The first call to `getWebGlContext` caches some context, e.g. compiled shader
-// programs, etc., subsequent calls simply uses the existing cache.
-const glContext = getWebGlContext(gl!);
-
-const someShape = 
-`
-    M 0 0
-    L 100 0
-    L 100 100
-    C 50 100 0 50 0 0
-    z
-`;
-
-try {
-    generateSdf(
-        glContext!,
-        someShape,
-        canvasWidth,   // width (of drawing area)
-        canvasHeight,  // height (of drawing area)
-        [-50, -50, 150, 150],  // viewBox
-        100,  // max sdf distance
-        1,  // TODO
-        true,  // include inside
-        true,  // include outside
-        0,  // canvas x coordinate
-        0,  // canvas y coordinate
-        0,  // channel  // TODO
+
+function drawSdf() {
+    const gl: WebGL2RenderingContext = canvas.getContext(
+        'webgl2',
+        {
+            depth: false, stencil: false, antialias: false,
+            premultipliedAlpha: false
+        }
     );
-} catch (e) {
-    console.log(e);
+
+    const { width: canvasWidth, height: canvasHeight } = canvas.getBoundingClientRect();
+
+    // The first call to `getWebGlContext` caches some context, e.g. compiled shader
+    // programs, etc., subsequent calls simply uses the existing cache.
+    const glContext = getWebGlContext(gl!);
+
+    // Optional...
+    glContext.onContextLoss = onContextLoss;
+
+    const someShape = 
+    `
+        M 0 0
+        L 100 0
+        L 100 100
+        C 50 100 0 50 0 0
+        z
+    `;
+
+    try {
+        generateSdf(
+            glContext!,
+            someShape,
+            canvasWidth,   // width (of drawing area)
+            canvasHeight,  // height (of drawing area)
+            [-50, -50, 150, 150],  // viewBox
+            100,  // max sdf distance
+            1,  // TODO
+            true,  // include inside
+            true,  // include outside
+            0,  // canvas x coordinate
+            0,  // canvas y coordinate
+            0,  // channel  // TODO
+        );
+    } catch (e) {
+        console.log(e);
+    }
+}
+
+
+function onContextLoss(event: Event) {
+    // ... do somethin when context is lost, most likely by re-establishing a new context
+    console.log(event);
 }
 
 // At the end, **only after you know you'll never call `generateIntoFramebuffer`
 // again on the same `WebGL2RenderingContext`**
-freeGlContext(glContext);  // dispose of textures, buffers, shaders, programs, etc.
+// freeGlContext(glContext);  // dispose of textures, buffers, shaders, programs, etc.
 
 ```
 
 ## Recommendations
-When calling `generateIntoFramebuffer`
+When calling `generateIntoFramebuffer`:
+
 * ensure the drawing `width` and `height` has the same aspect ratio as the viewbox
 else the image will be squashed / stretched
 * the `viewbox` is given as `[x1,y1,x2,y2]` and *not* as `[x,y,width,height]` as in SVG

package/browser/index.min.js

@@ -1 +1 @@
-const n=32,e={};function t(n,e,t){const r=n.createShader(t);return n.shaderSource(r,e),n.compileShader(r),r}function r(n,e,t){const{gl:r,textures:o}=n;r.activeTexture(r.TEXTURE0+e);let s=o[t];return s?r.bindTexture(r.TEXTURE_2D,s.tex):(s=o[t]={tex:r.createTexture()},r.bindTexture(r.TEXTURE_2D,s.tex),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_MIN_FILTER,r.NEAREST),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_MAG_FILTER,r.NEAREST),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_WRAP_S,r.CLAMP_TO_EDGE),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_WRAP_T,r.CLAMP_TO_EDGE)),s}const{BYTE:o,UNSIGNED_BYTE:s,SHORT:i,UNSIGNED_SHORT:c,INT:l,UNSIGNED_INT:u,FLOAT:a,HALF_FLOAT:d,INT_2_10_10_10_REV:f,UNSIGNED_INT_2_10_10_10_REV:g}=WebGL2RenderingContext;function h(n){return(e,t,r)=>{const{gl:o,uniformBlocks:s,program:i}=n;let c=s[e];if(void 0===s[e]){const n=o.getUniformBlockIndex(i,e);o.uniformBlockBinding(i,n,t);const r=o.createBuffer();o.bindBuffer(o.UNIFORM_BUFFER,r),c={blockName:e,blockIndex:n,buf:r},s[e]=c}else o.bindBuffer(o.UNIFORM_BUFFER,c.buf);const{buf:l}=c;o.bufferData(o.UNIFORM_BUFFER,r,o.STATIC_DRAW),o.bindBufferBase(o.UNIFORM_BUFFER,t,l)}}function x(n){const e=n[0][0],t=n[0][1];for(let r=1;r<n.length;r++)if(e!==n[r][0]||t!==n[r][1])return!1;return!0}function I(n,e){if(0===e)return n[0];if(1===e)return n[n.length-1];if(4===n.length){const[[t,r],[o,s],[i,c],[l,u]]=n,a=t+(o-t)*e,d=o+(i-o)*e,f=a+(d-a)*e,g=r+(s-r)*e,h=s+(c-s)*e,x=g+(h-g)*e;return[f+(d+(i+(l-i)*e-d)*e-f)*e,x+(h+(c+(u-c)*e-h)*e-x)*e]}if(3===n.length){const[[t,r],[o,s],[i,c]]=n,l=t+(o-t)*e,u=r+(s-r)*e;return[l+(o+(i-o)*e-l)*e,u+(s+(c-s)*e-u)*e]}if(2===n.length){const[[t,r],[o,s]]=n;return[t+(o-t)*e,r+(s-r)*e]}if(1===n.length)return n[0];throw new Error("The given bezier curve must be of order <= 3.")}const{sqrt:_}=Math;function p(n,e){const t=n[0],r=n[1],o=e[0],s=e[1],i=r-s,c=o-t,l=t*s-o*r,u=_(i*i+c*c);return function(n){const e=n[0],o=n[1];return 0!==u?(i*e+c*o+l)/u:_((e-t)**2+(o-r)**2)}}{const n=[10,1];p([6,2],[6,2])(n)}function v(n,e,t){if(4===n.length)return function(n,e,t){return 0===e?1===t?n:function(n,e){const t=n[0],r=n[1],o=n[2],s=n[3],i=t[0],c=t[1],l=r[0],u=r[1],a=o[0],d=o[1],f=i-e*(i-l),g=l-e*(l-a),h=f-e*(f-g),x=c-e*(c-u),I=u-e*(u-d),_=x-e*(x-I);return[t,[f,x],[h,_],[h-e*(h-(g-e*(g-(a-e*(a-s[0]))))),_-e*(_-(I-e*(I-(d-e*(d-s[1])))))]]}(n,t):1===t?function(n,e){const t=n[0],r=n[1],o=n[2],s=n[3],i=t[0],c=t[1],l=r[0],u=r[1],a=o[0],d=o[1],f=i-e*(i-l),g=l-e*(l-a),h=a-e*(a-s[0]),x=f-e*(f-g),I=g-e*(g-h),_=c-e*(c-u),p=u-e*(u-d),v=d-e*(d-s[1]),m=_-e*(_-p),C=p-e*(p-v);return[[x-e*(x-I),m-e*(m-C)],[I,C],[h,v],s]}(n,e):function(n,e,t){const r=n[0],o=n[1],s=n[2],i=n[3],c=r[0],l=r[1],u=o[0],a=o[1],d=s[0],f=s[1],g=e*e,h=e*g,x=t*t,I=t*x,_=e*t,p=c-u,v=d-u,m=p+v,C=e*p,S=t*p,R=i[0]-c-3*v,E=l-a,T=f-a,b=E+T,w=e*E,A=t*E,P=i[1]-l-3*T;return[[h*R+(3*e*(e*m-p)+c),h*P+(3*e*(e*b-E)+l)],[_*(e*R+2*m)+(g*m+c-(S+2*C)),_*(e*P+2*b)+(g*b+l-(A+2*w))],[_*(t*R+2*m)+(x*m+c-(2*S+C)),_*(t*P+2*b)+(x*b+l-(2*A+w))],[I*R+(3*t*(t*m-p)+c),I*P+(3*t*(t*b-E)+l)]]}(n,e,t)}(n,e,t);if(3===n.length)return function(n,e,t){return 0===e?1===t?n:function(n,e){const t=n[0],r=n[1],o=n[2],s=t[0],i=t[1],c=r[0],l=r[1],u=e*e,a=s-c,d=i-l;return[t,[-e*a+s,-e*d+i],[u*(a+(o[0]-c))-(2*e*a-s),u*(d+(o[1]-l))-(2*e*d-i)]]}(n,t):1===t?function(n,e){const t=n[0],r=n[1],o=n[2],s=t[0],i=t[1],c=r[0],l=r[1],u=e*e,a=s-c,d=o[0]-c,f=i-l,g=o[1]-l;return[[u*(a+d)-(2*e*a-s),u*(f+g)-(2*e*f-i)],[e*d+c,e*g+l],o]}(n,e):function(n,e,t){const r=n[0],o=n[1],s=n[2],i=r[0],c=r[1],l=o[0],u=o[1],a=e*e,d=t*t,f=e*t,g=i-l,h=g+(s[0]-l),x=c-u,I=x+(s[1]-u);return[[a*h-(2*e*g-i),a*I-(2*e*x-c)],[f*h-(g*(t+e)-i),f*I-(x*(t+e)-c)],[d*h-(2*t*g-i),d*I-(2*t*x-c)]]}(n,e,t)}(n,e,t);throw new Error("The given bezier curve must be of order 2 or 3.")}function m(n,e){return[e[0]-n[0],e[1]-n[1]]}function C(n,e){return n[0]*e[0]+n[1]*e[1]}function S(n){const e=m(n[0],n[1]),t=m(n[1],n[3]),r=m(n[3],n[0]),o=m(n[0],n[2]),s=m(n[2],n[3]);return C(r,e)>0||C(t,r)>0||C(r,o)>0||C(s,r)>0}const{abs:R,max:E}=Math;function T(n){const e=p(n[0],n[3]),t=e(n[1]),r=e(n[2]);return(t*r<=0?4/9:3/4)*E(R(t),R(r))}function b(n){const e=m(n[0],n[1]),t=m(n[1],n[2]),r=m(n[2],n[0]);return C(r,e)>0||C(t,r)>0}const{abs:w}=Math;function A(n){if(n[0][0]===n[1][0]&&n[0][1]===n[1][1])return 0;const e=I(n,.5),t=p(n[0],n[2]);return w(t(e))}function P(n){const e=3===n.length?function(n){const e=[0],t=[1];for(;;){const r=e[e.length-1],o=t[t.length-1],s=v(n,r,o);if(!b(s)&&A(s)<=.5){if(e.push(t.pop()),1===o)return e;continue}const i=(r+o)/2;t.push(i)}}(n):function(n){const e=[0],t=[1];for(;;){const r=e[e.length-1],o=t[t.length-1],s=v(n,r,o);if(!S(s)&&T(s)<=.5){if(e.push(t.pop()),1===o)return e;continue}const i=(r+o)/2;t.push(i)}}(n),t=[];for(let r=0;r<e.length-1;r++){const o=I(n,e[r]),s=I(n,e[r+1]);t.push([o,s])}return t}function D(n){return Math.sqrt(n[0]*n[0]+n[1]*n[1])}const y=function(){const e=[{from:0,u:0,v:0}];for(let t=0;t<128;t++){e.push({from:t+.5,u:t+1,v:0}),e.push({from:t+.5,u:-t-1,v:0}),e.push({from:t+.5,u:0,v:t+1}),e.push({from:t+.5,u:0,v:-t-1});for(let r=0;r<n;r++){const n=D([.5+t,.5+r]),o=t+1,s=r+1;e.push({from:n,u:o,v:s}),0!==o&&e.push({from:n,u:-o,v:s}),0!==s&&e.push({from:n,u:o,v:-s}),0!==o&&0!==s&&e.push({from:n,u:-o,v:-s})}e.sort((n,e)=>n.from-e.from)}return e}(),{max:U,E:F}=Math;const{min:N,max:M,SQRT2:L}=Math;function k(e,t,r,o,s){const i=function(e,t,r,o,s){return function(i,c,l){let u=function(n){let e=function(n){let e=0,t=y.length-1,r=0;for(;e<=t;){r=e+t>>>1;const o=y[r].from;if(o===n)return r;n>o?e=r+1:t=r-1}return r}(n);if(n=U(0,n),0===e)return 0;for(;y[e].from===y[e-1].from;)e--;return e}((l-L*r)/r),a=Number.POSITIVE_INFINITY;for(;;){if(u>=y.length){a=r*(y[y.length-1].from-L);break}const{u:l,v:d,from:f}=y[u];if(r*f>o+L*r){a=r*(f-2*L);break}const g=l+i,h=d+c;if(g<0||g>=t+2*s||h<0||h>=n+2*s){u++;continue}const{lineSegs:x}=e[g][h];if(x.length>0){a=r*(f-L);break}u++}const{closeCells:d}=e[i][c];let f=M(0,u-1);for(;f<y.length;){const{from:l,u,v:g}=y[f];if(r*l>N(a,o)+2*L*r)break;const h=u+i,x=g+c;if(h<0||h>=t+2*s||x<0||x>=n+2*s){f++;continue}const{lineSegs:I}=e[h][x];I.length>0&&d.push((2*s+n)*h+x),f++}return a}}(e,t,r,o,s);let c=0,l=0;for(let e=s;e<t+s;e++){l=c;for(let t=s;t<n+s;t++)l=i(e,t,l),t===s&&(c=l)}}const{floor:B,ceil:O}=Math;function X(n,e,t,r,o,s){const i=r*s,[[c,l],[u,a]]=o,d=e+i,f=t+i,g=function(n,e){const[t,r]=n,[o,s]=t,[i,c]=r,[[l,u],[a,d]]=e,f=i-o,g=c-s,h=[];if(0!==f){const n=(l-o)/f;if(n>=0&&n<=1){const e=s+n*g;e>=u&&e<=d&&h.push({t:n,p:[l,e]})}const e=(a-o)/f;if(e>=0&&e<=1){const n=s+e*g;n>=u&&n<=d&&h.push({t:e,p:[a,n]})}}if(0!==g){const n=(u-s)/g;if(n>=0&&n<=1){const e=o+n*f;e>=l&&e<=a&&h.push({t:n,p:[e,u]})}const e=(d-s)/g;if(e>=0&&e<=1){const n=o+e*f;n>=l&&n<=a&&h.push({t:e,p:[n,d]})}}const x=new Set,I=h.filter(n=>{const{t:e}=n;return!x.has(e)&&(x.add(e),!0)});return I.sort((n,e)=>n.t-e.t).map(n=>n.p)}(o,[[-i,-i],[d,f]]),h=c>-i&&c<d&&l>-i&&l<f,x=u>-i&&u<d&&a>-i&&a<f;if(g.length<2&&!h&&!x)return;const I=u-c,_=a-l,p=u>c?r:-r,v=a>l?r:-r;let m=c,C=l,S=0;const R=p>0,E=v>0,T=R?B:O,b=E?B:O;for(;;){let e=r*T((m+p)/r),t=r*b((C+v)/r);const o=(e-c)/I,x=(t-l)/_,w=o<x&&0!==I||0===_,A=w?e:c+x*I,P=w?l+o*_:t;if((o>1||0===I)&&(x>1||0===_)){const e=B(u/r)+s,t=B(a/r)+s;n[e]?.[t]?.lineSegs.push([[m,C],[u,a]]);break}if(A<=-i||P<=-i||A>=d||P>=f){if(!h&&0===S){[m,C]=g[0],S++;continue}{const e=T(m/r)-(R?0:1)+s,t=b(C/r)-(E?0:1)+s,o=[[m,C],g[S]];n[e]?.[t]?.lineSegs.push(o);break}}const D=T(m/r)-(R?0:1)+s,y=b(C/r)-(E?0:1)+s;n[D]?.[y]?.lineSegs.push([[m,C],[A,P]]),m=A,C=P}}const G=256,{floor:Y,ceil:j}=Math;function Q(n,e,t){const r=e/n.length,[o,s]=t,i=function(n,e){const[t,r]=n,[o,s]=t,[i,c]=r,[l,u,a]=e,d=i-o,f=c-s,g=[],h=[];if(0!==d){const n=(l-o)/d;if(n>=0&&n<=1){const e=s+n*f;e>=u&&e<=a&&(g.push(n),h.push([l,e]))}}if(0!==f){const n=(u-s)/f;if(n>=0&&n<=1){const e=o+n*d;e<=l&&(g.push(n),h.push([e,u]))}const e=(a-s)/f;if(e>=0&&e<=1){const n=o+e*d;n<=l&&(g.push(e),h.push([n,a]))}}return 2===g.length?g[0]<g[1]?h:[h[1],h[0]]:h}(t,[0,0,e]),[c,l]=o,[u,a]=s,d=u-c,f=a-l,g=c<0&&l>0&&l<e,h=u<0&&a>0&&a<e;if(i.length<2&&!g&&!h&&(0!==c||0!==d||l<=0&&a<=0||l>=e&&a>=e))return;if(0===f)return;const x=a>l?r:-r;let I=c,_=l,p=0;const v=u>c,m=a>l,C=m?Y:j;for(;;){let t=v&&I<0||!v&&I>0?0:Number.NEGATIVE_INFINITY,o=r*C((_+x)/r);const u=(t-c)/d,a=(o-l)/f,h=u<a&&0!==d,S=h?0:c+a*d,R=h?l+u*f:o;if((u>1||0===d)&&a>1){const e=Y(s[1]/r);n[e]?.push([[I,_],s]);break}if(S>=0&&(0!==c||0!==d)||R<=0||R>=e){if(!g&&0===p){[I,_]=i[0],p++;continue}{const e=C(_/r)-(m?0:1),t=[[I,_],i[p]];n[e]?.push(t);break}}const E=C(_/r)-(m?0:1);n[E]?.push([[I,_],[S,R]]),I=S,_=R}}function V(e,t,o,s,i,c=1,l,u,f,g,I,_,p,v,m,C){const{gl:S}=e,R=[],E=.03125,T=.03125;R.push(0,0,E,0,0,T),R.push(E,0,E,T,0,T);const b=new Float32Array(R),w=(A=t,(n,e,...t)=>{const{gl:r,uniforms:o}=A,s=o[e]||(o[e]=r.getUniformLocation(A.program,e));r[`uniform${n}`](s,...t)});var A;const D=function(n){return(e,t,r,o,s,i=0,c=0,l=0)=>{const{gl:u,attributes:f}=n,g=f[e]=f[e]??{buf:u.createBuffer(),loc:u.getAttribLocation(n.program,e),data:null},{loc:h,buf:x}=g;u.bindBuffer(u.ARRAY_BUFFER,x),r===a||r===d?u.vertexAttribPointer(h,t,r,!1,c,l):u.vertexAttribIPointer(h,t,r,c,l),u.enableVertexAttribArray(h),0!==i&&u.vertexAttribDivisor(h,i),s!==g.data&&(u.bufferData(u.ARRAY_BUFFER,s,o),g.data=s)}}(t),{lineSegPtCoords_Arr:y,segIdxs_PerCell_Range_Arr:U,closeCellIdxs_PerCell_Arr:F,closeCellIdxs_PerCell_Range_Arr:N,crossCellIdxs_PerCell_Arr:M,crossCellIdxs_perCell_Range_Arr:L,segIdxs_PerStrip_Range_Arr:B}=function(e,t,r,o,s,i,c,l=[0,0,t,r],u=1){const a=function(n,e,t,r){if(0===n[0]&&0===n[1]&&n[2]===e&&n[3]===t)return r;const[o,s,i,c]=n,l=e/i,u=t/c,a=[];for(let n=0;n<r.length;n++){const e=r[n],t=[];for(let n=0;n<e.length;n++){const r=e[n],i=[];for(let n=0;n<r.length;n++){const[e,t]=r[n],c=l*e-o,a=u*t-s;i.push([c,a])}t.push(i)}a.push(t)}return a}(l,t,r/u,e),d=function(n){let e=[];for(let t=0;t<n.length;t++){const r=n[t];for(let n=0;n<r.length;n++){const t=r[n];if(x(t))continue;if(2===t.length){e.push(t);continue}const o=P(t);e.push(...o.filter(n=>!x(n)))}}return e}(a),f=function(e,t){const r=[];for(let o=0;o<e+2*t;o++){const e=[];for(let r=0;r<n+2*t;r++)e.push({lineSegs:[],closeCells:[],crossingCells:[]});r.push(e)}return r}(o,c),g=new Array(n).fill(void 0).map(n=>[]);for(let n=0;n<d.length;n++){const e=d[n];X(f,t,r,s,e,c),Q(g,r,e)}k(f,o,s,i,c),function(e,t,r){for(let o=r;o<t+r;o++)for(let t=r;t<n+r;t++){const s=e[o][t].crossingCells;for(let i=r;i<=o;i++)0!==e[i][t].lineSegs.length&&s.push((n+2*r)*i+t)}}(f,o,c);const h=[],I=[],_=[],p=[],v=[],m=[];let C=0,S=0,R=0;for(let e=0;e<o+2*c;e++)for(let t=0;t<n+2*c;t++){const r=f[e][t];if(e>=c&&e<o+c&&t>=c&&t<n+c){const{closeCells:n,crossingCells:e}=r,t=e.length;v.push(...e),m.push([C,t]),C+=t;const o=n.length;_.push(...n),p.push([S,o]),S+=o}const{lineSegs:s}=r,i=s.length;I.push([R,i]),R+=i,h.push(...s)}for(;_.length%G!==0;)_.push(0);for(;v.length%G!==0;)v.push(0);const E=[];for(let e=0;e<n;e++){const n=g[e],t=n.length;E.push([R,t]),R+=t,h.push(...n)}const T=new Float32Array(h.flat(2)),b=new Int32Array(I.flat()),w=new Int32Array(p.flat());return{lineSegPtCoords_Arr:T,segIdxs_PerCell_Range_Arr:b,closeCellIdxs_PerCell_Arr:new Int32Array(_),closeCellIdxs_PerCell_Range_Arr:w,crossCellIdxs_PerCell_Arr:new Int32Array(v),crossCellIdxs_perCell_Range_Arr:new Int32Array(m.flat()),segIdxs_PerStrip_Range_Arr:new Int32Array(E.flat())}}(o,f,g,I,_,i,m,s,C);D("aUV",2,S.FLOAT,S.STATIC_DRAW,b),D("aCrossIdxRangePerCell",2,S.INT,S.STATIC_DRAW,L,1),D("aCloseCellIdxRangePerCell",2,S.INT,S.STATIC_DRAW,N,1),w("2f","uWidthHeight",f,g),w("1f","uMaxDistance",i),w("1f","uExponent",c),w("1i","uIncl",(p?1:0)+(v?2:0)),h(t)("SegIdxRangePerCellBlock",0,U),h(t)("SegIdxRangePerStripBlock",1,B),r(e,0,"segs"),S.texImage2D(S.TEXTURE_2D,0,S.RGBA32F,y.length/4,1,0,S.RGBA,S.FLOAT,y);const O=S.getUniformLocation(t.program,"uSegs");S.uniform1i(O,0),r(e,1,"closeCellIdxsPerCell"),S.texImage2D(S.TEXTURE_2D,0,S.R32I,G,F.length/G,0,S.RED_INTEGER,S.INT,F);const Y=S.getUniformLocation(t.program,"uCloseCellIdxs");S.uniform1i(Y,1),r(e,2,"crossCellIdxsPerCell"),S.texImage2D(S.TEXTURE_2D,0,S.R32I,G,M.length/G,0,S.RED_INTEGER,S.INT,M);const j=S.getUniformLocation(t.program,"uCrossCellIdxs");S.uniform1i(j,2),C>1&&(S.enable(S.SCISSOR_TEST),S.scissor(l,u,f,g/C)),S.viewport(l,u,f,g),S.drawArraysInstanced(S.TRIANGLES,0,6,I*n),C>1&&S.disable(S.SCISSOR_TEST)}function z(n){const e=[n.p,n.initialPoint];return n.prev2ndCubicControlPoint=void 0,n.prev2ndQuadraticControlPoint=void 0,e}const W={c:function(n){const e=[n.p,[n.vals[0],n.vals[1]],[n.vals[2],n.vals[3]],[n.vals[4],n.vals[5]]];return n.prev2ndCubicControlPoint=e[2],n.prev2ndQuadraticControlPoint=void 0,e},h:function(n){const e=[n.p,[n.vals[0],n.p[1]]];return n.prev2ndCubicControlPoint=void 0,n.prev2ndQuadraticControlPoint=void 0,e},l:function(n){const e=[n.p,n.vals];return n.prev2ndCubicControlPoint=void 0,n.prev2ndQuadraticControlPoint=void 0,e},q:function(n){const e=[n.vals[0],n.vals[1]],t=[n.vals[2],n.vals[3]];return n.prev2ndCubicControlPoint=void 0,n.prev2ndQuadraticControlPoint=e,[n.p,e,t]},s:function(n){const e=n.prev2ndCubicControlPoint?[n.p[0]-n.prev2ndCubicControlPoint[0]+n.p[0],n.p[1]-n.prev2ndCubicControlPoint[1]+n.p[1]]:n.p,t=[n.p,e,[n.vals[0],n.vals[1]],[n.vals[2],n.vals[3]]];return n.prev2ndCubicControlPoint=t[2],n.prev2ndQuadraticControlPoint=void 0,t},t:function(n){const e=n.prev2ndQuadraticControlPoint?[n.p[0]-n.prev2ndQuadraticControlPoint[0]+n.p[0],n.p[1]-n.prev2ndQuadraticControlPoint[1]+n.p[1]]:n.p,t=[n.vals[0],n.vals[1]];return n.prev2ndCubicControlPoint=void 0,n.prev2ndQuadraticControlPoint=e,[n.p,e,t]},v:function(n){const e=[n.p,[n.p[0],n.vals[0]]];return n.prev2ndCubicControlPoint=void 0,n.prev2ndQuadraticControlPoint=void 0,e},z};function H(n){let e=0,t=0,r=1,o=0,s=1,i=1;const c=n._currentIndex;if(n._skipOptionalSpaces(),n._currentIndex<n._endIndex&&"+"===n._string[n._currentIndex]?n._currentIndex+=1:n._currentIndex<n._endIndex&&"-"===n._string[n._currentIndex]&&(n._currentIndex+=1,s=-1),n._currentIndex===n._endIndex||(n._string[n._currentIndex]<"0"||n._string[n._currentIndex]>"9")&&"."!==n._string[n._currentIndex])throw new Error("The first character of a number must be one of [0-9+-.].");const l=n._currentIndex;for(;n._currentIndex<n._endIndex&&n._string[n._currentIndex]>="0"&&n._string[n._currentIndex]<="9";)n._currentIndex+=1;if(n._currentIndex!==l){let e=n._currentIndex-1,r=1;for(;e>=l;)t+=r*(Number(n._string[e])-0),e-=1,r*=10}if(n._currentIndex<n._endIndex&&"."===n._string[n._currentIndex]){if(n._currentIndex+=1,n._currentIndex>=n._endIndex||n._string[n._currentIndex]<"0"||n._string[n._currentIndex]>"9")throw new Error("There must be a least one digit following the .");for(;n._currentIndex<n._endIndex&&n._string[n._currentIndex]>="0"&&n._string[n._currentIndex]<="9";)r*=10,o+=Number(n._string.charAt(n._currentIndex))/r,n._currentIndex+=1}if(n._currentIndex!==c&&n._currentIndex+1<n._endIndex&&("e"===n._string[n._currentIndex]||"E"===n._string[n._currentIndex])&&"x"!==n._string[n._currentIndex+1]&&"m"!==n._string[n._currentIndex+1]){if(n._currentIndex+=1,"+"===n._string[n._currentIndex]?n._currentIndex+=1:"-"===n._string[n._currentIndex]&&(n._currentIndex+=1,i=-1),n._currentIndex>=n._endIndex||n._string[n._currentIndex]<"0"||n._string[n._currentIndex]>"9")throw new Error("There must be an exponent.");for(;n._currentIndex<n._endIndex&&n._string[n._currentIndex]>="0"&&n._string[n._currentIndex]<="9";)e*=10,e+=Number(n._string[n._currentIndex]),n._currentIndex+=1}let u=t+o;if(u*=s,e&&(u*=Math.pow(10,i*e)),c===n._currentIndex)throw new Error("Internal error: startIndex === source._currentIndex");return n._skipOptionalSpacesOrDelimiter(),u}const q={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"};class Z{_string;_currentIndex;_endIndex;_prevCommand;constructor(n){this._string=n,this._currentIndex=0,this._endIndex=this._string.length,this._prevCommand=void 0,this._skipOptionalSpaces()}parseSegment(){const n=this._string[this._currentIndex];let e,t=q[n];if(void 0===t){if(void 0===this._prevCommand)throw new Error("Implicit command not allowed for first commands.");if(!("+"===n||"-"===n||"."===n||n>="0"&&n<="9")||"Z"===this._prevCommand)throw new Error("Remaining coordinates not found for implicit command");t="M"===this._prevCommand?"L":"m"===this._prevCommand?"l":this._prevCommand}else this._currentIndex+=1;this._prevCommand=t;const r=t.toUpperCase();if("H"===r||"V"===r?e=[H(this)]:"M"===r||"L"===r||"T"===r?e=[H(this),H(this)]:"S"===r||"Q"===r?e=[H(this),H(this),H(this),H(this)]:"C"===r?e=[H(this),H(this),H(this),H(this),H(this),H(this)]:"A"===r?e=[H(this),H(this),H(this),this._parseArcFlag(),this._parseArcFlag(),H(this),H(this)]:"Z"===r&&(this._skipOptionalSpaces(),e=[]),void 0===e)throw new Error("Unknown command");return{type:t,values:e}}hasMoreData(){return this._currentIndex<this._endIndex}initialCommandIsMoveTo(){if(!this.hasMoreData())return!0;const n=q[this._string[this._currentIndex]];return"M"===n||"m"===n}_isCurrentSpace(){const n=this._string[this._currentIndex];return n<=" "&&(" "===n||"\n"===n||"\t"===n||"\r"===n||"\f"===n)}_skipOptionalSpaces(){for(;this._currentIndex<this._endIndex&&this._isCurrentSpace();)this._currentIndex+=1;return this._currentIndex<this._endIndex}_skipOptionalSpacesOrDelimiter(){return!(this._currentIndex<this._endIndex&&!this._isCurrentSpace()&&","!==this._string[this._currentIndex])&&(this._skipOptionalSpaces()&&this._currentIndex<this._endIndex&&","===this._string[this._currentIndex]&&(this._currentIndex+=1,this._skipOptionalSpaces()),this._currentIndex<this._endIndex)}_parseArcFlag(){if(this._currentIndex>=this._endIndex)throw new Error("Unable to parse arc flag");let n;const e=this._string[this._currentIndex];if(this._currentIndex+=1,"0"===e)n=0;else{if("1"!==e)throw new Error("Unable to parse arc flag - arc flag must be 0 or 1");n=1}return this._skipOptionalSpacesOrDelimiter(),n}}const{ceil:$,min:J,max:K}=Math;function nn(r,o,s,i,c,l,u=1,a=!0,d=!0,f=0,g=0,h=0){const x="string"==typeof o?function(n){if(0===n.length)return[];if("m"!==n[0].type.toLowerCase())throw new Error("Invalid SVG - every new path must start with an M or m.");const e={p:[0,0]},t=[];let r,o=[];for(let s=0;s<n.length;s++){const i=n[s],c=i.type.toLowerCase();if(e.vals=i.values,i.type===c)if("v"===c)e.vals[0]+=e.p[1];else if("a"===c)e.vals[5]+=e.p[0],e.vals[6]+=e.p[1];else for(let n=0;n<e.vals.length;n++)e.vals[n]+=e.p[n%2];if("m"===c){o.length&&("z"!==r&&o.push(z(e)),t.push(o),o=[]),e.initialPoint=e.p=e.vals,r=c;continue}const l=W[c];if(!l)throw new Error("Invalid SVG - command not recognized.");const u=l(e);e.p=u[u.length-1],o.push(u),r=c}return o.length>0&&("z"!==r&&o.push(z(e)),t.push(o)),t}(function(n){if(!n.length)return[];const e=new Z(n),t=[];if(!e.initialCommandIsMoveTo())throw new Error("Path must start with m or M");for(;e.hasMoreData();)t.push(e.parseSegment());return t}(o)):o;let I=1;if(s/i>4){const n=s/4;I=n/i,i=n}const _=i/n,p=K(s,i),v=$(s/_),m=2*$(J(l,p)/_/2),C=function(n,e,r,o){const{gl:s,programs:i}=n;if(i[e])return i[e];const c=s.createProgram(),l=t(s,"#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",s.VERTEX_SHADER),u=t(s,o,s.FRAGMENT_SHADER);return s.attachShader(c,l),s.attachShader(c,u),s.linkProgram(c),i[e]={gl:s,program:c,attributes:{},uniforms:{},uniformBlocks:{},vertexShader:l,fragmentShader:u},i[e]}(r,`main${v}-${m}`,0,function(t,r){const o=e[1024*t+r];if(void 0!==o)return o;const s=`#version 300 es\n\nprecision highp float;\n\nuniform float uMaxDistance;\nuniform float uExponent;\nuniform highp sampler2D uSegs;\nuniform highp isampler2D uCloseCellIdxs;\nuniform highp isampler2D uCrossCellIdxs;\nuniform int uIncl;  // bit 0 -> incl inside, bit 1 -> incl outside\n\nuniform SegIdxRangePerCellBlock {\n    ivec4 uSegIdxRangePerCell[${(n+2*r)*(t+2*r)/2}];\n};\nuniform SegIdxRangePerStripBlock {\n    ivec4 uSegIdxRangePerStrip[16];\n};\n\nin vec2 vXY;\nflat in int instanceId;\nflat in ivec2 closeCellIdxRange;\nflat in ivec2 crossCellIdxRange;\nout vec4 FragColor;\n\n\nfloat absDistToSegment(vec2 point, vec2 lineA, vec2 lineB) {\n    vec2 lineDir = lineB - lineA;\n    float lenSq = dot(lineDir, lineDir);\n    float t = clamp(dot(point - lineA, lineDir) / lenSq, 0.0, 1.0);\n    vec2 linePt = lineA + t * lineDir;\n\n    return distance(point, linePt);\n}\n\n\nvoid main() {\n    ///////////////////////////////////////////////////////////////////////////\n    // Project a ray to the left to check if it crosses the segment in order\n    // to find the fragment's winding number to determine whether fragment\n    // is inside or outside the shape.\n\n    int crossIdxS = crossCellIdxRange.x;\n    int crossLen = crossCellIdxRange.y;\n    float winds = 0.0;\n    // Iterate over all relevant cell indexes\n    for (int i = crossIdxS; i < crossIdxS + crossLen; i++) {\n        int crossIdx = texelFetch(uCrossCellIdxs, ivec2(i%256, i/256), 0).x;\n\n        bool isEven = crossIdx % 2 == 0;\n\n        ivec4 uSegIdxRange = uSegIdxRangePerCell[crossIdx / 2];\n        int segIdx = isEven ? uSegIdxRange.x : uSegIdxRange.z;\n        int segLen = isEven ? uSegIdxRange.y : uSegIdxRange.w;\n\n        for (int j = segIdx; j < segIdx + segLen; j++) {\n            // Fetch segment from texture\n            vec4 seg = texelFetch(uSegs, ivec2(j, 0), 0);\n\n            // line segment's min-y is excluded\n            bool crossing =\n                (seg.y > vXY.y != seg.w > vXY.y) &&\n                (vXY.x > (seg.z - seg.x)*(vXY.y - seg.y) / (seg.w - seg.y) + seg.x);\n\n            bool crossingUp = seg.y < seg.w;\n\n            winds += crossing ? (crossingUp ? 1.0 : -1.0) : 0.0;\n        }\n    }\n\n    {\n        bool isEven = (instanceId % 32) % 2 == 0;\n\n        ivec4 uSegIdxRange = uSegIdxRangePerStrip[(instanceId % 32) / 2];\n        int segIdx = isEven ? uSegIdxRange.x : uSegIdxRange.z;\n        int segLen = isEven ? uSegIdxRange.y : uSegIdxRange.w;\n\n        for (int j = segIdx; j < segIdx + segLen; j++) {\n            // Fetch segment from texture\n            vec4 seg = texelFetch(uSegs, ivec2(j, 0), 0);\n\n            // line segment's min-y is excluded\n            bool crossing =\n                (seg.y > vXY.y != seg.w > vXY.y) &&\n                (vXY.x > (seg.z - seg.x)*(vXY.y - seg.y) / (seg.w - seg.y) + seg.x);\n\n            bool crossingUp = seg.y < seg.w;\n\n            winds += crossing ? (crossingUp ? 1.0 : -1.0) : 0.0;\n        }\n    }\n\n\n    bool inside = winds != 0.0;\n    ///////////////////////////////////////////////////////////////////////////\n\n    ///////////////////////////////////////////////////////////////////////////\n    float res = 1.0;  // sdf result\n\n    if ((inside && (uIncl % 2 != 0)) || (!inside && (uIncl > 1))) {\n        int cellIdxS = closeCellIdxRange.x;\n        int cellLen = closeCellIdxRange.y;\n        // Iterate over all relevant cell indexes\n        for (int i = cellIdxS; i < cellIdxS + cellLen; i++) {\n            int cellIdx = texelFetch(uCloseCellIdxs, ivec2(i%256, i/256), 0).x;\n\n            bool isEven = cellIdx % 2 == 0;\n            ivec4 uSegIdxRange = uSegIdxRangePerCell[cellIdx / 2];\n            int segIdx = isEven ? uSegIdxRange.x : uSegIdxRange.z;\n            int segLen = isEven ? uSegIdxRange.y : uSegIdxRange.w;\n\n            for (int j = segIdx; j < segIdx + segLen; j++) {\n                // Fetch segment from texture\n                vec4 seg = texelFetch(uSegs, ivec2(j, 0), 0);\n\n                // Find unsigned distance to the segment; only the nearest will be kept\n                float d = absDistToSegment(vXY, seg.xy, seg.zw);\n                // Apply exponential transform TODO\n                // val = pow(1.0 - clamp(d / uMaxDistance, 0.0, 1.0), uExponent) * 0.5;\n                float val = clamp(d / uMaxDistance, 0.0, 1.0);\n                res = min(res, val);\n            }\n        }\n    }\n    ///////////////////////////////////////////////////////////////////////////\n\n    // DEBUG!\n    // float alpha = ((instanceId + instanceId/32) % 2 == 0 ? 0.3 : 0.5);\n    float alpha = res == 1.0 ? 0.0 : 0.5;\n\n    float red = inside ? 0.2 : 0.8;\n    float green = abs(sin(50.0 * res));\n    float blue = 0.5;\n    // float alpha = inside ? 0.5 : 0.0;\n\n    FragColor = vec4(red, green, blue, alpha);\n}\n`;return e[1024*t+r]=s,s}(v,m)),{gl:S}=r;if(S.useProgram(C.program),V(r,C,x,c,l,u,f,g,s,i,v,_,a,d,m,I),Math.random()>.995){const n=S.getExtension("WEBGL_lose_context");n&&n.loseContext()}}function en(n){if(void 0===n)return;const{gl:e,programs:t,textures:r}=n;for(let n in t){const{attributes:r,fragmentShader:o,vertexShader:s,uniformBlocks:i,program:c}=t[n];for(let n in i){const{buf:t}=i[n];e.deleteBuffer(t)}for(let n in r){const{buf:t}=r[n];e.deleteBuffer(t)}e.deleteShader(o),e.deleteShader(s),e.deleteProgram(c)}for(let n in r){const{tex:t}=r[n];e.deleteTexture(t)}}const tn=new WeakMap;function rn(n){{const e=tn.get(n);if(e)return e}const e={},t={},r={gl:n,textures:t,programs:e};return n.canvas.addEventListener("webglcontextlost",o=>{on(e),on(t),tn.delete(n),r.onContextLoss?.(o)},!1),tn.set(n,r),r}function on(n){Object.keys(n).forEach(e=>{delete n[e]})}export{en as freeGlContext,nn as generateSdf,rn as getWebGlContext};
+const n=32,e={};function t(n,e,t){const r=n.createShader(t);return n.shaderSource(r,e),n.compileShader(r),r}function r(n,e,t){const{gl:r,textures:o}=n;r.activeTexture(r.TEXTURE0+e);let s=o[t];return s?r.bindTexture(r.TEXTURE_2D,s.tex):(s=o[t]={tex:r.createTexture()},r.bindTexture(r.TEXTURE_2D,s.tex),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_MIN_FILTER,r.NEAREST),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_MAG_FILTER,r.NEAREST),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_WRAP_S,r.CLAMP_TO_EDGE),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_WRAP_T,r.CLAMP_TO_EDGE)),s}const{BYTE:o,UNSIGNED_BYTE:s,SHORT:i,UNSIGNED_SHORT:l,INT:c,UNSIGNED_INT:u,FLOAT:a,HALF_FLOAT:d,INT_2_10_10_10_REV:f,UNSIGNED_INT_2_10_10_10_REV:g}=WebGL2RenderingContext;function h(n){return(e,t,r)=>{const{gl:o,uniformBlocks:s,program:i}=n;let l=s[e];if(void 0===s[e]){const n=o.getUniformBlockIndex(i,e);o.uniformBlockBinding(i,n,t);const r=o.createBuffer();o.bindBuffer(o.UNIFORM_BUFFER,r),l={blockName:e,blockIndex:n,buf:r},s[e]=l}else o.bindBuffer(o.UNIFORM_BUFFER,l.buf);const{buf:c}=l;o.bufferData(o.UNIFORM_BUFFER,r,o.STATIC_DRAW),o.bindBufferBase(o.UNIFORM_BUFFER,t,c)}}function x(n){const e=n[0][0],t=n[0][1];for(let r=1;r<n.length;r++)if(e!==n[r][0]||t!==n[r][1])return!1;return!0}function I(n,e){if(0===e)return n[0];if(1===e)return n[n.length-1];if(4===n.length){const[[t,r],[o,s],[i,l],[c,u]]=n,a=t+(o-t)*e,d=o+(i-o)*e,f=a+(d-a)*e,g=r+(s-r)*e,h=s+(l-s)*e,x=g+(h-g)*e;return[f+(d+(i+(c-i)*e-d)*e-f)*e,x+(h+(l+(u-l)*e-h)*e-x)*e]}if(3===n.length){const[[t,r],[o,s],[i,l]]=n,c=t+(o-t)*e,u=r+(s-r)*e;return[c+(o+(i-o)*e-c)*e,u+(s+(l-s)*e-u)*e]}if(2===n.length){const[[t,r],[o,s]]=n;return[t+(o-t)*e,r+(s-r)*e]}if(1===n.length)return n[0];throw new Error("The given bezier curve must be of order <= 3.")}const{sqrt:_}=Math;function p(n,e){const t=n[0],r=n[1],o=e[0],s=e[1],i=r-s,l=o-t,c=t*s-o*r,u=_(i*i+l*l);return function(n){const e=n[0],o=n[1];return 0!==u?(i*e+l*o+c)/u:_((e-t)**2+(o-r)**2)}}{const n=[10,1];p([6,2],[6,2])(n)}function v(n,e,t){if(4===n.length)return function(n,e,t){return 0===e?1===t?n:function(n,e){const t=n[0],r=n[1],o=n[2],s=n[3],i=t[0],l=t[1],c=r[0],u=r[1],a=o[0],d=o[1],f=i-e*(i-c),g=c-e*(c-a),h=f-e*(f-g),x=l-e*(l-u),I=u-e*(u-d),_=x-e*(x-I);return[t,[f,x],[h,_],[h-e*(h-(g-e*(g-(a-e*(a-s[0]))))),_-e*(_-(I-e*(I-(d-e*(d-s[1])))))]]}(n,t):1===t?function(n,e){const t=n[0],r=n[1],o=n[2],s=n[3],i=t[0],l=t[1],c=r[0],u=r[1],a=o[0],d=o[1],f=i-e*(i-c),g=c-e*(c-a),h=a-e*(a-s[0]),x=f-e*(f-g),I=g-e*(g-h),_=l-e*(l-u),p=u-e*(u-d),v=d-e*(d-s[1]),m=_-e*(_-p),C=p-e*(p-v);return[[x-e*(x-I),m-e*(m-C)],[I,C],[h,v],s]}(n,e):function(n,e,t){const r=n[0],o=n[1],s=n[2],i=n[3],l=r[0],c=r[1],u=o[0],a=o[1],d=s[0],f=s[1],g=e*e,h=e*g,x=t*t,I=t*x,_=e*t,p=l-u,v=d-u,m=p+v,C=e*p,S=t*p,R=i[0]-l-3*v,E=c-a,T=f-a,b=E+T,P=e*E,w=t*E,A=i[1]-c-3*T;return[[h*R+(3*e*(e*m-p)+l),h*A+(3*e*(e*b-E)+c)],[_*(e*R+2*m)+(g*m+l-(S+2*C)),_*(e*A+2*b)+(g*b+c-(w+2*P))],[_*(t*R+2*m)+(x*m+l-(2*S+C)),_*(t*A+2*b)+(x*b+c-(2*w+P))],[I*R+(3*t*(t*m-p)+l),I*A+(3*t*(t*b-E)+c)]]}(n,e,t)}(n,e,t);if(3===n.length)return function(n,e,t){return 0===e?1===t?n:function(n,e){const t=n[0],r=n[1],o=n[2],s=t[0],i=t[1],l=r[0],c=r[1],u=e*e,a=s-l,d=i-c;return[t,[-e*a+s,-e*d+i],[u*(a+(o[0]-l))-(2*e*a-s),u*(d+(o[1]-c))-(2*e*d-i)]]}(n,t):1===t?function(n,e){const t=n[0],r=n[1],o=n[2],s=t[0],i=t[1],l=r[0],c=r[1],u=e*e,a=s-l,d=o[0]-l,f=i-c,g=o[1]-c;return[[u*(a+d)-(2*e*a-s),u*(f+g)-(2*e*f-i)],[e*d+l,e*g+c],o]}(n,e):function(n,e,t){const r=n[0],o=n[1],s=n[2],i=r[0],l=r[1],c=o[0],u=o[1],a=e*e,d=t*t,f=e*t,g=i-c,h=g+(s[0]-c),x=l-u,I=x+(s[1]-u);return[[a*h-(2*e*g-i),a*I-(2*e*x-l)],[f*h-(g*(t+e)-i),f*I-(x*(t+e)-l)],[d*h-(2*t*g-i),d*I-(2*t*x-l)]]}(n,e,t)}(n,e,t);throw new Error("The given bezier curve must be of order 2 or 3.")}function m(n,e){return[e[0]-n[0],e[1]-n[1]]}function C(n,e){return n[0]*e[0]+n[1]*e[1]}function S(n){const e=m(n[0],n[1]),t=m(n[1],n[3]),r=m(n[3],n[0]),o=m(n[0],n[2]),s=m(n[2],n[3]);return C(r,e)>0||C(t,r)>0||C(r,o)>0||C(s,r)>0}const{abs:R,max:E}=Math;function T(n){const e=p(n[0],n[3]),t=e(n[1]),r=e(n[2]);return(t*r<=0?4/9:3/4)*E(R(t),R(r))}function b(n){const e=m(n[0],n[1]),t=m(n[1],n[2]),r=m(n[2],n[0]);return C(r,e)>0||C(t,r)>0}const{abs:P}=Math;function w(n){if(n[0][0]===n[1][0]&&n[0][1]===n[1][1])return 0;const e=I(n,.5),t=p(n[0],n[2]);return P(t(e))}function A(n){const e=3===n.length?function(n){const e=[0],t=[1];for(;;){const r=e[e.length-1],o=t[t.length-1],s=v(n,r,o);if(!b(s)&&w(s)<=.5){if(e.push(t.pop()),1===o)return e;continue}const i=(r+o)/2;t.push(i)}}(n):function(n){const e=[0],t=[1];for(;;){const r=e[e.length-1],o=t[t.length-1],s=v(n,r,o);if(!S(s)&&T(s)<=.5){if(e.push(t.pop()),1===o)return e;continue}const i=(r+o)/2;t.push(i)}}(n),t=[];for(let r=0;r<e.length-1;r++){const o=I(n,e[r]),s=I(n,e[r+1]);t.push([o,s])}return t}function D(n){return Math.sqrt(n[0]*n[0]+n[1]*n[1])}const y=function(){const e=[{from:0,u:0,v:0}];for(let t=0;t<128;t++){e.push({from:t+.5,u:t+1,v:0}),e.push({from:t+.5,u:-t-1,v:0}),e.push({from:t+.5,u:0,v:t+1}),e.push({from:t+.5,u:0,v:-t-1});for(let r=0;r<n;r++){const n=D([.5+t,.5+r]),o=t+1,s=r+1;e.push({from:n,u:o,v:s}),0!==o&&e.push({from:n,u:-o,v:s}),0!==s&&e.push({from:n,u:o,v:-s}),0!==o&&0!==s&&e.push({from:n,u:-o,v:-s})}e.sort((n,e)=>n.from-e.from)}return e}(),{max:U,E:F}=Math;const{min:N,max:M,SQRT2:k}=Math;function L(e,t,r,o,s){const i=function(e,t,r,o,s){return function(i,l,c){let u=function(n){let e=function(n){let e=0,t=y.length-1,r=0;for(;e<=t;){r=e+t>>>1;const o=y[r].from;if(o===n)return r;n>o?e=r+1:t=r-1}return r}(n);if(n=U(0,n),0===e)return 0;for(;y[e].from===y[e-1].from;)e--;return e}((c-k*r)/r),a=Number.POSITIVE_INFINITY;for(;;){if(u>=y.length){a=r*(y[y.length-1].from-k);break}const{u:c,v:d,from:f}=y[u];if(r*f>o+k*r){a=r*(f-2*k);break}const g=c+i,h=d+l;if(g<0||g>=t+2*s||h<0||h>=n+2*s){u++;continue}const{lineSegs:x}=e[g][h];if(x.length>0){a=r*(f-k);break}u++}const{closeCells:d}=e[i][l];let f=M(0,u-1);for(;f<y.length;){const{from:c,u,v:g}=y[f];if(r*c>N(a,o)+2*k*r)break;const h=u+i,x=g+l;if(h<0||h>=t+2*s||x<0||x>=n+2*s){f++;continue}const{lineSegs:I}=e[h][x];I.length>0&&d.push((2*s+n)*h+x),f++}return a}}(e,t,r,o,s);let l=0,c=0;for(let e=s;e<t+s;e++){c=l;for(let t=s;t<n+s;t++)c=i(e,t,c),t===s&&(l=c)}}const{floor:B,ceil:O}=Math;function X(n,e,t,r,o,s){const i=r*s,[[l,c],[u,a]]=o,d=e+i,f=t+i,g=function(n,e){const[t,r]=n,[o,s]=t,[i,l]=r,[[c,u],[a,d]]=e,f=i-o,g=l-s,h=[];if(0!==f){const n=(c-o)/f;if(n>=0&&n<=1){const e=s+n*g;e>=u&&e<=d&&h.push({t:n,p:[c,e]})}const e=(a-o)/f;if(e>=0&&e<=1){const n=s+e*g;n>=u&&n<=d&&h.push({t:e,p:[a,n]})}}if(0!==g){const n=(u-s)/g;if(n>=0&&n<=1){const e=o+n*f;e>=c&&e<=a&&h.push({t:n,p:[e,u]})}const e=(d-s)/g;if(e>=0&&e<=1){const n=o+e*f;n>=c&&n<=a&&h.push({t:e,p:[n,d]})}}const x=new Set,I=h.filter(n=>{const{t:e}=n;return!x.has(e)&&(x.add(e),!0)});return I.sort((n,e)=>n.t-e.t).map(n=>n.p)}(o,[[-i,-i],[d,f]]),h=l>-i&&l<d&&c>-i&&c<f,x=u>-i&&u<d&&a>-i&&a<f;if(g.length<2&&!h&&!x)return;const I=u-l,_=a-c,p=u>l?r:-r,v=a>c?r:-r;let m=l,C=c,S=0;const R=p>0,E=v>0,T=R?B:O,b=E?B:O;for(;;){let e=r*T((m+p)/r),t=r*b((C+v)/r);const o=(e-l)/I,x=(t-c)/_,P=o<x&&0!==I||0===_,w=P?e:l+x*I,A=P?c+o*_:t;if((o>1||0===I)&&(x>1||0===_)){const e=B(u/r)+s,t=B(a/r)+s;n[e]?.[t]?.lineSegs.push([[m,C],[u,a]]);break}if(w<=-i||A<=-i||w>=d||A>=f){if(!h&&0===S){[m,C]=g[0],S++;continue}{const e=T(m/r)-(R?0:1)+s,t=b(C/r)-(E?0:1)+s,o=[[m,C],g[S]];n[e]?.[t]?.lineSegs.push(o);break}}const D=T(m/r)-(R?0:1)+s,y=b(C/r)-(E?0:1)+s;n[D]?.[y]?.lineSegs.push([[m,C],[w,A]]),m=w,C=A}}const j=256,{floor:G,ceil:Y}=Math;function Q(n,e,t){const r=e/n.length,[o,s]=t,i=function(n,e){const[t,r]=n,[o,s]=t,[i,l]=r,[c,u,a]=e,d=i-o,f=l-s,g=[],h=[];if(0!==d){const n=(c-o)/d;if(n>=0&&n<=1){const e=s+n*f;e>=u&&e<=a&&(g.push(n),h.push([c,e]))}}if(0!==f){const n=(u-s)/f;if(n>=0&&n<=1){const e=o+n*d;e<=c&&(g.push(n),h.push([e,u]))}const e=(a-s)/f;if(e>=0&&e<=1){const n=o+e*d;n<=c&&(g.push(e),h.push([n,a]))}}return 2===g.length?g[0]<g[1]?h:[h[1],h[0]]:h}(t,[0,0,e]),[l,c]=o,[u,a]=s,d=u-l,f=a-c,g=l<0&&c>0&&c<e,h=u<0&&a>0&&a<e;if(i.length<2&&!g&&!h&&(0!==l||0!==d||c<=0&&a<=0||c>=e&&a>=e))return;if(0===f)return;const x=a>c?r:-r;let I=l,_=c,p=0;const v=u>l,m=a>c,C=m?G:Y;for(;;){let t=v&&I<0||!v&&I>0?0:Number.NEGATIVE_INFINITY,o=r*C((_+x)/r);const u=(t-l)/d,a=(o-c)/f,h=u<a&&0!==d,S=h?0:l+a*d,R=h?c+u*f:o;if((u>1||0===d)&&a>1){const e=G(s[1]/r);n[e]?.push([[I,_],s]);break}if(S>=0&&(0!==l||0!==d)||R<=0||R>=e){if(!g&&0===p){[I,_]=i[0],p++;continue}{const e=C(_/r)-(m?0:1),t=[[I,_],i[p]];n[e]?.push(t);break}}const E=C(_/r)-(m?0:1);n[E]?.push([[I,_],[S,R]]),I=S,_=R}}function V(e,t,o,s,i,l,c,u,f,g,I,_,p,v,m,C){const{gl:S}=e,R=[],E=.03125,T=.03125;R.push(0,0,E,0,0,T),R.push(E,0,E,T,0,T);const b=new Float32Array(R),P=(w=t,(n,e,...t)=>{const{gl:r,uniforms:o}=w,s=o[e]||(o[e]=r.getUniformLocation(w.program,e));r[`uniform${n}`](s,...t)});var w;const D=function(n){return(e,t,r,o,s,i=0,l=0,c=0)=>{const{gl:u,attributes:f}=n,g=f[e]=f[e]??{buf:u.createBuffer(),loc:u.getAttribLocation(n.program,e),data:null},{loc:h,buf:x}=g;u.bindBuffer(u.ARRAY_BUFFER,x),r===a||r===d?u.vertexAttribPointer(h,t,r,!1,l,c):u.vertexAttribIPointer(h,t,r,l,c),u.enableVertexAttribArray(h),0!==i&&u.vertexAttribDivisor(h,i),s!==g.data&&(u.bufferData(u.ARRAY_BUFFER,s,o),g.data=s)}}(t),{lineSegPtCoords_Arr:y,segIdxs_PerCell_Range_Arr:U,closeCellIdxs_PerCell_Arr:F,closeCellIdxs_PerCell_Range_Arr:N,crossCellIdxs_PerCell_Arr:M,crossCellIdxs_perCell_Range_Arr:k,segIdxs_PerStrip_Range_Arr:B}=function(e,t,r,o,s,i,l,c=[0,0,t,r],u=1){const a=function(n,e,t,r){if(0===n[0]&&0===n[1]&&n[2]===e&&n[3]===t)return r;const[o,s,i,l]=n,c=e/i,u=t/l,a=[];for(let n=0;n<r.length;n++){const e=r[n],t=[];for(let n=0;n<e.length;n++){const r=e[n],i=[];for(let n=0;n<r.length;n++){const[e,t]=r[n],l=c*e-o,a=u*t-s;i.push([l,a])}t.push(i)}a.push(t)}return a}(c,t,r/u,e),d=function(n){let e=[];for(let t=0;t<n.length;t++){const r=n[t];for(let n=0;n<r.length;n++){const t=r[n];if(x(t))continue;if(2===t.length){e.push(t);continue}const o=A(t);e.push(...o.filter(n=>!x(n)))}}return e}(a),f=function(e,t){const r=[];for(let o=0;o<e+2*t;o++){const e=[];for(let r=0;r<n+2*t;r++)e.push({lineSegs:[],closeCells:[],crossingCells:[]});r.push(e)}return r}(o,l),g=new Array(n).fill(void 0).map(n=>[]);for(let n=0;n<d.length;n++){const e=d[n];X(f,t,r,s,e,l),Q(g,r,e)}L(f,o,s,i,l),function(e,t,r){for(let o=r;o<t+r;o++)for(let t=r;t<n+r;t++){const s=e[o][t].crossingCells;for(let i=r;i<=o;i++)0!==e[i][t].lineSegs.length&&s.push((n+2*r)*i+t)}}(f,o,l);const h=[],I=[],_=[],p=[],v=[],m=[];let C=0,S=0,R=0;for(let e=0;e<o+2*l;e++)for(let t=0;t<n+2*l;t++){const r=f[e][t];if(e>=l&&e<o+l&&t>=l&&t<n+l){const{closeCells:n,crossingCells:e}=r,t=e.length,o=n.length;v.push(...e),_.push(...n),m.push(C,t),p.push(S,o),C+=t,S+=o}const{lineSegs:s}=r,i=s.length;I.push(R,i),R+=i,h.push(...s.flat(2))}const E=[];for(let e=0;e<n;e++){const n=g[e],t=n.length;E.push([R,t]),R+=t,h.push(...n.flat(2))}for(;_.length%j!==0;)_.push(0);for(;v.length%j!==0;)v.push(0);for(;h.length%1024!=0;)h.push(0);const T=new Float32Array(h),b=new Int32Array(I),P=new Int32Array(p);return{lineSegPtCoords_Arr:T,segIdxs_PerCell_Range_Arr:b,closeCellIdxs_PerCell_Arr:new Int32Array(_),closeCellIdxs_PerCell_Range_Arr:P,crossCellIdxs_PerCell_Arr:new Int32Array(v),crossCellIdxs_perCell_Range_Arr:new Int32Array(m),segIdxs_PerStrip_Range_Arr:new Int32Array(E.flat())}}(o,I,_,p,v,i,m,s,C);D("aUV",2,S.FLOAT,S.STATIC_DRAW,b),D("aCrossIdxRangePerCell",2,S.INT,S.STATIC_DRAW,k,1),D("aCloseCellIdxRangePerCell",2,S.INT,S.STATIC_DRAW,N,1),P("2f","uWidthHeight",I,_),P("1f","uMaxDistance",i),P("1i","uIncl",(l?1:0)+(c?2:0)),P("4f","uCustom",...u),h(t)("SegIdxRangePerCellBlock",0,U),h(t)("SegIdxRangePerStripBlock",1,B),r(e,0,"segs"),S.texImage2D(S.TEXTURE_2D,0,S.RGBA32F,j,y.length/4/j,0,S.RGBA,S.FLOAT,y);const O=S.getUniformLocation(t.program,"uSegs");S.uniform1i(O,0),r(e,1,"closeCellIdxsPerCell"),S.texImage2D(S.TEXTURE_2D,0,S.R32I,j,F.length/j,0,S.RED_INTEGER,S.INT,F);const G=S.getUniformLocation(t.program,"uCloseCellIdxs");S.uniform1i(G,1),r(e,2,"crossCellIdxsPerCell"),S.texImage2D(S.TEXTURE_2D,0,S.R32I,j,M.length/j,0,S.RED_INTEGER,S.INT,M);const Y=S.getUniformLocation(t.program,"uCrossCellIdxs");S.uniform1i(Y,2),C>1&&(S.enable(S.SCISSOR_TEST),S.scissor(f,g,I,_/C)),S.viewport(f,g,I,_),S.drawArraysInstanced(S.TRIANGLES,0,6,p*n),C>1&&S.disable(S.SCISSOR_TEST)}function z(n){const e=[n.p,n.initialPoint];return n.prev2ndCubicControlPoint=void 0,n.prev2ndQuadraticControlPoint=void 0,e}const H={c:function(n){const e=[n.p,[n.vals[0],n.vals[1]],[n.vals[2],n.vals[3]],[n.vals[4],n.vals[5]]];return n.prev2ndCubicControlPoint=e[2],n.prev2ndQuadraticControlPoint=void 0,e},h:function(n){const e=[n.p,[n.vals[0],n.p[1]]];return n.prev2ndCubicControlPoint=void 0,n.prev2ndQuadraticControlPoint=void 0,e},l:function(n){const e=[n.p,n.vals];return n.prev2ndCubicControlPoint=void 0,n.prev2ndQuadraticControlPoint=void 0,e},q:function(n){const e=[n.vals[0],n.vals[1]],t=[n.vals[2],n.vals[3]];return n.prev2ndCubicControlPoint=void 0,n.prev2ndQuadraticControlPoint=e,[n.p,e,t]},s:function(n){const e=n.prev2ndCubicControlPoint?[n.p[0]-n.prev2ndCubicControlPoint[0]+n.p[0],n.p[1]-n.prev2ndCubicControlPoint[1]+n.p[1]]:n.p,t=[n.p,e,[n.vals[0],n.vals[1]],[n.vals[2],n.vals[3]]];return n.prev2ndCubicControlPoint=t[2],n.prev2ndQuadraticControlPoint=void 0,t},t:function(n){const e=n.prev2ndQuadraticControlPoint?[n.p[0]-n.prev2ndQuadraticControlPoint[0]+n.p[0],n.p[1]-n.prev2ndQuadraticControlPoint[1]+n.p[1]]:n.p,t=[n.vals[0],n.vals[1]];return n.prev2ndCubicControlPoint=void 0,n.prev2ndQuadraticControlPoint=e,[n.p,e,t]},v:function(n){const e=[n.p,[n.p[0],n.vals[0]]];return n.prev2ndCubicControlPoint=void 0,n.prev2ndQuadraticControlPoint=void 0,e},z};function W(n){let e=0,t=0,r=1,o=0,s=1,i=1;const l=n._currentIndex;if(n._skipOptionalSpaces(),n._currentIndex<n._endIndex&&"+"===n._string[n._currentIndex]?n._currentIndex+=1:n._currentIndex<n._endIndex&&"-"===n._string[n._currentIndex]&&(n._currentIndex+=1,s=-1),n._currentIndex===n._endIndex||(n._string[n._currentIndex]<"0"||n._string[n._currentIndex]>"9")&&"."!==n._string[n._currentIndex])throw new Error("The first character of a number must be one of [0-9+-.].");const c=n._currentIndex;for(;n._currentIndex<n._endIndex&&n._string[n._currentIndex]>="0"&&n._string[n._currentIndex]<="9";)n._currentIndex+=1;if(n._currentIndex!==c){let e=n._currentIndex-1,r=1;for(;e>=c;)t+=r*(Number(n._string[e])-0),e-=1,r*=10}if(n._currentIndex<n._endIndex&&"."===n._string[n._currentIndex]){if(n._currentIndex+=1,n._currentIndex>=n._endIndex||n._string[n._currentIndex]<"0"||n._string[n._currentIndex]>"9")throw new Error("There must be a least one digit following the .");for(;n._currentIndex<n._endIndex&&n._string[n._currentIndex]>="0"&&n._string[n._currentIndex]<="9";)r*=10,o+=Number(n._string.charAt(n._currentIndex))/r,n._currentIndex+=1}if(n._currentIndex!==l&&n._currentIndex+1<n._endIndex&&("e"===n._string[n._currentIndex]||"E"===n._string[n._currentIndex])&&"x"!==n._string[n._currentIndex+1]&&"m"!==n._string[n._currentIndex+1]){if(n._currentIndex+=1,"+"===n._string[n._currentIndex]?n._currentIndex+=1:"-"===n._string[n._currentIndex]&&(n._currentIndex+=1,i=-1),n._currentIndex>=n._endIndex||n._string[n._currentIndex]<"0"||n._string[n._currentIndex]>"9")throw new Error("There must be an exponent.");for(;n._currentIndex<n._endIndex&&n._string[n._currentIndex]>="0"&&n._string[n._currentIndex]<="9";)e*=10,e+=Number(n._string[n._currentIndex]),n._currentIndex+=1}let u=t+o;if(u*=s,e&&(u*=Math.pow(10,i*e)),l===n._currentIndex)throw new Error("Internal error: startIndex === source._currentIndex");return n._skipOptionalSpacesOrDelimiter(),u}const q={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"};class Z{_string;_currentIndex;_endIndex;_prevCommand;constructor(n){this._string=n,this._currentIndex=0,this._endIndex=this._string.length,this._prevCommand=void 0,this._skipOptionalSpaces()}parseSegment(){const n=this._string[this._currentIndex];let e,t=q[n];if(void 0===t){if(void 0===this._prevCommand)throw new Error("Implicit command not allowed for first commands.");if(!("+"===n||"-"===n||"."===n||n>="0"&&n<="9")||"Z"===this._prevCommand)throw new Error("Remaining coordinates not found for implicit command");t="M"===this._prevCommand?"L":"m"===this._prevCommand?"l":this._prevCommand}else this._currentIndex+=1;this._prevCommand=t;const r=t.toUpperCase();if("H"===r||"V"===r?e=[W(this)]:"M"===r||"L"===r||"T"===r?e=[W(this),W(this)]:"S"===r||"Q"===r?e=[W(this),W(this),W(this),W(this)]:"C"===r?e=[W(this),W(this),W(this),W(this),W(this),W(this)]:"A"===r?e=[W(this),W(this),W(this),this._parseArcFlag(),this._parseArcFlag(),W(this),W(this)]:"Z"===r&&(this._skipOptionalSpaces(),e=[]),void 0===e)throw new Error("Unknown command");return{type:t,values:e}}hasMoreData(){return this._currentIndex<this._endIndex}initialCommandIsMoveTo(){if(!this.hasMoreData())return!0;const n=q[this._string[this._currentIndex]];return"M"===n||"m"===n}_isCurrentSpace(){const n=this._string[this._currentIndex];return n<=" "&&(" "===n||"\n"===n||"\t"===n||"\r"===n||"\f"===n)}_skipOptionalSpaces(){for(;this._currentIndex<this._endIndex&&this._isCurrentSpace();)this._currentIndex+=1;return this._currentIndex<this._endIndex}_skipOptionalSpacesOrDelimiter(){return!(this._currentIndex<this._endIndex&&!this._isCurrentSpace()&&","!==this._string[this._currentIndex])&&(this._skipOptionalSpaces()&&this._currentIndex<this._endIndex&&","===this._string[this._currentIndex]&&(this._currentIndex+=1,this._skipOptionalSpaces()),this._currentIndex<this._endIndex)}_parseArcFlag(){if(this._currentIndex>=this._endIndex)throw new Error("Unable to parse arc flag");let n;const e=this._string[this._currentIndex];if(this._currentIndex+=1,"0"===e)n=0;else{if("1"!==e)throw new Error("Unable to parse arc flag - arc flag must be 0 or 1");n=1}return this._skipOptionalSpacesOrDelimiter(),n}}const{ceil:$,min:J,max:K}=Math;function nn(r,o,s,i,l,c=0,u=0,a,d=!0,f=!0,g,h=0){const x="string"==typeof o?function(n){if(0===n.length)return[];if("m"!==n[0].type.toLowerCase())throw new Error("Invalid SVG - every new path must start with an M or m.");const e={p:[0,0]},t=[];let r,o=[];for(let s=0;s<n.length;s++){const i=n[s],l=i.type.toLowerCase();if(e.vals=i.values,i.type===l)if("v"===l)e.vals[0]+=e.p[1];else if("a"===l)e.vals[5]+=e.p[0],e.vals[6]+=e.p[1];else for(let n=0;n<e.vals.length;n++)e.vals[n]+=e.p[n%2];if("m"===l){o.length&&("z"!==r&&o.push(z(e)),t.push(o),o=[]),e.initialPoint=e.p=e.vals,r=l;continue}const c=H[l];if(!c)throw new Error("Invalid SVG - command not recognized.");const u=c(e);e.p=u[u.length-1],o.push(u),r=l}return o.length>0&&("z"!==r&&o.push(z(e)),t.push(o)),t}(function(n){if(!n.length)return[];const e=new Z(n),t=[];if(!e.initialCommandIsMoveTo())throw new Error("Path must start with m or M");for(;e.hasMoreData();)t.push(e.parseSegment());return t}(o)):o;let I=1;if(i/l>4){const n=i/4;I=n/l,l=n}const _=l/n,p=K(i,l),v=$(i/_),m=2*$(J(a,p)/_/2),C=function(n,e,r,o){const{gl:s,programs:i}=n;if(i[e])return i[e];const l=s.createProgram(),c=t(s,"#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",s.VERTEX_SHADER),u=t(s,o,s.FRAGMENT_SHADER);return s.attachShader(l,c),s.attachShader(l,u),s.linkProgram(l),i[e]={gl:s,program:l,attributes:{},uniforms:{},uniformBlocks:{},vertexShader:c,fragmentShader:u},i[e]}(r,`main${v}-${m}`,0,function(t,r){const o=e[1024*t+r];if(void 0!==o)return o;const s=`#version 300 es\n\nprecision highp float;\n\nuniform float uMaxDistance;\nuniform highp sampler2D uSegs;\nuniform highp isampler2D uCloseCellIdxs;\nuniform highp isampler2D uCrossCellIdxs;\nuniform int uIncl;  // bit 0 -> incl inside, bit 1 -> incl outside\n\nuniform SegIdxRangePerCellBlock {\n    ivec4 uSegIdxRangePerCell[${(n+2*r)*(t+2*r)/2}];\n};\nuniform SegIdxRangePerStripBlock {\n    ivec4 uSegIdxRangePerStrip[16];\n};\n\nin vec2 vXY;\nflat in int instanceId;\nflat in ivec2 closeCellIdxRange;\nflat in ivec2 crossCellIdxRange;\nout vec4 FragColor;\n\n\nfloat absDistToSegment(vec2 point, vec2 lineA, vec2 lineB) {\n    vec2 lineDir = lineB - lineA;\n    float lenSq = dot(lineDir, lineDir);\n    float t = clamp(dot(point - lineA, lineDir) / lenSq, 0.0, 1.0);\n    vec2 linePt = lineA + t*lineDir;\n\n    return distance(point, linePt);\n}\n\n\nvoid main() {\n    ///////////////////////////////////////////////////////////////////////////\n    // Project a ray to the left to check if it crosses the segment in order\n    // to find the fragment's winding number to determine whether fragment\n    // is inside or outside the shape.\n\n    int crossIdxS = crossCellIdxRange.x;\n    int crossLen = crossCellIdxRange.y;\n    float winds = 0.0;\n    // Iterate over all relevant cell indexes\n    for (int i = crossIdxS; i < crossIdxS + crossLen; i++) {\n        int crossIdx = texelFetch(uCrossCellIdxs, ivec2(i%256, i/256), 0).x;\n\n        ivec2 uSegIdxRange = crossIdx % 2 == 0\n            ? uSegIdxRangePerCell[crossIdx / 2].xy\n            : uSegIdxRangePerCell[crossIdx / 2].zw;\n\n        int segIdx = uSegIdxRange.x;\n        int segLen = uSegIdxRange.y;\n\n        for (int j = segIdx; j < segIdx + segLen; j++) {\n            // Fetch segment from texture\n            vec4 seg = texelFetch(uSegs, ivec2(j%256, j/256), 0);\n\n            // line segment's min-y is excluded\n            bool crossing =\n                (seg.y > vXY.y != seg.w > vXY.y) &&\n                (vXY.x > (seg.z - seg.x)*(vXY.y - seg.y) / (seg.w - seg.y) + seg.x);\n\n            bool crossingUp = seg.y < seg.w;\n\n            winds += crossing ? (crossingUp ? 1.0 : -1.0) : 0.0;\n        }\n    }\n\n    {\n        int cellIdx = (instanceId % 32);\n\n        bool isEven = cellIdx % 2 == 0;\n\n        ivec4 uSegIdxRange = uSegIdxRangePerStrip[cellIdx / 2];\n        int segIdx = isEven ? uSegIdxRange.x : uSegIdxRange.z;\n        int segLen = isEven ? uSegIdxRange.y : uSegIdxRange.w;\n        \n\n        for (int j = segIdx; j < segIdx + segLen; j++) {\n            // Fetch segment from texture\n            vec4 seg = texelFetch(uSegs, ivec2(j%256, j/256), 0);\n\n            // line segment's min-y is excluded\n            bool crossing =\n                (seg.y > vXY.y != seg.w > vXY.y) &&\n                (vXY.x > (seg.z - seg.x)*(vXY.y - seg.y) / (seg.w - seg.y) + seg.x);\n\n            bool crossingUp = seg.y < seg.w;\n\n            winds += crossing ? (crossingUp ? 1.0 : -1.0) : 0.0;\n        }\n    }\n\n\n    bool inside = winds != 0.0;\n    ///////////////////////////////////////////////////////////////////////////\n\n    ///////////////////////////////////////////////////////////////////////////\n    float res = 1.0;  // sdf result\n\n    if ((inside && (uIncl % 2 != 0)) || (!inside && (uIncl > 1))) {\n        int cellIdxS = closeCellIdxRange.x;\n        int cellLen = closeCellIdxRange.y;\n        // Iterate over all relevant cell indexes\n        for (int i = cellIdxS; i < cellIdxS + cellLen; i++) {\n            int cellIdx = texelFetch(uCloseCellIdxs, ivec2(i%256, i/256), 0).x;\n\n            ivec2 uSegIdxRange = cellIdx % 2 == 0\n                ? uSegIdxRangePerCell[cellIdx / 2].xy\n                : uSegIdxRangePerCell[cellIdx / 2].zw;\n\n            int segIdx = uSegIdxRange.x;\n            int segLen = uSegIdxRange.y;\n\n            for (int j = segIdx; j < segIdx + segLen; j++) {\n                // Fetch segment from texture\n                vec4 seg = texelFetch(uSegs, ivec2(j%256, j/256), 0);\n\n                // Find unsigned distance to the segment; only the nearest will be kept\n                float d = absDistToSegment(vXY, seg.xy, seg.zw);\n                // Apply exponential transform\n                float val = clamp(d / uMaxDistance, 0.0, 1.0);\n\n                res = min(res, val);\n            }\n        }\n    }\n    ///////////////////////////////////////////////////////////////////////////\n\n    // DEBUG!\n    // float alpha = ((instanceId + instanceId/32) % 2 == 0 ? 0.3 : 0.5);\n\n\n    float exponent = 2;\n    res = pow(1.0 - val, exponent) * 0.5;\n\n    float alpha = res == 1.0 ? 0.0 : 0.5;\n    float red = inside ? 0.2 : 0.8;\n    float green = abs(sin(25.0 * res));\n    float blue = 0.5;\n\n    FragColor = vec4(red, green, blue, alpha);\n}\n`;return e[1024*t+r]=s,s}(v,m)),{gl:S}=r;S.useProgram(C.program),V(r,C,x,s,a,d,f,g,c,u,i,l,v,_,m,I)}function en(n){if(void 0===n)return;const{gl:e,programs:t,textures:r}=n;for(let n in t){const{attributes:r,fragmentShader:o,vertexShader:s,uniformBlocks:i,program:l}=t[n];for(let n in i){const{buf:t}=i[n];e.deleteBuffer(t)}for(let n in r){const{buf:t}=r[n];e.deleteBuffer(t)}e.deleteShader(o),e.deleteShader(s),e.deleteProgram(l)}for(let n in r){const{tex:t}=r[n];e.deleteTexture(t)}}const tn=new WeakMap;function rn(n){{const e=tn.get(n);if(e)return e}const e={},t={},r={gl:n,textures:t,programs:e};return n.canvas.addEventListener("webglcontextlost",o=>{on(e),on(t),tn.delete(n),r.onContextLoss?.(o)},!1),tn.set(n,r),r}function on(n){Object.keys(n).forEach(e=>{delete n[e]})}export{en as freeGlContext,nn as generateSdf,rn as getWebGlContext};

package/node/debug-shaders.d.ts

@@ -0,0 +1,9 @@
+/**
+ *
+ * @param gl
+ * @param type `gl.VERTEX_SHADER | gl.FRAGMENT_SHADER`
+ * @param shaderStr
+ */
+declare function debugGlsl(gl: WebGL2RenderingContext, type: typeof gl.VERTEX_SHADER | typeof gl.FRAGMENT_SHADER, shaderStr: string): void;
+declare function debugShaders(gl: WebGL2RenderingContext): void;
+export { debugShaders, debugGlsl };

package/node/debug-shaders.js

@@ -0,0 +1,28 @@
+import { getFragment } from "./shaders/fragment.js";
+import { vertex } from "./shaders/vertex.js";
+/**
+ *
+ * @param gl
+ * @param type `gl.VERTEX_SHADER | gl.FRAGMENT_SHADER`
+ * @param shaderStr
+ */
+function debugGlsl(gl, type, shaderStr) {
+    const s = gl.createShader(type);
+    gl.shaderSource(s, shaderStr);
+    gl.compileShader(s);
+    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
+        throw new Error(gl.getShaderInfoLog(s));
+    }
+}
+function debugShaders(gl) {
+    try {
+        debugGlsl(gl, gl.VERTEX_SHADER, vertex);
+        debugGlsl(gl, gl.FRAGMENT_SHADER, getFragment(32, 4));
+    }
+    catch (e) {
+        console.log(e);
+        throw e;
+    }
+}
+export { debugShaders, debugGlsl };
+//# sourceMappingURL=debug-shaders.js.map

package/node/debug-shaders.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"debug-shaders.js","sourceRoot":"","sources":["../src/debug-shaders.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C;;;;;GAKG;AACH,SAAS,SAAS,CACV,EAA0B,EAC1B,IAAyD,EACzD,SAAiB;IAErB,MAAM,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAE,CAAC;IACjC,EAAE,CAAC,YAAY,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;IAC9B,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IACpB,IAAI,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC;QAC/C,MAAM,IAAI,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAE,CAAC,CAAC;IAC7C,CAAC;AACL,CAAC;AAGD,SAAS,YAAY,CACb,EAA0B;IAE9B,IAAI,CAAC;QACD,SAAS,CAAC,EAAE,EAAE,EAAE,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;QACxC,SAAS,CAAC,EAAE,EAAE,EAAE,CAAC,eAAe,EAAE,WAAW,CAAC,EAAE,EAAC,CAAC,CAAC,CAAC,CAAC;IACzD,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC;QACT,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QACf,MAAM,CAAC,CAAC;IACZ,CAAC;AACL,CAAC;AAGD,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,CAAA"}

package/node/generate-sdf.d.ts

@@ -20,5 +20,5 @@ import { GlContext } from './types/gl-context.js';
  * @param y the position where to draw, y-coordinate
  * @param channel TODO
  */
-declare function generateSdf(glContext: GlContext, bezierCurves_or_svgStr: (number[][])[][] | string, width: number, height: number, viewbox: [number, number, number, number], maxDistance: number, sdfExponent?: number, inclInside?: boolean, inclOutside?: boolean, x?: number, y?: number, channel?: number): void;
+declare function generateSdf(glContext: GlContext, bezierCurves_or_svgStr: (number[][])[][] | string, viewbox: [number, number, number, number], width: number, height: number, x: number | undefined, y: number | undefined, maxDistance: number, inclInside: boolean | undefined, inclOutside: boolean | undefined, customData: [number, number, number, number], channel?: number): void;
 export { generateSdf };

package/node/generate-sdf.js

@@ -6,7 +6,6 @@ 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 { debugShaders } from './debug-shaders.js';
 const { ceil, min, max } = Math;
 /**
  * Generates an sdf (signed distance field) from the given bezier curves,
@@ -29,7 +28,9 @@ const { ceil, min, max } = Math;
  * @param y the position where to draw, y-coordinate
  * @param channel TODO
  */
-function generateSdf(glContext, bezierCurves_or_svgStr, width, height, viewbox, maxDistance, sdfExponent = 1, inclInside = true, inclOutside = true, x = 0, y = 0, channel = 0) {
+function generateSdf(glContext, bezierCurves_or_svgStr, viewbox, width, height, x = 0, y = 0, maxDistance, inclInside = true, inclOutside = true, customData, 
+// TODO
+channel = 0) {
     const psss = typeof bezierCurves_or_svgStr === 'string'
         ? getPathsFromStr(bezierCurves_or_svgStr)
         : bezierCurves_or_svgStr;
@@ -49,14 +50,7 @@ function generateSdf(glContext, bezierCurves_or_svgStr, width, height, viewbox,
     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);
-    // testing!!
-    if (Math.random() > 0.995) {
-        const loseContextExt = gl.getExtension('WEBGL_lose_context');
-        if (loseContextExt) {
-            loseContextExt.loseContext();
-        }
-    }
+    mainProgram(glContext, programMain, psss, viewbox, maxDistance, inclInside, inclOutside, customData, x, y, width, height, colCount, cellSize, padCount, stretch);
 }
 export { generateSdf };
 //# sourceMappingURL=generate-sdf.js.map

package/node/generate-sdf.js.map

@@ -1 +1 @@
-{"version":3,"file":"generate-sdf.js","sourceRoot":"","sources":["../src/generate-sdf.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,+BAA+B,EAAE,MAAM,sCAAsC,CAAC;AAEvF,qDAAqD;AAErD,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AAGhC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAS,WAAW,CACZ,SAAoB,EACpB,sBAAiD,EACjD,KAAa,EACb,MAAc,EACd,OAAsC,EACtC,WAAmB,EACnB,WAAW,GAAG,CAAC,EACf,UAAU,GAAG,IAAI,EACjB,WAAW,GAAG,IAAI,EAClB,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EACZ,OAAO,GAAG,CAAC;IAEf,MAAM,IAAI,GAAG,OAAO,sBAAsB,KAAK,QAAQ;QACnD,CAAC,CAAC,eAAe,CAAC,sBAAsB,CAAC;QACzC,CAAC,CAAC,sBAAsB,CAAC;IAE7B,yCAAyC;IAEzC,IAAI,OAAO,GAAG,CAAC,CAAC;IAChB,MAAM,WAAW,GAAG,KAAK,GAAC,MAAM,CAAC;IACjC,IAAI,WAAW,GAAG,+BAA+B,EAAE,CAAC;QAChD,MAAM,CAAC,GAAG,KAAK,GAAC,+BAA+B,CAAC;QAChD,OAAO,GAAG,CAAC,GAAC,MAAM,CAAC;QACnB,MAAM,GAAG,CAAC,CAAC;IACf,CAAC;IAED,MAAM,QAAQ,GAAG,MAAM,GAAC,SAAS,CAAC;IAElC,MAAM,MAAM,GAAG,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAC,QAAQ,CAAC,CAAC;IAEtC,MAAM,QAAQ,GAAG,CAAC,GAAC,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,MAAM,CAAC,GAAC,QAAQ,GAAC,CAAC,CAAC,CAAC;IAE7D,MAAM,WAAW,GAAG,WAAW,CAC3B,SAAS,EAAE,OAAO,QAAQ,IAAI,QAAQ,EAAE,EACxC,MAAM,EAAE,WAAW,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAC1C,CAAC;IAEF,MAAM,EAAE,EAAE,EAAE,GAAG,SAAS,CAAC;IAEzB,+CAA+C;IAE/C,EAAE,CAAC,UAAU,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACnC,WAAW,CACP,SAAS,EAAE,WAAW,EAAE,IAAI,EAC5B,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAChE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,CACvD,CAAC;IAEF,YAAY;IACZ,IAAI,IAAI,CAAC,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;QACxB,MAAM,cAAc,GAAG,EAAE,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC;QAC7D,IAAI,cAAc,EAAE,CAAC;YACjB,cAAc,CAAC,WAAW,EAAE,CAAC;QACjC,CAAC;IACL,CAAC;AACL,CAAC;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"generate-sdf.js","sourceRoot":"","sources":["../src/generate-sdf.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,+BAA+B,EAAE,MAAM,sCAAsC,CAAC;AAIvF,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AAGhC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAS,WAAW,CACZ,SAAoB,EACpB,sBAAiD,EACjD,OAAsC,EACtC,KAAa,EACb,MAAc,EACd,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EACZ,WAAmB,EACnB,UAAU,GAAG,IAAI,EACjB,WAAW,GAAG,IAAI,EAClB,UAAyC;AAEzC,OAAO;AACP,OAAO,GAAG,CAAC;IAEf,MAAM,IAAI,GAAG,OAAO,sBAAsB,KAAK,QAAQ;QACnD,CAAC,CAAC,eAAe,CAAC,sBAAsB,CAAC;QACzC,CAAC,CAAC,sBAAsB,CAAC;IAE7B,yCAAyC;IAEzC,IAAI,OAAO,GAAG,CAAC,CAAC;IAChB,MAAM,WAAW,GAAG,KAAK,GAAC,MAAM,CAAC;IACjC,IAAI,WAAW,GAAG,+BAA+B,EAAE,CAAC;QAChD,MAAM,CAAC,GAAG,KAAK,GAAC,+BAA+B,CAAC;QAChD,OAAO,GAAG,CAAC,GAAC,MAAM,CAAC;QACnB,MAAM,GAAG,CAAC,CAAC;IACf,CAAC;IAED,MAAM,QAAQ,GAAG,MAAM,GAAC,SAAS,CAAC;IAElC,MAAM,MAAM,GAAG,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAC,QAAQ,CAAC,CAAC;IAEtC,MAAM,QAAQ,GAAG,CAAC,GAAC,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,MAAM,CAAC,GAAC,QAAQ,GAAC,CAAC,CAAC,CAAC;IAE7D,MAAM,WAAW,GAAG,WAAW,CAC3B,SAAS,EAAE,OAAO,QAAQ,IAAI,QAAQ,EAAE,EACxC,MAAM,EAAE,WAAW,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAC1C,CAAC;IAEF,MAAM,EAAE,EAAE,EAAE,GAAG,SAAS,CAAC;IAEzB,+CAA+C;IAE/C,EAAE,CAAC,UAAU,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACnC,WAAW,CACP,SAAS,EAAE,WAAW,EACtB,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAC/D,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EACnB,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,CACxC,CAAC;AACN,CAAC;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/node/main-program.d.ts

@@ -1,4 +1,4 @@
 import { Program } from './types/program.js';
 import { GlContext } from './types/gl-context.js';
-declare function mainProgram(glContext: GlContext, programMain: Program, psss: number[][][][], viewbox: [number, number, number, number], maxDistance: number, sdfExponent: number | undefined, x: number, y: number, width: number, height: number, colCount: number, cellSize: number, inclInside: boolean, inclOutside: boolean, padCount: number, stretch: number): void;
+declare function mainProgram(glContext: GlContext, programMain: Program, psss: number[][][][], viewbox: [number, number, number, number], maxDistance: number, inclInside: boolean, inclOutside: boolean, customData: [number, number, number, number], x: number, y: number, width: number, height: number, colCount: number, cellSize: number, padCount: number, stretch: number): void;
 export { mainProgram };

package/node/main-program.js

@@ -8,7 +8,7 @@ import { ROW_COUNT } from './row-count.js';
 const SEG_TEX_INDEX = 0;
 const CELL_TEX_INDEX = 1;
 const CROSS_TEX_INDEX = 2;
-function mainProgram(glContext, programMain, psss, viewbox, maxDistance, sdfExponent = 1, x, y, width, height, colCount, cellSize, inclInside, inclOutside, padCount, stretch) {
+function mainProgram(glContext, programMain, psss, viewbox, maxDistance, inclInside, inclOutside, customData, x, y, width, height, colCount, cellSize, padCount, stretch) {
     const { gl } = glContext;
     const vertices = [];
     const x0 = 0;
@@ -33,18 +33,19 @@ function mainProgram(glContext, programMain, psss, viewbox, maxDistance, sdfExpo
     // Init/update uniforms
     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);
     ///////////////////////////////////////
     // Create buffer for line segment data
     useTexture(glContext, SEG_TEX_INDEX, 'segs');
-    gl.texImage2D(// really 1d
-    gl.TEXTURE_2D, 0, // level - irrelevant
+    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
+    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
@@ -56,11 +57,11 @@ function mainProgram(glContext, programMain, psss, viewbox, maxDistance, sdfExpo
     ///////////////////////////////////////////////
     // Create buffer for close cell indexes per cell
     useTexture(glContext, CELL_TEX_INDEX, 'closeCellIdxsPerCell');
-    gl.texImage2D(// really 1d
-    gl.TEXTURE_2D, 0, // level - irrelevant
+    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, 0, // border - whatever
+    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
     closeCellIdxs_PerCell_Arr // texture data
@@ -71,11 +72,10 @@ function mainProgram(glContext, programMain, psss, viewbox, maxDistance, sdfExpo
     ///////////////////////////////////////////////
     // Create buffer for crossing cell indexes per cell
     useTexture(glContext, CROSS_TEX_INDEX, 'crossCellIdxsPerCell');
-    gl.texImage2D(// really 1d
-    gl.TEXTURE_2D, 0, // level - irrelevant
+    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

package/node/main-program.js.map

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

package/node/prepare-buffers.js

@@ -43,30 +43,23 @@ function prepareBuffers(psss, width, height, colCount, cellSize, maxDistance, pa
                 j >= padCount && j < ROW_COUNT + padCount) {
                 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
             }
             //////////
             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 = [];
     for (let i = 0; i < ROW_COUNT; i++) {
@@ -75,17 +68,27 @@ function prepareBuffers(psss, width, height, colCount, cellSize, maxDistance, pa
         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());
     // testing

package/node/prepare-buffers.js.map

@@ -1 +1 @@
-{"version":3,"file":"prepare-buffers.js","sourceRoot":"","sources":["../src/prepare-buffers.ts"],"names":[],"mappings":"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"}
+{"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,UAAyC,CAAC,CAAC,EAAC,CAAC,EAAC,KAAK,EAAC,MAAM,CAAC,EAC3D,OAAO,GAAG,CAAC;IAEf,4EAA4E;IAC5E,MAAM,KAAK,GAAG,YAAY,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,GAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAEjE,MAAM,QAAQ,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,IAAI,GAAG,eAAe,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IACjD,MAAM,MAAM,GAAG,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAkB,CAAC,CAAC;IAEjF,KAAK,IAAI,CAAC,GAAC,CAAC,EAAE,CAAC,GAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACnC,MAAM,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;QACxB,2EAA2E;QAC3E,qBAAqB,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAE,uBAAuB;QAC7F,uBAAuB,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,CAAE,yBAAyB;IAC5E,CAAC;IAED,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAE,kBAAkB;IACpF,iBAAiB,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAE,qBAAqB;IACnE,4EAA4E;IAE5E,MAAM,OAAO,GAAa,EAAE,CAAC;IAC7B,MAAM,qBAAqB,GAAa,EAAE,CAAC;IAE3C,cAAc;IACd,MAAM,qBAAqB,GAAa,EAAE,CAAC;IAC3C,MAAM,2BAA2B,GAAa,EAAE,CAAC;IAEjD,iBAAiB;IACjB,MAAM,qBAAqB,GAAa,EAAE,CAAC;IAC3C,MAAM,2BAA2B,GAAa,EAAE,CAAC;IAEjD,4DAA4D;IAE5D,IAAI,EAAE,GAAG,CAAC,CAAC;IACX,IAAI,EAAE,GAAG,CAAC,CAAC;IACX,IAAI,EAAE,GAAG,CAAC,CAAC;IACX,KAAK,IAAI,CAAC,GAAC,CAAC,EAAE,CAAC,GAAC,QAAQ,GAAG,CAAC,GAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC;QACzC,KAAK,IAAI,CAAC,GAAC,CAAC,EAAE,CAAC,GAAC,SAAS,GAAG,CAAC,GAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC;YAC1C,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAExB,WAAW;YACX,IAAI,CAAC,IAAI,QAAQ,IAAI,CAAC,GAAG,QAAQ,GAAG,QAAQ;gBACxC,CAAC,IAAI,QAAQ,IAAI,CAAC,GAAG,SAAS,GAAG,QAAQ,EAAE,CAAC;gBAE5C,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;gBAE3C,MAAM,EAAE,GAAG,aAAa,CAAC,MAAM,CAAC;gBAChC,MAAM,EAAE,GAAG,UAAU,CAAC,MAAM,CAAC;gBAE7B,qBAAqB,CAAC,IAAI,CAAC,GAAG,aAAa,CAAC,CAAC;gBAC7C,qBAAqB,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,CAAC;gBAE1C,2BAA2B,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;gBACzC,2BAA2B,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;gBAEzC,EAAE,IAAI,EAAE,CAAC;gBACT,EAAE,IAAI,EAAE,CAAC;gBAET,sDAAsD;YAC1D,CAAC;YAED,UAAU;YACV,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;YAE1B,MAAM,EAAE,GAAG,QAAQ,CAAC,MAAM,CAAC;YAC3B,qBAAqB,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;YACnC,EAAE,IAAI,EAAE,CAAC;YACT,OAAO,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QACtC,CAAC;IACL,CAAC;IAED,4BAA4B;IAC5B,MAAM,sBAAsB,GAAsB,EAAE,CAAC;IACrD,KAAK,IAAI,CAAC,GAAC,CAAC,EAAE,CAAC,GAAC,SAAS,EAAE,CAAC,EAAE,EAAE,CAAC;QAC7B,MAAM,QAAQ,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;QAE3B,UAAU;QACV,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC;QAC1B,sBAAsB,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;QACrC,EAAE,IAAI,CAAC,CAAC;QACR,OAAO,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IACtC,CAAC;IAED,0DAA0D;IAC1D,OAAO,qBAAqB,CAAC,MAAM,GAAG,SAAS,KAAK,CAAC,EAAE,CAAC;QAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAAC,CAAC;IACzF,OAAO,qBAAqB,CAAC,MAAM,GAAG,SAAS,KAAK,CAAC,EAAE,CAAC;QAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAAC,CAAC;IACzF,OAAO,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,GAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;QAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAAC,CAAC;IAGjE,8DAA8D;IAC9D,MAAM,mBAAmB,GAAG,IAAI,YAAY,CAAC,OAAO,CAAC,CAAC;IACtD,MAAM,yBAAyB,GAAG,IAAI,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAExE,4BAA4B;IAC5B,MAAM,+BAA+B,GAAG,IAAI,UAAU,CAAC,2BAA2B,CAAC,CAAC;IACpF,MAAM,yBAAyB,GAAG,IAAI,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAExE,4BAA4B;IAC5B,MAAM,yBAAyB,GAAG,IAAI,UAAU,CAAC,qBAAqB,CAAC,CAAC;IACxE,MAAM,+BAA+B,GAAG,IAAI,UAAU,CAAC,2BAA2B,CAAC,CAAC;IAEpF,iCAAiC;IACjC,MAAM,0BAA0B,GAAG,IAAI,UAAU,CAAC,sBAAsB,CAAC,IAAI,EAAE,CAAC,CAAC;IAEjF,UAAU;IACV,6DAA6D;IAC7D,mBAAmB;IACnB,uCAAuC;IACvC,4BAA4B;IAC5B,gEAAgE;IAChE,oDAAoD;IAEpD,6CAA6C;IAC7C,QAAQ;IACR,kBAAkB;IAClB,OAAO;IACP,wCAAwC;IAExC,OAAO;QACH,mBAAmB;QACnB,yBAAyB;QACzB,yBAAyB,EAAE,+BAA+B;QAC1D,yBAAyB,EAAE,+BAA+B;QAC1D,0BAA0B;KAC7B,CAAA;AACL,CAAC;AAGD,OAAO,EAAE,cAAc,EAAE,CAAA"}

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/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/webgl-utils/get-web-gl-context.js

@@ -17,6 +17,7 @@ function getWebGlContext(gl) {
     const textures = {};
     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);

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,MAAM,SAAS,GAAc,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;IAExD,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,KAAK,CAAC,EAAE;QACnD,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"}
+{"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.6",
+    "version": "0.0.7",
     "author": {
         "name": "Floris Steenkamp"
     },

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,14 +36,16 @@ 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) {
 
     const psss = typeof bezierCurves_or_svgStr === 'string'
@@ -78,18 +80,11 @@ function generateSdf(
 
     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
     );
-
-    // testing!!
-    if (Math.random() > 0.995) {
-        const loseContextExt = gl.getExtension('WEBGL_lose_context');
-        if (loseContextExt) {
-            loseContextExt.loseContext();
-        }
-    }
 }
 
 

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) {
 
@@ -80,8 +82,8 @@ function mainProgram(
     // Init/update uniforms
     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);
@@ -89,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");
@@ -107,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
@@ -126,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

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());

package/src/shaders/fragment.ts

@@ -17,7 +17,6 @@ const main_Fragment =
 precision highp float;
 
 uniform float uMaxDistance;
-uniform float uExponent;
 uniform highp sampler2D uSegs;
 uniform highp isampler2D uCloseCellIdxs;
 uniform highp isampler2D uCrossCellIdxs;
@@ -41,7 +40,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);
 }
@@ -60,15 +59,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 =
@@ -82,15 +82,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 =
@@ -117,20 +120,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);
             }
         }
@@ -139,12 +144,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/src/svg/get-paths-from-str.ts

@@ -7,6 +7,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: string): number[][][][] {

package/src/svg/path-data-polyfill/source.ts

@@ -1,14 +1,12 @@
 import { parseNumber } from './parse-number.js';
 
 
-/** @hidden */
 const COMMAND_MAP: { [index:string]: string } = {
     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: string;
     _currentIndex: number;

package/src/svg/path-state.ts

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

package/src/webgl-utils/get-web-gl-context.ts

@@ -27,6 +27,8 @@ function getWebGlContext(
     const glContext: 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);