gridviz 3.0.29 → 3.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "3.0.29",
+    "version": "3.0.31",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",

package/src/style/ShadingStyle.js

@@ -42,14 +42,25 @@ export class ShadingStyle extends SideStyle {
         // compute maximum side value for normalization
         this.viewScale = sides => max(sides, s => sideValue(s))
 
-        const colorTopLeft = opts.colorTopLeft || '255,255,255'
-        const colorBottomRight = opts.colorBottomRight || '0,0,0'
-        const scale = opts.scale || (t=>t)
+        // get colors
+        let colorTopLeft = opts.colorTopLeft || '255,255,255'
+        let colorBottomRight = opts.colorBottomRight || '0,0,0'
+
+        // revert colors (to revert the relief, show depressions as hills)
+        const revert = opts.revert == undefined? false : opts.revert
+        if(revert) {
+            let a = colorTopLeft
+            colorTopLeft = colorBottomRight
+            colorBottomRight = a
+        }
+
+        //
+        const scale = opts.scale
 
         this.color = (side, resolution, z, max) => {
             if (side.v == 0) return
             let coeff = Math.abs(side.v / max)
-            coeff = scale(coeff)
+            if(scale) coeff = scale(coeff)
             if ((side.v < 0 && side.or === 'h') || (side.v > 0 && side.or === 'v'))
                 return 'rgba(' + colorTopLeft + ',' + coeff + ')'
             return 'rgba(' + colorBottomRight + ',' + coeff + ')'

package/src/style/SideTanakaStyle.js

@@ -35,9 +35,17 @@ export class SideTanakaStyle extends Style {
         this.colorDark = opts.colorDark || '#111'
         // the bright color: for side facing the light (coming from NW)
         this.colorBright = opts.colorBright || '#ddd'
+        //
+        this.revert = opts.revert == undefined? false : opts.revert
 
         /** Set to A or true so that the side is drawn as a diamond */
         this.diamond = opts.diamond
+
+        /* Determines what to do for limit sides, between a cell with value and one with no value
+        * steep: the cell value absence is equivalent to 0. It shows potentially a steep limit then.
+        * skip: no side is drawn
+        * step: a side with a 1 step */
+        this.limit = opts.limit || "steep"
     }
 
     /**
@@ -61,8 +69,8 @@ export class SideTanakaStyle extends Style {
             const cl1 = side.c1 ? classifier(side.c1) : undefined
             const cl2 = side.c2 ? classifier(side.c2) : undefined
             if (cl1 === undefined && cl2 === undefined) return undefined
-            if (cl1 === undefined) return cl2
-            if (cl2 === undefined) return -cl1
+            if (cl1 === undefined) return this.limit=="none"? undefined : this.limit=="steep"? cl2 : Math.sign(cl2)
+            if (cl2 === undefined) return this.limit=="none"? undefined : this.limit=="steep"? -cl1 : Math.sign(-cl1)
             return cl2 - cl1
         }
 
@@ -78,6 +86,8 @@ export class SideTanakaStyle extends Style {
         //draw sides
         ctx.lineCap = 'butt'
         const r2 = resolution * 0.5
+        const cd = this.revert? this.colorBright : this.colorDark
+        const cb = this.revert? this.colorDark : this.colorBright
         for (let side of sides) {
 
             //get side value
@@ -86,7 +96,7 @@ export class SideTanakaStyle extends Style {
 
             //color
             /** @type {string|undefined} */
-            const col = ((v < 0 && side.or === 'h') || (v > 0 && side.or === 'v')) ? this.colorBright : this.colorDark
+            const col = ((v < 0 && side.or === 'h') || (v > 0 && side.or === 'v')) ? cb : cd
             if (!col || col == 'none') continue
 
             if (this.diamond) {

package/src/style/SquareColorCategoryWebGLStyle.js

@@ -2,8 +2,8 @@
 'use strict'
 
 import { Style } from '../core/Style.js'
-import { makeWebGLCanvas } from '../utils/webGLUtils.js'
-import { WebGLSquareColoringCatAdvanced } from '../utils/WebGLSquareColoringCatAdvanced.js'
+import { initShaderProgram, createShader, makeWebGLCanvas } from '../utils/webGLUtils.js'
+import { color } from 'd3-color'
 
 /**
  * Style based on webGL
@@ -21,8 +21,8 @@ export class SquareColorCategoryWebGLStyle extends Style {
 
         /**
          * A function returning the category code of the cell, for coloring.
-         * @type {function(import('../core/Dataset.js').Cell):string} */
-        this.code = opts.code
+         * @type {function(import('../core/Dataset.js').Cell, number, number, viewScale):string} */
+        this.code = opts.code  // (c, resolution, z, viewScale) => "code1"
 
         /**
          * The dictionary (code -> color) which gives the color of each category code.
@@ -45,38 +45,105 @@ export class SquareColorCategoryWebGLStyle extends Style {
          * @type {function(number,number):number} */
         this.size = opts.size // (resolution, z) => ...
 
-        /**
-         * @private
-         * @type { WebGLSquareColoringCatAdvanced } */
-        this.wgp = new WebGLSquareColoringCatAdvanced(this.colors)
+        /**  * @type {{canvas:HTMLCanvasElement, gl:WebGLRenderingContext, width:number, height:number }}*/
+        this.cvWGL = undefined
+        this.programm = undefined
+
+        this.x = undefined
+        this.y = undefined
+        this.z = undefined
+        this.cellsNb = undefined
     }
 
-    /**
-     * @param {Array.<import("../core/Dataset.js").Cell>} cells
-     * @param {import("../core/GeoCanvas.js").GeoCanvas} geoCanvas
-     * @param {number} resolution
-     */
-    draw(cells, geoCanvas, resolution) {
-        //filter
-        if (this.filter) cells = cells.filter(this.filter)
+    init(w, h) {
+        this.cvWGL = makeWebGLCanvas(w + '', h + '')
+        if (!this.cvWGL) { console.error('No webGL'); return }
 
-        //
-        const z = geoCanvas.view.z
+        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)
+        gl.useProgram(this.program)
+    }
+
+    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
+        }
+
+        // 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);
+    }
+
+    bindVertices(cells, resolution, z, viewScale) {
+        const gl = this.cvWGL.gl
         //add vertice and fragment data
         const r2 = resolution / 2
-        let c,
-            nb = cells.length
+        let c, nb = cells.length
         const verticesBuffer = []
         const iBuffer = []
         for (let i = 0; i < nb; i++) {
             c = cells[i]
-            const cat = this.code(c)
+            const cat = this.code(c, resolution, z, viewScale)
             if (cat == undefined) {
                 console.log('Unexpected category: ' + cat)
                 continue
             }
-            /** @type {number} */
             const i_ = this.catToI[cat]
             if (isNaN(+i_)) {
                 console.log('Unexpected category index: ' + cat + ' ' + i_)
@@ -86,22 +153,143 @@ export class SquareColorCategoryWebGLStyle extends Style {
             iBuffer.push(+i_)
         }
 
+        //bind vertice data
+        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(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)
+
+        //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.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
+        this.x = v.x
+        this.y = v.y
+        this.z = v.z
+        this.cellsNb = cellsNb
+        return true
+    }
+
+
+    /**
+     * @param {Array.<import("../core/Dataset.js").Cell>} cells
+     * @param {import("../core/GeoCanvas.js").GeoCanvas} geoCanvas
+     * @param {number} resolution
+     */
+    draw(cells, geoCanvas, resolution) {
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        //
+        const z = geoCanvas.view.z
+
+        //get view scale
+        const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
+
         //create canvas and webgl renderer
-        const cvWGL = makeWebGLCanvas(geoCanvas.w + '', geoCanvas.h + '')
-        if (!cvWGL) {
-            console.error('No webGL')
-            return
+        if (!this.cvWGL || geoCanvas.w != this.cvWGL.width || geoCanvas.h != this.cvWGL.height) {
+            this.init(geoCanvas.w, geoCanvas.h)
+            this.bindColors()
         }
+        const gl = this.cvWGL.gl
+        const canvas = this.cvWGL.canvas
 
-        //draw
-        const sizeGeo = this.size ? this.size(resolution, z) : resolution + 0.2 * z
-        this.wgp.draw(cvWGL.gl, verticesBuffer, iBuffer, geoCanvas.getWebGLTransform(), sizeGeo / z)
+        //bind sizePix
+        const sizePix = this.size ? this.size(resolution, z) / z : resolution / z + 0.2
+        gl.uniform1f(gl.getUniformLocation(this.program, 'sizePix'), 1.0 * sizePix)
+
+        //
+        if (this.mapContentChanged(geoCanvas.view, cells.length))
+            //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);
+        // 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, cells.length)
 
         //draw in canvas geo
         geoCanvas.initCanvasTransform()
-        geoCanvas.offscreenCtx.drawImage(cvWGL.canvas, 0, 0)
+        geoCanvas.offscreenCtx.drawImage(canvas, 0, 0)
 
         //update legends
         this.updateLegends({ style: this, resolution: resolution, z: z })
     }
 }
+
+
+
+// early tests for webgl2 migration
+
+/*
+function getVectorShader2() {
+    return `
+        #version 300 es
+        precision highp float;
+
+        in vec2 pos;
+        in int i;
+
+        uniform float sizePix;
+        uniform mat3 mat;
+
+        flat out int vi;
+
+        void main() {
+            gl_Position = vec4(mat * vec3(pos, 1.0), 1.0);
+            gl_PointSize = sizePix;
+            vi = i;
+        }
+        `
+}
+
+
+function getFragmentShader2(colors) {
+
+    //prepare fragment shader code
+    //declare the uniform and other variables
+    const out = []
+    out.push('#version 300 es\nprecision highp float;\nflat in int vi;\n')
+
+    //add color uniforms
+    //uniform vec4 colors[12];
+    out.push('uniform vec4 colors[')
+    out.push(colors.length)
+    out.push('];\n')
+
+    out.push('out vec4 fragColor;\n')
+
+    //start the main function
+    //void main() { fragColor = colors[clamp(vi, 0, 11)]; }
+    out.push('void main() { fragColor = colors[vi]; }\n')
+
+    /** Fragment shader program
+    const fshString = out.join('')
+    console.log(fshString)
+    return fshString
+}
+
+*/

package/src/utils/WebGLSquareColoringAdvanced.js

@@ -53,86 +53,85 @@ export class WebGLSquareColoringAdvanced {
 
         //prepare fragment shader code
         //declare the uniform and other variables
-        let fshString =
-            '' +
-            'precision mediump float;\n' +
-            'varying float vt;\n' +
-            'uniform float alpha;\n' +
-            (() => {
-                const out = []
-                for (let i = 0; i < colors.length; i++) out.push('uniform vec4 c' + i + ';\n')
-                return out.join('')
-            })() +
-            //start the main function, apply the stretching of t
-            'void main(void) {\n'
-
+        const fshBuff = []
+        fshBuff.push('precision mediump float;')
+        fshBuff.push('varying float vt;')
+        fshBuff.push('uniform float alpha;')
+        for (let i = 0; i < colors.length; i++) fshBuff.push('uniform vec4 c' + i + ';')
+        //start the main function
+        fshBuff.push('void main(void) {')
+
+        // apply the stretching of t
         if (stretching) {
             if (stretching.fun == 'pow')
                 //sPow = (t, alpha = 3) => Math.pow(t, alpha);
-                fshString += '   float t = pow(vt, alpha);\n'
+                fshBuff.push('   float t = pow(vt, alpha);')
             else if (stretching.fun == 'powInv')
                 //sPowRev = (t, alpha = 3) => 1 - Math.pow(1 - t, 1 / alpha);
-                fshString += '   float t = 1.0-pow(1.0-vt, 1.0/alpha);\n'
+                fshBuff.push('   float t = 1.0-pow(1.0-vt, 1.0/alpha);')
             else if (stretching.fun == 'exp')
                 //sExp = (t, alpha = 3) => alpha == 0 ? t : (Math.exp(t * alpha) - 1) / (Math.exp(alpha) - 1);
-                fshString +=
+                fshBuff.push(
                     stretching.alpha == 0
                         ? `float t = vt;`
-                        : '   float t = (exp(vt * alpha) - 1.0) / (exp(alpha) - 1.0);\n'
+                        : '   float t = (exp(vt * alpha) - 1.0) / (exp(alpha) - 1.0);')
             else if (stretching.fun == 'log')
                 //sExpRev = (t, alpha = 3) => alpha == 0 ? t : 1 - (1 / alpha) * Math.log(Math.exp(alpha) * (1 - t) + t);
-                fshString +=
+                fshBuff.push(
                     stretching.alpha == 0
                         ? `float t = vt;`
-                        : '   float t = 1.0 - (1.0 / alpha) * log(exp(alpha) * (1.0 - vt) + vt);\n'
+                        : '   float t = 1.0 - (1.0 / alpha) * log(exp(alpha) * (1.0 - vt) + vt);')
             else if (stretching.fun == 'circle') {
                 if (stretching.alpha == 0)
                     //if (alpha == 0) return t;
-                    fshString += '   float t = vt;\n'
+                    fshBuff.push('   float t = vt;')
                 else if (stretching.alpha == 1)
                     // if (alpha == 1) return Math.sqrt(2 * t - t * t);
-                    fshString += '   float t = sqrt(vt * (2.0 - vt));\n'
+                    fshBuff.push('   float t = sqrt(vt * (2.0 - vt));')
                 else {
                     //const a = alpha / (1 - alpha);
                     //return Math.sqrt(1 / (a * a) + t * (2 / a + 2 - t)) - 1 / a;
-                    fshString +=
-                        '   float a = alpha / (1.0 - alpha);\n' +
-                        '   float t = sqrt(1.0 / (a * a) + vt * ( 2.0/a + 2.0 - vt )) - 1.0 / a;\n'
+                    fshBuff.push('   float a = alpha / (1.0 - alpha);')
+                    fshBuff.push('   float t = sqrt(1.0 / (a * a) + vt * ( 2.0/a + 2.0 - vt )) - 1.0 / a;')
                 }
             } else if (stretching.fun == 'circleInv') {
                 // 1 - sCircleLow(1 - t, alpha)
                 if (stretching.alpha == 0)
                     //if (alpha == 0) return t;
-                    fshString += '   float t = vt;\n'
+                    fshBuff.push('   float t = vt;')
                 else if (stretching.alpha == 1)
                     // if (alpha == 1) return Math.sqrt(2 * t - t * t);
-                    fshString += '   float t = 1.0 - sqrt((1.0 - vt) * (1.0 + vt));\n'
+                    fshBuff.push('   float t = 1.0 - sqrt((1.0 - vt) * (1.0 + vt));')
                 else {
                     //const a = alpha / (1 - alpha);
                     //return Math.sqrt(1 / (a * a) + (2 * t) / a + 2 * t - t * t) - 1 / a;
-                    fshString +=
-                        '   float a = alpha / (1.0 - alpha);\n' +
-                        '   float t = 1.0 - sqrt(1.0 / (a * a) + (1.0-vt) * ( 2.0/a + 1.0 + vt )) + 1.0 / a;\n'
+                    fshBuff.push('   float a = alpha / (1.0 - alpha);')
+                    fshBuff.push('   float t = 1.0 - sqrt(1.0 / (a * a) + (1.0-vt) * ( 2.0/a + 1.0 + vt )) + 1.0 / a;')
                 }
             } else {
                 console.error('Unexpected stretching function code: ' + stretching.fun)
-                fshString += '   float t = vt;\n'
+                fshBuff.push('   float t = vt;')
             }
         } else {
-            fshString += '   float t = vt;\n'
+            fshBuff.push('   float t = vt;')
         }
 
         //choose initial and final colors, and adjust t value
-        if (colors.length == 1) fshString += '   vec4 cI=c0;\n   vec4 cF=c0;\n'
-        else if (colors.length == 2) fshString += '   vec4 cI=c0;\n   vec4 cF=c1;\n'
-        else {
+        if (colors.length == 1) {
+            fshBuff.push('   vec4 cI=c0;')
+            fshBuff.push('   vec4 cF=c0;')
+        }
+        else if (colors.length == 2) {
+            fshBuff.push('   vec4 cI=c0;')
+            fshBuff.push('   vec4 cF=c1;')
+        } else {
             const nb = colors.length - 1
             const nbs = nb + '.0'
-            fshString += '   vec4 cI;\n'
-            fshString += '   vec4 cF;\n'
-            fshString += '   if(t<1.0/' + nbs + ') { cI=c0; cF=c1; t=t*' + nbs + '; }\n'
+            fshBuff.push('   vec4 cI;')
+            fshBuff.push('   vec4 cF;')
+            fshBuff.push('   if(t<1.0/' + nbs + ') { cI=c0; cF=c1; t=t*' + nbs + '; }')
             for (let i = 2; i < nb; i++)
-                fshString +=
+                fshBuff.push(
                     '   else if(t<' +
                     i +
                     '.0/' +
@@ -145,16 +144,17 @@ export class WebGLSquareColoringAdvanced {
                     nbs +
                     '*t-' +
                     (i - 1) +
-                    '.0; }\n'
-            fshString +=
-                '   else { cI=c' + (nb - 1) + '; cF=c' + nb + '; t=' + nbs + '*t-' + (nb - 1) + '.0; }\n'
+                    '.0; }')
+            fshBuff.push('   else { cI=c' + (nb - 1) + '; cF=c' + nb + '; t=' + nbs + '*t-' + (nb - 1) + '.0; }')
         }
 
         //one single color
-        if (colors.length == 1) fshString += '   gl_FragColor = vec4(c0[0], c0[1], c0[2], c0[3]);}\n'
+        if (colors.length == 1) fshBuff.push('   gl_FragColor = vec4(c0[0], c0[1], c0[2], c0[3]);}')
         //set interpolated color, between initial and final one
-        else fshString += '   gl_FragColor = mix(cI, cF, t);}\n'
+        else fshBuff.push('   gl_FragColor = mix(cI, cF, t);}')
 
+        let fshString = fshBuff.join("")
+        //let fshString = fshBuff.join("\n")
         //console.log(fshString)
 
         /** @type {WebGLShader} */
@@ -180,12 +180,9 @@ export class WebGLSquareColoringAdvanced {
             let opacity = c.opacity
             if (c.opacity == 1 && globalOpacity != undefined) opacity = globalOpacity
 
-            gl.uniform4fv(gl.getUniformLocation(this.program, 'c' + i), [
-                +c.r / 255.0,
-                +c.g / 255.0,
-                +c.b / 255.0,
-                +opacity,
-            ])
+            const colData = [+c.r / 255.0, +c.g / 255.0, +c.b / 255.0, +opacity]
+            //console.log(i, colors[i], c, colData)
+            gl.uniform4fv(gl.getUniformLocation(this.program, 'c' + i), colData)
         }
     }
 

package/src/utils/webGLUtils.js

@@ -5,18 +5,19 @@
  * @param {string} width
  * @param {string} height
  * @param {object} opts
- * @returns {{canvas:HTMLCanvasElement, gl:WebGLRenderingContext}}
+ * @returns {{canvas:HTMLCanvasElement, gl:WebGLRenderingContext, width:number, height:number }}
  */
 export function makeWebGLCanvas(width, height, opts = {}) {
     const canvas = document.createElement('canvas')
     canvas.setAttribute('width', width)
     canvas.setAttribute('height', height)
+    const version2 = (opts && +opts.version==2)? "2" : ""
     /** @type {WebGLRenderingContext} */
-    const gl = canvas.getContext('webgl', opts)
+    const gl = canvas.getContext('webgl' + version2, opts)
     if (!gl) {
-        throw new Error('Unable to initialize WebGL. Your browser or machine may not support it.')
+        throw new Error('Unable to initialize WebGL'+version2+'. Your browser or machine may not support it.')
     }
-    return { canvas: canvas, gl: gl }
+    return { canvas: canvas, gl: gl, width: width, height: height }
 }
 
 /**