gridviz 3.0.36 → 3.0.37

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
  *