webgl2-sdf 0.0.7 → 0.0.9

package/node/shaders/fragment.js

@@ -1,7 +1,28 @@
 import { ROW_COUNT } from "../row-count.js";
 const cache = {};
-function getFragment(colCount, padCount) {
-    const fragment = cache[1024 * colCount + padCount];
+const GLSL_PATTERN1 = `
+    float exponent = uCustom.x;
+    float alpha = res >= 1.0 ? 0.0 : 0.5;
+    res = pow(1.0 - res, exponent);
+    float red = inside ? 0.2 : 0.8;
+    float green = abs(sin(25.0 * res));
+    // float green = step(0.5, fract(10.0 * res));
+    float blue = 0.5;
+`;
+const GLSL_DEFAULT = `
+    float exponent = uCustom.x;
+    float adj = 0.5*pow(1.0 - res, exponent);
+    res = inside ? 1.0 - adj : adj;
+    float red = res;
+    float green = res;
+    float blue = res;
+    float alpha = res;
+`;
+function getFragment(colCount, padCount, calcFragColorStr, hash) {
+    // `colCount` and `padCount` can take at most 8 bits and `has` 32 bits and
+    // we have at least 53 bits to play with so we're fine
+    const key = (2 ** 32) * (256 * colCount + padCount) + hash;
+    const fragment = cache[key];
     if (fragment !== undefined) {
         return fragment;
     }
@@ -14,7 +35,11 @@ uniform float uMaxDistance;
 uniform highp sampler2D uSegs;
 uniform highp isampler2D uCloseCellIdxs;
 uniform highp isampler2D uCrossCellIdxs;
-uniform int uIncl;  // bit 0 -> incl inside, bit 1 -> incl outside
+// bit 0 -> calc distance inside
+// bit 1 -> calc distance outside
+// bit 2 -> calc whether fragment is inside or outside (else outside is assumed with winds == 0.0)
+uniform int uTestInOut;
+uniform vec4 uCustom;
 
 uniform SegIdxRangePerCellBlock {
     ivec4 uSegIdxRangePerCell[${(ROW_COUNT + 2 * padCount) * (colCount + 2 * padCount) / 2}];
@@ -29,6 +54,10 @@ flat in ivec2 closeCellIdxRange;
 flat in ivec2 crossCellIdxRange;
 out vec4 FragColor;
 
+// testing!!
+// float rand(vec2 co) {
+//     return mod(uCustom.w * fract(sin(dot(co.xy, vec2(12.9898,78.233))) * 43758.5453), 1.0);
+// }
 
 float absDistToSegment(vec2 point, vec2 lineA, vec2 lineB) {
     vec2 lineDir = lineB - lineA;
@@ -42,72 +71,75 @@ float absDistToSegment(vec2 point, vec2 lineA, vec2 lineB) {
 
 void main() {
     ///////////////////////////////////////////////////////////////////////////
+    // Calculate \`winds\`:
+    //
     // Project a ray to the left to check if it crosses the segment in order
     // to find the fragment's winding number to determine whether fragment
     // is inside or outside the shape.
+    ///////////////////////////////////////////////////////////////////////////
 
-    int crossIdxS = crossCellIdxRange.x;
-    int crossLen = crossCellIdxRange.y;
     float winds = 0.0;
-    // Iterate over all relevant cell indexes
-    for (int i = crossIdxS; i < crossIdxS + crossLen; i++) {
-        int crossIdx = texelFetch(uCrossCellIdxs, ivec2(i%256, i/256), 0).x;
+    if ((uTestInOut & 4) != 0) {
+        int crossIdxS = crossCellIdxRange.x;
+        int crossLen = crossCellIdxRange.y;
+        // Iterate over all relevant cell indexes
+        for (int i = crossIdxS; i < crossIdxS + crossLen; i++) {
+            int crossIdx = texelFetch(uCrossCellIdxs, ivec2(i%256, i/256), 0).x;
 
-        ivec2 uSegIdxRange = crossIdx % 2 == 0
-            ? uSegIdxRangePerCell[crossIdx / 2].xy
-            : uSegIdxRangePerCell[crossIdx / 2].zw;
+            ivec2 uSegIdxRange = crossIdx % 2 == 0
+                ? uSegIdxRangePerCell[crossIdx / 2].xy
+                : uSegIdxRangePerCell[crossIdx / 2].zw;
 
-        int segIdx = uSegIdxRange.x;
-        int segLen = uSegIdxRange.y;
+            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%256, j/256), 0);
+            for (int j = segIdx; j < segIdx + segLen; j++) {
+                // Fetch segment from texture
+                vec4 seg = texelFetch(uSegs, ivec2(j%256, j/256), 0);
 
-            // line segment's min-y is excluded
-            bool crossing =
-                (seg.y > vXY.y != seg.w > vXY.y) &&
-                (vXY.x > (seg.z - seg.x)*(vXY.y - seg.y) / (seg.w - seg.y) + seg.x);
+                // line segment's min-y is excluded
+                bool crossing =
+                    (seg.y > vXY.y != seg.w > vXY.y) &&
+                    (vXY.x > (seg.z - seg.x)*(vXY.y - seg.y) / (seg.w - seg.y) + seg.x);
 
-            bool crossingUp = seg.y < seg.w;
+                bool crossingUp = seg.y < seg.w;
 
-            winds += crossing ? (crossingUp ? 1.0 : -1.0) : 0.0;
+                winds += crossing ? (crossingUp ? -1.0 : 1.0) : 0.0;
+            }
         }
-    }
 
-    {
-        int cellIdx = (instanceId % ${ROW_COUNT});
+        {
+            int cellIdx = (instanceId % ${ROW_COUNT});
 
-        bool isEven = cellIdx % 2 == 0;
+            bool isEven = cellIdx % 2 == 0;
 
-        ivec4 uSegIdxRange = uSegIdxRangePerStrip[cellIdx / 2];
-        int segIdx = isEven ? uSegIdxRange.x : uSegIdxRange.z;
-        int segLen = isEven ? uSegIdxRange.y : uSegIdxRange.w;
-        
+            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%256, j/256), 0);
+            for (int j = segIdx; j < segIdx + segLen; j++) {
+                // Fetch segment from texture
+                vec4 seg = texelFetch(uSegs, ivec2(j%256, j/256), 0);
 
-            // line segment's min-y is excluded
-            bool crossing =
-                (seg.y > vXY.y != seg.w > vXY.y) &&
-                (vXY.x > (seg.z - seg.x)*(vXY.y - seg.y) / (seg.w - seg.y) + seg.x);
+                // line segment's min-y is excluded
+                bool crossing =
+                    (seg.y > vXY.y != seg.w > vXY.y) &&
+                    (vXY.x > (seg.z - seg.x)*(vXY.y - seg.y) / (seg.w - seg.y) + seg.x);
 
-            bool crossingUp = seg.y < seg.w;
+                bool crossingUp = seg.y < seg.w;
 
-            winds += crossing ? (crossingUp ? 1.0 : -1.0) : 0.0;
+                winds += crossing ? (crossingUp ? -1.0 : 1.0) : 0.0;
+            }
         }
     }
-
-
     bool inside = winds != 0.0;
     ///////////////////////////////////////////////////////////////////////////
-
+    // Calculate \`res\`: the distance to the nearest curve
     ///////////////////////////////////////////////////////////////////////////
     float res = 1.0;  // sdf result
 
-    if ((inside && (uIncl % 2 != 0)) || (!inside && (uIncl > 1))) {
+    if ((inside && ((uTestInOut & 1) != 0)) || (!inside && ((uTestInOut & 2) != 0))) {
         int cellIdxS = closeCellIdxRange.x;
         int cellLen = closeCellIdxRange.y;
         // Iterate over all relevant cell indexes
@@ -125,9 +157,8 @@ void main() {
                 // Fetch segment from texture
                 vec4 seg = texelFetch(uSegs, ivec2(j%256, j/256), 0);
 
-                // Find unsigned distance to the segment; only the nearest will be kept
+                // Find normalized unsigned distance to the segment; only the nearest will be kept
                 float d = absDistToSegment(vXY, seg.xy, seg.zw);
-                // Apply exponential transform
                 float val = clamp(d / uMaxDistance, 0.0, 1.0);
 
                 res = min(res, val);
@@ -139,20 +170,14 @@ void main() {
     // DEBUG!
     // float alpha = ((instanceId + instanceId/${ROW_COUNT}) % 2 == 0 ? 0.3 : 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(25.0 * res));
-    float blue = 0.5;
+    
+    ${calcFragColorStr}
 
     FragColor = vec4(red, green, blue, alpha);
 }
 `;
-    cache[1024 * colCount + padCount] = main_Fragment;
+    cache[key] = main_Fragment;
     return main_Fragment;
 }
-export { getFragment };
+export { getFragment, GLSL_PATTERN1, GLSL_DEFAULT };
 //# sourceMappingURL=fragment.js.map

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;;;;;;;;;;;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"}
+{"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,MAAM,aAAa,GAAG;;;;;;;;CAQrB,CAAC;AAGF,MAAM,YAAY,GAAG;;;;;;;;CAQpB,CAAC;AAGF,SAAS,WAAW,CACZ,QAAgB,EAChB,QAAgB,EAChB,gBAAwB,EACxB,IAAY;IAEhB,0EAA0E;IAC1E,sDAAsD;IACtD,MAAM,GAAG,GAAG,CAAC,CAAC,IAAE,EAAE,CAAC,GAAC,CAAC,GAAG,GAAC,QAAQ,GAAG,QAAQ,CAAC,GAAG,IAAI,CAAC;IACrD,MAAM,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAC5B,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;QAAC,OAAO,QAAQ,CAAC;IAAC,CAAC;IAEpD,MAAM,aAAa;IACnB,QAAQ,CAAA;;;;;;;;;;;;;;;gCAewB,CAAC,SAAS,GAAG,CAAC,GAAC,QAAQ,CAAC,GAAC,CAAC,QAAQ,GAAG,CAAC,GAAC,QAAQ,CAAC,GAAG,CAAC;;;iCAGnD,SAAS,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0CAgEJ,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA2DF,SAAS;;;MAGpD,gBAAgB;;;;CAIrB,CAAA;IAEG,KAAK,CAAC,GAAG,CAAC,GAAG,aAAa,CAAC;IAC3B,OAAO,aAAa,CAAC;AACzB,CAAC;AAGD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,CAAA"}

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

@@ -6,13 +6,8 @@ import type { Texture } from "./texture";
  *
  * * `textures`
  * * `programs`
- * * `framebufferStack`
  *
  * so they don't have to be recreated on each draw call.
- *
- * * an optional `width` and `height` that can be used for any purpose and that are not
- * set or read by any function within the library
- *
  */
 interface GlContext {
     readonly gl: WebGL2RenderingContext;

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

@@ -1,3 +1,4 @@
+import { debugShaders } from "../debug-shaders.js";
 const cache = new WeakMap();
 /**
  * Returns a `GlContext` by reference via a cache of `WebGL2RenderingContext`s.
@@ -13,6 +14,7 @@ function getWebGlContext(gl) {
             return glContext;
         }
     }
+    debugShaders(gl);
     const programs = {};
     const textures = {};
     const glContext = { gl, textures, programs };

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,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"}
+{"version":3,"file":"get-web-gl-context.js","sourceRoot":"","sources":["../../src/webgl-utils/get-web-gl-context.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,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,YAAY,CAAC,EAAE,CAAC,CAAC;IAEjB,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.7",
+    "version": "0.0.9",
     "author": {
         "name": "Floris Steenkamp"
     },

package/src/debug-shaders.ts

@@ -1,4 +1,4 @@
-import { getFragment } from "./shaders/fragment.js";
+import { getFragment, GLSL_DEFAULT } from "./shaders/fragment.js";
 import { vertex } from "./shaders/vertex.js";
 
 
@@ -27,7 +27,7 @@ function debugShaders(
 
     try {
         debugGlsl(gl, gl.VERTEX_SHADER, vertex);
-        debugGlsl(gl, gl.FRAGMENT_SHADER, getFragment(32,4));
+        debugGlsl(gl, gl.FRAGMENT_SHADER, getFragment(32,2, GLSL_DEFAULT, 0));
     } catch (e) {
         console.log(e);
         throw e;

package/src/generate-sdf.ts

@@ -1,17 +1,38 @@
 // import { getWebGLContext } from './webgl-utils/get-gl-context.js';
 import { vertex } from './shaders/vertex.js';
-import { getFragment } from './shaders/fragment.js';
+import { getFragment, GLSL_DEFAULT } from './shaders/fragment.js';
 import { initProgram } from './webgl-utils/use-program.js';
 import { mainProgram } from './main-program.js';
 import { ROW_COUNT } from './row-count.js';
 import { getPathsFromStr } from './svg/get-paths-from-str.js';
 import { MAX_ASPECT_RATIO_BEFORE_STRETCH } from './max-aspect-ratio-before-stretch.js';
 import { GlContext } from './types/gl-context.js';
-import { debugShaders } from './debug-shaders.js';
 
 const { ceil, min, max } = Math;
 
 
+interface SdfOptions {
+    /** the position where to draw, x-coordinate */
+    readonly x?: number | undefined;
+    readonly y?: number | undefined;
+    readonly testInteriorExterior?: boolean | undefined;
+    readonly calcSdfForInside?: boolean | undefined;
+    readonly calcSdfForOutside?: boolean | undefined;
+    readonly customData?: [number,number,number,number] | undefined;
+    readonly glslRgbaCalcStr?: string | undefined;
+    readonly colorMask: [boolean,boolean,boolean,boolean];
+}
+
+
+const defaultSdfOptions: SdfOptions = {
+    x: 0, y: 0,
+    testInteriorExterior: true,
+    calcSdfForInside: true, calcSdfForOutside: true,
+    customData: [1,0,0,0],
+    colorMask: [true, true, true, true]
+}
+
+
 /**
  * Generates an sdf (signed distance field) from the given bezier curves,
  * viewbox, etc. and renders the result
@@ -22,16 +43,81 @@ const { ceil, min, max } = Math;
  * thereof) given by given by their ordered control points,
  * e.g. `[ [[0,0],[1,1],[2,1],[2,0]], [[2,0],[7,2],[1,5],[8,6]], ... ]` **OR**
  * * an SVG string, e.g. "M26.53 478.83 C028.89 481.61 031.33 484.32 ..."
+ * @param viewbox the viewbox given as `[x1,x2,y1,y2]` (**not as** `[x,y,widht,height]`)
  * @param width the width of the drawing rectangle
  * @param height the height of the drawing rectangle
- * @param viewbox the viewbox
  * @param maxDistance maximum sdf distance
- * @param sdfExponent TODO
- * @param inclInside if `true` the sdf will be calculate for the inside of the shape
- * @param inclOutside if `true` the sdf will be calculate for the outside of the shape
- * @param x the position where to draw, x-coordinate
- * @param y the position where to draw, y-coordinate
- * @param channel TODO
+ * @param options optional additional options (see below)
+ * 
+ * **The following are properties of the `options` parameters**
+ * 
+ * @param x defaults to `0`; the position where to draw on the canvas, x-coordinate
+ * @param y defaults to `0`; the position where to draw on the canvas, y-coordinate
+ * @param colorMask defaults to `[true,true,true,true]`; an array of length 4 for the rgba color mask values;
+ * will be called as `gl.setColorMask(...colorMask)` to allow/prevent selected color channels from updating
+ * @param testInteriorExterior defaults to `true`;
+ * if `false` winds will always be `0.0` and only an un-signed sdf can be calculated since all
+ * fragments are considered outside
+ * @param calcSdfForInside defaults to `true`;
+ * if `false` the sdf will not be calculate for the inside of the shape, in the shader, `res` will always be `1.0`
+ * @param calcSdfForOutside defaults to `true`;
+ * if `false` the sdf will not be calculate for the outside of the shape, in the shader, `res` will always be `1.0`
+ * @param customData optional custom data (must be an array of 4 numbers) to send to
+ * the fragment shader as a uniform, e.g. exponent, scale, a timer, or whatever
+ * @param glslRgbaCalcStr  a glsl string (#version 300 es) inserted at the end of
+ * the fragment shader to modify the output frag color in any way (you can also discard the fragment);
+ * see below for available variables that can be used;
+ * 
+ * defaults to (designed to match webgl-sdf-generator)
+ * ```glsl
+ * float exponent = uCustom.x;
+ * float adj = 0.5*pow(1.0 - res, exponent);
+ * res = inside ? 1.0 - adj : adj;
+ * float red = res;
+ * float green = res;
+ * float blue = res;
+ * float alpha = 0.5;
+ * 
+ * ```
+ * You must define and assign \`red\`, \`green\`, \`blue\` and \`alpha\`.
+ * 
+ * Usable variables:
+ * ```glsl
+ * // the result of the distance calculation for this fragment, a value from 0.0 to 1.0
+ * // with 1.0 occuring when the fragment is >= maxDistance away and 0.0 when the
+ * // fragment is exactly on a curve
+ * float res
+ *
+ * // the number of anti-clockwise winds around the fragment, a value != 0
+ * // means the fragment is inside the shape
+ * float winds
+ *
+ * // 4 custom values set via an options parameter of `generateSdf`; defaults to `[1,0,0,0]`;
+ * // the first value is used as the exponent within the default `glslRgbaCalcStr`
+ * vec4 uCustom; 
+ *
+ * // the max distance value supplied via `generateSdf`
+ * float uMaxDistance
+ *
+ * // bit 0 -> calc sdf when fragment is inside; defaults to 1,
+ * // bit 1 -> calc sdf when fragment is outside; defaults to 1
+ * // bit 1 -> calc `winds` (required for signing the distance); defaults to 1
+ * // note: when the distance calculation is not done (via options from `generateSdf`),
+ * `res` will be set to 1.0 (max distance away)
+ * int uTestInOut
+ *
+ * // the original x,y coordinates of the fragment in the original space provided
+ * // via the `viewbox` in `generateSdf`, e.g. the very bottom-left fragment
+ * // will have vXY == (viebox[0], viebox[1]) and the very top right will have
+ * // coordinates vXY == (viebox[2], viebox[3])
+ * vec2 vXY
+ * 
+ * // whether the point is inside or outside the shape, often used to sign `res`
+ * // it is identical to `winds != 0`
+ * bool inside
+ * 
+ * // pretty much useless unless you want to create a checkerboard pattern for no good reason
+ * int instanceId
  */
 function generateSdf(
         glContext: GlContext,
@@ -39,21 +125,13 @@ function generateSdf(
         viewbox: [number,number,number,number],
         width: number,
         height: number,
-        x = 0, y = 0,
         maxDistance: number,
-        inclInside = true,
-        inclOutside = true,
-        customData: [number,number,number,number],
-        
-        // TODO
-        channel = 0) {
+        options: SdfOptions = defaultSdfOptions) {
 
     const psss = typeof bezierCurves_or_svgStr === 'string'
         ? getPathsFromStr(bezierCurves_or_svgStr)
         : bezierCurves_or_svgStr;
 
-    // const glContext = getWebGLContext(gl);
-
     let stretch = 1;
     const aspectRatio = width/height;
     if (aspectRatio > MAX_ASPECT_RATIO_BEFORE_STRETCH) {
@@ -69,23 +147,41 @@ function generateSdf(
 
     const padCount = 2*ceil(min(maxDistance, maxDim)/cellSize/2);
 
+    const { glslRgbaCalcStr } = options;
+    const hash = calcStrHash(glslRgbaCalcStr || '');
+
     const programMain = initProgram(
-        glContext, `main${colCount}-${padCount}`,
-        vertex, getFragment(colCount, padCount)
+        glContext, `main${colCount}-${padCount}-${hash}`,
+        vertex, getFragment(colCount, padCount, glslRgbaCalcStr || GLSL_DEFAULT, hash)
     );
 
     const { gl } = glContext;
 
-    // debugShaders(gl);  // comment for production
-
     gl.useProgram(programMain.program);
     mainProgram(
         glContext, programMain,
-        psss, viewbox, maxDistance, inclInside, inclOutside, customData,
-        x, y, width, height,
-        colCount, cellSize, padCount, stretch
+        psss, viewbox, maxDistance, 
+        width, height,
+        options,
+        colCount, cellSize, padCount, stretch,
+        
     );
 }
 
 
-export { generateSdf }
+/**
+ * Calculates and returns a hash of the given string
+ */
+function calcStrHash(str: string) {
+    if (!str) return 0;
+    
+    let hash = 5381;
+    for (let i=0; i<str.length; i++) {
+        hash = ((hash << 5) + hash) + str.charCodeAt(i);
+    }
+
+    return hash >>> 0; // Convert to unsigned 32-bit integer
+}
+
+
+export { generateSdf, SdfOptions }

package/src/index.ts

@@ -2,3 +2,4 @@
 export { generateSdf } from './generate-sdf.js';
 export { freeGlContext } from './webgl-utils/free-gl-context.js';
 export { getWebGlContext } from './webgl-utils/get-web-gl-context.js';
+export { GLSL_DEFAULT, GLSL_PATTERN1 } from './shaders/fragment.js';

package/src/main-program.ts

@@ -7,6 +7,7 @@ import { GlContext } from './types/gl-context.js';
 import { prepareBuffers } from './prepare-buffers.js';
 import { TEX_WIDTH } from './tex-width.js';
 import { ROW_COUNT } from './row-count.js';
+import { SdfOptions } from './generate-sdf.js';
 
 
 const SEG_TEX_INDEX = 0;
@@ -21,14 +22,11 @@ function mainProgram(
         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,
+
+        options: SdfOptions,
+
         colCount: number,
         cellSize: number,
         padCount: number,
@@ -36,6 +34,13 @@ function mainProgram(
 
     const { gl } = glContext;
 
+    const {
+        x = 0, y = 0, testInteriorExterior = true,
+        calcSdfForInside = true, calcSdfForOutside = true,
+        customData = [1,0,0,0],
+        colorMask = [true,true,true,true]
+    } = options;
+
     const vertices: number[] = [];
     const x0 = 0;
     const y0 = 0;
@@ -82,7 +87,11 @@ function mainProgram(
     // Init/update uniforms
     setUniform_('2f', 'uWidthHeight', width, height);
     setUniform_('1f', 'uMaxDistance', maxDistance);
-    setUniform_('1i', 'uIncl', (inclInside ? 1 : 0) + (inclOutside ? 2 : 0));
+    setUniform_('1i', 'uTestInOut',
+        (calcSdfForInside ? 1 : 0) +
+        (calcSdfForOutside ? 2 : 0) +
+        (testInteriorExterior ? 4 : 0)
+    );
     setUniform_('4f', 'uCustom', ...customData);
 
     setUniformBlock(programMain)('SegIdxRangePerCellBlock', 0, segIdxs_PerCell_Range_Arr);
@@ -154,6 +163,8 @@ function mainProgram(
 
     gl.viewport(x, y, width, height);
 
+    gl.colorMask(...colorMask);
+
     // draw a square colCount * ROW_COUNT times - 6 vertics
     gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, colCount*ROW_COUNT);