webgl2-sdf 0.0.6 → 0.0.8

package/src/generate-sdf.ts

@@ -1,17 +1,36 @@
 // 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;
+}
+
+
+const defaultSdfOptions: SdfOptions = {
+    x: 0, y: 0,
+    testInteriorExterior: true,
+    calcSdfForInside: true, calcSdfForOutside: true,
+    customData: [1,0,0,0]
+}
+
+
 /**
  * Generates an sdf (signed distance field) from the given bezier curves,
  * viewbox, etc. and renders the result
@@ -22,36 +41,91 @@ 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 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 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;
+ * res = (pow(1.0 - res, exponent) * 0.5) * (inside ? -1.0 : 1.0);
+ * float red = res;
+ * float green = res;
+ * float blue = res;
+ * float alpha = res;
+ * 
+ * ```
+ * 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,
         bezierCurves_or_svgStr: (number[][])[][] | string,
+        viewbox: [number,number,number,number],
         width: number,
         height: number,
-        viewbox: [number,number,number,number],
         maxDistance: number,
-        sdfExponent = 1,
-        inclInside = true,
-        inclOutside = true,
-        x = 0, y = 0,
-        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) {
@@ -67,30 +141,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, sdfExponent, x, y, width, height, colCount,
-        cellSize, inclInside, inclOutside, padCount, stretch
+        glContext, programMain,
+        psss, viewbox, maxDistance, 
+        width, height,
+        options,
+        colCount, cellSize, padCount, stretch,
+        
     );
+}
+
 
-    // testing!!
-    if (Math.random() > 0.995) {
-        const loseContextExt = gl.getExtension('WEBGL_lose_context');
-        if (loseContextExt) {
-            loseContextExt.loseContext();
-        }
+/**
+ * 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 }
+export { generateSdf, SdfOptions }

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;
@@ -17,23 +18,29 @@ const CROSS_TEX_INDEX = 2;
 function mainProgram(
         glContext: GlContext,
         programMain: Program,
+
         psss: number[][][][],
         viewbox: [number,number,number,number],
         maxDistance: number,
-        sdfExponent = 1,
-        x: number,
-        y: number,
         width: number,
         height: number,
+
+        options: SdfOptions,
+
         colCount: number,
         cellSize: number,
-        inclInside: boolean,
-        inclOutside: boolean,
         padCount: number,
         stretch: number) {
 
     const { gl } = glContext;
 
+    const {
+        x = 0, y = 0, testInteriorExterior = true,
+        calcSdfForInside = true, calcSdfForOutside = true,
+        customData = [1,0,0,0],
+        glslRgbaCalcStr
+    } = options;
+
     const vertices: number[] = [];
     const x0 = 0;
     const y0 = 0;
@@ -80,8 +87,12 @@ 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_('1i', 'uTestInOut',
+        (calcSdfForInside ? 1 : 0) +
+        (calcSdfForOutside ? 2 : 0) +
+        (testInteriorExterior ? 4 : 0)
+    );
+    setUniform_('4f', 'uCustom', ...customData);
 
     setUniformBlock(programMain)('SegIdxRangePerCellBlock', 0, segIdxs_PerCell_Range_Arr);
     setUniformBlock(programMain)('SegIdxRangePerStripBlock', 1, segIdxs_PerStrip_Range_Arr);
@@ -89,15 +100,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 +122,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 +141,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
@@ -148,6 +163,8 @@ function mainProgram(
 
     gl.viewport(x, y, width, height);
 
+    gl.colorMask(true, true, true, true);
+
     // draw a square colCount * ROW_COUNT times - 6 vertics
     gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, colCount*ROW_COUNT);
 

package/src/prepare-buffers.ts

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