webgl2-sdf 0.0.1

package/src/svg/path-segment/v.ts

@@ -0,0 +1,28 @@
+import { PathState } from '../path-state.js';
+
+
+/**
+ * @hidden
+ * V and v: (from www.w3.org) 
+ * 
+ * params: y
+ * 
+ * Draws a vertical line from the current point (cpx, cpy) to (cpx, y). V 
+ * (uppercase) indicates that absolute coordinates will follow; v (lowercase) 
+ * indicates that relative coordinates will follow. Multiple y values can be 
+ * provided (although usually this doesn't make sense). At the end of the 
+ * command, the new current point becomes (cpx, y) for the final value of y.
+ */
+function v(s: PathState): number[][] {
+    const ps = [
+        s.p,
+        [s.p[0], s.vals![0]]
+    ];
+    s.prev2ndCubicControlPoint = undefined;
+    s.prev2ndQuadraticControlPoint = undefined;
+    
+    return ps;
+}
+
+
+export { v }

package/src/svg/path-segment/z.ts

@@ -0,0 +1,27 @@
+import { PathState } from '../path-state.js';
+
+
+/** 
+ * @hidden
+ * Z and z: (from www.w3.org) 
+ * 
+ * params: (none)
+ * 
+ * Close the current subpath by drawing a straight line from the current point 
+ * to current subpath's initial point. Since the Z and z commands take no 
+ * parameters, they have an identical effect.
+ */
+function z(s: PathState): number[][] {
+    const ps = [
+        s.p,
+        s.initialPoint!
+    ];
+
+    s.prev2ndCubicControlPoint = undefined;
+    s.prev2ndQuadraticControlPoint = undefined;
+
+    return ps;
+}
+
+
+export { z }

package/src/svg/path-state.ts

@@ -0,0 +1,15 @@
+
+/** @hidden */
+interface PathState {
+    initialPoint?: number[] | undefined;
+    p: number[];
+    vals?: number[] | undefined;
+
+    /** Used in conjunction with "S", "s" */
+    prev2ndCubicControlPoint?: number[] | undefined;
+    /** Used in conjunction with "T", "t" */
+    prev2ndQuadraticControlPoint?: number[] | undefined;
+}
+
+
+export { PathState };

package/src/tex-width.ts

@@ -0,0 +1,14 @@
+
+/**
+ * Just a general texture width for our textures holding general data.
+ * * width cannot be too small otherwise width or height might exceed
+ * `gl.getParameter(gl.MAX_TEXTURE_SIZE)`
+ * * if width is too large we might need to pad too many zeros so `256` is a
+ * good balance since we are guaranteed at least 4096 for MAX_TEXTURE_SIZE
+ * so we can store 256 * 4096 = 1_048_576 values per texture, more than
+ * adequate for our purposes
+ */
+const TEX_WIDTH = 256;
+
+
+export { TEX_WIDTH }

package/src/types/attribute.ts

@@ -0,0 +1,9 @@
+
+interface Attribute {
+    readonly buf: WebGLBuffer;
+    readonly loc: number;
+    data: AllowSharedBufferSource | null;
+}
+
+
+export type { Attribute }

package/src/types/cell.ts

@@ -0,0 +1,21 @@
+
+/**
+ * A single cell in the grid
+ */
+interface Cell {
+    /** line segments contained within the cell */
+    readonly lineSegs: number[][][];
+    /**
+     * other cells (represented by their u and v indexes as ROW_COUNT*u + v)
+     * containing line segments and being close to this one in
+     * some (specific) sense
+     */
+    readonly closeCells: number[];
+    /**
+     * represented by their u and v indexes as ROW_COUNT*u + v
+     */
+    readonly crossingCells: number[];
+}
+
+
+export type { Cell }

package/src/types/gl-context.ts

@@ -0,0 +1,28 @@
+import type { Program } from "./program";
+import type { Texture } from "./texture";
+
+
+/**
+ * An object wrapping a `WebGL2RenderingContext` and including additional state
+ * which includes the following:
+ * 
+ * * `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;
+    readonly textures: { [index:string]: Texture };
+    readonly programs: { [index:string]: Program };
+    readonly framebufferStack: WebGLFramebuffer[];
+    readonly onContextLoss: () => void;
+}
+
+
+export type { GlContext }

package/src/types/gl-type.ts

@@ -0,0 +1,16 @@
+
+type GLattrType = 
+    | typeof WebGL2RenderingContext.BYTE
+    | typeof WebGL2RenderingContext.SHORT
+    | typeof WebGL2RenderingContext.UNSIGNED_BYTE
+    | typeof WebGL2RenderingContext.UNSIGNED_SHORT
+    | typeof WebGL2RenderingContext.FLOAT
+    // WebGL2 only
+    | typeof WebGL2RenderingContext.HALF_FLOAT
+    | typeof WebGL2RenderingContext.INT
+    | typeof WebGL2RenderingContext.UNSIGNED_INT
+    | typeof WebGL2RenderingContext.INT_2_10_10_10_REV
+    | typeof WebGL2RenderingContext.UNSIGNED_INT_2_10_10_10_REV;
+
+
+export type { GLattrType }

package/src/types/gl-usage.ts

@@ -0,0 +1,14 @@
+
+type GLusage = 
+    | typeof WebGL2RenderingContext.STATIC_DRAW
+    | typeof WebGL2RenderingContext.DYNAMIC_DRAW
+    | typeof WebGL2RenderingContext.STREAM_DRAW
+    | typeof WebGL2RenderingContext.STATIC_READ
+    | typeof WebGL2RenderingContext.DYNAMIC_READ
+    | typeof WebGL2RenderingContext.STREAM_READ
+    | typeof WebGL2RenderingContext.STATIC_COPY
+    | typeof WebGL2RenderingContext.DYNAMIC_COPY
+    | typeof WebGL2RenderingContext.STREAM_COPY;
+
+
+export type { GLusage }

package/src/types/program.ts

@@ -0,0 +1,14 @@
+import type { Attribute } from "./attribute";
+import type { UniformBlock } from "../webgl-utils/uniform-block";
+
+
+interface Program {
+    readonly gl: WebGL2RenderingContext;
+    readonly program: WebGLProgram;
+    readonly attributes: { [index:string]: Attribute };
+    readonly uniforms: { [index:string]: WebGLUniformLocation | null };
+    readonly uniformBlocks: { [index:string]: UniformBlock };
+}
+
+
+export { Program }

package/src/types/strip.ts

@@ -0,0 +1,11 @@
+
+/**
+ * A single strip within strips
+ */
+interface Strip {
+    /** line segments contained within the strip */
+    readonly lineSegs: number[][][];
+}
+
+
+export type { Strip }

package/src/types/texture.ts

@@ -0,0 +1,7 @@
+
+interface Texture {
+    readonly tex: WebGLTexture;
+}
+
+
+export type { Texture }

package/src/types/typed-array.ts

@@ -0,0 +1,16 @@
+
+type TypedArray =
+    | Int8Array
+    | Uint8Array
+    | Uint8ClampedArray
+    | Int16Array
+    | Uint16Array
+    | Int32Array
+    | Uint32Array
+    | Float32Array
+    | Float64Array
+    | BigInt64Array
+    | BigUint64Array;
+
+
+export type { TypedArray }

package/src/utils/calc-circs.ts

@@ -0,0 +1,129 @@
+import { MAX_ASPECT_RATIO_BEFORE_STRETCH } from '../max-aspect-ratio-before-stretch';
+import { ROW_COUNT } from '../row-count';
+import { len } from '../vector/len';
+
+
+/**
+ * Represents the max distance (in cell side length units) from one corner of
+ * the viewbox to the opposing corner.
+ */
+// const diagLen = ceil(sqrt((MAX_ASPECT_RATIO_BEFORE_STRETCH*ROW_COUNT)**2 + ROW_COUNT**2));
+
+
+const circsCache = calcCircs();
+
+
+interface Range {
+    readonly from: number;
+    readonly u: number;
+    readonly v: number;
+}
+
+
+function calcCircs() {
+    const ranges: Range[] = [{ from: 0, u: 0, v: 0 }];
+
+    // for (let i=0; i<ROW_COUNT; i++) {
+    for (let i=0; i<MAX_ASPECT_RATIO_BEFORE_STRETCH*ROW_COUNT; i++) {
+        ranges.push({ from: i + 0.5, u: i + 1, v: 0 });
+        ranges.push({ from: i + 0.5, u: -i - 1, v: 0 });
+        ranges.push({ from: i + 0.5, u: 0, v: i + 1 });
+        ranges.push({ from: i + 0.5, u: 0, v: -i - 1 });
+        for (let j=0; j<ROW_COUNT; j++) {
+            const p = [0.5 + i, 0.5 + j];
+            const d = len(p);
+
+            const u = i + 1;
+            const v = j + 1;
+            ranges.push({ from: d, u, v });
+            if (u !== 0) {
+                ranges.push({ from: d, u: -u, v });
+            }
+            if (v !== 0) {
+                ranges.push({ from: d, u, v: -v });
+            }
+            if (u !== 0 && v !== 0) {
+                ranges.push({ from: d, u: -u, v: -v });
+            }
+        }
+
+        ranges.sort((a,b) => (a.from - b.from));
+    }
+
+
+
+    return ranges;
+}
+
+
+export { circsCache }
+
+
+// Quokka tests
+// const { E, trunc, max, sqrt, ceil } = Math;
+
+// calcCircs().length;//?
+
+// const cs = calcCircs().map(c => c.from);
+
+// const longest = (() => {
+//     let l = 0;
+//     let maxL = 0;
+//     let _v = 0;
+//     for (let i=0; i<cs.length; i++) {
+//         const v = cs[i];
+//         if (_v === cs[i]) {
+//             l++;
+//         } else {
+//             l = 0;
+//         }
+//         _v = v;
+//         if (l > maxL) {
+//             maxL = l;
+//         }
+//     }
+
+//     return maxL;
+// })();//?
+
+// const froms = [
+//     { from: 0, to: 50, skip: 1 },
+//     { from: 50, to: 3050, skip: 50 },
+//     { from: 400, to: 4000, skip: 100 },
+//     // { from: 10, to: 100, skip: 10 }
+// ];
+
+// for (let j=0; j<froms.length; j++) {
+//     const { from, to, skip } = froms[j];
+//     let strs: string[] = [];
+//     for (let i=from; i<to; i += skip) {
+//         const v = cs[i];
+//         strs.push(`${v.toString()}	${i}`);
+//     }
+//     const csStr = strs.join('\n');
+
+//     console.log(csStr);
+// }
+
+// jumpIdx(3.7);//?
+// for (let i=30; i<44; i += 0.25) {
+//     jumpIdx(i);//?
+//     [(cs[jumpIdx(i)]), i];//?
+// }
+
+
+// let tot = 0;
+// const vs: number[] = [];
+// for (let i=400; i<=3800; i++) {
+// 	const c = cs[i];
+// 	const ap = A*(E**(B*c)) + C*(E**(-D*c)) + F;
+// 	const S = B*A*(E**(B*c)) + -D*C*(E**(-D*c));
+// 	// i;//?
+// 	// ap;//?
+// 	const err = abs(i - ap);
+// 	tot += err;
+// 	vs.push(err);
+// }
+// vs.sort((a,b) => b - a);//?
+// vs[3400];//?
+// tot/(3800 - 400);//?

package/src/utils/clip-line-segment-to-grid.ts

@@ -0,0 +1,133 @@
+import type { Cell } from "../types/cell";
+import { ROW_COUNT } from "../row-count";
+import { segBoxX } from "./seg-box-x";
+
+
+const { floor, ceil } = Math;
+
+
+/**
+ * Clips a line segment to grid boundaries and returns multiple segments.
+ * 
+ * * modifies grid by adding line segments to cells
+ * * size/count *must* be a power of 2
+ * 
+ * @param count the number of grid cells per dimension
+ * @param width
+ * @param height
+ * @param seg the line segment (array of 2 points)
+ */
+function clipLineSegmentToGrid(
+        grid: Cell[][],
+        width: number,
+        height: number,
+        colCount: number,
+        cellSize: number,
+        seg: number[][],
+        padCount: number): void {
+    
+    /** `cellSize` *must* be a power of two */
+    // const cellSize = width/ROW_COUNT;
+
+    const padding = cellSize*padCount;
+
+    const [[x0,y0],[x1,y1]] = seg;
+
+    const paddedWidth = width + padding;
+    const paddedHeight = height + padding;
+    // TODO - investigate lines on edge and corners - ps could be length 4!!
+    const ps = segBoxX(seg, [[-padding,-padding],[paddedWidth,paddedHeight]]);
+
+    const p0IsInBox = x0 > -padding && x0 < paddedWidth && y0 > -padding && y0 < paddedHeight;
+    const p1IsInBox = x1 > -padding && x1 < paddedWidth && y1 > -padding && y1 < paddedHeight;
+
+    // if line is completely outside box
+    if (ps.length < 2 && !p0IsInBox && !p1IsInBox) {
+        return;
+    }
+
+    // Determine which grid cells the line passes through
+
+    const dX = x1 - x0;
+    const dY = y1 - y0;
+    
+    // Use Bresenham-like approach to find all grid cells the line crosses
+    const stepX = x1 > x0 ? cellSize : -cellSize;
+    const stepY = y1 > y0 ? cellSize : -cellSize;
+
+    /** first point of each line segment to connect */
+
+    /** current x position */
+    let x = x0;
+    /** current y position */
+    let y = y0;
+
+    // current intersection index
+    let xIdx = 0;
+    // left-to-right
+    const ltr = stepX > 0;
+    // bottom-to-top
+    const btt = stepY > 0;
+
+    // // line segment min-y excluded
+    // const crossing =
+    //     (seg.y > y != seg.w > y) &&
+    //     (x > (seg.z - seg.x)*(y - seg.y) / (seg.w - seg.y) + seg.x);
+
+    const fX = ltr ? floor : ceil;
+    const fY = btt ? floor : ceil;
+    while (true) {
+        // Find next grid boundary
+        let nextGridX = cellSize*fX((x + stepX)/cellSize);
+        let nextGridY = cellSize*fY((y + stepY)/cellSize);
+
+        // Calculate parameter t for intersection with vertical and horizontal grid lines
+        // eq. (1)
+        const tX = (nextGridX - x0)/dX;
+        // eq. (2)
+        const tY = (nextGridY - y0)/dY;
+
+        const useTx = (tX < tY && dX !== 0) || dY === 0;
+        /** intersection X */
+        const xX = useTx ? nextGridX : x0 + tY*dX;
+        /** intersection Y */
+        const xY = useTx ? y0 + tX*dY : nextGridY;
+
+        // if we're past the line endpoint
+        if ((tX > 1 || dX === 0) && (tY > 1 || dY === 0)) {
+            const u = floor(x1/cellSize) + padCount;
+            const v = floor(y1/cellSize) + padCount;
+            grid[u]?.[v]?.lineSegs.push([[x,y], [x1,y1]]);
+            break;
+        }
+
+        // if next grid intersection is on edge of grid
+        if ((xX <= -padding || xY <= -padding) || (xX >= paddedWidth || xY >= paddedHeight)) {
+            const entering = !p0IsInBox && xIdx === 0;
+
+            if (entering) {
+                [x,y] = ps[0];  // update current x,y position
+                xIdx++;
+                continue;
+            } else {
+                const u = fX(x/cellSize) - (ltr ? 0 : 1) + padCount;  // current u
+                const v = fY(y/cellSize) - (btt ? 0 : 1) + padCount;  // current v
+                const seg_ = [[x,y], ps[xIdx]];
+                grid[u]?.[v]?.lineSegs.push(seg_);
+                break;
+            }
+        }
+
+        const u = fX(x/cellSize) - (ltr ? 0 : 1) + padCount;  // current u
+        const v = fY(y/cellSize) - (btt ? 0 : 1) + padCount;  // current v
+
+        grid[u]?.[v]?.lineSegs.push([[x,y], [xX,xY]]);
+
+        // update current position
+        x = xX;
+        y = xY;
+    }
+}
+
+
+export { clipLineSegmentToGrid }

package/src/utils/clip-line-segment-to-strips.ts

@@ -0,0 +1,196 @@
+import type { Strip } from "../types/strip";
+import { segStripX } from "./seg-strip-x";
+
+
+const { floor, ceil } = Math;
+
+
+/**
+ * Clips a line segment to strip boundaries and returns multiple segments.
+ * 
+ * * modifies strips by adding line segments to each strip
+ * * size/count *must* be a power of 2
+ * 
+ * @param count the number of strips
+ * @param height the height of a strip
+ * @param seg the line segment (array of 2 points)
+ */
+function clipLineSegmentToStrips(
+        strips: Strip[],
+        height: number,
+        seg: number[][]): void {
+    
+    const count = strips.length;
+    /** `cellSize` *must* be a power of two */
+    const cellSize = height/count;
+
+    const [p0,p1] = seg;
+    const ps = segStripX(seg, [0,0,height]);
+    const [x0,y0] = p0;
+    const [x1,y1] = p1;
+
+    const dX = x1 - x0;
+    const dY = y1 - y0;
+
+    const p0IsInStrip = x0 < 0 && y0 > 0 && y0 < height;
+    const p1IsInStrip = x1 < 0 && y1 > 0 && y1 < height;
+
+    // if line is completely outside strip
+    if ((ps.length < 2 && !p0IsInStrip && !p1IsInStrip) && 
+        ((x0 !== 0 || dX !== 0) || 
+         ((y0 <= 0 && y1 <= 0) || (y0 >= height && y1 >= height)))) {
+
+        return;
+    }
+
+    // Determine which strips the line passes through
+
+    if (dY === 0) {  // no crossings possible
+        return;
+    }
+    
+    // Use Bresenham-like approach to find all strips the line crosses
+    const stepY = y1 > y0 ? cellSize : -cellSize;
+
+    /** first point of each line segment to connect */
+
+    /** current x position */
+    let x = x0;
+    /** current y position */
+    let y = y0;
+
+    let i = 0;
+    // left-to-right
+    const ltr = x1 > x0;
+    // bottom-to-top
+    const btt = y1 > y0;
+
+    // // line segment min-y excluded
+    // const crossing =
+    //     (seg.y > y != seg.w > y) &&
+    //     (x > (seg.z - seg.x)*(y - seg.y) / (seg.w - seg.y) + seg.x);
+
+    const fY = btt ? floor : ceil;
+    while (true) {
+        // Find next strip boundary
+        let nextGridX = ((ltr && x < 0) || (!ltr && x > 0)) ? 0 : Number.NEGATIVE_INFINITY;
+
+        let nextGridY = cellSize*fY((y + stepY)/cellSize);
+
+        // Calculate parameter t for intersection with horizontal strip lines
+        // eq. (1)
+        const tX = (nextGridX - x0)/dX;
+        // eq. (2)
+        const tY = (nextGridY - y0)/dY;
+
+        const useTx = tX < tY && dX !== 0;
+
+        /** intersection X */
+        const xX = useTx ? 0 : x0 + tY*dX;
+        /** intersection Y */
+        const xY = useTx ? y0 + tX*dY : nextGridY;
+
+        // if we're past the line endpoint
+        if ((tX > 1 || dX === 0) && tY > 1) {
+            const v = floor(p1[1]/cellSize);
+            strips[v]?.lineSegs.push([[x,y],p1]);
+            break;
+        }
+
+        if (((xX >= 0 && (x0 !== 0 || dX !== 0)) || xY <= 0 || xY >= height)) {
+            // next strip intersection is on edge of strips
+            const entering = !p0IsInStrip && i === 0;
+
+            if (entering) {
+                // update current x,y position
+                [x,y] = ps[0];
+                i++;
+                continue;
+            } else {
+                const v = fY(y/cellSize) - (btt ? 0 : 1);  // previous v
+                const seg_ = [[x,y],ps[i]];
+                strips[v]?.lineSegs.push(seg_);
+                break;
+            }
+        }
+
+        // previous v
+        const v = fY(y/cellSize) - (btt ? 0 : 1);
+
+        strips[v]?.lineSegs.push([[x,y], [xX,xY]]);
+
+        // update current position
+        x = xX;
+        y = xY;
+    }
+}
+
+
+export { clipLineSegmentToStrips }
+
+
+// Quokka tests - https://www.desmos.com/calculator/uyqsdkviih
+// import { createEmptyStrips } from "./create-empty-strips";
+
+// {
+//     const strips = createEmptyStrips(8);
+//     const seg = [[0, 100], [0, 400]];
+
+//     toDesmosStr(seg);
+//     clipLineSegmentToStrips(strips, 512, seg);
+//     testAllEmptyExcept(strips,[1,2,3,4,5,6]);
+// }
+
+
+// {
+//     const strips = createEmptyStrips(8);
+//     const seg = [[83, 166], [-90, 440]];
+
+//     toDesmosStr(seg);
+//     clipLineSegmentToStrips(strips, 512, seg);
+//     testAllEmptyExcept(strips,[4,5,6]);
+// }
+
+// {
+//     const strips = createEmptyStrips(8);
+//     const seg = [[-570, 236], [-392, 546]];
+
+//     toDesmosStr(seg);
+//     clipLineSegmentToStrips(strips, 512, seg);
+//     testAllEmptyExcept(strips,[3,4,5,6,7]);
+// }
+
+// {
+//     const strips = createEmptyStrips(8);
+//     const seg = [[-462, 632], [-152, 611]];
+
+//     toDesmosStr(seg);
+//     clipLineSegmentToStrips(strips, 512, seg);
+//     testAllEmptyExcept(strips,[]);
+// }
+
+
+// function toDesmosStr(seg: number[][]) {
+//     const [[x0,y0],[x1,y1]] = seg;
+//     return `\\left(\\left(1-t\\right)\\cdot${x0.toFixed(2)}+t\\cdot\\left(${x1.toFixed(2)}\\right),\\left(1-t\\right)\\cdot${y0.toFixed(2)}+t\\cdot${y1.toFixed(2)}\\right)`;
+// }
+// function testAllEmptyExcept(
+//         strips: Strip[],
+//         exceptions: number[]) {
+
+//     for (let i=0; i<strips.length; i++) {
+//         const strip = strips[i];
+//         const idx = exceptions.findIndex(v => v === i);
+//         const exception = exceptions[idx];
+//         const len = strip.lineSegs.length;
+//         if (exception === undefined) {
+//             if (len !== 0) {
+//                 throw new Error(`Strip ${i} must be empty`);
+//             }
+//         } else {
+//             if (len !== 1) {
+//                 throw new Error(`Strip ${i} must contain 1 segments, found ${len}`);
+//             }
+//         }
+//     }
+// }