webgl2-sdf 0.0.1

package/node/svg/path-segment/z.d.ts

@@ -0,0 +1,13 @@
+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.
+ */
+declare function z(s: PathState): number[][];
+export { z };

package/node/svg/path-state.d.ts

@@ -0,0 +1,11 @@
+/** @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/node/tex-width.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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
+ */
+declare const TEX_WIDTH = 256;
+export { TEX_WIDTH };

package/node/types/attribute.d.ts

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

package/node/types/cell.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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/node/types/gl-context.d.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/node/types/gl-type.d.ts

@@ -0,0 +1,2 @@
+type GLattrType = typeof WebGL2RenderingContext.BYTE | typeof WebGL2RenderingContext.SHORT | typeof WebGL2RenderingContext.UNSIGNED_BYTE | typeof WebGL2RenderingContext.UNSIGNED_SHORT | typeof WebGL2RenderingContext.FLOAT | 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/node/types/gl-usage.d.ts

@@ -0,0 +1,2 @@
+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/node/types/program.d.ts

@@ -0,0 +1,16 @@
+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/node/types/strip.d.ts

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

package/node/types/texture.d.ts

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

package/node/utils/calc-circs.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Represents the max distance (in cell side length units) from one corner of
+ * the viewbox to the opposing corner.
+ */
+declare const circsCache: Range[];
+interface Range {
+    readonly from: number;
+    readonly u: number;
+    readonly v: number;
+}
+export { circsCache };

package/node/utils/clip-line-segment-to-grid.d.ts

@@ -0,0 +1,14 @@
+import type { Cell } from "../types/cell";
+/**
+ * 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)
+ */
+declare function clipLineSegmentToGrid(grid: Cell[][], width: number, height: number, colCount: number, cellSize: number, seg: number[][], padCount: number): void;
+export { clipLineSegmentToGrid };

package/node/utils/clip-line-segment-to-strips.d.ts

@@ -0,0 +1,13 @@
+import type { Strip } from "../types/strip";
+/**
+ * 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)
+ */
+declare function clipLineSegmentToStrips(strips: Strip[], height: number, seg: number[][]): void;
+export { clipLineSegmentToStrips };

package/node/utils/create-empty-grid.d.ts

@@ -0,0 +1,8 @@
+import { Cell } from "../types/cell";
+/**
+ *
+ * @param colCount
+ * @param padCount
+ */
+declare function createEmptyGrid(colCount: number, padCount: number): Cell[][];
+export { createEmptyGrid };

package/node/utils/create-empty-strips.d.ts

@@ -0,0 +1,7 @@
+import { Strip } from "../types/strip";
+/**
+ *
+ * @param count the number of strips
+ */
+declare function createEmptyStrips(): Strip[];
+export { createEmptyStrips };

package/node/utils/distance-seg-to-p.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns the minimum distance from the given line segment to the origin.
+ */
+declare function distanceSegToP(seg: number[][], p: number[]): number;
+export { distanceSegToP };

package/node/utils/find-close-cells.d.ts

@@ -0,0 +1,3 @@
+import type { Cell } from "../types/cell";
+declare function findCloseCells(grid: Cell[][], colCount: number, cellSize: number, maxDistance: number, padCount: number): void;
+export { findCloseCells };

package/node/utils/find-crossing-cells.d.ts

@@ -0,0 +1,3 @@
+import type { Cell } from "../types/cell";
+declare function findCrossingCells(grid: Cell[][], colCount: number, padCount: number): void;
+export { findCrossingCells };

package/node/utils/get-distance-to-line-function.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Returns a function that returns the signed distance to the given line from
+ * the given point.
+ *
+ * @param pS a point on the line
+ * @param pE a different point on the line; if `pS` is the same as `pE` then
+ * the distance to the point `pS` (or `pE`) will be returned.
+ */
+declare function getDistanceToLineFunction(pS: number[], pE: number[]): (p: number[]) => number;
+export { getDistanceToLineFunction };

package/node/utils/jump-idx.d.ts

@@ -0,0 +1,2 @@
+declare function jumpIdx(c: number): number;
+export { jumpIdx };

package/node/utils/map-to-viewbox.d.ts

@@ -0,0 +1,2 @@
+declare function mapToViewbox(viewbox: [number, number, number, number], width: number, height: number, psss: (number[][])[][]): (number[][])[][];
+export { mapToViewbox };

package/node/utils/seg-box-x.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Returns the ordered (by t-value) intersection points of the given line
+ * segment and square.
+ *
+ * @param seg a line segment given by its endpoints
+ * @param square a square given by its two opposing corner points, min-x, min-y
+ * first
+ */
+declare function segBoxX(seg: number[][], square: number[][]): number[][];
+export { segBoxX };

package/node/utils/seg-strip-x.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Returns the ordered (by t-value) intersection points of the given line
+ * segment and half-open strip.
+ *
+ * @param seg a line segment given by its endpoints
+ * @param strip a half-open strip given by max-x, min-y, max-y
+ */
+declare function segStripX(seg: number[][], strip: number[]): number[][];
+export { segStripX };

package/node/vector/dot.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Returns the dot (inner) product between two 2-vectors.
+ *
+ * @param a the first vector
+ * @param b the second vector
+ */
+declare function dot(a: number[], b: number[]): number;
+export { dot };

package/node/vector/from-to-vec.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Returns the second 2-vector minus the first.
+ *
+ * @param p the first vector
+ * @param q the second vector
+  */
+declare function fromToVec(p: number[], q: number[]): number[];
+export { fromToVec };

package/node/vector/len.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns the length of the given 2-vector.
+ * @param p a 2d vector
+ */
+declare function len(p: number[]): number;
+export { len };

package/node/webgl-utils/compile-shader.d.ts

@@ -0,0 +1,2 @@
+declare function compileShader(gl: WebGL2RenderingContext, src: string, type: typeof gl.VERTEX_SHADER | typeof gl.FRAGMENT_SHADER): WebGLShader;
+export { compileShader };

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

@@ -0,0 +1,10 @@
+import type { GlContext } from "../types/gl-context";
+/**
+ * Returns a `GlContext` by reference via a cache of `WebGL2RenderingContext`s.
+ * * if `gl` doesn't exist in the cache yet a new context is created.
+ *
+ * @param gl the `WebGL2RenderingContext` context to wrap
+ * @param callback
+ */
+declare function getWebGLContext<T>(gl: WebGL2RenderingContext): GlContext;
+export { getWebGLContext };

package/node/webgl-utils/set-attribute.d.ts

@@ -0,0 +1,15 @@
+import { Program } from "../types/program";
+import { GLattrType } from "../types/gl-type";
+import { GLusage } from "../types/gl-usage";
+/**
+ *
+ * @param name name used in glsl shaders
+ * @param size the number of components per vertex attribute. Must be 1, 2, 3, or 4.
+ * @param usage one of `gl.STATIC_DRAW`, `gl.DYNAMIC_DRAW`, `gl.STREAM_DRAW`, etc.
+ * @param data
+ * @param instancingDivisor defaults to 0; 0, 1, ...
+ * @param stride defaults to 0;
+ * @param offset defaults to 0;
+ */
+declare function setAttribute(program: Program): (name: string, size: number, type: GLattrType, usage: GLusage, data: AllowSharedBufferSource | null, instancingDivisor?: number, stride?: number, offset?: number) => void;
+export { setAttribute };

package/node/webgl-utils/set-uniform-block.d.ts

@@ -0,0 +1,9 @@
+import { Program } from "../types/program";
+/**
+ *
+ * @param program_
+ * @param blockName used both as reference within the `Program` and within
+ * the GLSL shaders
+ */
+declare function setUniformBlock(program_: Program): (blockName: string, bindingPoint: number, buffer: AllowSharedBufferSource) => void;
+export { setUniformBlock };

package/node/webgl-utils/set-uniform.d.ts

@@ -0,0 +1,4 @@
+import { Program } from "../types/program";
+import { UniformType } from "./uniform-type";
+declare function setUniform(program: Program): (type: UniformType, name: string, ...values: any[]) => void;
+export { setUniform };

package/node/webgl-utils/uniform-block.d.ts

@@ -0,0 +1,6 @@
+interface UniformBlock {
+    readonly blockName: string;
+    readonly blockIndex: number;
+    readonly buf: WebGLBuffer;
+}
+export { UniformBlock };

package/node/webgl-utils/uniform-type.d.ts

@@ -0,0 +1,2 @@
+type UniformType = '1f' | '2f' | '3f' | '4f' | '1i' | '2i' | '3i' | '4i' | '1ui' | '2ui' | '3ui' | '4ui' | '1fv' | '2fv' | '3fv' | '4fv' | '1iv' | '2iv' | '3iv' | '4iv' | '1uiv' | '2uiv' | '3uiv' | '4uiv' | 'Matrix2fv' | 'Matrix3fv' | 'Matrix4fv' | 'Matrix2x3fv' | 'Matrix3x2fv' | 'Matrix2x4fv' | 'Matrix4x2fv' | 'Matrix3x4fv' | 'Matrix4x3fv';
+export type { UniformType };

package/node/webgl-utils/use-program.d.ts

@@ -0,0 +1,17 @@
+import type { Program } from "../types/program";
+import type { GlContext } from "../types/gl-context";
+/**
+ * Initiates a WebGL2 program by:
+ *
+ * * keeping track of `attributes` and `uniforms` locally (within the returned `Program`)
+ * * GL: `createProgram`
+ * * GL: `compileShader` and `attachShader` (for both Vertex and Fragment shaders)
+ * * GL: `linkProgram`
+ *
+ * @param glContext a context encapsulating our WebGl2 context
+ * @param name a name for us to refer to this program
+ * @param vert the vertex shader for this program
+ * @param frag the fragment shader for this program
+ */
+declare function initProgram(glContext: GlContext, name: string, vert: string, frag: string): Program;
+export { initProgram };

package/node/webgl-utils/use-texture.d.ts

@@ -0,0 +1,9 @@
+import type { GlContext } from "../types/gl-context.js";
+/**
+ *
+ * @param glContext
+ * @param textureIndex the texture index to use on the GPU
+ * @param name a custom name to give to the texture for caching
+ */
+declare function useTexture(glContext: GlContext, textureIndex: number, name: string): import("../types/texture.js").Texture;
+export { useTexture };

package/node/webgl2.d.ts

@@ -0,0 +1,2 @@
+declare function generateIntoFramebuffer(gl: WebGL2RenderingContext, psss: (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, resolution?: 0.5 | 1): void;
+export { generateIntoFramebuffer };

package/package.json

@@ -0,0 +1,56 @@
+{
+    "name": "webgl2-sdf",
+    "sideEffects": false,
+    "description": "Fast sdf generator from bezier curves or svg string.",
+    "version": "0.0.1",
+    "author": {
+        "name": "Floris Steenkamp"
+    },
+    "license": "MIT",
+    "type": "module",
+    "main": "./dist/index.js",
+    "exports": "./dist/index.js",
+    "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+    },
+    "private": false,
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/FlorisSteenkamp/webgl2-sdf.git"
+    },
+    "bugs": {
+        "url": "https://github.com/FlorisSteenkamp/webgl2-sdf/issues"
+    },
+    "keywords": [
+        "signed distance transform",
+        "signed",
+        "distance",
+        "transform",
+        "webgl",
+        "webgl2"
+    ],
+    "dependencies": {
+    },
+    "devDependencies": {
+        "@types/node": "^25.0.9",
+        "c8": "^10.1.3",
+        "rimraf": "^6.1.2",
+        "ts-loader": "^9.5.4",
+        "ts-node": "^10.9.2",
+        "typescript": "^5.9.3",
+        "webpack": "^5.104.1",
+        "webpack-bundle-analyzer": "^5.1.1",
+        "webpack-cli": "^6.0.1",
+        "source-map-support": "^0.5.21"
+    },
+    "files": [
+        "node",
+        "browser",
+        "src"
+    ],
+    "scripts": {
+        "build": "npm run build-browser && npm run build-node",
+        "build-node": "rimraf node && tsc",
+        "build-browser": "webpack"
+    }
+}

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

@@ -0,0 +1,39 @@
+import { isReallyPoint } from "./is-really-point.js";
+import { splitIntoLineSegments } from "./split-into-line-segments.js";
+
+
+/**
+ * Returns an array of line segments that is an approximation of the given
+ * bezier curves up to `PIXEL_ACCURACY` accuracy.
+ * 
+ * @param bezierLoops 
+ * @param resolution each bezier curve is split until its hausdorff distance
+ * from the line connecting it's endpoints are less than this value
+ */
+function bezierCurvesToLineSegs(
+        bezierLoops: (number[][])[][],
+        resolution: 0.5|1) {
+
+    let lineSegs: number[][][] = [];
+    for (let i=0; i<bezierLoops.length; i++) {
+        const pss = bezierLoops[i];
+        for (let j=0; j<pss.length; j++) {
+            const ps = pss[j];
+            if (isReallyPoint(ps)) { continue; }
+
+            if (ps.length === 2) {
+                lineSegs.push(ps);
+                continue;
+            }
+
+            const lineSegs_ = splitIntoLineSegments(ps, resolution);
+
+            lineSegs.push(...lineSegs_.filter(ps => !isReallyPoint(ps)));
+        }
+    }
+
+    return lineSegs;
+}
+
+
+export { bezierCurvesToLineSegs }

package/src/bezier/eval-de-casteljau.ts

@@ -0,0 +1,78 @@
+
+/** 
+ * Returns the resulting point of evaluating the given bezier curve at the 
+ * given parameter `t`.
+ * 
+ * * uses [De Casteljau's algorithm](https://en.wikipedia.org/wiki/De_Casteljau%27s_algorithm)
+ * in double precision floating point arithmetic
+ * 
+ * The resulting point `p` is returned as the pair `[x,y]`, where `x` and `y` are 
+ * double precision floating point numbers.
+ * 
+ * @param ps an order 1,2 or 3 bezier curve, e.g. `[[0,0],[1,1],[2,1],[2,0]]`
+ * @param t the parameter value where the bezier should be evaluated
+ * 
+ * @doc mdx
+ **/
+function evalDeCasteljau(
+		ps: number[][], 
+		t: number): number[] {
+
+	if (t === 0) {
+		return ps[0];
+	} else if (t === 1) {
+		return ps[ps.length-1];
+	}
+
+	if (ps.length === 4) {
+		const [[x0,y0], [x1,y1], [x2,y2], [x3,y3]] = ps;	
+
+		const a01 = x0 + (x1 - x0)*t;
+		const a11 = x1 + (x2 - x1)*t;
+		const a21 = x2 + (x3 - x2)*t;
+		const a02 = a01 + (a11 - a01)*t;
+		const a12 = a11 + (a21 - a11)*t;
+		const x = a02 + (a12 - a02)*t;
+
+		const b01 = y0 + (y1 - y0)*t;
+		const b11 = y1 + (y2 - y1)*t;
+		const b21 = y2 + (y3 - y2)*t;
+		const b02 = b01 + (b11 - b01)*t;
+		const b12 = b11 + (b21 - b11)*t;
+		const y = b02 + (b12 - b02)*t;
+
+		return [x,y];
+	} 
+	
+	if (ps.length === 3) {
+		const [[x0,y0], [x1,y1], [x2,y2]] = ps;	
+
+		const a01 = x0 + (x1 - x0)*t;
+		const a11 = x1 + (x2 - x1)*t;
+		const x = a01 + (a11 - a01)*t;
+
+		const b01 = y0 + (y1 - y0)*t;
+		const b11 = y1 + (y2 - y1)*t;
+		const y = b01 + (b11 - b01)*t;
+
+		return [x,y];
+	} 
+	
+	if (ps.length === 2) {
+		const [[x0,y0], [x1,y1]] = ps;	
+
+		const x = x0 + (x1 - x0)*t;
+		const y = y0 + (y1 - y0)*t;
+
+		return [x,y];
+	}
+
+	if (ps.length === 1) {
+		return ps[0];	
+	}
+
+	throw new Error('The given bezier curve must be of order <= 3.');
+}
+
+
+export { evalDeCasteljau }