webgl2-sdf 0.0.1

package/src/utils/seg-box-x.ts

@@ -0,0 +1,84 @@
+
+/**
+ * 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
+ */
+function segBoxX(
+        seg: number[][],
+        square: number[][]) {
+
+    const [p0, p1] = seg;
+    const [x0, y0] = p0;
+    const [x1, y1] = p1;
+    
+    const [[minX, minY], [maxX, maxY]] = square;
+
+    // Check if line segment intersects any of the four square edges
+    const dx = x1 - x0;
+    const dy = y1 - y0;
+    
+    // Parametric line equation: P(t) = P1 + t*(P2-P1), where 0 <= t <= 1
+    
+    const ts: number[] = [];
+    const ps: number[][] = [];
+
+    if (dx !== 0) {
+        // Check intersection with left edge (x = minX)
+        const tL = (minX - x0)/dx;
+        if (tL >= 0 && tL <= 1) {
+            const y = y0 + tL*dy;
+            if (y >= minY && y <= maxY) {
+                ts.push(tL);
+                ps.push([minX, y]);
+            }
+        }
+        
+        // Check intersection with right edge (x = maxX)
+        const tR = (maxX - x0)/dx;
+        if (tR >= 0 && tR <= 1) {
+            const y = y0 + tR*dy;
+            if (y >= minY && y <= maxY) {
+                ts.push(tR);
+                ps.push([maxX, y]);
+            }
+        }
+    }
+    
+    if (dy !== 0) {
+        // Check intersection with bottom edge (y = minY)
+        const tT = (minY - y0)/dy;
+        if (tT >= 0 && tT <= 1) {
+            const x = x0 + tT*dx;
+            if (x >= minX && x <= maxX) {
+                ts.push(tT);
+                ps.push([x, minY]);
+            }
+        }
+
+        // Check intersection with top edge (y = maxY)
+        const tB = (maxY - y0)/dy;
+        if (tB >= 0 && tB <= 1) {
+            const x = x0 + tB*dx;
+            if (x >= minX && x <= maxX) {
+                ts.push(tB);
+                ps.push([x, maxY]);
+            }
+        }
+    }
+    
+    // TODO might be more than 2!!
+    if (ts.length === 2) {
+        return ts[0] < ts[1]
+            ? ps
+            : [ps[1],ps[0]];
+    }
+
+    return ps;
+}
+
+
+export { segBoxX }

package/src/utils/seg-strip-x.ts

@@ -0,0 +1,72 @@
+
+/**
+ * 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
+ */
+function segStripX(
+        seg: number[][],
+        strip: number[]) {
+
+    const [p0, p1] = seg;
+    const [x0, y0] = p0;
+    const [x1, y1] = p1;
+    
+    const [maxX, minY, maxY] = strip;
+
+    // Check if line segment intersects any of the four square edges
+    const dx = x1 - x0;
+    const dy = y1 - y0;
+    
+    // Parametric line equation: P(t) = P1 + t*(P2-P1), where 0 <= t <= 1
+    
+    const ts: number[] = [];
+    const ps: number[][] = [];
+
+    if (dx !== 0) {
+        // Check intersection with right edge (x = maxX)
+        const tL = (maxX - x0)/dx;
+        if (tL >= 0 && tL <= 1) {
+            const y = y0 + tL*dy;
+            if (y >= minY && y <= maxY) {
+                ts.push(tL);
+                ps.push([maxX, y]);
+            }
+        }
+    }
+    
+    if (dy !== 0) {
+        // Check intersection with bottom edge (y = minY)
+        const tT = (minY - y0)/dy;
+        if (tT >= 0 && tT <= 1) {
+            const x = x0 + tT*dx;
+            if (x <= maxX) {
+                ts.push(tT);
+                ps.push([x, minY]);
+            }
+        }
+
+        // Check intersection with top edge (y = maxY)
+        const tB = (maxY - y0)/dy;
+        if (tB >= 0 && tB <= 1) {
+            const x = x0 + tB*dx;
+            if (x <= maxX) {
+                ts.push(tB);
+                ps.push([x, maxY]);
+            }
+        }
+    }
+    
+    if (ts.length === 2) {
+        return ts[0] < ts[1]
+            ? ps
+            : [ps[1],ps[0]];
+    }
+
+    return ps;
+}
+
+
+export { segStripX }

package/src/utils/sum.ts

@@ -0,0 +1,13 @@
+
+function sum(vs: number[]): number {
+    let total = 0;
+
+    for (let i=0; i<vs.length; i++) {
+        total += vs[i];
+    }
+
+    return total;
+}
+
+
+export { sum }

package/src/vector/dot.ts

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

package/src/vector/from-to-vec.ts

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

package/src/vector/len.ts

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

package/src/webgl-utils/compile-shader.ts

@@ -0,0 +1,15 @@
+
+function compileShader(
+        gl: WebGL2RenderingContext,
+        src: string,
+        type: typeof gl.VERTEX_SHADER | typeof gl.FRAGMENT_SHADER) {
+
+    const shader = gl.createShader(type)!;
+    gl.shaderSource(shader, src);
+    gl.compileShader(shader);
+
+    return shader;
+}
+
+
+export { compileShader }

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

@@ -0,0 +1,61 @@
+import type { Texture } from "../types/texture";
+import type { Program } from "../types/program";
+import type { GlContext } from "../types/gl-context";
+
+
+const cache = new WeakMap<WebGL2RenderingContext, GlContext>();
+
+
+/**
+ * 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
+ */
+function getWebGLContext<T>(
+        gl: WebGL2RenderingContext): GlContext {
+
+    {
+        const glContext = cache.get(gl);
+        if (glContext) { return glContext; }
+    }
+
+    const programs: { [index:string]: Program } = {};
+    const textures: { [index:string]: Texture } = {};
+    const framebufferStack: WebGLFramebuffer[] = [];
+
+    gl.canvas.addEventListener('webglcontextlost', e => {
+        handleContextLoss();
+        e.preventDefault();
+    }, false);
+
+    const glContext: GlContext = {
+        gl,
+        onContextLoss: handleContextLoss,
+        textures,
+        programs,
+        framebufferStack
+    };
+
+    cache.set(gl, glContext);
+
+    return glContext;
+
+
+    ////////////////////////
+
+    function handleContextLoss() {
+        deleteAllProps(programs);
+        deleteAllProps(textures);
+        framebufferStack.length = 0;
+    }
+}
+
+
+function deleteAllProps(o: { [key:string] : unknown }) {
+    Object.keys(o).forEach(key => { delete o[key]; });
+}
+
+
+export { getWebGLContext }

package/src/webgl-utils/set-attribute.ts

@@ -0,0 +1,74 @@
+import { Program } from "../types/program";
+import { GLattrType } from "../types/gl-type";
+import { GLusage } from "../types/gl-usage";
+
+
+const {
+    // Integer types
+    BYTE,            // 5120
+    UNSIGNED_BYTE,   // 5121
+    SHORT,           // 5122
+    UNSIGNED_SHORT,  // 5123
+    INT,             // 5124
+    UNSIGNED_INT,    // 5125
+    // Float types
+    FLOAT,           // 5126
+    HALF_FLOAT,      // 5131
+
+    INT_2_10_10_10_REV,           // 36255
+    UNSIGNED_INT_2_10_10_10_REV   // 33640
+} = WebGL2RenderingContext;
+
+
+/**
+ * 
+ * @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;
+ */
+function setAttribute(
+        program: Program) {
+
+    return (name: string,
+            size: number,
+            type: GLattrType,
+            usage: GLusage,
+            data: AllowSharedBufferSource | null,
+            instancingDivisor = 0,
+            stride = 0,
+            offset = 0) => {
+
+        const { gl, attributes } = program;
+
+        const attr = attributes[name] = attributes[name] ?? {
+            buf: gl.createBuffer(), // TODO should we destroy our buffers?
+            loc: gl.getAttribLocation(program.program, name),
+            data: null
+        }
+
+        const { loc, buf } = attr;
+
+        gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+        if (type === FLOAT || type === HALF_FLOAT) {
+            gl.vertexAttribPointer(loc, size, type, false, stride, offset);
+        } else {
+            gl.vertexAttribIPointer(loc, size, type, stride, offset);
+        }
+        gl.enableVertexAttribArray(loc);
+        if (instancingDivisor !== 0) {
+            gl.vertexAttribDivisor(loc, instancingDivisor);
+        }
+
+        if (data !== attr.data) {
+            gl.bufferData(gl.ARRAY_BUFFER, data, usage);
+            attr.data = data;
+        }
+    }
+}
+
+
+export { setAttribute }

package/src/webgl-utils/set-uniform-block.ts

@@ -0,0 +1,45 @@
+import { Program } from "../types/program";
+
+
+/**
+ * 
+ * @param program_ 
+ * @param blockName used both as reference within the `Program` and within
+ * the GLSL shaders
+ */
+function setUniformBlock(
+        program_: Program) {
+
+    return (blockName: string,
+            bindingPoint: number,
+            buffer: AllowSharedBufferSource) => {
+
+        const { gl, uniformBlocks, program } = program_;
+
+        // const sizeInBytes = buffer.byteLength;
+
+        let uniformBlock = uniformBlocks[blockName];
+        if (uniformBlocks[blockName] === undefined) {
+            const blockIndex = gl.getUniformBlockIndex(program, blockName);
+            gl.uniformBlockBinding(program, blockIndex, bindingPoint);
+            const buf = gl.createBuffer();
+
+            gl.bindBuffer(gl.UNIFORM_BUFFER, buf);
+
+            uniformBlock = { blockName, blockIndex, buf };
+            uniformBlocks[blockName] = uniformBlock;
+        } else {
+            gl.bindBuffer(gl.UNIFORM_BUFFER, uniformBlock.buf);
+        }
+
+        const { buf } = uniformBlock;
+        
+        gl.bufferData(gl.UNIFORM_BUFFER, buffer, gl.DYNAMIC_DRAW);
+        // gl.bindBuffer(gl.UNIFORM_BUFFER, null);
+        gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, buf);
+        // gl.bindBufferRange(gl.UNIFORM_BUFFER, bindingPoint, ubo, 0, sizeInBytes);
+    }
+}
+
+
+export { setUniformBlock }

package/src/webgl-utils/set-uniform.ts

@@ -0,0 +1,24 @@
+import { Program } from "../types/program";
+import { UniformType } from "./uniform-type";
+
+
+function setUniform(
+        program: Program) {
+
+    return (type: UniformType,
+            name: string,
+            ...values: any[]): void => {
+
+        const { gl, uniforms } = program;
+
+        const uniformLoc =
+            uniforms[name] ||
+            (uniforms[name] = gl.getUniformLocation(program.program, name));
+
+        // @ts-ignore
+        gl[`uniform${type}`](uniformLoc, ...values);
+    }
+}
+
+
+export { setUniform }

package/src/webgl-utils/uniform-block.ts

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

package/src/webgl-utils/uniform-type.ts

@@ -0,0 +1,10 @@
+
+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/src/webgl-utils/use-program.ts

@@ -0,0 +1,48 @@
+import type { Program } from "../types/program";
+import type { Attribute } from "../types/attribute";
+import type { UniformBlock } from "./uniform-block";
+import type { GlContext } from "../types/gl-context";
+import { compileShader } from "./compile-shader";
+
+
+/**
+ * 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
+ */
+function initProgram(
+            glContext: GlContext,
+            name: string,
+            vert: string,
+            frag: string): Program {
+
+    const { gl, programs } = glContext;
+
+    if (programs[name]) {
+        return programs[name];
+    }
+
+    const attributes: { [index:string]: Attribute } = {};
+    const uniforms: { [index:string]: WebGLUniformLocation | null } = {};
+    const uniformBlocks: { [index:string]: UniformBlock } = {};
+
+    const program = gl.createProgram();
+    gl.attachShader(program, compileShader(gl, vert, gl.VERTEX_SHADER));
+    gl.attachShader(program, compileShader(gl, frag, gl.FRAGMENT_SHADER));
+    gl.linkProgram(program);
+
+    programs[name] = { gl, program, attributes, uniforms, uniformBlocks };
+
+    return programs[name];
+}
+
+
+export { initProgram }

package/src/webgl-utils/use-texture.ts

@@ -0,0 +1,34 @@
+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
+ */
+function useTexture(
+        glContext: GlContext,
+        textureIndex: number,
+        name: string) {
+
+    const { gl, textures } = glContext;
+    gl.activeTexture(gl.TEXTURE0 + textureIndex);
+    let texture = textures[name];
+    
+    if (!texture) {
+        texture = textures[name] = { tex: gl.createTexture() };
+        gl.bindTexture(gl.TEXTURE_2D, texture.tex);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    } else {
+        gl.bindTexture(gl.TEXTURE_2D, texture.tex);
+    }
+
+    return texture;
+}
+
+
+export { useTexture }