gridviz 3.0.36 → 3.0.38

package/src/style/SquareColorCategoryWebGLStyle.js

@@ -2,9 +2,36 @@
 'use strict'
 
 import { Style } from '../core/Style.js'
-import { initShaderProgram, createShader, makeWebGLCanvas } from '../utils/webGLUtils.js'
+import { getSharedWebGLCanvas, getProgram, getBuffer, bufferOwner } from '../utils/webGLUtils.js'
 import { color } from 'd3-color'
 
+const VERTEX_SHADER = `
+        attribute vec2 pos;
+        uniform float sizePix;
+        uniform mat3 mat;
+        attribute float i;
+        varying float vi;
+        void main() {
+          gl_Position = vec4(mat * vec3(pos, 1.0), 1.0);
+          gl_PointSize = sizePix;
+          vi = i;
+        }`
+
+const FRAGMENT_SHADER = `
+        precision highp float;
+        varying float vi;
+        uniform sampler2D colorLUT;
+        uniform float lutSize;
+        void main(void) {
+            float idx = floor(vi + 0.5);
+            float u = (idx + 0.5) / lutSize;
+            gl_FragColor = texture2D(colorLUT, vec2(u, 0.5));
+        }`
+
+// names of the buffers this style fills in the shared context (getBuffer)
+const POSITION_BUFFER = 'SquareColorCategoryWebGLStyle.pos'
+const INDEX_BUFFER = 'SquareColorCategoryWebGLStyle.i'
+
 /**
  * Style based on webGL
  * To show cells as colored squares, from categories.
@@ -45,98 +72,88 @@ export class SquareColorCategoryWebGLStyle extends Style {
          * @type {function(number,number):number} */
         this.size = opts.size // (resolution, z) => ...
 
-        /**  * @type {{canvas:HTMLCanvasElement, gl:WebGLRenderingContext, width:number, height:number }}*/
+        /** The shared WebGL canvas this style last drew into (getSharedWebGLCanvas)
+         * @type {{canvas:HTMLCanvasElement, gl:WebGLRenderingContext, width:number, height:number }}*/
         this.cvWGL = undefined
-        this.programm = undefined
+        /** @type {WebGLRenderingContext|undefined} */
+        this.gl = undefined
+        this.program = undefined
+        this.lutTexture = undefined
+        /** Number of points in the shared buffers, for drawArrays */
+        this.pointsNb = 0
 
         this.x = undefined
         this.y = undefined
         this.z = undefined
         this.cellsNb = undefined
+        /** The highlight (see Style.setHighlight) the vertices were bound with @private */
+        this.highlightKey = ''
     }
 
+    /**
+     * Binds this style's program, colour lookup texture and uniforms in the shared WebGL
+     * context (getSharedWebGLCanvas): compiled once per context, so a new style instance
+     * (e.g. a setting change rebuilding the style) costs no new context or program.
+     * @returns {boolean} true when the context is new to this style (its data must be re-uploaded)
+     */
     init(w, h) {
-        this.cvWGL = makeWebGLCanvas(w + '', h + '')
-        if (!this.cvWGL) { console.error('No webGL'); return }
-
+        this.cvWGL = getSharedWebGLCanvas(w, h)
         const gl = this.cvWGL.gl
-
-        //draw
-        const vectorShader = `
-        attribute vec2 pos;
-        uniform float sizePix;
-        uniform mat3 mat;
-        attribute float i;
-        varying float vi;
-        void main() {
-          gl_Position = vec4(mat * vec3(pos, 1.0), 1.0);
-          gl_PointSize = sizePix;
-          vi = i;
-        }`
-        /** @type {WebGLShader} */
-        const vShader = createShader(gl, gl.VERTEX_SHADER, vectorShader)
-
-        const fragmentShader = `
-        precision highp float;
-        varying float vi;
-        uniform sampler2D colorLUT;
-        uniform float lutSize;
-        void main(void) {
-            float idx = floor(vi + 0.5);
-            float u = (idx + 0.5) / lutSize;
-            gl_FragColor = texture2D(colorLUT, vec2(u, 0.5));
-        }`
-        /** @type {WebGLShader} */
-        const fShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShader)
-
-        /** @type {WebGLProgram} */
-        this.program = initShaderProgram(gl, vShader, fShader)
+        const contextChanged = this.gl !== gl
+        if (contextChanged) {
+            this.gl = gl
+            this.program = getProgram(gl, VERTEX_SHADER, FRAGMENT_SHADER)
+            this.lutTexture = undefined
+        }
         gl.useProgram(this.program)
+        this.bindColors()
+        return contextChanged
     }
 
     bindColors() {
         const gl = this.cvWGL.gl
-        const lutSize = this.colors.length;
-        const lutData = new Uint8Array(lutSize * 4); // RGBA for each entry
-
-        // Fill lutData with your color values (e.g., rainbow, grayscale, etc.)
-        for (let i = 0; i < lutSize; i++) {
-            const c = color(this.colors[i])
-            lutData[i * 4] = +c.r;     // R
-            lutData[i * 4 + 1] = c.g; // G
-            lutData[i * 4 + 2] = c.b; // B
-            lutData[i * 4 + 3] = c?.opacity * 255; // A
+        const lutSize = this.colors.length
+
+        // created once per style and context
+        if (!this.lutTexture) {
+            const lutData = new Uint8Array(lutSize * 4) // RGBA for each entry
+            for (let i = 0; i < lutSize; i++) {
+                const c = color(this.colors[i])
+                lutData[i * 4] = +c.r
+                lutData[i * 4 + 1] = c.g
+                lutData[i * 4 + 2] = c.b
+                lutData[i * 4 + 3] = c?.opacity * 255
+            }
+            this.lutTexture = gl.createTexture()
+            gl.bindTexture(gl.TEXTURE_2D, this.lutTexture)
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, lutSize, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, lutData)
+            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)
         }
 
-        // Create and bind texture
-        const lutTexture = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, lutTexture);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, lutSize, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, lutData);
-        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);
-
-        // Get uniform locations
-        const uColorLUT = gl.getUniformLocation(this.program, 'colorLUT');
-        const uLutSize = gl.getUniformLocation(this.program, 'lutSize');
-
-        // Set uniform values
-        gl.uniform1i(uColorLUT, 0); // Texture unit 0
-        gl.uniform1f(uLutSize, lutSize);
-
-        // Bind the texture to texture unit 0
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, lutTexture);
+        gl.uniform1i(gl.getUniformLocation(this.program, 'colorLUT'), 0) // Texture unit 0
+        gl.uniform1f(gl.getUniformLocation(this.program, 'lutSize'), lutSize)
+        gl.activeTexture(gl.TEXTURE0)
+        gl.bindTexture(gl.TEXTURE_2D, this.lutTexture)
     }
 
+    /**
+     * Fills the shared position and colour index buffers with the cells to draw.
+     * @returns {number} the number of points uploaded (cells without a category are left out)
+     */
     bindVertices(cells, resolution, z, viewScale) {
         const gl = this.cvWGL.gl
         //add vertice and fragment data
         const r2 = resolution / 2
-        let c, nb = cells.length
-        const verticesBuffer = []
-        const iBuffer = []
+        let c,
+            nb = cells.length
+        const verticesBuffer = new Float32Array(2 * nb)
+        const iBuffer = new Float32Array(nb)
+        // categories shown while a legend swatch is hovered: those drawn in the colour of the swatch
+        const shown = this.highlightColors ? this.colors.map((c) => this.isHighlighted(c)) : null
+        let n = 0
         for (let i = 0; i < nb; i++) {
             c = cells[i]
             const cat = this.code(c, resolution, z, viewScale)
@@ -149,34 +166,34 @@ export class SquareColorCategoryWebGLStyle extends Style {
                 console.log('Unexpected category index: ' + cat + ' ' + i_)
                 continue
             }
-            verticesBuffer.push(c.x + r2, c.y + r2)
-            iBuffer.push(+i_)
+            if (shown && !shown[+i_]) continue
+            verticesBuffer[2 * n] = c.x + r2
+            verticesBuffer[2 * n + 1] = c.y + r2
+            iBuffer[n] = +i_
+            n++
         }
 
-        //bind vertice data
-        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verticesBuffer), gl.STATIC_DRAW)
+        gl.bindBuffer(gl.ARRAY_BUFFER, getBuffer(gl, POSITION_BUFFER))
+        gl.bufferData(gl.ARRAY_BUFFER, verticesBuffer.subarray(0, 2 * n), gl.DYNAMIC_DRAW)
+        gl.bindBuffer(gl.ARRAY_BUFFER, getBuffer(gl, INDEX_BUFFER))
+        gl.bufferData(gl.ARRAY_BUFFER, iBuffer.subarray(0, n), gl.DYNAMIC_DRAW)
+        bufferOwner(gl, POSITION_BUFFER, this)
+        return n
+    }
+
+    /** Points the program's attributes at the shared buffers (whatever another style left bound). */
+    bindAttributes() {
+        const gl = this.cvWGL.gl
         const position = gl.getAttribLocation(this.program, 'pos')
-        gl.vertexAttribPointer(
-            position,
-            2, //numComponents
-            gl.FLOAT, //type
-            false, //normalise
-            0, //stride
-            0 //offset
-        )
+        gl.bindBuffer(gl.ARRAY_BUFFER, getBuffer(gl, POSITION_BUFFER))
+        gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0)
         gl.enableVertexAttribArray(position)
-
-        //i data
-        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(iBuffer), gl.STATIC_DRAW)
         const i = gl.getAttribLocation(this.program, 'i')
+        gl.bindBuffer(gl.ARRAY_BUFFER, getBuffer(gl, INDEX_BUFFER))
         gl.vertexAttribPointer(i, 1, gl.FLOAT, false, 0, 0)
         gl.enableVertexAttribArray(i)
     }
 
-
-
     // check if the vertices have to be bound again
     mapContentChanged(v, cellsNb) {
         if (v.x == this.x && v.y == this.y && v.z == this.z && this.cellsNb == cellsNb) return false
@@ -203,13 +220,8 @@ export class SquareColorCategoryWebGLStyle extends Style {
         //get view scale
         const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
 
-        //create canvas and webgl renderer
-        let contextRecreated = false
-        if (!this.cvWGL || geoCanvas.w != this.cvWGL.width || geoCanvas.h != this.cvWGL.height) {
-            contextRecreated = true
-            this.init(geoCanvas.w, geoCanvas.h)
-            this.bindColors()
-        }
+        //bind this style's program in the shared WebGL context
+        const contextChanged = this.init(geoCanvas.w, geoCanvas.h)
         const gl = this.cvWGL.gl
         const canvas = this.cvWGL.canvas
 
@@ -217,32 +229,32 @@ export class SquareColorCategoryWebGLStyle extends Style {
         const sizePix = this.size ? this.size(resolution, z) / z : resolution / z + 0.2
         gl.uniform1f(gl.getUniformLocation(this.program, 'sizePix'), 1.0 * sizePix)
 
-        //
-        // mapContentChanged() is a cheap proxy for "did the content change" based
-        // on view x/y/z and cell count alone - it has no idea the WebGL context
-        // itself was just thrown away and recreated a few lines up (geoCanvas.w/h
-        // changing, e.g. from a browser/devtools resize, recreates cvWGL with a
-        // fresh, empty vertex buffer). A resize alone often leaves the geographic
-        // view and cell count identical to the previous draw, so without forcing
-        // a rebind here, mapContentChanged reports "unchanged" and the rebind gets
-        // skipped - leaving the new context's vertex buffer never populated and
-        // gl.drawArrays() drawing nothing, silently (confirmed via a resize-storm
-        // test: reinit-without-rebind happened on 5 of 9 context recreations).
-        const shouldRebind = this.mapContentChanged(geoCanvas.view, cells.length) || contextRecreated
-        if (shouldRebind)
-            //bind vertices
-            this.bindVertices(cells, resolution, z, viewScale)
-            //transformation
-            gl.uniformMatrix3fv(gl.getUniformLocation(this.program, 'mat'), false, new Float32Array(geoCanvas.getWebGLTransform()))
-
-        // Enable the depth test
-        //gl.enable(gl.DEPTH_TEST);
+        // mapContentChanged() is a cheap proxy for "did the content change", based on view
+        // x/y/z and cell count alone. The upload is also needed when the shared buffers
+        // hold another style's data (bufferOwner), or the context is new to this style
+        // (e.g. replaced after being lost).
+        const highlightKey = this.highlightColors ? this.highlightColors.join('|') : ''
+        const highlightChanged = highlightKey !== this.highlightKey
+        this.highlightKey = highlightKey
+        const contentChanged = this.mapContentChanged(geoCanvas.view, cells.length) || highlightChanged
+        if (contentChanged || contextChanged || bufferOwner(gl, POSITION_BUFFER) !== this)
+            this.pointsNb = this.bindVertices(cells, resolution, z, viewScale)
+        this.bindAttributes()
+
+        //transformation
+        gl.uniformMatrix3fv(
+            gl.getUniformLocation(this.program, 'mat'),
+            false,
+            new Float32Array(geoCanvas.getWebGLTransform())
+        )
+
         // Clear the color buffer bit
+        gl.clearColor(0, 0, 0, 0)
         gl.clear(gl.COLOR_BUFFER_BIT)
-        // Set the view port
-        //gl.viewport(0, 0, cg.w, cg.h);
 
-        gl.drawArrays(gl.POINTS, 0, cells.length)
+        // only the points actually uploaded: cells without a category are left out, and
+        // drawing past the end of the buffer is a WebGL error that draws nothing at all
+        gl.drawArrays(gl.POINTS, 0, this.pointsNb)
 
         //draw in canvas geo
         geoCanvas.initCanvasTransform()

package/src/style/SquareColorWebGLStyle.js

@@ -2,7 +2,7 @@
 'use strict'
 
 import { Style } from '../core/Style.js'
-import { makeWebGLCanvas } from '../utils/webGLUtils.js'
+import { getSharedWebGLCanvas } from '../utils/webGLUtils.js'
 import { WebGLSquareColoringAdvanced } from '../utils/WebGLSquareColoringAdvanced.js'
 
 /**
@@ -80,11 +80,11 @@ export class SquareColorWebGLStyle extends Style {
         //get view scale
         const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
 
-        //create canvas and webgl renderer
+        //the shared webgl canvas (one context for all styles, instead of a new one per draw)
         //for opacity control, see: https://webglfundamentals.org/webgl/lessons/webgl-and-alpha.html
-        const cvWGL = makeWebGLCanvas(
-            geoCanvas.w + '',
-            geoCanvas.h + '',
+        const cvWGL = getSharedWebGLCanvas(
+            geoCanvas.w,
+            geoCanvas.h,
             this.opacity != undefined ? { premultipliedAlpha: false } : undefined
         )
         if (!cvWGL) {

package/src/utils/WebGLSquareColoring.js

@@ -1,28 +1,10 @@
 //@ts-check
 'use strict'
 
-import { initShaderProgram, createShader } from './webGLUtils.js'
+import { getProgram, getBuffer } from './webGLUtils.js'
 import { color } from 'd3-color'
 
-/**
- * Everything to easily draw colored squares with webGL.
- * All the same size, but different fill color.
- */
-export class WebGLSquareColoring {
-    /**
-     *
-     * @param {WebGLRenderingContext} gl
-     */
-    constructor(gl, sizePix) {
-        this.gl = gl
-        this.sizePix = sizePix || 10.0
-
-        this.program = initShaderProgram(
-            gl,
-            createShader(
-                gl,
-                gl.VERTEX_SHADER,
-                `
+const VERTEX_SHADER = `
             attribute vec2 pos;
             uniform float sizePix;
             uniform mat3 mat;
@@ -34,11 +16,8 @@ export class WebGLSquareColoring {
               vColor = color;
             }
           `
-            ),
-            createShader(
-                gl,
-                gl.FRAGMENT_SHADER,
-                `
+
+const FRAGMENT_SHADER = `
             precision mediump float;
             varying vec4 vColor;
             void main(void) {
@@ -46,8 +25,22 @@ export class WebGLSquareColoring {
                 vColor_[3] = 255.0 * vColor_[3];
                 gl_FragColor = vColor_;
             }`
-            )
-        )
+
+/**
+ * Everything to easily draw colored squares with webGL.
+ * All the same size, but different fill color.
+ */
+export class WebGLSquareColoring {
+    /**
+     *
+     * @param {WebGLRenderingContext} gl
+     */
+    constructor(gl, sizePix) {
+        this.gl = gl
+        this.sizePix = sizePix || 10.0
+
+        // compiled once per context, then reused
+        this.program = getProgram(gl, VERTEX_SHADER, FRAGMENT_SHADER)
         gl.useProgram(this.program)
 
         //buffer data
@@ -79,9 +72,11 @@ export class WebGLSquareColoring {
     draw(transfoMat) {
         const gl = this.gl
 
-        //vertice data
-        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.verticesBuffer), gl.STATIC_DRAW)
+        gl.useProgram(this.program)
+
+        //vertice data, in a buffer reused from draw to draw
+        gl.bindBuffer(gl.ARRAY_BUFFER, getBuffer(gl, 'WebGLSquareColoring.pos'))
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.verticesBuffer), gl.DYNAMIC_DRAW)
         const position = gl.getAttribLocation(this.program, 'pos')
         gl.vertexAttribPointer(
             position,
@@ -94,8 +89,8 @@ export class WebGLSquareColoring {
         gl.enableVertexAttribArray(position)
 
         //color data
-        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.colorsBuffer), gl.STATIC_DRAW)
+        gl.bindBuffer(gl.ARRAY_BUFFER, getBuffer(gl, 'WebGLSquareColoring.color'))
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.colorsBuffer), gl.DYNAMIC_DRAW)
         var color = gl.getAttribLocation(this.program, 'color')
         gl.vertexAttribPointer(color, 4, gl.FLOAT, false, 0, 0)
         gl.enableVertexAttribArray(color)
@@ -109,6 +104,7 @@ export class WebGLSquareColoring {
         // Enable the depth test
         //gl.enable(gl.DEPTH_TEST);
         // Clear the color buffer bit
+        gl.clearColor(0, 0, 0, 0)
         gl.clear(gl.COLOR_BUFFER_BIT)
         // Set the view port
         //gl.viewport(0, 0, cg.w, cg.h);

package/src/utils/WebGLSquareColoringAdvanced.js

@@ -1,9 +1,24 @@
 //@ts-check
 'use strict'
 
-import { initShaderProgram, createShader } from './webGLUtils.js'
+import { getProgram, getBuffer } from './webGLUtils.js'
 import { color } from 'd3-color'
 
+const VERTEX_SHADER = `
+        attribute vec2 pos;
+        uniform float sizePix;
+        uniform mat3 mat;
+
+        attribute float t;
+        varying float vt;
+
+        void main() {
+          gl_Position = vec4(mat * vec3(pos, 1.0), 1.0);
+          gl_PointSize = sizePix;
+          vt = t;
+        }
+      `
+
 /**
  * Everything to easily draw colored squares with webGL.
  * All the same size, but different fill color.
@@ -31,26 +46,6 @@ export class WebGLSquareColoringAdvanced {
         //gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
         //gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
 
-        /** @type {WebGLShader} */
-        const vShader = createShader(
-            gl,
-            gl.VERTEX_SHADER,
-            `
-        attribute vec2 pos;
-        uniform float sizePix;
-        uniform mat3 mat;
-
-        attribute float t;
-        varying float vt;
-
-        void main() {
-          gl_Position = vec4(mat * vec3(pos, 1.0), 1.0);
-          gl_PointSize = sizePix;
-          vt = t;
-        }
-      `
-        )
-
         //prepare fragment shader code
         //declare the uniform and other variables
         const fshBuff = []
@@ -157,11 +152,9 @@ export class WebGLSquareColoringAdvanced {
         //let fshString = fshBuff.join("\n")
         //console.log(fshString)
 
-        /** @type {WebGLShader} */
-        const fShader = createShader(gl, gl.FRAGMENT_SHADER, fshString)
-
+        // compiled once per context and fragment source (colours, stretching), then reused
         /** @type {WebGLProgram} */
-        this.program = initShaderProgram(gl, vShader, fShader)
+        this.program = getProgram(gl, VERTEX_SHADER, fshString)
         gl.useProgram(this.program)
 
         //set uniforms
@@ -191,9 +184,11 @@ export class WebGLSquareColoringAdvanced {
         const gl = this.gl
         const program = this.program
 
-        //vertice data
-        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verticesBuffer), gl.STATIC_DRAW)
+        gl.useProgram(program)
+
+        //vertice data, in a buffer reused from draw to draw
+        gl.bindBuffer(gl.ARRAY_BUFFER, getBuffer(gl, 'WebGLSquareColoringAdvanced.pos'))
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verticesBuffer), gl.DYNAMIC_DRAW)
         const position = gl.getAttribLocation(program, 'pos')
         gl.vertexAttribPointer(
             position,
@@ -206,8 +201,8 @@ export class WebGLSquareColoringAdvanced {
         gl.enableVertexAttribArray(position)
 
         //t data
-        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(tBuffer), gl.STATIC_DRAW)
+        gl.bindBuffer(gl.ARRAY_BUFFER, getBuffer(gl, 'WebGLSquareColoringAdvanced.t'))
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(tBuffer), gl.DYNAMIC_DRAW)
         const t = gl.getAttribLocation(program, 't')
         gl.vertexAttribPointer(t, 1, gl.FLOAT, false, 0, 0)
         gl.enableVertexAttribArray(t)
@@ -218,6 +213,7 @@ export class WebGLSquareColoringAdvanced {
         // Enable the depth test
         //gl.enable(gl.DEPTH_TEST);
         // Clear the color buffer bit
+        gl.clearColor(0, 0, 0, 0)
         gl.clear(gl.COLOR_BUFFER_BIT)
         // Set the view port
         //gl.viewport(0, 0, cg.w, cg.h);

package/src/utils/webGLUtils.js

@@ -20,6 +20,111 @@ export function makeWebGLCanvas(width, height, opts = {}) {
     return { canvas: canvas, gl: gl, width: width, height: height }
 }
 
+/**
+ * The shared, off-page WebGL canvases, one per set of context options.
+ * Styles draw into one of these and copy the result onto the map's canvas, one style at a
+ * time, so they never need a context each. Browsers keep only ~16 live WebGL contexts and
+ * drop the oldest beyond that, so one context per style instance (or worse, per draw)
+ * eventually blanks other WebGL content on the page.
+ * @type {Map<string, {canvas:HTMLCanvasElement, gl:WebGLRenderingContext, width:number, height:number}>} */
+const sharedCanvases = new Map()
+
+/**
+ * Returns the shared WebGL canvas for these context options, resized to width x height.
+ * Resizing keeps the context (and its compiled programs and buffers); only its drawing
+ * buffer is reallocated. A lost context is replaced.
+ *
+ * @param {number} width
+ * @param {number} height
+ * @param {object} [opts] WebGL context attributes, e.g. { premultipliedAlpha: false }
+ * @returns {{canvas:HTMLCanvasElement, gl:WebGLRenderingContext, width:number, height:number }}
+ */
+export function getSharedWebGLCanvas(width, height, opts = undefined) {
+    const key = JSON.stringify(opts || {})
+    let cv = sharedCanvases.get(key)
+    if (!cv || cv.gl.isContextLost()) {
+        cv = makeWebGLCanvas(width + '', height + '', opts)
+        cv.width = +width
+        cv.height = +height
+        sharedCanvases.set(key, cv)
+    }
+    if (cv.width != width || cv.height != height) {
+        cv.canvas.width = width
+        cv.canvas.height = height
+        cv.width = +width
+        cv.height = +height
+    }
+    cv.gl.viewport(0, 0, cv.width, cv.height)
+    return cv
+}
+
+/** @type {WeakMap<WebGLRenderingContext, {programs: Map<string, WebGLProgram>, buffers: Map<string, WebGLBuffer>, owners: Map<string, any>}>} */
+const glResources = new WeakMap()
+function resourcesOf(gl) {
+    let r = glResources.get(gl)
+    if (!r) {
+        r = { programs: new Map(), buffers: new Map(), owners: new Map() }
+        glResources.set(gl, r)
+    }
+    return r
+}
+
+/**
+ * A shader program for these sources, compiled once per context and reused.
+ *
+ * @param {WebGLRenderingContext} gl
+ * @param {string} vertexSource
+ * @param {string} fragmentSource
+ * @returns {WebGLProgram}
+ */
+export function getProgram(gl, vertexSource, fragmentSource) {
+    const programs = resourcesOf(gl).programs
+    const key = vertexSource + '\u0000' + fragmentSource
+    let program = programs.get(key)
+    if (!program) {
+        program = initShaderProgram(
+            gl,
+            createShader(gl, gl.VERTEX_SHADER, vertexSource),
+            createShader(gl, gl.FRAGMENT_SHADER, fragmentSource)
+        )
+        programs.set(key, program)
+    }
+    return program
+}
+
+/**
+ * A named buffer of a context, created once and reused: refill it with bufferData instead
+ * of creating a new buffer per draw (buffers are never garbage collected while their
+ * context lives).
+ *
+ * @param {WebGLRenderingContext} gl
+ * @param {string} name
+ * @returns {WebGLBuffer}
+ */
+export function getBuffer(gl, name) {
+    const buffers = resourcesOf(gl).buffers
+    let buffer = buffers.get(name)
+    if (!buffer) {
+        buffer = gl.createBuffer()
+        buffers.set(name, buffer)
+    }
+    return buffer
+}
+
+/**
+ * Who last filled a named buffer, so a style can tell whether the data it uploaded is
+ * still there or another style has overwritten it since.
+ * @param {WebGLRenderingContext} gl
+ * @param {string} name
+ * @param {any} [owner] sets the owner when given
+ * @returns {any} the owner
+ */
+export function bufferOwner(gl, name, owner = undefined) {
+    const owners = resourcesOf(gl).owners
+    if (owner !== undefined) owners.set(name, owner)
+    return owners.get(name)
+}
+
 /**
  * Initialize a shader program, so WebGL knows how to draw our data
  *