gridviz 3.0.29 → 3.0.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/gridviz.js +295 -238
- package/dist/gridviz.min.js +1 -1
- package/package.json +1 -1
- package/src/style/ShadingStyle.js +15 -4
- package/src/style/SideTanakaStyle.js +13 -3
- package/src/style/SquareColorCategoryWebGLStyle.js +218 -30
- package/src/utils/WebGLSquareColoringAdvanced.js +46 -49
- package/src/utils/webGLUtils.js +5 -4
- package/src/utils/WebGLSquareColoringCatAdvanced.js +0 -133
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
//@ts-check
|
|
2
|
-
'use strict'
|
|
3
|
-
|
|
4
|
-
import { initShaderProgram, createShader } from './webGLUtils.js'
|
|
5
|
-
import { color } from 'd3-color'
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* Everything to easily draw colored squares with webGL.
|
|
9
|
-
* All the same size, but different fill color.
|
|
10
|
-
* Color based on categories.
|
|
11
|
-
*/
|
|
12
|
-
export class WebGLSquareColoringCatAdvanced {
|
|
13
|
-
/**
|
|
14
|
-
* @param {Array.<string>} colors
|
|
15
|
-
*/
|
|
16
|
-
constructor(colors) {
|
|
17
|
-
/**
|
|
18
|
-
* @type {Array.<string>} */
|
|
19
|
-
this.colors = colors
|
|
20
|
-
|
|
21
|
-
/** Vector shader program
|
|
22
|
-
* @type {string} */
|
|
23
|
-
this.vshString = `
|
|
24
|
-
attribute vec2 pos;
|
|
25
|
-
uniform float sizePix;
|
|
26
|
-
uniform mat3 mat;
|
|
27
|
-
|
|
28
|
-
attribute float i;
|
|
29
|
-
varying float vi;
|
|
30
|
-
|
|
31
|
-
void main() {
|
|
32
|
-
gl_Position = vec4(mat * vec3(pos, 1.0), 1.0);
|
|
33
|
-
gl_PointSize = sizePix;
|
|
34
|
-
vi = i;
|
|
35
|
-
}
|
|
36
|
-
`
|
|
37
|
-
|
|
38
|
-
//prepare fragment shader code
|
|
39
|
-
//declare the uniform and other variables
|
|
40
|
-
const out = []
|
|
41
|
-
out.push('precision mediump float;\nvarying float vi;\n')
|
|
42
|
-
//add color uniforms
|
|
43
|
-
out.push('uniform vec4')
|
|
44
|
-
for (let i = 0; i < colors.length; i++) {
|
|
45
|
-
if (i > 0) out.push(',')
|
|
46
|
-
out.push(' c' + i)
|
|
47
|
-
}
|
|
48
|
-
out.push(';\n')
|
|
49
|
-
//start the main function
|
|
50
|
-
out.push('void main(void) {\n')
|
|
51
|
-
//choose color i
|
|
52
|
-
for (let i = 0; i < colors.length; i++) {
|
|
53
|
-
if (i > 0) out.push('else ')
|
|
54
|
-
out.push('if(vi==')
|
|
55
|
-
out.push(i)
|
|
56
|
-
out.push('.0) gl_FragColor = vec4(c')
|
|
57
|
-
out.push(i)
|
|
58
|
-
out.push('[0], c')
|
|
59
|
-
out.push(i)
|
|
60
|
-
out.push('[1], c')
|
|
61
|
-
out.push(i)
|
|
62
|
-
out.push('[2], c')
|
|
63
|
-
out.push(i)
|
|
64
|
-
out.push('[3]);\n')
|
|
65
|
-
}
|
|
66
|
-
out.push('else gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n}')
|
|
67
|
-
/** Fragment shader program
|
|
68
|
-
* @type {string} */
|
|
69
|
-
this.fshString = out.join('')
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
/** */
|
|
73
|
-
draw(gl, verticesBuffer, iBuffer, transfoMat, sizePix = 10) {
|
|
74
|
-
/** @type {WebGLShader} */
|
|
75
|
-
const vShader = createShader(gl, gl.VERTEX_SHADER, this.vshString)
|
|
76
|
-
|
|
77
|
-
/** @type {WebGLShader} */
|
|
78
|
-
const fShader = createShader(gl, gl.FRAGMENT_SHADER, this.fshString)
|
|
79
|
-
|
|
80
|
-
/** @type {WebGLProgram} */
|
|
81
|
-
const program = initShaderProgram(gl, vShader, fShader)
|
|
82
|
-
gl.useProgram(program)
|
|
83
|
-
|
|
84
|
-
//set uniforms
|
|
85
|
-
|
|
86
|
-
//sizePix
|
|
87
|
-
gl.uniform1f(gl.getUniformLocation(program, 'sizePix'), 1.0 * sizePix)
|
|
88
|
-
|
|
89
|
-
//colors
|
|
90
|
-
for (let i = 0; i < this.colors.length; i++) {
|
|
91
|
-
const c = color(this.colors[i])
|
|
92
|
-
gl.uniform4fv(gl.getUniformLocation(program, 'c' + i), [
|
|
93
|
-
+c.r / 255.0,
|
|
94
|
-
+c.g / 255.0,
|
|
95
|
-
+c.b / 255.0,
|
|
96
|
-
+c.opacity,
|
|
97
|
-
])
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
//vertice data
|
|
101
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
|
|
102
|
-
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verticesBuffer), gl.STATIC_DRAW)
|
|
103
|
-
const position = gl.getAttribLocation(program, 'pos')
|
|
104
|
-
gl.vertexAttribPointer(
|
|
105
|
-
position,
|
|
106
|
-
2, //numComponents
|
|
107
|
-
gl.FLOAT, //type
|
|
108
|
-
false, //normalise
|
|
109
|
-
0, //stride
|
|
110
|
-
0 //offset
|
|
111
|
-
)
|
|
112
|
-
gl.enableVertexAttribArray(position)
|
|
113
|
-
|
|
114
|
-
//i data
|
|
115
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
|
|
116
|
-
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(iBuffer), gl.STATIC_DRAW)
|
|
117
|
-
const i = gl.getAttribLocation(program, 'i')
|
|
118
|
-
gl.vertexAttribPointer(i, 1, gl.FLOAT, false, 0, 0)
|
|
119
|
-
gl.enableVertexAttribArray(i)
|
|
120
|
-
|
|
121
|
-
//transformation
|
|
122
|
-
gl.uniformMatrix3fv(gl.getUniformLocation(program, 'mat'), false, new Float32Array(transfoMat))
|
|
123
|
-
|
|
124
|
-
// Enable the depth test
|
|
125
|
-
//gl.enable(gl.DEPTH_TEST);
|
|
126
|
-
// Clear the color buffer bit
|
|
127
|
-
gl.clear(gl.COLOR_BUFFER_BIT)
|
|
128
|
-
// Set the view port
|
|
129
|
-
//gl.viewport(0, 0, cg.w, cg.h);
|
|
130
|
-
|
|
131
|
-
gl.drawArrays(gl.POINTS, 0, verticesBuffer.length / 2)
|
|
132
|
-
}
|
|
133
|
-
}
|