@next_term/web 0.1.0-next.3 → 0.1.0-next.6

package/dist/webgl-renderer.js

@@ -8,6 +8,7 @@
  */
 import { DEFAULT_THEME, normalizeSelection } from "@next_term/core";
 import { build256Palette, Canvas2DRenderer } from "./renderer.js";
+import { resolveColorFloat } from "./webgl-utils.js";
 // ---------------------------------------------------------------------------
 // Attribute bit positions (mirrors renderer.ts / cell-grid.ts)
 // ---------------------------------------------------------------------------
@@ -19,31 +20,82 @@ const ATTR_INVERSE = 0x40;
 // ---------------------------------------------------------------------------
 // Color helpers
 // ---------------------------------------------------------------------------
-/** Parse a hex color (#rrggbb or #rgb) to [r, g, b, a] in 0-1 range. */
-export function hexToFloat4(hex) {
-    let r = 0, g = 0, b = 0;
-    if (hex.startsWith("#")) {
-        const h = hex.slice(1);
-        if (h.length === 3) {
-            r = parseInt(h[0] + h[0], 16) / 255;
-            g = parseInt(h[1] + h[1], 16) / 255;
-            b = parseInt(h[2] + h[2], 16) / 255;
+/**
+ * Parse any CSS color string to [r, g, b, a] in 0-1 range.
+ *
+ * Fast path for #rrggbb/#rgb hex (no canvas overhead).
+ * All other formats (rgb(), rgba(), hsl(), oklch(), color(), named colors)
+ * are resolved by the browser's native CSS engine via a 1x1 canvas.
+ */
+// Singleton canvas context for CSS color resolution (works in main thread
+// and Web Workers via OffscreenCanvas)
+let _colorCtx = null;
+let _colorCtxFailed = false;
+function getColorCtx() {
+    if (_colorCtx || _colorCtxFailed)
+        return _colorCtx;
+    try {
+        if (typeof OffscreenCanvas !== "undefined") {
+            _colorCtx = new OffscreenCanvas(1, 1).getContext("2d");
         }
-        else if (h.length === 6) {
-            r = parseInt(h.slice(0, 2), 16) / 255;
-            g = parseInt(h.slice(2, 4), 16) / 255;
-            b = parseInt(h.slice(4, 6), 16) / 255;
+        else if (typeof document !== "undefined") {
+            const c = document.createElement("canvas");
+            c.width = 1;
+            c.height = 1;
+            _colorCtx = c.getContext("2d");
         }
     }
-    else if (hex.startsWith("rgb(")) {
-        const m = hex.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
-        if (m) {
-            r = parseInt(m[1], 10) / 255;
-            g = parseInt(m[2], 10) / 255;
-            b = parseInt(m[3], 10) / 255;
+    catch {
+        // No canvas available (SSR / test environment)
+    }
+    if (!_colorCtx)
+        _colorCtxFailed = true;
+    return _colorCtx;
+}
+export function hexToFloat4(color) {
+    // Fast path: #rrggbb (most common — default theme + 256-palette are all hex)
+    if (color.length === 7 && color.charCodeAt(0) === 0x23 /* # */) {
+        return [
+            parseInt(color.slice(1, 3), 16) / 255,
+            parseInt(color.slice(3, 5), 16) / 255,
+            parseInt(color.slice(5, 7), 16) / 255,
+            1.0,
+        ];
+    }
+    // Fast path: #rgb
+    if (color.length === 4 && color.charCodeAt(0) === 0x23) {
+        return [
+            parseInt(color[1] + color[1], 16) / 255,
+            parseInt(color[2] + color[2], 16) / 255,
+            parseInt(color[3] + color[3], 16) / 255,
+            1.0,
+        ];
+    }
+    // Universal path: let the browser parse any CSS color
+    const ctx = getColorCtx();
+    if (ctx) {
+        try {
+            ctx.clearRect(0, 0, 1, 1);
+            ctx.fillStyle = "#000";
+            ctx.fillStyle = color;
+            ctx.fillRect(0, 0, 1, 1);
+            const d = ctx.getImageData(0, 0, 1, 1).data;
+            const a = d[3] / 255;
+            if (a === 0) {
+                // Invalid color or fully transparent — return opaque black
+                return [0, 0, 0, 1.0];
+            }
+            // Unpremultiply RGB (getImageData returns premultiplied on some browsers)
+            return a >= 1
+                ? [d[0] / 255, d[1] / 255, d[2] / 255, 1.0]
+                : [d[0] / 255 / a, d[1] / 255 / a, d[2] / 255 / a, a];
+        }
+        catch {
+            // Partial canvas implementation (e.g., jsdom) — fall through
         }
     }
-    return [r, g, b, 1.0];
+    // No canvas fallback — return black
+    return [0, 0, 0, 1.0];
 }
 /** Build a glyph cache key from codepoint and style flags. */
 export function glyphCacheKey(codepoint, bold, italic) {
@@ -361,6 +413,7 @@ export class WebGLRenderer {
     cursor = null;
     cellWidth = 0;
     cellHeight = 0;
+    // biome-ignore lint/correctness/noUnusedPrivateClassMembers: read via destructuring in render()
     baselineOffset = 0;
     fontSize;
     fontFamily;
@@ -380,15 +433,36 @@ export class WebGLRenderer {
     glyphProgram = null;
     quadVBO = null;
     quadEBO = null;
-    bgInstanceVBO = null;
-    glyphInstanceVBO = null;
+    // Double-buffered instance VBOs to avoid GPU read/write conflicts
+    bgInstanceVBOs = [null, null];
+    glyphInstanceVBOs = [null, null];
+    activeBufferIdx = 0;
+    // Dedicated overlay VBO for cursor/selection/highlights so we don't
+    // overwrite the active bg VBO and neutralize double-buffering.
+    overlayVBO = null;
     bgVAO = null;
     glyphVAO = null;
+    // Cached uniform locations (populated in initGLResources)
+    bgResolutionLoc = null;
+    bgCellSizeLoc = null;
+    glyphResolutionLoc = null;
+    glyphCellSizeLoc = null;
+    glyphAtlasLoc = null;
     // Instance data (CPU side)
     bgInstances;
     glyphInstances;
     bgCount = 0;
     glyphCount = 0;
+    // Per-row dirty tracking for incremental instance rebuilds
+    rowBgOffsets = []; // starting bgCount index per row
+    rowBgCounts = []; // number of bg instances per row
+    rowGlyphOffsets = []; // starting glyphCount index per row
+    rowGlyphCounts = []; // number of glyph instances per row
+    hasRenderedOnce = false;
+    // Pre-allocated overlay buffers (reused each frame)
+    cursorData = new Float32Array(BG_INSTANCE_FLOATS);
+    selBuffer = new Float32Array(256 * BG_INSTANCE_FLOATS);
+    hlBuffer = new Float32Array(256 * BG_INSTANCE_FLOATS);
     // Glyph atlas
     atlas;
     // Palette as float arrays (cached for performance)
@@ -421,6 +495,7 @@ export class WebGLRenderer {
         this.canvas = canvas;
         this.grid = grid;
         this.cursor = cursor;
+        this.hasRenderedOnce = false;
         // Get WebGL2 context
         this.gl = canvas.getContext("webgl2", {
             alpha: false,
@@ -482,10 +557,38 @@ export class WebGLRenderer {
         if (!anyDirty) {
             return;
         }
-        // Rebuild instance data
-        this.bgCount = 0;
-        this.glyphCount = 0;
+        // Flip active double-buffer index
+        this.activeBufferIdx = 1 - this.activeBufferIdx;
+        // Incremental rebuild — only re-pack dirty rows
+        // On first render or if grid dimensions changed, initialize per-row tracking
+        if (!this.hasRenderedOnce || this.rowBgOffsets.length !== rows) {
+            this.rowBgOffsets = new Array(rows).fill(0);
+            this.rowBgCounts = new Array(rows).fill(0);
+            this.rowGlyphOffsets = new Array(rows).fill(0);
+            this.rowGlyphCounts = new Array(rows).fill(0);
+            // Compute fixed offsets: each row has exactly `cols` bg instances
+            // Glyph offsets are variable, so on first pass we do a full rebuild
+            let bgOff = 0;
+            let glyphOff = 0;
+            for (let r = 0; r < rows; r++) {
+                this.rowBgOffsets[r] = bgOff;
+                this.rowBgCounts[r] = cols; // one bg instance per cell
+                bgOff += cols;
+                // For glyphs, allocate max possible (cols) per row on first pass
+                this.rowGlyphOffsets[r] = glyphOff;
+                this.rowGlyphCounts[r] = 0;
+                glyphOff += cols;
+            }
+            this.bgCount = bgOff;
+            this.glyphCount = 0; // will be summed below
+        }
         for (let row = 0; row < rows; row++) {
+            // Skip non-dirty rows — their data persists in the arrays
+            if (!grid.isDirty(row))
+                continue;
+            const bgBase = this.rowBgOffsets[row] * BG_INSTANCE_FLOATS;
+            const glyphBase = this.rowGlyphOffsets[row] * GLYPH_INSTANCE_FLOATS;
+            let rowGlyphCount = 0;
             for (let col = 0; col < cols; col++) {
                 const codepoint = grid.getCodepoint(row, col);
                 const fgIdx = grid.getFgIndex(row, col);
@@ -493,9 +596,8 @@ export class WebGLRenderer {
                 const attrs = grid.getAttrs(row, col);
                 const fgIsRGB = grid.isFgRGB(row, col);
                 const bgIsRGB = grid.isBgRGB(row, col);
-                const isWide = grid.isWide(row, col);
-                let fg = this.resolveColorFloat(fgIdx, fgIsRGB, grid, col, true);
-                let bg = this.resolveColorFloat(bgIdx, bgIsRGB, grid, col, false);
+                let fg = resolveColorFloat(fgIdx, fgIsRGB, grid, col, true, this.paletteFloat, this.themeFgFloat, this.themeBgFloat);
+                let bg = resolveColorFloat(bgIdx, bgIsRGB, grid, col, false, this.paletteFloat, this.themeFgFloat, this.themeBgFloat);
                 // Handle inverse
                 if (attrs & ATTR_INVERSE) {
                     const tmp = fg;
@@ -503,23 +605,39 @@ export class WebGLRenderer {
                     bg = tmp;
                 }
                 // Background instance — emit for all cells to paint default bg too
-                packBgInstance(this.bgInstances, this.bgCount * BG_INSTANCE_FLOATS, col, row, bg[0], bg[1], bg[2], bg[3]);
-                this.bgCount++;
+                packBgInstance(this.bgInstances, bgBase + col * BG_INSTANCE_FLOATS, col, row, bg[0], bg[1], bg[2], bg[3]);
                 // Glyph instance — skip spaces and control chars
                 if (codepoint > 0x20) {
                     const bold = !!(attrs & ATTR_BOLD);
                     const italic = !!(attrs & ATTR_ITALIC);
                     const glyph = this.atlas.getGlyph(codepoint, bold, italic);
                     if (glyph) {
-                        const glyphPw = isWide ? glyph.pw : glyph.pw;
                         const glyphPh = glyph.ph;
-                        packGlyphInstance(this.glyphInstances, this.glyphCount * GLYPH_INSTANCE_FLOATS, col, row, fg[0], fg[1], fg[2], fg[3], glyph.u, glyph.v, glyph.w, glyph.h, glyphPw, glyphPh);
-                        this.glyphCount++;
+                        packGlyphInstance(this.glyphInstances, glyphBase + rowGlyphCount * GLYPH_INSTANCE_FLOATS, col, row, fg[0], fg[1], fg[2], fg[3], glyph.u, glyph.v, glyph.w, glyph.h, glyph.pw, glyphPh);
+                        rowGlyphCount++;
                     }
                 }
             }
+            // Zero out remaining glyph slots for this row (if fewer glyphs than last time)
+            const maxGlyphSlots = cols;
+            for (let i = rowGlyphCount; i < this.rowGlyphCounts[row]; i++) {
+                // Zero the codepoint/color to make invisible (alpha=0 effectively)
+                const off = glyphBase + i * GLYPH_INSTANCE_FLOATS;
+                for (let j = 0; j < GLYPH_INSTANCE_FLOATS; j++) {
+                    this.glyphInstances[off + j] = 0;
+                }
+            }
+            // Keep max of old and new count to ensure we still upload zeroed slots
+            if (rowGlyphCount > maxGlyphSlots)
+                rowGlyphCount = maxGlyphSlots;
+            this.rowGlyphCounts[row] = rowGlyphCount;
             grid.clearDirty(row);
         }
+        this.hasRenderedOnce = true;
+        // Both bg and glyph instance arrays are sized for rows * cols slots;
+        // data is packed per-row at fixed offsets so we always upload the full region.
+        this.bgCount = rows * cols;
+        this.glyphCount = rows * cols;
         // Upload atlas if dirty
         this.atlas.upload(gl);
         // Set up GL state
@@ -530,39 +648,54 @@ export class WebGLRenderer {
         gl.clear(gl.COLOR_BUFFER_BIT);
         const cellW = this.cellWidth * this.dpr;
         const cellH = this.cellHeight * this.dpr;
+        const _FLOAT = 4;
+        const activeBgVBO = this.bgInstanceVBOs[this.activeBufferIdx];
+        const activeGlyphVBO = this.glyphInstanceVBOs[this.activeBufferIdx];
         // --- Background pass ---
-        if (this.bgCount > 0 && this.bgProgram && this.bgVAO && this.bgInstanceVBO) {
+        if (this.bgCount > 0 && this.bgProgram && this.bgVAO && activeBgVBO) {
             gl.useProgram(this.bgProgram);
-            gl.uniform2f(gl.getUniformLocation(this.bgProgram, "u_resolution"), canvasWidth, canvasHeight);
-            gl.uniform2f(gl.getUniformLocation(this.bgProgram, "u_cellSize"), cellW, cellH);
-            gl.bindBuffer(gl.ARRAY_BUFFER, this.bgInstanceVBO);
-            gl.bufferData(gl.ARRAY_BUFFER, this.bgInstances.subarray(0, this.bgCount * BG_INSTANCE_FLOATS), gl.DYNAMIC_DRAW);
+            // Use cached uniform locations
+            gl.uniform2f(this.bgResolutionLoc, canvasWidth, canvasHeight);
+            gl.uniform2f(this.bgCellSizeLoc, cellW, cellH);
+            // Bind active double-buffered VBO and re-setup instance attrib pointers
+            gl.bindBuffer(gl.ARRAY_BUFFER, activeBgVBO);
+            gl.bufferData(gl.ARRAY_BUFFER, this.bgInstances.subarray(0, this.bgCount * BG_INSTANCE_FLOATS), gl.STREAM_DRAW);
             gl.bindVertexArray(this.bgVAO);
+            // Rebind instance attribs to the active VBO (VAO captured the old one)
+            this.rebindBgInstanceAttribs(gl, activeBgVBO);
             gl.drawElementsInstanced(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0, this.bgCount);
         }
         // --- Glyph pass ---
-        if (this.glyphCount > 0 && this.glyphProgram && this.glyphVAO && this.glyphInstanceVBO) {
+        if (this.glyphCount > 0 && this.glyphProgram && this.glyphVAO && activeGlyphVBO) {
             gl.enable(gl.BLEND);
             gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
             gl.useProgram(this.glyphProgram);
-            gl.uniform2f(gl.getUniformLocation(this.glyphProgram, "u_resolution"), canvasWidth, canvasHeight);
-            gl.uniform2f(gl.getUniformLocation(this.glyphProgram, "u_cellSize"), cellW, cellH);
+            // Use cached uniform locations
+            gl.uniform2f(this.glyphResolutionLoc, canvasWidth, canvasHeight);
+            gl.uniform2f(this.glyphCellSizeLoc, cellW, cellH);
             // Bind atlas texture
             gl.activeTexture(gl.TEXTURE0);
             gl.bindTexture(gl.TEXTURE_2D, this.atlas.getTexture());
-            gl.uniform1i(gl.getUniformLocation(this.glyphProgram, "u_atlas"), 0);
-            gl.bindBuffer(gl.ARRAY_BUFFER, this.glyphInstanceVBO);
-            gl.bufferData(gl.ARRAY_BUFFER, this.glyphInstances.subarray(0, this.glyphCount * GLYPH_INSTANCE_FLOATS), gl.DYNAMIC_DRAW);
+            gl.uniform1i(this.glyphAtlasLoc, 0);
+            // Bind active double-buffered VBO
+            gl.bindBuffer(gl.ARRAY_BUFFER, activeGlyphVBO);
+            gl.bufferData(gl.ARRAY_BUFFER, this.glyphInstances.subarray(0, this.glyphCount * GLYPH_INSTANCE_FLOATS), gl.STREAM_DRAW);
             gl.bindVertexArray(this.glyphVAO);
+            // Rebind instance attribs to the active VBO
+            this.rebindGlyphInstanceAttribs(gl, activeGlyphVBO);
             gl.drawElementsInstanced(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0, this.glyphCount);
             gl.disable(gl.BLEND);
         }
+        // Enable BLEND once for all overlay passes
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
         // --- Highlights (search results) ---
         this.drawHighlights();
         // --- Selection overlay ---
         this.drawSelection();
         // --- Cursor ---
         this.drawCursor();
+        gl.disable(gl.BLEND);
         gl.bindVertexArray(null);
     }
     resize(_cols, _rows) {
@@ -631,10 +764,16 @@ export class WebGLRenderer {
                 gl.deleteBuffer(this.quadVBO);
             if (this.quadEBO)
                 gl.deleteBuffer(this.quadEBO);
-            if (this.bgInstanceVBO)
-                gl.deleteBuffer(this.bgInstanceVBO);
-            if (this.glyphInstanceVBO)
-                gl.deleteBuffer(this.glyphInstanceVBO);
+            if (this.bgInstanceVBOs[0])
+                gl.deleteBuffer(this.bgInstanceVBOs[0]);
+            if (this.bgInstanceVBOs[1])
+                gl.deleteBuffer(this.bgInstanceVBOs[1]);
+            if (this.glyphInstanceVBOs[0])
+                gl.deleteBuffer(this.glyphInstanceVBOs[0]);
+            if (this.glyphInstanceVBOs[1])
+                gl.deleteBuffer(this.glyphInstanceVBOs[1]);
+            if (this.overlayVBO)
+                gl.deleteBuffer(this.overlayVBO);
             if (this.bgVAO)
                 gl.deleteVertexArray(this.bgVAO);
             if (this.glyphVAO)
@@ -693,19 +832,40 @@ export class WebGLRenderer {
         this.quadEBO = gl.createBuffer();
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.quadEBO);
         gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, quadIndices, gl.STATIC_DRAW);
-        // Instance buffers
-        this.bgInstanceVBO = gl.createBuffer();
-        this.glyphInstanceVBO = gl.createBuffer();
-        // Set up background VAO
+        // Double-buffered instance VBOs
+        this.bgInstanceVBOs = [gl.createBuffer(), gl.createBuffer()];
+        this.glyphInstanceVBOs = [gl.createBuffer(), gl.createBuffer()];
+        // Dedicated overlay VBO for cursor/selection/highlights
+        this.overlayVBO = gl.createBuffer();
+        // Set up background VAO (quad + EBO only; instance buffer bound per-frame)
         this.bgVAO = gl.createVertexArray();
         gl.bindVertexArray(this.bgVAO);
         this.setupBgVAO(gl);
         gl.bindVertexArray(null);
-        // Set up glyph VAO
+        // Set up glyph VAO (quad + EBO only; instance buffer bound per-frame)
         this.glyphVAO = gl.createVertexArray();
         gl.bindVertexArray(this.glyphVAO);
         this.setupGlyphVAO(gl);
         gl.bindVertexArray(null);
+        // Cache all uniform locations after programs are compiled
+        this.bgResolutionLoc = gl.getUniformLocation(this.bgProgram, "u_resolution");
+        this.bgCellSizeLoc = gl.getUniformLocation(this.bgProgram, "u_cellSize");
+        this.glyphResolutionLoc = gl.getUniformLocation(this.glyphProgram, "u_resolution");
+        this.glyphCellSizeLoc = gl.getUniformLocation(this.glyphProgram, "u_cellSize");
+        this.glyphAtlasLoc = gl.getUniformLocation(this.glyphProgram, "u_atlas");
+        // Cache attribute locations
+        this.bgAttribLocs = {
+            cellPos: gl.getAttribLocation(this.bgProgram, "a_cellPos"),
+            color: gl.getAttribLocation(this.bgProgram, "a_color"),
+        };
+        this.glyphAttribLocs = {
+            cellPos: gl.getAttribLocation(this.glyphProgram, "a_cellPos"),
+            color: gl.getAttribLocation(this.glyphProgram, "a_color"),
+            texCoord: gl.getAttribLocation(this.glyphProgram, "a_texCoord"),
+            glyphSize: gl.getAttribLocation(this.glyphProgram, "a_glyphSize"),
+        };
+        // Reset dirty-row tracking state on GL reinit
+        this.hasRenderedOnce = false;
         // Recreate atlas texture
         this.atlas.recreateTexture();
     }
@@ -721,8 +881,8 @@ export class WebGLRenderer {
         gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
         // Element buffer
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.quadEBO);
-        // Instance data
-        gl.bindBuffer(gl.ARRAY_BUFFER, this.bgInstanceVBO);
+        // Instance data — bind initial buffer; will be rebound per-frame for double buffering
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.bgInstanceVBOs[0]);
         const stride = BG_INSTANCE_FLOATS * FLOAT;
         const aCellPos = gl.getAttribLocation(program, "a_cellPos");
         gl.enableVertexAttribArray(aCellPos);
@@ -745,8 +905,8 @@ export class WebGLRenderer {
         gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
         // Element buffer
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.quadEBO);
-        // Instance data
-        gl.bindBuffer(gl.ARRAY_BUFFER, this.glyphInstanceVBO);
+        // Instance data — bind initial buffer; will be rebound per-frame for double buffering
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.glyphInstanceVBOs[0]);
         const stride = GLYPH_INSTANCE_FLOATS * FLOAT;
         const aCellPos = gl.getAttribLocation(program, "a_cellPos");
         gl.enableVertexAttribArray(aCellPos);
@@ -776,9 +936,11 @@ export class WebGLRenderer {
         const neededGlyph = totalCells * GLYPH_INSTANCE_FLOATS;
         if (this.bgInstances.length < neededBg) {
             this.bgInstances = new Float32Array(neededBg);
+            this.hasRenderedOnce = false; // force full rebuild on resize
         }
         if (this.glyphInstances.length < neededGlyph) {
             this.glyphInstances = new Float32Array(neededGlyph);
+            this.hasRenderedOnce = false;
         }
     }
     // -----------------------------------------------------------------------
@@ -790,24 +952,6 @@ export class WebGLRenderer {
         this.themeBgFloat = hexToFloat4(this.theme.background);
         this.themeCursorFloat = hexToFloat4(this.theme.cursor);
     }
-    resolveColorFloat(colorIdx, isRGB, grid, col, isForeground) {
-        if (isRGB) {
-            const offset = isForeground ? col : 256 + col;
-            const rgb = grid.rgbColors[offset];
-            const r = ((rgb >> 16) & 0xff) / 255;
-            const g = ((rgb >> 8) & 0xff) / 255;
-            const b = (rgb & 0xff) / 255;
-            return [r, g, b, 1.0];
-        }
-        if (isForeground && colorIdx === 7)
-            return this.themeFgFloat;
-        if (!isForeground && colorIdx === 0)
-            return this.themeBgFloat;
-        if (colorIdx >= 0 && colorIdx < 256) {
-            return this.paletteFloat[colorIdx];
-        }
-        return isForeground ? this.themeFgFloat : this.themeBgFloat;
-    }
     // -----------------------------------------------------------------------
     // Cursor
     // -----------------------------------------------------------------------
@@ -815,33 +959,44 @@ export class WebGLRenderer {
         if (!this.gl || !this.highlights.length)
             return;
         const gl = this.gl;
-        if (!this.bgProgram || !this.bgVAO || !this.bgInstanceVBO)
+        if (!this.bgProgram || !this.bgVAO || !this.overlayVBO)
             return;
-        const hlInstances = [];
+        // Pack into pre-allocated hlBuffer, growing only if needed
+        let hlIdx = 0;
         for (const hl of this.highlights) {
-            // Current match: orange, other matches: semi-transparent yellow
             const r = hl.isCurrent ? 1.0 : 1.0;
             const g = hl.isCurrent ? 0.647 : 1.0;
             const b = hl.isCurrent ? 0.0 : 0.0;
             const a = hl.isCurrent ? 0.5 : 0.3;
             for (let col = hl.startCol; col <= hl.endCol; col++) {
-                hlInstances.push(col, hl.row, r, g, b, a);
+                const needed = (hlIdx + 1) * BG_INSTANCE_FLOATS;
+                if (needed > this.hlBuffer.length) {
+                    const newBuf = new Float32Array(this.hlBuffer.length * 2);
+                    newBuf.set(this.hlBuffer);
+                    this.hlBuffer = newBuf;
+                }
+                const off = hlIdx * BG_INSTANCE_FLOATS;
+                this.hlBuffer[off] = col;
+                this.hlBuffer[off + 1] = hl.row;
+                this.hlBuffer[off + 2] = r;
+                this.hlBuffer[off + 3] = g;
+                this.hlBuffer[off + 4] = b;
+                this.hlBuffer[off + 5] = a;
+                hlIdx++;
             }
         }
-        if (hlInstances.length === 0)
+        if (hlIdx === 0)
             return;
-        const hlData = new Float32Array(hlInstances);
-        const hlCount = hlInstances.length / BG_INSTANCE_FLOATS;
-        gl.enable(gl.BLEND);
-        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        // BLEND already enabled by caller
         gl.useProgram(this.bgProgram);
-        gl.uniform2f(gl.getUniformLocation(this.bgProgram, "u_resolution"), this.canvas?.width ?? 0, this.canvas?.height ?? 0);
-        gl.uniform2f(gl.getUniformLocation(this.bgProgram, "u_cellSize"), this.cellWidth * this.dpr, this.cellHeight * this.dpr);
-        gl.bindBuffer(gl.ARRAY_BUFFER, this.bgInstanceVBO);
-        gl.bufferData(gl.ARRAY_BUFFER, hlData, gl.DYNAMIC_DRAW);
+        // Use cached uniform locations
+        gl.uniform2f(this.bgResolutionLoc, this.canvas?.width ?? 0, this.canvas?.height ?? 0);
+        gl.uniform2f(this.bgCellSizeLoc, this.cellWidth * this.dpr, this.cellHeight * this.dpr);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.overlayVBO);
+        gl.bufferData(gl.ARRAY_BUFFER, this.hlBuffer.subarray(0, hlIdx * BG_INSTANCE_FLOATS), gl.STREAM_DRAW);
         gl.bindVertexArray(this.bgVAO);
-        gl.drawElementsInstanced(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0, hlCount);
-        gl.disable(gl.BLEND);
+        this.rebindBgInstanceAttribs(gl, this.overlayVBO);
+        gl.drawElementsInstanced(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0, hlIdx);
     }
     drawSelection() {
         if (!this.gl || !this.grid || !this.selection)
@@ -854,12 +1009,12 @@ export class WebGLRenderer {
         // Skip if selection is empty (same cell)
         if (sr === er && sel.startCol === sel.endCol)
             return;
-        if (!this.bgProgram || !this.bgVAO || !this.bgInstanceVBO)
+        if (!this.bgProgram || !this.bgVAO || !this.overlayVBO)
             return;
         // Parse the selection background color
         const selColor = hexToFloat4(this.theme.selectionBackground);
-        // Build instance data for selection rects
-        const selInstances = [];
+        // Pack into pre-allocated selBuffer, growing only if needed
+        let selIdx = 0;
         for (let row = sr; row <= er; row++) {
             let colStart;
             let colEnd;
@@ -880,23 +1035,34 @@ export class WebGLRenderer {
                 colEnd = grid.cols - 1;
             }
             for (let col = colStart; col <= colEnd; col++) {
-                selInstances.push(col, row, selColor[0], selColor[1], selColor[2], 0.5);
+                const needed = (selIdx + 1) * BG_INSTANCE_FLOATS;
+                if (needed > this.selBuffer.length) {
+                    const newBuf = new Float32Array(this.selBuffer.length * 2);
+                    newBuf.set(this.selBuffer);
+                    this.selBuffer = newBuf;
+                }
+                const off = selIdx * BG_INSTANCE_FLOATS;
+                this.selBuffer[off] = col;
+                this.selBuffer[off + 1] = row;
+                this.selBuffer[off + 2] = selColor[0];
+                this.selBuffer[off + 3] = selColor[1];
+                this.selBuffer[off + 4] = selColor[2];
+                this.selBuffer[off + 5] = 0.5;
+                selIdx++;
             }
         }
-        if (selInstances.length === 0)
+        if (selIdx === 0)
             return;
-        const selData = new Float32Array(selInstances);
-        const selCount = selInstances.length / BG_INSTANCE_FLOATS;
-        gl.enable(gl.BLEND);
-        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        // BLEND already enabled by caller
         gl.useProgram(this.bgProgram);
-        gl.uniform2f(gl.getUniformLocation(this.bgProgram, "u_resolution"), this.canvas?.width ?? 0, this.canvas?.height ?? 0);
-        gl.uniform2f(gl.getUniformLocation(this.bgProgram, "u_cellSize"), this.cellWidth * this.dpr, this.cellHeight * this.dpr);
-        gl.bindBuffer(gl.ARRAY_BUFFER, this.bgInstanceVBO);
-        gl.bufferData(gl.ARRAY_BUFFER, selData, gl.DYNAMIC_DRAW);
+        // Use cached uniform locations
+        gl.uniform2f(this.bgResolutionLoc, this.canvas?.width ?? 0, this.canvas?.height ?? 0);
+        gl.uniform2f(this.bgCellSizeLoc, this.cellWidth * this.dpr, this.cellHeight * this.dpr);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.overlayVBO);
+        gl.bufferData(gl.ARRAY_BUFFER, this.selBuffer.subarray(0, selIdx * BG_INSTANCE_FLOATS), gl.STREAM_DRAW);
         gl.bindVertexArray(this.bgVAO);
-        gl.drawElementsInstanced(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0, selCount);
-        gl.disable(gl.BLEND);
+        this.rebindBgInstanceAttribs(gl, this.overlayVBO);
+        gl.drawElementsInstanced(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0, selIdx);
     }
     drawCursor() {
         if (!this.gl || !this.cursor || !this.cursor.visible)
@@ -907,50 +1073,81 @@ export class WebGLRenderer {
         const cellH = this.cellHeight * this.dpr;
         const cc = this.themeCursorFloat;
         // Use the bg program to draw a simple colored rect for the cursor
-        if (!this.bgProgram || !this.bgVAO || !this.bgInstanceVBO)
+        if (!this.bgProgram || !this.bgVAO || !this.overlayVBO)
             return;
-        gl.enable(gl.BLEND);
-        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        // BLEND already enabled by caller
         gl.useProgram(this.bgProgram);
-        gl.uniform2f(gl.getUniformLocation(this.bgProgram, "u_resolution"), this.canvas?.width ?? 0, this.canvas?.height ?? 0);
-        gl.uniform2f(gl.getUniformLocation(this.bgProgram, "u_cellSize"), cellW, cellH);
+        // Use cached uniform locations
+        gl.uniform2f(this.bgResolutionLoc, this.canvas?.width ?? 0, this.canvas?.height ?? 0);
+        gl.uniform2f(this.bgCellSizeLoc, cellW, cellH);
+        // Write into pre-allocated cursorData instead of allocating
         // For bar and underline styles, we draw a thin rect.
         // We abuse cellPos with fractional values to position correctly.
-        let cursorData;
         switch (cursor.style) {
             case "block":
-                cursorData = new Float32Array([
-                    cursor.col,
-                    cursor.row,
-                    cc[0],
-                    cc[1],
-                    cc[2],
-                    0.5, // 50% alpha for block
-                ]);
+                this.cursorData[0] = cursor.col;
+                this.cursorData[1] = cursor.row;
+                this.cursorData[2] = cc[0];
+                this.cursorData[3] = cc[1];
+                this.cursorData[4] = cc[2];
+                this.cursorData[5] = 0.5; // 50% alpha for block
                 break;
             case "underline": {
                 // Draw a thin line at the bottom of the cell
-                // We position it by adjusting cellPos row to be near bottom
                 const lineH = Math.max(2 * this.dpr, 1);
                 const fractionalRow = cursor.row + (cellH - lineH) / cellH;
-                cursorData = new Float32Array([cursor.col, fractionalRow, cc[0], cc[1], cc[2], cc[3]]);
-                // We'd need a different cell size for this, but we can approximate
-                // by using the full cell width and adjusting position
+                this.cursorData[0] = cursor.col;
+                this.cursorData[1] = fractionalRow;
+                this.cursorData[2] = cc[0];
+                this.cursorData[3] = cc[1];
+                this.cursorData[4] = cc[2];
+                this.cursorData[5] = cc[3];
                 break;
             }
             case "bar": {
-                // Draw a thin vertical bar at the left of the cell
-                cursorData = new Float32Array([cursor.col, cursor.row, cc[0], cc[1], cc[2], cc[3]]);
+                this.cursorData[0] = cursor.col;
+                this.cursorData[1] = cursor.row;
+                this.cursorData[2] = cc[0];
+                this.cursorData[3] = cc[1];
+                this.cursorData[4] = cc[2];
+                this.cursorData[5] = cc[3];
                 break;
             }
             default:
-                cursorData = new Float32Array([cursor.col, cursor.row, cc[0], cc[1], cc[2], 0.5]);
+                this.cursorData[0] = cursor.col;
+                this.cursorData[1] = cursor.row;
+                this.cursorData[2] = cc[0];
+                this.cursorData[3] = cc[1];
+                this.cursorData[4] = cc[2];
+                this.cursorData[5] = 0.5;
         }
-        gl.bindBuffer(gl.ARRAY_BUFFER, this.bgInstanceVBO);
-        gl.bufferData(gl.ARRAY_BUFFER, cursorData, gl.DYNAMIC_DRAW);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.overlayVBO);
+        gl.bufferData(gl.ARRAY_BUFFER, this.cursorData, gl.STREAM_DRAW);
         gl.bindVertexArray(this.bgVAO);
+        this.rebindBgInstanceAttribs(gl, this.overlayVBO);
         gl.drawElementsInstanced(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0, 1);
-        gl.disable(gl.BLEND);
+    }
+    // -----------------------------------------------------------------------
+    // Instance attribute rebinding helpers for double-buffered VBOs
+    // -----------------------------------------------------------------------
+    // Cached attribute locations (populated in initGLResources)
+    bgAttribLocs = { cellPos: -1, color: -1 };
+    glyphAttribLocs = { cellPos: -1, color: -1, texCoord: -1, glyphSize: -1 };
+    rebindBgInstanceAttribs(gl, vbo) {
+        const FLOAT = 4;
+        const stride = BG_INSTANCE_FLOATS * FLOAT;
+        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+        gl.vertexAttribPointer(this.bgAttribLocs.cellPos, 2, gl.FLOAT, false, stride, 0);
+        gl.vertexAttribPointer(this.bgAttribLocs.color, 4, gl.FLOAT, false, stride, 2 * FLOAT);
+    }
+    rebindGlyphInstanceAttribs(gl, vbo) {
+        const FLOAT = 4;
+        const stride = GLYPH_INSTANCE_FLOATS * FLOAT;
+        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
+        gl.vertexAttribPointer(this.glyphAttribLocs.cellPos, 2, gl.FLOAT, false, stride, 0);
+        gl.vertexAttribPointer(this.glyphAttribLocs.color, 4, gl.FLOAT, false, stride, 2 * FLOAT);
+        gl.vertexAttribPointer(this.glyphAttribLocs.texCoord, 4, gl.FLOAT, false, stride, 6 * FLOAT);
+        gl.vertexAttribPointer(this.glyphAttribLocs.glyphSize, 2, gl.FLOAT, false, stride, 10 * FLOAT);
     }
     // -----------------------------------------------------------------------
     // Internal helpers