gridviz 3.1.0 → 3.1.1

package/src/style/SquareColorCategoryWebGLStyle.js

@@ -2,7 +2,14 @@
 'use strict'
 
 import { Style } from '../core/Style.js'
-import { getSharedWebGLCanvas, getProgram, getBuffer, bufferOwner } from '../utils/webGLUtils.js'
+import {
+    getSharedWebGLCanvas,
+    getProgram,
+    getBuffer,
+    bufferOwner,
+    drawSquaresAsTriangles,
+    pointsToSquares,
+} from '../utils/webGLUtils.js'
 import { color } from 'd3-color'
 
 const VERTEX_SHADER = `
@@ -17,6 +24,19 @@ const VERTEX_SHADER = `
           vi = i;
         }`
 
+// the same, for the large squares: they are drawn as triangles, whose corners are placed from the centre (see drawSquaresAsTriangles)
+const VERTEX_SHADER_TRIANGLES = `
+        attribute vec2 pos;
+        attribute vec2 corner;
+        uniform float halfSizeGeo;
+        uniform mat3 mat;
+        attribute float i;
+        varying float vi;
+        void main() {
+          gl_Position = vec4(mat * vec3(pos + corner * halfSizeGeo, 1.0), 1.0);
+          vi = i;
+        }`
+
 const FRAGMENT_SHADER = `
         precision highp float;
         varying float vi;
@@ -31,6 +51,7 @@ const FRAGMENT_SHADER = `
 // names of the buffers this style fills in the shared context (getBuffer)
 const POSITION_BUFFER = 'SquareColorCategoryWebGLStyle.pos'
 const INDEX_BUFFER = 'SquareColorCategoryWebGLStyle.i'
+const CORNER_BUFFER = 'SquareColorCategoryWebGLStyle.corner'
 
 /**
  * Style based on webGL
@@ -79,8 +100,10 @@ export class SquareColorCategoryWebGLStyle extends Style {
         this.gl = undefined
         this.program = undefined
         this.lutTexture = undefined
-        /** Number of points in the shared buffers, for drawArrays */
+        /** Number of cells in the shared buffers, for drawArrays */
         this.pointsNb = 0
+        /** Whether the squares of the shared buffers are drawn as triangles (large squares) or points @private */
+        this.asTriangles = false
 
         this.x = undefined
         this.y = undefined
@@ -94,17 +117,19 @@ export class SquareColorCategoryWebGLStyle extends Style {
      * 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.
+     * @param {boolean} asTriangles Whether the squares are large, and drawn as triangles instead of points (see drawSquaresAsTriangles).
      * @returns {boolean} true when the context is new to this style (its data must be re-uploaded)
      */
-    init(w, h) {
+    init(w, h, asTriangles = false) {
         this.cvWGL = getSharedWebGLCanvas(w, h)
         const gl = this.cvWGL.gl
         const contextChanged = this.gl !== gl
         if (contextChanged) {
             this.gl = gl
-            this.program = getProgram(gl, VERTEX_SHADER, FRAGMENT_SHADER)
             this.lutTexture = undefined
         }
+        //programs are compiled once per context: choosing one each time costs nothing
+        this.program = getProgram(gl, asTriangles ? VERTEX_SHADER_TRIANGLES : VERTEX_SHADER, FRAGMENT_SHADER)
         gl.useProgram(this.program)
         this.bindColors()
         return contextChanged
@@ -143,10 +168,12 @@ export class SquareColorCategoryWebGLStyle extends Style {
      * 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) {
+    bindVertices(cells, resolution, z, viewScale, view, asTriangles = false) {
         const gl = this.cvWGL.gl
-        //add vertice and fragment data
+        //add vertice and fragment data. The positions are relative to the center of the view, see GeoCanvas.getWebGLTransformCentered
         const r2 = resolution / 2
+        const vx = view.x,
+            vy = view.y
         let c,
             nb = cells.length
         const verticesBuffer = new Float32Array(2 * nb)
@@ -167,16 +194,26 @@ export class SquareColorCategoryWebGLStyle extends Style {
                 continue
             }
             if (shown && !shown[+i_]) continue
-            verticesBuffer[2 * n] = c.x + r2
-            verticesBuffer[2 * n + 1] = c.y + r2
+            verticesBuffer[2 * n] = c.x + r2 - vx
+            verticesBuffer[2 * n + 1] = c.y + r2 - vy
             iBuffer[n] = +i_
             n++
         }
 
+        let positions = verticesBuffer.subarray(0, 2 * n)
+        let indices = iBuffer.subarray(0, n)
+        if (asTriangles) {
+            //six vertices for each square
+            const sq = pointsToSquares(positions, n, [indices])
+            positions = sq.positions
+            indices = sq.values[0]
+            gl.bindBuffer(gl.ARRAY_BUFFER, getBuffer(gl, CORNER_BUFFER))
+            gl.bufferData(gl.ARRAY_BUFFER, sq.corners, gl.DYNAMIC_DRAW)
+        }
         gl.bindBuffer(gl.ARRAY_BUFFER, getBuffer(gl, POSITION_BUFFER))
-        gl.bufferData(gl.ARRAY_BUFFER, verticesBuffer.subarray(0, 2 * n), gl.DYNAMIC_DRAW)
+        gl.bufferData(gl.ARRAY_BUFFER, positions, gl.DYNAMIC_DRAW)
         gl.bindBuffer(gl.ARRAY_BUFFER, getBuffer(gl, INDEX_BUFFER))
-        gl.bufferData(gl.ARRAY_BUFFER, iBuffer.subarray(0, n), gl.DYNAMIC_DRAW)
+        gl.bufferData(gl.ARRAY_BUFFER, indices, gl.DYNAMIC_DRAW)
         bufferOwner(gl, POSITION_BUFFER, this)
         return n
     }
@@ -192,6 +229,12 @@ export class SquareColorCategoryWebGLStyle extends Style {
         gl.bindBuffer(gl.ARRAY_BUFFER, getBuffer(gl, INDEX_BUFFER))
         gl.vertexAttribPointer(i, 1, gl.FLOAT, false, 0, 0)
         gl.enableVertexAttribArray(i)
+        if (this.asTriangles) {
+            const corner = gl.getAttribLocation(this.program, 'corner')
+            gl.bindBuffer(gl.ARRAY_BUFFER, getBuffer(gl, CORNER_BUFFER))
+            gl.vertexAttribPointer(corner, 2, gl.FLOAT, false, 0, 0)
+            gl.enableVertexAttribArray(corner)
+        }
     }
 
     // check if the vertices have to be bound again
@@ -220,14 +263,19 @@ export class SquareColorCategoryWebGLStyle extends Style {
         //get view scale
         const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
 
-        //bind this style's program in the shared WebGL context
-        const contextChanged = this.init(geoCanvas.w, geoCanvas.h)
+        //size of the squares
+        const sizeGeo = this.size ? this.size(resolution, z) : resolution + 0.2 * z
+        const sizePix = sizeGeo / z
+
+        //bind this style's program in the shared WebGL context. Large squares are drawn as triangles, small ones as points.
+        const asTriangles = drawSquaresAsTriangles(getSharedWebGLCanvas(geoCanvas.w, geoCanvas.h).gl, sizePix)
+        const contextChanged = this.init(geoCanvas.w, geoCanvas.h, asTriangles)
         const gl = this.cvWGL.gl
         const canvas = this.cvWGL.canvas
 
-        //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)
+        //bind the size
+        if (asTriangles) gl.uniform1f(gl.getUniformLocation(this.program, 'halfSizeGeo'), sizeGeo / 2)
+        else 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. The upload is also needed when the shared buffers
@@ -236,16 +284,18 @@ export class SquareColorCategoryWebGLStyle extends Style {
         const highlightKey = this.highlightColors ? this.highlightColors.join('|') : ''
         const highlightChanged = highlightKey !== this.highlightKey
         this.highlightKey = highlightKey
-        const contentChanged = this.mapContentChanged(geoCanvas.view, cells.length) || highlightChanged
+        const shapeChanged = asTriangles !== this.asTriangles
+        this.asTriangles = asTriangles
+        const contentChanged = this.mapContentChanged(geoCanvas.view, cells.length) || highlightChanged || shapeChanged
         if (contentChanged || contextChanged || bufferOwner(gl, POSITION_BUFFER) !== this)
-            this.pointsNb = this.bindVertices(cells, resolution, z, viewScale)
+            this.pointsNb = this.bindVertices(cells, resolution, z, viewScale, geoCanvas.view, asTriangles)
         this.bindAttributes()
 
         //transformation
         gl.uniformMatrix3fv(
             gl.getUniformLocation(this.program, 'mat'),
             false,
-            new Float32Array(geoCanvas.getWebGLTransform())
+            new Float32Array(geoCanvas.getWebGLTransformCentered())
         )
 
         // Clear the color buffer bit
@@ -254,14 +304,15 @@ export class SquareColorCategoryWebGLStyle extends Style {
 
         // 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)
+        if (asTriangles) gl.drawArrays(gl.TRIANGLES, 0, 6 * this.pointsNb)
+        else gl.drawArrays(gl.POINTS, 0, this.pointsNb)
 
         //draw in canvas geo
         geoCanvas.initCanvasTransform()
         geoCanvas.offscreenCtx.drawImage(canvas, 0, 0)
 
         //update legends
-        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale, cells: cells })
     }
 }
 

package/src/style/SquareColorWebGLStyle.js

@@ -93,13 +93,16 @@ export class SquareColorWebGLStyle extends Style {
         }
 
         //add vertice and fragment data
+        //(the positions are relative to the center of the view, see GeoCanvas.getWebGLTransformCentered)
         const r2 = resolution / 2
+        const vx = geoCanvas.view.x
+        const vy = geoCanvas.view.y
         const verticesBuffer = []
         const tBuffer = []
         for (let cell of cells) {
             const t = this.tFun(cell, resolution, z, viewScale)
             if (t == null || t == undefined) continue
-            verticesBuffer.push(cell.x + r2, cell.y + r2)
+            verticesBuffer.push(cell.x + r2 - vx, cell.y + r2 - vy)
             tBuffer.push(t > 1 ? 1 : t < 0 ? 0 : t)
         }
 
@@ -110,10 +113,10 @@ export class SquareColorWebGLStyle extends Style {
         const op = this.opacity ? this.opacity(resolution, z) : undefined
 
         //
-        const wgp = new WebGLSquareColoringAdvanced(cvWGL.gl, this.colors, this.stretching, sizeGeo / z, op)
+        const wgp = new WebGLSquareColoringAdvanced(cvWGL.gl, this.colors, this.stretching, sizeGeo / z, op, sizeGeo)
 
         //draw
-        wgp.draw(verticesBuffer, tBuffer, geoCanvas.getWebGLTransform())
+        wgp.draw(verticesBuffer, tBuffer, geoCanvas.getWebGLTransformCentered())
 
         // draw in canvas geo
         // NOTE: drawing each tile this way is very inefficient. WebGL is best used with fewer, heavier/larger draw calls.
@@ -121,6 +124,6 @@ export class SquareColorWebGLStyle extends Style {
         geoCanvas.offscreenCtx.drawImage(cvWGL.canvas, 0, 0)
 
         //update legends
-        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale, cells: cells })
     }
 }

package/src/style/StrokeStyle.js

@@ -130,6 +130,6 @@ export class StrokeStyle extends Style {
         }
 
         //update legends
-        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale, cells: cells })
     }
 }

package/src/style/TextStyle.js

@@ -88,7 +88,7 @@ export class TextStyle extends Style {
         }
 
         //update legends
-        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale, cells: cells })
     }
 
     /**

package/src/style/TimeSeriesStyle.js

@@ -44,7 +44,7 @@ export class TimeSeriesStyle extends Style {
 
         /** A function returning the width of the line, in geo unit
          * @type {function(import('../core/Dataset.js').Cell, number, number, object):number} */
-        this.lineWidth = opts.lineWidth || ((v, r, s, z) => 1.5 * z)
+        this.lineWidth = opts.lineWidth || ((c, r, z) => 1.5 * z)
 
         /** A function returning the color of the chart.
          * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
@@ -69,11 +69,18 @@ export class TimeSeriesStyle extends Style {
         //get view scale
         const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
 
+        //the number value of a cell for a column of the time series, undefined for no data.
+        //The values of a CSV file are texts: they have to be converted, or "9" is above "10000".
+        const getValue = (c, t) => {
+            const val = c[t]
+            return this.noData(val) ? undefined : +val
+        }
+
         //compute cell amplitude
         const getAmplitude = (c) => {
             let min, max
             for (let t of this.ts) {
-                const val = c[t]
+                const val = getValue(c, t)
                 if (val == undefined) continue
                 if (min == undefined || val < min) min = val
                 if (max == undefined || val > max) max = val
@@ -135,7 +142,7 @@ export class TimeSeriesStyle extends Style {
             } else if (anchY === 'bottom') {
                 //get min
                 for (let t of this.ts) {
-                    const val = +c[t]
+                    const val = getValue(c, t)
                     if (val == undefined) continue
                     if (val0 == undefined || val < val0) val0 = val
                 }
@@ -143,7 +150,7 @@ export class TimeSeriesStyle extends Style {
             } else if (anchY === 'top') {
                 //get max
                 for (let t of this.ts) {
-                    const val = +c[t]
+                    const val = getValue(c, t)
                     if (val == undefined) continue
                     if (val0 == undefined || val > val0) val0 = val
                 }
@@ -152,12 +159,12 @@ export class TimeSeriesStyle extends Style {
                 //get min and max
                 let min, max
                 for (let t of this.ts) {
-                    const val = c[t]
+                    const val = getValue(c, t)
                     if (val == undefined) continue
                     if (min == undefined || val < min) min = val
                     if (max == undefined || val > max) max = val
                 }
-                val0 = (+max + +min) * 0.5
+                val0 = (max + min) * 0.5
                 y0 = resolution / 2
             } else {
                 console.log('Unexpected anchorModeY: ' + anchY)
@@ -217,6 +224,6 @@ export class TimeSeriesStyle extends Style {
         }
 
         //update legend, if any
-        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale, cells: cells })
     }
 }

package/src/utils/WebGLSquareColoringAdvanced.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { getProgram, getBuffer } from './webGLUtils.js'
+import { getProgram, getBuffer, drawSquaresAsTriangles, pointsToSquares } from './webGLUtils.js'
 import { color } from 'd3-color'
 
 const VERTEX_SHADER = `
@@ -19,6 +19,22 @@ const VERTEX_SHADER = `
         }
       `
 
+// the same, for the large squares: they are drawn as triangles, whose corners are placed from the centre (see drawSquaresAsTriangles)
+const VERTEX_SHADER_TRIANGLES = `
+        attribute vec2 pos;
+        attribute vec2 corner;
+        uniform float halfSizeGeo;
+        uniform mat3 mat;
+
+        attribute float t;
+        varying float vt;
+
+        void main() {
+          gl_Position = vec4(mat * vec3(pos + corner * halfSizeGeo, 1.0), 1.0);
+          vt = t;
+        }
+      `
+
 /**
  * Everything to easily draw colored squares with webGL.
  * All the same size, but different fill color.
@@ -38,10 +54,15 @@ export class WebGLSquareColoringAdvanced {
      * @param {{fun:string,alpha:number}} stretching
      * @param {number} sizePix
      * @param {number|undefined} globalOpacity
+     * @param {number|undefined} sizeGeo The size of the squares, in geographical unit. Needed to draw the large squares (see drawSquaresAsTriangles).
      */
-    constructor(gl, colors, stretching, sizePix = 10, globalOpacity = undefined) {
+    constructor(gl, colors, stretching, sizePix = 10, globalOpacity = undefined, sizeGeo = undefined) {
         /** @type {WebGLRenderingContext} */
         this.gl = gl
+
+        /** Large squares are drawn as triangles: a point is limited in size by the GPU, and dropped when its centre is out of the view.
+         * @type {boolean} */
+        this.asTriangles = sizeGeo !== undefined && drawSquaresAsTriangles(gl, sizePix)
         //gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
         //gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
         //gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
@@ -154,14 +175,14 @@ export class WebGLSquareColoringAdvanced {
 
         // compiled once per context and fragment source (colours, stretching), then reused
         /** @type {WebGLProgram} */
-        this.program = getProgram(gl, VERTEX_SHADER, fshString)
+        this.program = getProgram(gl, this.asTriangles ? VERTEX_SHADER_TRIANGLES : VERTEX_SHADER, fshString)
         gl.useProgram(this.program)
 
         //set uniforms
 
-        //sizePix
-        //TODO: bug here. Seems to be limited to some threshold value (around 250).
-        gl.uniform1f(gl.getUniformLocation(this.program, 'sizePix'), 1.0 * sizePix)
+        //size of the squares
+        if (this.asTriangles) gl.uniform1f(gl.getUniformLocation(this.program, 'halfSizeGeo'), sizeGeo / 2)
+        else gl.uniform1f(gl.getUniformLocation(this.program, 'sizePix'), 1.0 * sizePix)
 
         //stretching alpha factor
         gl.uniform1f(gl.getUniformLocation(this.program, 'alpha'), stretching ? 1.0 * stretching.alpha : 0.0)
@@ -186,9 +207,25 @@ export class WebGLSquareColoringAdvanced {
 
         gl.useProgram(program)
 
+        //squares as triangles, when they are large: six vertices for each one
+        let n = verticesBuffer.length / 2
+        let vertices = new Float32Array(verticesBuffer)
+        let tValues = new Float32Array(tBuffer)
+        if (this.asTriangles) {
+            const sq = pointsToSquares(verticesBuffer, n, [tBuffer])
+            vertices = sq.positions
+            tValues = sq.values[0]
+
+            gl.bindBuffer(gl.ARRAY_BUFFER, getBuffer(gl, 'WebGLSquareColoringAdvanced.corner'))
+            gl.bufferData(gl.ARRAY_BUFFER, sq.corners, gl.DYNAMIC_DRAW)
+            const corner = gl.getAttribLocation(program, 'corner')
+            gl.vertexAttribPointer(corner, 2, gl.FLOAT, false, 0, 0)
+            gl.enableVertexAttribArray(corner)
+        }
+
         //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)
+        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW)
         const position = gl.getAttribLocation(program, 'pos')
         gl.vertexAttribPointer(
             position,
@@ -202,7 +239,7 @@ export class WebGLSquareColoringAdvanced {
 
         //t data
         gl.bindBuffer(gl.ARRAY_BUFFER, getBuffer(gl, 'WebGLSquareColoringAdvanced.t'))
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(tBuffer), gl.DYNAMIC_DRAW)
+        gl.bufferData(gl.ARRAY_BUFFER, tValues, gl.DYNAMIC_DRAW)
         const t = gl.getAttribLocation(program, 't')
         gl.vertexAttribPointer(t, 1, gl.FLOAT, false, 0, 0)
         gl.enableVertexAttribArray(t)
@@ -218,6 +255,7 @@ export class WebGLSquareColoringAdvanced {
         // Set the view port
         //gl.viewport(0, 0, cg.w, cg.h);
 
-        gl.drawArrays(gl.POINTS, 0, verticesBuffer.length / 2)
+        if (this.asTriangles) gl.drawArrays(gl.TRIANGLES, 0, 6 * n)
+        else gl.drawArrays(gl.POINTS, 0, n)
     }
 }

package/src/utils/scale.js

@@ -220,6 +220,26 @@ export const viewScaleCombination = (obj) => {
 }
 
 
+/**
+ * The class limits of a classification in classes of equal width on a stretched scale: the values of the domain which a
+ * stretching function (see stretching.js) maps to 1/n, 2/n... (n-1)/n.
+ * It turns a stretching, which is continuous, into the breaks needed by the styles which classify the values,
+ * for example LegoStyle.get, or the classifiers of this module.
+ *
+ * @param {number} min The lowest value of the domain
+ * @param {number} max The highest value of the domain
+ * @param {number} classNumber The number of classes
+ * @param {function(number):number} stretching A stretching function with its invert function, such as powerScale(0.5) or logarithmicScale(-7). None: the classes have the same width.
+ * @returns {Array.<number>} The classNumber - 1 limits between the classes, in increasing order
+ */
+export function stretchedBreaks(min, max, classNumber, stretching = undefined) {
+    const invert = stretching ? stretching.invert : (t) => t
+    if (!invert) throw new Error('The stretching function has no invert function')
+    const breaks = []
+    for (let i = 1; i < classNumber; i++) breaks.push(min + (max - min) * invert(i / classNumber))
+    return breaks
+}
+
 /**
  * Return a classifier function from break values.
  * The classifier function returns the class id (from 0 to breaks.length) from a value to classifiy.

package/src/utils/webGLUtils.js

@@ -176,3 +176,55 @@ export function checkWebGLSupport() {
         return false
     }
 }
+
+/**
+ * From this size, in pixels, the squares of the WebGL styles are drawn as triangles instead of points.
+ *
+ * A point (gl_PointSize) is limited by the GPU (gl.ALIASED_POINT_SIZE_RANGE, a few hundred pixels on some GPUs), and it is
+ * dropped as soon as its centre is out of the view, even when the square is still partly in it. Both leave gaps in the grid
+ * when the cells are large, that is when the map is zoomed in. Triangles have neither limit. There are few cells in the view
+ * then, so their higher cost doesn't matter, and points stay faster for the small cells.
+ */
+export const MIN_SQUARE_SIZE_AS_TRIANGLES = 24
+
+/**
+ * Tells if squares of this size (in pixels) must be drawn as triangles rather than points.
+ *
+ * @param {WebGLRenderingContext} gl
+ * @param {number} sizePix
+ * @returns {boolean}
+ */
+export function drawSquaresAsTriangles(gl, sizePix) {
+    const range = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE)
+    const max = range ? range[1] : 1
+    return sizePix > Math.min(max, MIN_SQUARE_SIZE_AS_TRIANGLES)
+}
+
+// the corners of a square, in units of its half size, as two triangles
+const SQUARE_CORNERS = [-1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1]
+
+/**
+ * Turns points into squares made of two triangles each (6 vertices), to be drawn with gl.TRIANGLES.
+ * The vertex shader places the corners with `pos + corner * halfSize`.
+ *
+ * @param {ArrayLike<number>} positions The x,y of the n points (2*n numbers).
+ * @param {number} n The number of points.
+ * @param {Array.<ArrayLike<number>>} values Some values for each point (n numbers each), repeated for the 6 vertices of its square.
+ * @returns {{positions:Float32Array, corners:Float32Array, values:Array.<Float32Array>}}
+ */
+export function pointsToSquares(positions, n, values = []) {
+    const pos = new Float32Array(12 * n)
+    const corners = new Float32Array(12 * n)
+    const vals = values.map(() => new Float32Array(6 * n))
+    for (let i = 0; i < n; i++) {
+        for (let k = 0; k < 6; k++) {
+            const o = 12 * i + 2 * k
+            pos[o] = positions[2 * i]
+            pos[o + 1] = positions[2 * i + 1]
+            corners[o] = SQUARE_CORNERS[2 * k]
+            corners[o + 1] = SQUARE_CORNERS[2 * k + 1]
+            for (let v = 0; v < values.length; v++) vals[v][6 * i + k] = values[v][i]
+        }
+    }
+    return { positions: pos, corners: corners, values: vals }
+}