@vector-display/webgl 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Rick Segrest
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,62 @@
+# @vector-display/webgl
+
+WebGL2 renderer for [**vector-display**](https://www.npmjs.com/package/@vector-display/core). It draws an entire display list in a single draw call, with anti-aliased beams, a soft glow, and optional bright endpoints like a real vector monitor.
+
+> **Status:** early (0.x). The API may change between minor versions.
+
+## Install
+
+```sh
+npm install @vector-display/core @vector-display/webgl
+```
+
+ES modules only, with TypeScript declarations. Requires a browser with WebGL2.
+
+## Usage
+
+```ts
+import { DisplayList, Shape } from "@vector-display/core";
+import { WebGLVectorRenderer } from "@vector-display/webgl";
+
+const renderer = WebGLVectorRenderer.fromCanvas(canvas, { width: 1024, height: 768 });
+renderer.setLineStyle({ beamWidth: 1.5 * devicePixelRatio, glowRadius: 2 * devicePixelRatio });
+
+const displayList = new DisplayList();
+const square = Shape.fromPolyline({
+  points: [{ x: -10, y: -10 }, { x: 10, y: -10 }, { x: 10, y: 10 }, { x: -10, y: 10 }],
+  isClosed: true,
+});
+
+function drawFrame() {
+  displayList.clear();
+  displayList.setColor({ red: 0, green: 1, blue: 0 });
+  displayList.addShape(square, { x: 512, y: 384, rotation: 0, scale: 4, intensity: 1 });
+  renderer.clear();
+  renderer.drawDisplayList(displayList);
+  requestAnimationFrame(drawFrame);
+}
+requestAnimationFrame(drawFrame);
+```
+
+The canvas's pixel size is up to you (for example CSS size × `devicePixelRatio`); the renderer maps the world size you pass onto it.
+
+## Line style
+
+`renderer.setLineStyle({...})` accepts any of these (sizes in framebuffer pixels):
+
+| Field | Default | Effect |
+| --- | --- | --- |
+| `beamWidth` | 1.5 | Core line width |
+| `glowRadius` / `glowStrength` | 4 / 0.25 | Soft halo around each line |
+| `endpointBrightness` | 0.6 | Brightness added at segment endpoints (0 removes it) |
+| `jointOverlap` | 1 | Brightness added where connected segments meet (0 gives seamless joints) |
+
+## Using it with other libraries
+
+- `new WebGLVectorRenderer(gl, worldSize)` accepts an existing `WebGL2RenderingContext`.
+- `drawDisplayList()` draws additively into whatever framebuffer is bound and doesn't clear it, so you can render into your own texture.
+- `createShaderProgram(gl, { vertexSource, fragmentSource })` is exported for effect code.
+
+## License
+
+MIT © Rick Segrest

package/dist/WebGLVectorRenderer.d.ts

@@ -0,0 +1,36 @@
+import { type DisplayList } from "@vector-display/core";
+export interface LineStyle {
+    readonly beamWidth: number;
+    readonly glowRadius: number;
+    readonly glowStrength: number;
+    readonly endpointBrightness: number;
+    readonly jointOverlap: number;
+}
+export interface WorldSize {
+    readonly width: number;
+    readonly height: number;
+}
+export declare const DEFAULT_LINE_STYLE: LineStyle;
+export declare class WebGLVectorRenderer {
+    readonly gl: WebGL2RenderingContext;
+    private readonly program;
+    private readonly uniforms;
+    private readonly vertexArray;
+    private readonly segmentBuffer;
+    private segmentBufferCapacityBytes;
+    private worldSize;
+    private lineStyle;
+    constructor(gl: WebGL2RenderingContext, worldSize: WorldSize);
+    static fromCanvas(canvas: HTMLCanvasElement, worldSize: WorldSize): WebGLVectorRenderer;
+    setWorldSize(worldSize: WorldSize): void;
+    setLineStyle(lineStyle: Partial<LineStyle>): void;
+    clear(): void;
+    drawDisplayList(displayList: DisplayList): void;
+    dispose(): void;
+    private findUniformLocations;
+    private createSegmentVertexArray;
+    private uploadSegmentData;
+    private applyUniforms;
+}
+export default WebGLVectorRenderer;
+//# sourceMappingURL=WebGLVectorRenderer.d.ts.map

package/dist/WebGLVectorRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebGLVectorRenderer.d.ts","sourceRoot":"","sources":["../src/WebGLVectorRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAKjF,MAAM,WAAW,SAAS;IACtB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAE9B,QAAQ,CAAC,kBAAkB,EAAE,MAAM,CAAC;IAEpC,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;CACjC;AAED,MAAM,WAAW,SAAS;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,kBAAkB,EAAE,SAMhC,CAAC;AAyBF,qBAAa,mBAAmB;IAC5B,SAAgB,EAAE,EAAE,sBAAsB,CAAC;IAC3C,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAe;IACvC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAuB;IAChD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAyB;IACrD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAc;IAC5C,OAAO,CAAC,0BAA0B,CAAK;IACvC,OAAO,CAAC,SAAS,CAAY;IAC7B,OAAO,CAAC,SAAS,CAAiC;IAElD,YAAY,EAAE,EAAE,sBAAsB,EAAE,SAAS,EAAE,SAAS,EAU3D;IAED,OAAc,UAAU,CAAC,MAAM,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,GAAG,mBAAmB,CAS7F;IAEM,YAAY,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,CAE9C;IAEM,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAEvD;IAEM,KAAK,IAAI,IAAI,CAKnB;IAGM,eAAe,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI,CAcrD;IAEM,OAAO,IAAI,IAAI,CAIrB;IAED,OAAO,CAAC,oBAAoB;IAe5B,OAAO,CAAC,wBAAwB;IAehC,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,aAAa;CAaxB;eAEc,mBAAmB"}

package/dist/WebGLVectorRenderer.js

@@ -0,0 +1,137 @@
+import { FLOATS_PER_BEAM_SEGMENT } from "@vector-display/core";
+import { BEAM_FRAGMENT_SHADER, BEAM_VERTEX_SHADER } from "./beamShaders.js";
+import { createShaderProgram } from "./createShaderProgram.js";
+export const DEFAULT_LINE_STYLE = {
+    beamWidth: 1.5,
+    glowRadius: 4,
+    glowStrength: 0.25,
+    endpointBrightness: 0.6,
+    jointOverlap: 1,
+};
+const BYTES_PER_FLOAT = 4;
+// Matches the packed layout documented on FLOATS_PER_BEAM_SEGMENT in @vector-display/core.
+const SEGMENT_ATTRIBUTES = [
+    { location: 0, size: 4, floatOffset: 0 },
+    { location: 1, size: 4, floatOffset: 4 },
+    { location: 2, size: 4, floatOffset: 8 },
+    { location: 3, size: 2, floatOffset: 12 },
+];
+const GLOW_EXTENT_IN_RADII = 3;
+export class WebGLVectorRenderer {
+    gl;
+    program;
+    uniforms;
+    vertexArray;
+    segmentBuffer;
+    segmentBufferCapacityBytes = 0;
+    worldSize;
+    lineStyle = DEFAULT_LINE_STYLE;
+    constructor(gl, worldSize) {
+        this.gl = gl;
+        this.worldSize = worldSize;
+        this.program = createShaderProgram(gl, {
+            vertexSource: BEAM_VERTEX_SHADER,
+            fragmentSource: BEAM_FRAGMENT_SHADER,
+        });
+        this.uniforms = this.findUniformLocations();
+        this.segmentBuffer = gl.createBuffer();
+        this.vertexArray = this.createSegmentVertexArray();
+    }
+    static fromCanvas(canvas, worldSize) {
+        const gl = canvas.getContext("webgl2", {
+            alpha: false,
+            antialias: false,
+            depth: false,
+            premultipliedAlpha: false,
+        });
+        if (!gl)
+            throw new Error("WebGL2 is not available in this browser");
+        return new WebGLVectorRenderer(gl, worldSize);
+    }
+    setWorldSize(worldSize) {
+        this.worldSize = worldSize;
+    }
+    setLineStyle(lineStyle) {
+        this.lineStyle = { ...this.lineStyle, ...lineStyle };
+    }
+    clear() {
+        const gl = this.gl;
+        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+        gl.clearColor(0, 0, 0, 1);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+    }
+    // Draws additively into the currently bound framebuffer, which must match the drawing buffer size.
+    drawDisplayList(displayList) {
+        const segmentCount = displayList.segmentCount;
+        if (segmentCount === 0)
+            return;
+        const gl = this.gl;
+        this.uploadSegmentData(displayList.getSegmentData());
+        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+        gl.enable(gl.BLEND);
+        gl.blendEquation(gl.FUNC_ADD);
+        gl.blendFunc(gl.ONE, gl.ONE);
+        gl.useProgram(this.program);
+        this.applyUniforms();
+        gl.bindVertexArray(this.vertexArray);
+        gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, segmentCount);
+        gl.bindVertexArray(null);
+    }
+    dispose() {
+        this.gl.deleteBuffer(this.segmentBuffer);
+        this.gl.deleteVertexArray(this.vertexArray);
+        this.gl.deleteProgram(this.program);
+    }
+    findUniformLocations() {
+        const gl = this.gl;
+        const program = this.program;
+        return {
+            worldSize: gl.getUniformLocation(program, "u_worldSize"),
+            targetSize: gl.getUniformLocation(program, "u_targetSize"),
+            quadRadius: gl.getUniformLocation(program, "u_quadRadius"),
+            beamHalfWidth: gl.getUniformLocation(program, "u_beamHalfWidth"),
+            glowRadius: gl.getUniformLocation(program, "u_glowRadius"),
+            glowStrength: gl.getUniformLocation(program, "u_glowStrength"),
+            endpointBrightness: gl.getUniformLocation(program, "u_endpointBrightness"),
+            jointOverlap: gl.getUniformLocation(program, "u_jointOverlap"),
+        };
+    }
+    createSegmentVertexArray() {
+        const gl = this.gl;
+        const vertexArray = gl.createVertexArray();
+        const strideBytes = FLOATS_PER_BEAM_SEGMENT * BYTES_PER_FLOAT;
+        gl.bindVertexArray(vertexArray);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.segmentBuffer);
+        for (const attribute of SEGMENT_ATTRIBUTES) {
+            gl.enableVertexAttribArray(attribute.location);
+            gl.vertexAttribPointer(attribute.location, attribute.size, gl.FLOAT, false, strideBytes, attribute.floatOffset * BYTES_PER_FLOAT);
+            gl.vertexAttribDivisor(attribute.location, 1);
+        }
+        gl.bindVertexArray(null);
+        return vertexArray;
+    }
+    uploadSegmentData(segmentData) {
+        const gl = this.gl;
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.segmentBuffer);
+        if (segmentData.byteLength > this.segmentBufferCapacityBytes) {
+            this.segmentBufferCapacityBytes = segmentData.byteLength * 2;
+            gl.bufferData(gl.ARRAY_BUFFER, this.segmentBufferCapacityBytes, gl.DYNAMIC_DRAW);
+        }
+        gl.bufferSubData(gl.ARRAY_BUFFER, 0, segmentData);
+    }
+    applyUniforms() {
+        const gl = this.gl;
+        const { beamWidth, glowRadius, glowStrength, endpointBrightness, jointOverlap } = this.lineStyle;
+        const beamHalfWidth = beamWidth / 2;
+        gl.uniform2f(this.uniforms.worldSize, this.worldSize.width, this.worldSize.height);
+        gl.uniform2f(this.uniforms.targetSize, gl.drawingBufferWidth, gl.drawingBufferHeight);
+        gl.uniform1f(this.uniforms.quadRadius, beamHalfWidth + glowRadius * GLOW_EXTENT_IN_RADII + 1);
+        gl.uniform1f(this.uniforms.beamHalfWidth, beamHalfWidth);
+        gl.uniform1f(this.uniforms.glowRadius, glowRadius);
+        gl.uniform1f(this.uniforms.glowStrength, glowStrength);
+        gl.uniform1f(this.uniforms.endpointBrightness, endpointBrightness);
+        gl.uniform1f(this.uniforms.jointOverlap, jointOverlap);
+    }
+}
+export default WebGLVectorRenderer;
+//# sourceMappingURL=WebGLVectorRenderer.js.map

package/dist/WebGLVectorRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebGLVectorRenderer.js","sourceRoot":"","sources":["../src/WebGLVectorRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAoB,MAAM,sBAAsB,CAAC;AACjF,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC5E,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAkB/D,MAAM,CAAC,MAAM,kBAAkB,GAAc;IACzC,SAAS,EAAE,GAAG;IACd,UAAU,EAAE,CAAC;IACb,YAAY,EAAE,IAAI;IAClB,kBAAkB,EAAE,GAAG;IACvB,YAAY,EAAE,CAAC;CAClB,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,CAAC;AAE1B,2FAA2F;AAC3F,MAAM,kBAAkB,GAAG;IACvB,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE;IACxC,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE;IACxC,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE;IACxC,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE;CACnC,CAAC;AAEX,MAAM,oBAAoB,GAAG,CAAC,CAAC;AAa/B,MAAM,OAAO,mBAAmB;IACZ,EAAE,CAAyB;IAC1B,OAAO,CAAe;IACtB,QAAQ,CAAuB;IAC/B,WAAW,CAAyB;IACpC,aAAa,CAAc;IACpC,0BAA0B,GAAG,CAAC,CAAC;IAC/B,SAAS,CAAY;IACrB,SAAS,GAAc,kBAAkB,CAAC;IAElD,YAAY,EAA0B,EAAE,SAAoB;QACxD,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACb,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,OAAO,GAAG,mBAAmB,CAAC,EAAE,EAAE;YACnC,YAAY,EAAE,kBAAkB;YAChC,cAAc,EAAE,oBAAoB;SACvC,CAAC,CAAC;QACH,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5C,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC;QACvC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC;IACvD,CAAC;IAEM,MAAM,CAAC,UAAU,CAAC,MAAyB,EAAE,SAAoB;QACpE,MAAM,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC,QAAQ,EAAE;YACnC,KAAK,EAAE,KAAK;YACZ,SAAS,EAAE,KAAK;YAChB,KAAK,EAAE,KAAK;YACZ,kBAAkB,EAAE,KAAK;SAC5B,CAAC,CAAC;QACH,IAAI,CAAC,EAAE;YAAE,MAAM,IAAI,KAAK,CAAC,yCAAyC,CAAC,CAAC;QACpE,OAAO,IAAI,mBAAmB,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;IAClD,CAAC;IAEM,YAAY,CAAC,SAAoB;QACpC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;IAC/B,CAAC;IAEM,YAAY,CAAC,SAA6B;QAC7C,IAAI,CAAC,SAAS,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,SAAS,EAAE,CAAC;IACzD,CAAC;IAEM,KAAK;QACR,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;QACnB,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,kBAAkB,EAAE,EAAE,CAAC,mBAAmB,CAAC,CAAC;QACjE,EAAE,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAC1B,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC;IAClC,CAAC;IAED,mGAAmG;IAC5F,eAAe,CAAC,WAAwB;QAC3C,MAAM,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC;QAC9C,IAAI,YAAY,KAAK,CAAC;YAAE,OAAO;QAC/B,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;QACnB,IAAI,CAAC,iBAAiB,CAAC,WAAW,CAAC,cAAc,EAAE,CAAC,CAAC;QACrD,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,kBAAkB,EAAE,EAAE,CAAC,mBAAmB,CAAC,CAAC;QACjE,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QACpB,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;QAC9B,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC;QAC7B,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC5B,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACrC,EAAE,CAAC,mBAAmB,CAAC,EAAE,CAAC,cAAc,EAAE,CAAC,EAAE,CAAC,EAAE,YAAY,CAAC,CAAC;QAC9D,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAEM,OAAO;QACV,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACzC,IAAI,CAAC,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC5C,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACxC,CAAC;IAEO,oBAAoB;QACxB,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;QACnB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAC7B,OAAO;YACH,SAAS,EAAE,EAAE,CAAC,kBAAkB,CAAC,OAAO,EAAE,aAAa,CAAC;YACxD,UAAU,EAAE,EAAE,CAAC,kBAAkB,CAAC,OAAO,EAAE,cAAc,CAAC;YAC1D,UAAU,EAAE,EAAE,CAAC,kBAAkB,CAAC,OAAO,EAAE,cAAc,CAAC;YAC1D,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAAC,OAAO,EAAE,iBAAiB,CAAC;YAChE,UAAU,EAAE,EAAE,CAAC,kBAAkB,CAAC,OAAO,EAAE,cAAc,CAAC;YAC1D,YAAY,EAAE,EAAE,CAAC,kBAAkB,CAAC,OAAO,EAAE,gBAAgB,CAAC;YAC9D,kBAAkB,EAAE,EAAE,CAAC,kBAAkB,CAAC,OAAO,EAAE,sBAAsB,CAAC;YAC1E,YAAY,EAAE,EAAE,CAAC,kBAAkB,CAAC,OAAO,EAAE,gBAAgB,CAAC;SACjE,CAAC;IACN,CAAC;IAEO,wBAAwB;QAC5B,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;QACnB,MAAM,WAAW,GAAG,EAAE,CAAC,iBAAiB,EAAE,CAAC;QAC3C,MAAM,WAAW,GAAG,uBAAuB,GAAG,eAAe,CAAC;QAC9D,EAAE,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;QAChC,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACnD,KAAK,MAAM,SAAS,IAAI,kBAAkB,EAAE,CAAC;YACzC,EAAE,CAAC,uBAAuB,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;YAC/C,EAAE,CAAC,mBAAmB,CAAC,SAAS,CAAC,QAAQ,EAAE,SAAS,CAAC,IAAI,EAAE,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,CAAC,WAAW,GAAG,eAAe,CAAC,CAAC;YAClI,EAAE,CAAC,mBAAmB,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;QAClD,CAAC;QACD,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;QACzB,OAAO,WAAW,CAAC;IACvB,CAAC;IAEO,iBAAiB,CAAC,WAAyB;QAC/C,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;QACnB,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACnD,IAAI,WAAW,CAAC,UAAU,GAAG,IAAI,CAAC,0BAA0B,EAAE,CAAC;YAC3D,IAAI,CAAC,0BAA0B,GAAG,WAAW,CAAC,UAAU,GAAG,CAAC,CAAC;YAC7D,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,YAAY,EAAE,IAAI,CAAC,0BAA0B,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC;QACrF,CAAC;QACD,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC;IACtD,CAAC;IAEO,aAAa;QACjB,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;QACnB,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QACjG,MAAM,aAAa,GAAG,SAAS,GAAG,CAAC,CAAC;QACpC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;QACnF,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,EAAE,CAAC,kBAAkB,EAAE,EAAE,CAAC,mBAAmB,CAAC,CAAC;QACtF,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG,UAAU,GAAG,oBAAoB,GAAG,CAAC,CAAC,CAAC;QAC9F,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;QACzD,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;QACnD,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QACvD,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;QACnE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;IAC3D,CAAC;CACJ;AAED,eAAe,mBAAmB,CAAC"}

package/dist/beamShaders.d.ts

@@ -0,0 +1,3 @@
+export declare const BEAM_VERTEX_SHADER = "#version 300 es\nprecision highp float;\n\nlayout(location = 0) in vec4 a_segment;\nlayout(location = 1) in vec4 a_neighborPoints;\nlayout(location = 2) in vec4 a_colorIntensity;\nlayout(location = 3) in vec2 a_neighborFlags;\n\nuniform vec2 u_worldSize;\nuniform vec2 u_targetSize;\nuniform float u_quadRadius;\n\nflat out vec2 v_startPixel;\nflat out vec2 v_endPixel;\nflat out vec2 v_previousStartPixel;\nflat out vec2 v_nextEndPixel;\nflat out vec2 v_neighborFlags;\nflat out vec4 v_colorIntensity;\n\nvec2 worldToPixel(vec2 worldPosition) {\n    vec2 normalized = worldPosition / u_worldSize;\n    return vec2(normalized.x, 1.0 - normalized.y) * u_targetSize;\n}\n\nvoid main() {\n    vec2 startPixel = worldToPixel(a_segment.xy);\n    vec2 endPixel = worldToPixel(a_segment.zw);\n    vec2 direction = endPixel - startPixel;\n    float segmentLength = length(direction);\n    vec2 tangent = segmentLength > 0.0001 ? direction / segmentLength : vec2(1.0, 0.0);\n    vec2 normal = vec2(-tangent.y, tangent.x);\n\n    // Triangle strip corners: vertex 0..3 -> (along, across) = (0,-1), (0,1), (1,-1), (1,1).\n    float along = float(gl_VertexID / 2);\n    float across = float(gl_VertexID % 2) * 2.0 - 1.0;\n    vec2 cornerPixel = mix(startPixel, endPixel, along)\n        + tangent * (along * 2.0 - 1.0) * u_quadRadius\n        + normal * across * u_quadRadius;\n\n    v_startPixel = startPixel;\n    v_endPixel = endPixel;\n    v_previousStartPixel = worldToPixel(a_neighborPoints.xy);\n    v_nextEndPixel = worldToPixel(a_neighborPoints.zw);\n    v_neighborFlags = a_neighborFlags;\n    v_colorIntensity = a_colorIntensity;\n    gl_Position = vec4(cornerPixel / u_targetSize * 2.0 - 1.0, 0.0, 1.0);\n}\n";
+export declare const BEAM_FRAGMENT_SHADER = "#version 300 es\nprecision highp float;\n\nuniform float u_beamHalfWidth;\nuniform float u_glowRadius;\nuniform float u_glowStrength;\nuniform float u_endpointBrightness;\nuniform float u_jointOverlap;\n\nflat in vec2 v_startPixel;\nflat in vec2 v_endPixel;\nflat in vec2 v_previousStartPixel;\nflat in vec2 v_nextEndPixel;\nflat in vec2 v_neighborFlags;\nflat in vec4 v_colorIntensity;\n\nout vec4 outColor;\n\nfloat distanceToSegment(vec2 point, vec2 segmentStart, vec2 segmentEnd) {\n    vec2 startToPoint = point - segmentStart;\n    vec2 startToEnd = segmentEnd - segmentStart;\n    float lengthSquared = max(dot(startToEnd, startToEnd), 0.000001);\n    float projection = clamp(dot(startToPoint, startToEnd) / lengthSquared, 0.0, 1.0);\n    return length(startToPoint - startToEnd * projection);\n}\n\nfloat gaussian(float distanceFromCenter, float radius) {\n    return exp(-(distanceFromCenter * distanceFromCenter) / (2.0 * radius * radius));\n}\n\n// Near a joint, both connected segments cover the same pixels. The closer segment owns each pixel;\n// the other contributes only u_jointOverlap (1 = plain additive overlap, 0 = seamless joint).\n// Ties go to the previous segment so exactly one of the pair owns every pixel.\nfloat jointOwnership(vec2 pixel, float distanceFromBeam) {\n    bool previousIsCloser = v_neighborFlags.x > 0.5\n        && distanceToSegment(pixel, v_previousStartPixel, v_startPixel) <= distanceFromBeam;\n    bool nextIsCloser = v_neighborFlags.y > 0.5\n        && distanceToSegment(pixel, v_endPixel, v_nextEndPixel) < distanceFromBeam;\n    return (previousIsCloser || nextIsCloser) ? u_jointOverlap : 1.0;\n}\n\nvoid main() {\n    vec2 pixel = gl_FragCoord.xy;\n    float distanceFromBeam = distanceToSegment(pixel, v_startPixel, v_endPixel);\n    float coreCoverage = 1.0 - smoothstep(u_beamHalfWidth - 0.5, u_beamHalfWidth + 0.5, distanceFromBeam);\n    float glow = u_glowStrength * gaussian(distanceFromBeam, u_glowRadius);\n\n    // The beam dwells at segment endpoints, so real vector monitors drew vertices and dots brighter.\n    float distanceFromEndpoint = min(distance(pixel, v_startPixel), distance(pixel, v_endPixel));\n    float endpointDwell = u_endpointBrightness * gaussian(distanceFromEndpoint, u_beamHalfWidth * 2.0 + 0.5);\n\n    float brightness = (coreCoverage + glow + endpointDwell) * v_colorIntensity.a * jointOwnership(pixel, distanceFromBeam);\n    outColor = vec4(v_colorIntensity.rgb * brightness, 1.0);\n}\n";
+//# sourceMappingURL=beamShaders.d.ts.map

package/dist/beamShaders.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"beamShaders.d.ts","sourceRoot":"","sources":["../src/beamShaders.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,kBAAkB,irDA+C9B,CAAC;AAEF,eAAO,MAAM,oBAAoB,m7EAsDhC,CAAC"}

package/dist/beamShaders.js

@@ -0,0 +1,105 @@
+// Each beam segment is one instance: a quad around the segment, expanded in pixel space.
+export const BEAM_VERTEX_SHADER = `#version 300 es
+precision highp float;
+
+layout(location = 0) in vec4 a_segment;
+layout(location = 1) in vec4 a_neighborPoints;
+layout(location = 2) in vec4 a_colorIntensity;
+layout(location = 3) in vec2 a_neighborFlags;
+
+uniform vec2 u_worldSize;
+uniform vec2 u_targetSize;
+uniform float u_quadRadius;
+
+flat out vec2 v_startPixel;
+flat out vec2 v_endPixel;
+flat out vec2 v_previousStartPixel;
+flat out vec2 v_nextEndPixel;
+flat out vec2 v_neighborFlags;
+flat out vec4 v_colorIntensity;
+
+vec2 worldToPixel(vec2 worldPosition) {
+    vec2 normalized = worldPosition / u_worldSize;
+    return vec2(normalized.x, 1.0 - normalized.y) * u_targetSize;
+}
+
+void main() {
+    vec2 startPixel = worldToPixel(a_segment.xy);
+    vec2 endPixel = worldToPixel(a_segment.zw);
+    vec2 direction = endPixel - startPixel;
+    float segmentLength = length(direction);
+    vec2 tangent = segmentLength > 0.0001 ? direction / segmentLength : vec2(1.0, 0.0);
+    vec2 normal = vec2(-tangent.y, tangent.x);
+
+    // Triangle strip corners: vertex 0..3 -> (along, across) = (0,-1), (0,1), (1,-1), (1,1).
+    float along = float(gl_VertexID / 2);
+    float across = float(gl_VertexID % 2) * 2.0 - 1.0;
+    vec2 cornerPixel = mix(startPixel, endPixel, along)
+        + tangent * (along * 2.0 - 1.0) * u_quadRadius
+        + normal * across * u_quadRadius;
+
+    v_startPixel = startPixel;
+    v_endPixel = endPixel;
+    v_previousStartPixel = worldToPixel(a_neighborPoints.xy);
+    v_nextEndPixel = worldToPixel(a_neighborPoints.zw);
+    v_neighborFlags = a_neighborFlags;
+    v_colorIntensity = a_colorIntensity;
+    gl_Position = vec4(cornerPixel / u_targetSize * 2.0 - 1.0, 0.0, 1.0);
+}
+`;
+export const BEAM_FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+
+uniform float u_beamHalfWidth;
+uniform float u_glowRadius;
+uniform float u_glowStrength;
+uniform float u_endpointBrightness;
+uniform float u_jointOverlap;
+
+flat in vec2 v_startPixel;
+flat in vec2 v_endPixel;
+flat in vec2 v_previousStartPixel;
+flat in vec2 v_nextEndPixel;
+flat in vec2 v_neighborFlags;
+flat in vec4 v_colorIntensity;
+
+out vec4 outColor;
+
+float distanceToSegment(vec2 point, vec2 segmentStart, vec2 segmentEnd) {
+    vec2 startToPoint = point - segmentStart;
+    vec2 startToEnd = segmentEnd - segmentStart;
+    float lengthSquared = max(dot(startToEnd, startToEnd), 0.000001);
+    float projection = clamp(dot(startToPoint, startToEnd) / lengthSquared, 0.0, 1.0);
+    return length(startToPoint - startToEnd * projection);
+}
+
+float gaussian(float distanceFromCenter, float radius) {
+    return exp(-(distanceFromCenter * distanceFromCenter) / (2.0 * radius * radius));
+}
+
+// Near a joint, both connected segments cover the same pixels. The closer segment owns each pixel;
+// the other contributes only u_jointOverlap (1 = plain additive overlap, 0 = seamless joint).
+// Ties go to the previous segment so exactly one of the pair owns every pixel.
+float jointOwnership(vec2 pixel, float distanceFromBeam) {
+    bool previousIsCloser = v_neighborFlags.x > 0.5
+        && distanceToSegment(pixel, v_previousStartPixel, v_startPixel) <= distanceFromBeam;
+    bool nextIsCloser = v_neighborFlags.y > 0.5
+        && distanceToSegment(pixel, v_endPixel, v_nextEndPixel) < distanceFromBeam;
+    return (previousIsCloser || nextIsCloser) ? u_jointOverlap : 1.0;
+}
+
+void main() {
+    vec2 pixel = gl_FragCoord.xy;
+    float distanceFromBeam = distanceToSegment(pixel, v_startPixel, v_endPixel);
+    float coreCoverage = 1.0 - smoothstep(u_beamHalfWidth - 0.5, u_beamHalfWidth + 0.5, distanceFromBeam);
+    float glow = u_glowStrength * gaussian(distanceFromBeam, u_glowRadius);
+
+    // The beam dwells at segment endpoints, so real vector monitors drew vertices and dots brighter.
+    float distanceFromEndpoint = min(distance(pixel, v_startPixel), distance(pixel, v_endPixel));
+    float endpointDwell = u_endpointBrightness * gaussian(distanceFromEndpoint, u_beamHalfWidth * 2.0 + 0.5);
+
+    float brightness = (coreCoverage + glow + endpointDwell) * v_colorIntensity.a * jointOwnership(pixel, distanceFromBeam);
+    outColor = vec4(v_colorIntensity.rgb * brightness, 1.0);
+}
+`;
+//# sourceMappingURL=beamShaders.js.map

package/dist/beamShaders.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"beamShaders.js","sourceRoot":"","sources":["../src/beamShaders.ts"],"names":[],"mappings":"AAAA,yFAAyF;AACzF,MAAM,CAAC,MAAM,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CjC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDnC,CAAC"}

package/dist/createShaderProgram.d.ts

@@ -0,0 +1,6 @@
+export interface ShaderSources {
+    readonly vertexSource: string;
+    readonly fragmentSource: string;
+}
+export declare function createShaderProgram(gl: WebGL2RenderingContext, sources: ShaderSources): WebGLProgram;
+//# sourceMappingURL=createShaderProgram.d.ts.map

package/dist/createShaderProgram.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createShaderProgram.d.ts","sourceRoot":"","sources":["../src/createShaderProgram.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC1B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;CACnC;AAOD,wBAAgB,mBAAmB,CAAC,EAAE,EAAE,sBAAsB,EAAE,OAAO,EAAE,aAAa,GAAG,YAAY,CAepG"}

package/dist/createShaderProgram.js

@@ -0,0 +1,30 @@
+export function createShaderProgram(gl, sources) {
+    const vertexShader = compileShader(gl, { shaderType: gl.VERTEX_SHADER, source: sources.vertexSource });
+    const fragmentShader = compileShader(gl, { shaderType: gl.FRAGMENT_SHADER, source: sources.fragmentSource });
+    const program = gl.createProgram();
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+    gl.deleteShader(vertexShader);
+    gl.deleteShader(fragmentShader);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        const log = gl.getProgramInfoLog(program);
+        gl.deleteProgram(program);
+        throw new Error(`Failed to link shader program: ${log}`);
+    }
+    return program;
+}
+function compileShader(gl, stage) {
+    const shader = gl.createShader(stage.shaderType);
+    if (!shader)
+        throw new Error("Failed to create shader");
+    gl.shaderSource(shader, stage.source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        const log = gl.getShaderInfoLog(shader);
+        gl.deleteShader(shader);
+        throw new Error(`Failed to compile shader: ${log}`);
+    }
+    return shader;
+}
+//# sourceMappingURL=createShaderProgram.js.map

package/dist/createShaderProgram.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createShaderProgram.js","sourceRoot":"","sources":["../src/createShaderProgram.ts"],"names":[],"mappings":"AAUA,MAAM,UAAU,mBAAmB,CAAC,EAA0B,EAAE,OAAsB;IAClF,MAAM,YAAY,GAAG,aAAa,CAAC,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC;IACvG,MAAM,cAAc,GAAG,aAAa,CAAC,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,CAAC,eAAe,EAAE,MAAM,EAAE,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IAC7G,MAAM,OAAO,GAAG,EAAE,CAAC,aAAa,EAAE,CAAC;IACnC,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;IACvC,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;IACzC,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACxB,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;IAC9B,EAAE,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,CAAC,mBAAmB,CAAC,OAAO,EAAE,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC;QACnD,MAAM,GAAG,GAAG,EAAE,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAC1C,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC1B,MAAM,IAAI,KAAK,CAAC,kCAAkC,GAAG,EAAE,CAAC,CAAC;IAC7D,CAAC;IACD,OAAO,OAAO,CAAC;AACnB,CAAC;AAED,SAAS,aAAa,CAAC,EAA0B,EAAE,KAAkB;IACjE,MAAM,MAAM,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IACjD,IAAI,CAAC,MAAM;QAAE,MAAM,IAAI,KAAK,CAAC,yBAAyB,CAAC,CAAC;IACxD,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACtC,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IACzB,IAAI,CAAC,EAAE,CAAC,kBAAkB,CAAC,MAAM,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC;QACpD,MAAM,GAAG,GAAG,EAAE,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;QACxC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QACxB,MAAM,IAAI,KAAK,CAAC,6BAA6B,GAAG,EAAE,CAAC,CAAC;IACxD,CAAC;IACD,OAAO,MAAM,CAAC;AAClB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { WebGLVectorRenderer, DEFAULT_LINE_STYLE } from "./WebGLVectorRenderer.js";
+export type { LineStyle, WorldSize } from "./WebGLVectorRenderer.js";
+export { createShaderProgram } from "./createShaderProgram.js";
+export type { ShaderSources } from "./createShaderProgram.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACnF,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { WebGLVectorRenderer, DEFAULT_LINE_STYLE } from "./WebGLVectorRenderer.js";
+export { createShaderProgram } from "./createShaderProgram.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAEnF,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC"}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@vector-display/webgl",
+  "version": "0.1.0",
+  "description": "WebGL2 renderer that draws vector-display beam strokes in a single batched draw call.",
+  "license": "MIT",
+  "author": {
+    "name": "Rick Segrest",
+    "email": "rsegrest77@gmail.com",
+    "url": "https://www.ricksegrest.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rsegrest/vector-display.git",
+    "directory": "packages/webgl"
+  },
+  "homepage": "https://github.com/rsegrest/vector-display/tree/main/packages/webgl#readme",
+  "bugs": {
+    "url": "https://github.com/rsegrest/vector-display/issues"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "@vector-display/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "prepublishOnly": "tsc -b"
+  },
+  "files": [
+    "dist",
+    "src",
+    "!src/**/*.test.ts"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@vector-display/core": "0.1.0"
+  }
+}

package/src/WebGLVectorRenderer.ts

@@ -0,0 +1,178 @@
+import { FLOATS_PER_BEAM_SEGMENT, type DisplayList } from "@vector-display/core";
+import { BEAM_FRAGMENT_SHADER, BEAM_VERTEX_SHADER } from "./beamShaders.js";
+import { createShaderProgram } from "./createShaderProgram.js";
+
+// All sizes are in framebuffer pixels (multiply CSS pixels by devicePixelRatio).
+export interface LineStyle {
+    readonly beamWidth: number;
+    readonly glowRadius: number;
+    readonly glowStrength: number;
+    // Extra brightness where the beam dwells at segment endpoints; 0 removes the highlight.
+    readonly endpointBrightness: number;
+    // How much connected segments add up where they meet: 1 = additive overlap (brighter joints), 0 = seamless.
+    readonly jointOverlap: number;
+}
+
+export interface WorldSize {
+    readonly width: number;
+    readonly height: number;
+}
+
+export const DEFAULT_LINE_STYLE: LineStyle = {
+    beamWidth: 1.5,
+    glowRadius: 4,
+    glowStrength: 0.25,
+    endpointBrightness: 0.6,
+    jointOverlap: 1,
+};
+
+const BYTES_PER_FLOAT = 4;
+
+// Matches the packed layout documented on FLOATS_PER_BEAM_SEGMENT in @vector-display/core.
+const SEGMENT_ATTRIBUTES = [
+    { location: 0, size: 4, floatOffset: 0 },
+    { location: 1, size: 4, floatOffset: 4 },
+    { location: 2, size: 4, floatOffset: 8 },
+    { location: 3, size: 2, floatOffset: 12 },
+] as const;
+
+const GLOW_EXTENT_IN_RADII = 3;
+
+interface BeamUniformLocations {
+    readonly worldSize: WebGLUniformLocation | null;
+    readonly targetSize: WebGLUniformLocation | null;
+    readonly quadRadius: WebGLUniformLocation | null;
+    readonly beamHalfWidth: WebGLUniformLocation | null;
+    readonly glowRadius: WebGLUniformLocation | null;
+    readonly glowStrength: WebGLUniformLocation | null;
+    readonly endpointBrightness: WebGLUniformLocation | null;
+    readonly jointOverlap: WebGLUniformLocation | null;
+}
+
+export class WebGLVectorRenderer {
+    public readonly gl: WebGL2RenderingContext;
+    private readonly program: WebGLProgram;
+    private readonly uniforms: BeamUniformLocations;
+    private readonly vertexArray: WebGLVertexArrayObject;
+    private readonly segmentBuffer: WebGLBuffer;
+    private segmentBufferCapacityBytes = 0;
+    private worldSize: WorldSize;
+    private lineStyle: LineStyle = DEFAULT_LINE_STYLE;
+
+    constructor(gl: WebGL2RenderingContext, worldSize: WorldSize) {
+        this.gl = gl;
+        this.worldSize = worldSize;
+        this.program = createShaderProgram(gl, {
+            vertexSource: BEAM_VERTEX_SHADER,
+            fragmentSource: BEAM_FRAGMENT_SHADER,
+        });
+        this.uniforms = this.findUniformLocations();
+        this.segmentBuffer = gl.createBuffer();
+        this.vertexArray = this.createSegmentVertexArray();
+    }
+
+    public static fromCanvas(canvas: HTMLCanvasElement, worldSize: WorldSize): WebGLVectorRenderer {
+        const gl = canvas.getContext("webgl2", {
+            alpha: false,
+            antialias: false,
+            depth: false,
+            premultipliedAlpha: false,
+        });
+        if (!gl) throw new Error("WebGL2 is not available in this browser");
+        return new WebGLVectorRenderer(gl, worldSize);
+    }
+
+    public setWorldSize(worldSize: WorldSize): void {
+        this.worldSize = worldSize;
+    }
+
+    public setLineStyle(lineStyle: Partial<LineStyle>): void {
+        this.lineStyle = { ...this.lineStyle, ...lineStyle };
+    }
+
+    public clear(): void {
+        const gl = this.gl;
+        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+        gl.clearColor(0, 0, 0, 1);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+    }
+
+    // Draws additively into the currently bound framebuffer, which must match the drawing buffer size.
+    public drawDisplayList(displayList: DisplayList): void {
+        const segmentCount = displayList.segmentCount;
+        if (segmentCount === 0) return;
+        const gl = this.gl;
+        this.uploadSegmentData(displayList.getSegmentData());
+        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+        gl.enable(gl.BLEND);
+        gl.blendEquation(gl.FUNC_ADD);
+        gl.blendFunc(gl.ONE, gl.ONE);
+        gl.useProgram(this.program);
+        this.applyUniforms();
+        gl.bindVertexArray(this.vertexArray);
+        gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, segmentCount);
+        gl.bindVertexArray(null);
+    }
+
+    public dispose(): void {
+        this.gl.deleteBuffer(this.segmentBuffer);
+        this.gl.deleteVertexArray(this.vertexArray);
+        this.gl.deleteProgram(this.program);
+    }
+
+    private findUniformLocations(): BeamUniformLocations {
+        const gl = this.gl;
+        const program = this.program;
+        return {
+            worldSize: gl.getUniformLocation(program, "u_worldSize"),
+            targetSize: gl.getUniformLocation(program, "u_targetSize"),
+            quadRadius: gl.getUniformLocation(program, "u_quadRadius"),
+            beamHalfWidth: gl.getUniformLocation(program, "u_beamHalfWidth"),
+            glowRadius: gl.getUniformLocation(program, "u_glowRadius"),
+            glowStrength: gl.getUniformLocation(program, "u_glowStrength"),
+            endpointBrightness: gl.getUniformLocation(program, "u_endpointBrightness"),
+            jointOverlap: gl.getUniformLocation(program, "u_jointOverlap"),
+        };
+    }
+
+    private createSegmentVertexArray(): WebGLVertexArrayObject {
+        const gl = this.gl;
+        const vertexArray = gl.createVertexArray();
+        const strideBytes = FLOATS_PER_BEAM_SEGMENT * BYTES_PER_FLOAT;
+        gl.bindVertexArray(vertexArray);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.segmentBuffer);
+        for (const attribute of SEGMENT_ATTRIBUTES) {
+            gl.enableVertexAttribArray(attribute.location);
+            gl.vertexAttribPointer(attribute.location, attribute.size, gl.FLOAT, false, strideBytes, attribute.floatOffset * BYTES_PER_FLOAT);
+            gl.vertexAttribDivisor(attribute.location, 1);
+        }
+        gl.bindVertexArray(null);
+        return vertexArray;
+    }
+
+    private uploadSegmentData(segmentData: Float32Array): void {
+        const gl = this.gl;
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.segmentBuffer);
+        if (segmentData.byteLength > this.segmentBufferCapacityBytes) {
+            this.segmentBufferCapacityBytes = segmentData.byteLength * 2;
+            gl.bufferData(gl.ARRAY_BUFFER, this.segmentBufferCapacityBytes, gl.DYNAMIC_DRAW);
+        }
+        gl.bufferSubData(gl.ARRAY_BUFFER, 0, segmentData);
+    }
+
+    private applyUniforms(): void {
+        const gl = this.gl;
+        const { beamWidth, glowRadius, glowStrength, endpointBrightness, jointOverlap } = this.lineStyle;
+        const beamHalfWidth = beamWidth / 2;
+        gl.uniform2f(this.uniforms.worldSize, this.worldSize.width, this.worldSize.height);
+        gl.uniform2f(this.uniforms.targetSize, gl.drawingBufferWidth, gl.drawingBufferHeight);
+        gl.uniform1f(this.uniforms.quadRadius, beamHalfWidth + glowRadius * GLOW_EXTENT_IN_RADII + 1);
+        gl.uniform1f(this.uniforms.beamHalfWidth, beamHalfWidth);
+        gl.uniform1f(this.uniforms.glowRadius, glowRadius);
+        gl.uniform1f(this.uniforms.glowStrength, glowStrength);
+        gl.uniform1f(this.uniforms.endpointBrightness, endpointBrightness);
+        gl.uniform1f(this.uniforms.jointOverlap, jointOverlap);
+    }
+}
+
+export default WebGLVectorRenderer;

package/src/beamShaders.ts

@@ -0,0 +1,105 @@
+// Each beam segment is one instance: a quad around the segment, expanded in pixel space.
+export const BEAM_VERTEX_SHADER = `#version 300 es
+precision highp float;
+
+layout(location = 0) in vec4 a_segment;
+layout(location = 1) in vec4 a_neighborPoints;
+layout(location = 2) in vec4 a_colorIntensity;
+layout(location = 3) in vec2 a_neighborFlags;
+
+uniform vec2 u_worldSize;
+uniform vec2 u_targetSize;
+uniform float u_quadRadius;
+
+flat out vec2 v_startPixel;
+flat out vec2 v_endPixel;
+flat out vec2 v_previousStartPixel;
+flat out vec2 v_nextEndPixel;
+flat out vec2 v_neighborFlags;
+flat out vec4 v_colorIntensity;
+
+vec2 worldToPixel(vec2 worldPosition) {
+    vec2 normalized = worldPosition / u_worldSize;
+    return vec2(normalized.x, 1.0 - normalized.y) * u_targetSize;
+}
+
+void main() {
+    vec2 startPixel = worldToPixel(a_segment.xy);
+    vec2 endPixel = worldToPixel(a_segment.zw);
+    vec2 direction = endPixel - startPixel;
+    float segmentLength = length(direction);
+    vec2 tangent = segmentLength > 0.0001 ? direction / segmentLength : vec2(1.0, 0.0);
+    vec2 normal = vec2(-tangent.y, tangent.x);
+
+    // Triangle strip corners: vertex 0..3 -> (along, across) = (0,-1), (0,1), (1,-1), (1,1).
+    float along = float(gl_VertexID / 2);
+    float across = float(gl_VertexID % 2) * 2.0 - 1.0;
+    vec2 cornerPixel = mix(startPixel, endPixel, along)
+        + tangent * (along * 2.0 - 1.0) * u_quadRadius
+        + normal * across * u_quadRadius;
+
+    v_startPixel = startPixel;
+    v_endPixel = endPixel;
+    v_previousStartPixel = worldToPixel(a_neighborPoints.xy);
+    v_nextEndPixel = worldToPixel(a_neighborPoints.zw);
+    v_neighborFlags = a_neighborFlags;
+    v_colorIntensity = a_colorIntensity;
+    gl_Position = vec4(cornerPixel / u_targetSize * 2.0 - 1.0, 0.0, 1.0);
+}
+`;
+
+export const BEAM_FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+
+uniform float u_beamHalfWidth;
+uniform float u_glowRadius;
+uniform float u_glowStrength;
+uniform float u_endpointBrightness;
+uniform float u_jointOverlap;
+
+flat in vec2 v_startPixel;
+flat in vec2 v_endPixel;
+flat in vec2 v_previousStartPixel;
+flat in vec2 v_nextEndPixel;
+flat in vec2 v_neighborFlags;
+flat in vec4 v_colorIntensity;
+
+out vec4 outColor;
+
+float distanceToSegment(vec2 point, vec2 segmentStart, vec2 segmentEnd) {
+    vec2 startToPoint = point - segmentStart;
+    vec2 startToEnd = segmentEnd - segmentStart;
+    float lengthSquared = max(dot(startToEnd, startToEnd), 0.000001);
+    float projection = clamp(dot(startToPoint, startToEnd) / lengthSquared, 0.0, 1.0);
+    return length(startToPoint - startToEnd * projection);
+}
+
+float gaussian(float distanceFromCenter, float radius) {
+    return exp(-(distanceFromCenter * distanceFromCenter) / (2.0 * radius * radius));
+}
+
+// Near a joint, both connected segments cover the same pixels. The closer segment owns each pixel;
+// the other contributes only u_jointOverlap (1 = plain additive overlap, 0 = seamless joint).
+// Ties go to the previous segment so exactly one of the pair owns every pixel.
+float jointOwnership(vec2 pixel, float distanceFromBeam) {
+    bool previousIsCloser = v_neighborFlags.x > 0.5
+        && distanceToSegment(pixel, v_previousStartPixel, v_startPixel) <= distanceFromBeam;
+    bool nextIsCloser = v_neighborFlags.y > 0.5
+        && distanceToSegment(pixel, v_endPixel, v_nextEndPixel) < distanceFromBeam;
+    return (previousIsCloser || nextIsCloser) ? u_jointOverlap : 1.0;
+}
+
+void main() {
+    vec2 pixel = gl_FragCoord.xy;
+    float distanceFromBeam = distanceToSegment(pixel, v_startPixel, v_endPixel);
+    float coreCoverage = 1.0 - smoothstep(u_beamHalfWidth - 0.5, u_beamHalfWidth + 0.5, distanceFromBeam);
+    float glow = u_glowStrength * gaussian(distanceFromBeam, u_glowRadius);
+
+    // The beam dwells at segment endpoints, so real vector monitors drew vertices and dots brighter.
+    float distanceFromEndpoint = min(distance(pixel, v_startPixel), distance(pixel, v_endPixel));
+    float endpointDwell = u_endpointBrightness * gaussian(distanceFromEndpoint, u_beamHalfWidth * 2.0 + 0.5);
+
+    float brightness = (coreCoverage + glow + endpointDwell) * v_colorIntensity.a * jointOwnership(pixel, distanceFromBeam);
+    outColor = vec4(v_colorIntensity.rgb * brightness, 1.0);
+}
+`;

package/src/createShaderProgram.ts

@@ -0,0 +1,39 @@
+export interface ShaderSources {
+    readonly vertexSource: string;
+    readonly fragmentSource: string;
+}
+
+interface ShaderStage {
+    readonly shaderType: GLenum;
+    readonly source: string;
+}
+
+export function createShaderProgram(gl: WebGL2RenderingContext, sources: ShaderSources): WebGLProgram {
+    const vertexShader = compileShader(gl, { shaderType: gl.VERTEX_SHADER, source: sources.vertexSource });
+    const fragmentShader = compileShader(gl, { shaderType: gl.FRAGMENT_SHADER, source: sources.fragmentSource });
+    const program = gl.createProgram();
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+    gl.deleteShader(vertexShader);
+    gl.deleteShader(fragmentShader);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        const log = gl.getProgramInfoLog(program);
+        gl.deleteProgram(program);
+        throw new Error(`Failed to link shader program: ${log}`);
+    }
+    return program;
+}
+
+function compileShader(gl: WebGL2RenderingContext, stage: ShaderStage): WebGLShader {
+    const shader = gl.createShader(stage.shaderType);
+    if (!shader) throw new Error("Failed to create shader");
+    gl.shaderSource(shader, stage.source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        const log = gl.getShaderInfoLog(shader);
+        gl.deleteShader(shader);
+        throw new Error(`Failed to compile shader: ${log}`);
+    }
+    return shader;
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export { WebGLVectorRenderer, DEFAULT_LINE_STYLE } from "./WebGLVectorRenderer.js";
+export type { LineStyle, WorldSize } from "./WebGLVectorRenderer.js";
+export { createShaderProgram } from "./createShaderProgram.js";
+export type { ShaderSources } from "./createShaderProgram.js";