gridviz 3.0.35 → 3.0.37

package/src/utils/WebGLRectangleColoring.js

@@ -1,106 +1,106 @@
-//@ts-check
-'use strict'
-
-import { initShaderProgram, createShader } from './webGLUtils.js'
-
-/**
- * Everything to easily draw colored rectangles with webGL.
- */
-export class WebGLRectangleColoring {
-    //TODO: add color alpha/opacity
-
-    /**
-     *
-     * @param {WebGLRenderingContext} gl
-     */
-    constructor(gl) {
-        this.gl = gl
-
-        this.program = initShaderProgram(
-            gl,
-            createShader(
-                gl,
-                gl.VERTEX_SHADER,
-                `
-            attribute vec2 pos;
-            uniform mat3 mat;
-            attribute vec3 color;
-            varying vec3 vColor;
-            void main() {
-              gl_Position = vec4(mat * vec3(pos, 1.0), 1.0);
-              vColor = color;
-            }
-          `
-            ),
-            createShader(
-                gl,
-                gl.FRAGMENT_SHADER,
-                `
-            precision mediump float;
-            varying vec3 vColor;
-            void main(void) {
-               gl_FragColor = vec4(vColor, 1.0);
-            }`
-            )
-        )
-        gl.useProgram(this.program)
-
-        //buffer data
-        this.verticesBuffer = []
-        this.colorsBuffer = []
-    }
-
-    /** Add data to vertices/color buffers for color rectangle drawing */
-    addRectangleData(x1, x2, y1, y2, cR = 0, cG = 0, cB = 1, cA = 0) {
-        //TODO cA
-        //add vertices
-        this.verticesBuffer.push(x1, y1, x2, y1, x1, y2, x2, y2)
-
-        //colors, 3 parts (RGB), one per vertice
-        this.colorsBuffer.push(cR, cG, cB, cR, cG, cB, cR, cG, cB, cR, cG, cB)
-    }
-
-    /**  */
-    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)
-        const position = gl.getAttribLocation(this.program, 'pos')
-        gl.vertexAttribPointer(
-            position,
-            2, //numComponents
-            gl.FLOAT, //type
-            false, //normalise
-            0, //stride
-            0 //offset
-        )
-        gl.enableVertexAttribArray(position)
-
-        //color data
-        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.colorsBuffer), gl.STATIC_DRAW)
-        var color = gl.getAttribLocation(this.program, 'color')
-        gl.vertexAttribPointer(color, 3, gl.FLOAT, false, 0, 0)
-        gl.enableVertexAttribArray(color)
-
-        //transformation
-        gl.uniformMatrix3fv(gl.getUniformLocation(this.program, 'mat'), false, new Float32Array(transfoMat))
-
-        // Enable the depth test
-        //gl.enable(gl.DEPTH_TEST);
-        // Clear the color buffer bit
-        gl.clear(gl.COLOR_BUFFER_BIT)
-        // Set the view port
-        //gl.viewport(0, 0, cg.w, cg.h);
-
-        for (let i = 0; i < this.verticesBuffer.length / 8; i++) {
-            gl.drawArrays(
-                gl.TRIANGLE_STRIP, // mode,see https://miro.medium.com/max/700/0*HQHB5lCGqlOUiysy.jpg
-                i * 4, // vertex list start
-                4 // vertex count
-            )
-        }
-    }
-}
+//@ts-check
+'use strict'
+
+import { initShaderProgram, createShader } from './webGLUtils.js'
+
+/**
+ * Everything to easily draw colored rectangles with webGL.
+ */
+export class WebGLRectangleColoring {
+    //TODO: add color alpha/opacity
+
+    /**
+     *
+     * @param {WebGLRenderingContext} gl
+     */
+    constructor(gl) {
+        this.gl = gl
+
+        this.program = initShaderProgram(
+            gl,
+            createShader(
+                gl,
+                gl.VERTEX_SHADER,
+                `
+            attribute vec2 pos;
+            uniform mat3 mat;
+            attribute vec3 color;
+            varying vec3 vColor;
+            void main() {
+              gl_Position = vec4(mat * vec3(pos, 1.0), 1.0);
+              vColor = color;
+            }
+          `
+            ),
+            createShader(
+                gl,
+                gl.FRAGMENT_SHADER,
+                `
+            precision mediump float;
+            varying vec3 vColor;
+            void main(void) {
+               gl_FragColor = vec4(vColor, 1.0);
+            }`
+            )
+        )
+        gl.useProgram(this.program)
+
+        //buffer data
+        this.verticesBuffer = []
+        this.colorsBuffer = []
+    }
+
+    /** Add data to vertices/color buffers for color rectangle drawing */
+    addRectangleData(x1, x2, y1, y2, cR = 0, cG = 0, cB = 1, cA = 0) {
+        //TODO cA
+        //add vertices
+        this.verticesBuffer.push(x1, y1, x2, y1, x1, y2, x2, y2)
+
+        //colors, 3 parts (RGB), one per vertice
+        this.colorsBuffer.push(cR, cG, cB, cR, cG, cB, cR, cG, cB, cR, cG, cB)
+    }
+
+    /**  */
+    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)
+        const position = gl.getAttribLocation(this.program, 'pos')
+        gl.vertexAttribPointer(
+            position,
+            2, //numComponents
+            gl.FLOAT, //type
+            false, //normalise
+            0, //stride
+            0 //offset
+        )
+        gl.enableVertexAttribArray(position)
+
+        //color data
+        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.colorsBuffer), gl.STATIC_DRAW)
+        var color = gl.getAttribLocation(this.program, 'color')
+        gl.vertexAttribPointer(color, 3, gl.FLOAT, false, 0, 0)
+        gl.enableVertexAttribArray(color)
+
+        //transformation
+        gl.uniformMatrix3fv(gl.getUniformLocation(this.program, 'mat'), false, new Float32Array(transfoMat))
+
+        // Enable the depth test
+        //gl.enable(gl.DEPTH_TEST);
+        // Clear the color buffer bit
+        gl.clear(gl.COLOR_BUFFER_BIT)
+        // Set the view port
+        //gl.viewport(0, 0, cg.w, cg.h);
+
+        for (let i = 0; i < this.verticesBuffer.length / 8; i++) {
+            gl.drawArrays(
+                gl.TRIANGLE_STRIP, // mode,see https://miro.medium.com/max/700/0*HQHB5lCGqlOUiysy.jpg
+                i * 4, // vertex list start
+                4 // vertex count
+            )
+        }
+    }
+}

package/src/utils/WebGLSquareColoring.js

@@ -1,118 +1,114 @@
-//@ts-check
-'use strict'
-
-import { initShaderProgram, createShader } 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,
-                `
-            attribute vec2 pos;
-            uniform float sizePix;
-            uniform mat3 mat;
-            attribute vec4 color;
-            varying vec4 vColor;
-            void main() {
-              gl_Position = vec4(mat * vec3(pos, 1.0), 1.0);
-              gl_PointSize = sizePix;
-              vColor = color;
-            }
-          `
-            ),
-            createShader(
-                gl,
-                gl.FRAGMENT_SHADER,
-                `
-            precision mediump float;
-            varying vec4 vColor;
-            void main(void) {
-                vec4 vColor_ = vColor / 255.0;
-                vColor_[3] = 255.0 * vColor_[3];
-                gl_FragColor = vColor_;
-            }`
-            )
-        )
-        gl.useProgram(this.program)
-
-        //buffer data
-        this.verticesBuffer = []
-        this.colorsBuffer = []
-    }
-
-    /** Add data to vertices/size/color buffers for color squares drawing */
-    addPointData(xC, yC, col) {
-        //convert color
-        const cc = color(col)
-        //const cc = {r:45,g:87,b:98,opacity:0.9}
-        if (!cc) return
-
-        //vertices
-        this.verticesBuffer.push(xC, yC)
-        //color
-        this.colorsBuffer.push(cc.r, cc.g, cc.b, cc.opacity)
-    }
-
-    addPointData2(xC, yC, r, g, b, opacity) {
-        //vertices
-        this.verticesBuffer.push(xC, yC)
-        //color
-        this.colorsBuffer.push(r, g, b, opacity)
-    }
-
-    /**  */
-    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)
-        const position = gl.getAttribLocation(this.program, 'pos')
-        gl.vertexAttribPointer(
-            position,
-            2, //numComponents
-            gl.FLOAT, //type
-            false, //normalise
-            0, //stride
-            0 //offset
-        )
-        gl.enableVertexAttribArray(position)
-
-        //color data
-        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.colorsBuffer), gl.STATIC_DRAW)
-        var color = gl.getAttribLocation(this.program, 'color')
-        gl.vertexAttribPointer(color, 4, gl.FLOAT, false, 0, 0)
-        gl.enableVertexAttribArray(color)
-
-        //sizePix
-        gl.uniform1f(gl.getUniformLocation(this.program, 'sizePix'), 1.0 * this.sizePix)
-
-        //transformation
-        gl.uniformMatrix3fv(gl.getUniformLocation(this.program, 'mat'), false, new Float32Array(transfoMat))
-
-        // Enable the depth test
-        //gl.enable(gl.DEPTH_TEST);
-        // Clear the color buffer bit
-        gl.clear(gl.COLOR_BUFFER_BIT)
-        // Set the view port
-        //gl.viewport(0, 0, cg.w, cg.h);
-
-        gl.drawArrays(gl.POINTS, 0, this.verticesBuffer.length / 2)
-    }
-}
+//@ts-check
+'use strict'
+
+import { getProgram, getBuffer } from './webGLUtils.js'
+import { color } from 'd3-color'
+
+const VERTEX_SHADER = `
+            attribute vec2 pos;
+            uniform float sizePix;
+            uniform mat3 mat;
+            attribute vec4 color;
+            varying vec4 vColor;
+            void main() {
+              gl_Position = vec4(mat * vec3(pos, 1.0), 1.0);
+              gl_PointSize = sizePix;
+              vColor = color;
+            }
+          `
+
+const FRAGMENT_SHADER = `
+            precision mediump float;
+            varying vec4 vColor;
+            void main(void) {
+                vec4 vColor_ = vColor / 255.0;
+                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
+        this.verticesBuffer = []
+        this.colorsBuffer = []
+    }
+
+    /** Add data to vertices/size/color buffers for color squares drawing */
+    addPointData(xC, yC, col) {
+        //convert color
+        const cc = color(col)
+        //const cc = {r:45,g:87,b:98,opacity:0.9}
+        if (!cc) return
+
+        //vertices
+        this.verticesBuffer.push(xC, yC)
+        //color
+        this.colorsBuffer.push(cc.r, cc.g, cc.b, cc.opacity)
+    }
+
+    addPointData2(xC, yC, r, g, b, opacity) {
+        //vertices
+        this.verticesBuffer.push(xC, yC)
+        //color
+        this.colorsBuffer.push(r, g, b, opacity)
+    }
+
+    /**  */
+    draw(transfoMat) {
+        const gl = this.gl
+
+        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,
+            2, //numComponents
+            gl.FLOAT, //type
+            false, //normalise
+            0, //stride
+            0 //offset
+        )
+        gl.enableVertexAttribArray(position)
+
+        //color data
+        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)
+
+        //sizePix
+        gl.uniform1f(gl.getUniformLocation(this.program, 'sizePix'), 1.0 * this.sizePix)
+
+        //transformation
+        gl.uniformMatrix3fv(gl.getUniformLocation(this.program, 'mat'), false, new Float32Array(transfoMat))
+
+        // 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);
+
+        gl.drawArrays(gl.POINTS, 0, this.verticesBuffer.length / 2)
+    }
+}