gridviz 2.1.13 → 2.1.14
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/README.md +124 -125
- package/dist/gridviz.js +8341 -8339
- package/dist/gridviz.min.js +1 -1
- package/package.json +77 -77
- package/src/App.js +758 -758
- package/src/BackgroundLayer.js +182 -182
- package/src/BackgroundLayerWMS.js +131 -131
- package/src/Dataset.js +76 -76
- package/src/DatasetComponent.js +113 -113
- package/src/GeoCanvas.js +420 -420
- package/src/LabelLayer.js +190 -190
- package/src/Layer.js +103 -103
- package/src/Legend.js +86 -86
- package/src/LineLayer.js +150 -150
- package/src/Style.js +131 -129
- package/src/Tooltip.js +180 -180
- package/src/button/Button.js +54 -54
- package/src/button/FullscreenButton.js +98 -98
- package/src/button/ZoomButtons.js +72 -72
- package/src/dataset/COGeo.js +24 -24
- package/src/dataset/CSVGrid.js +104 -104
- package/src/dataset/GeoTIFF.js +127 -127
- package/src/dataset/GridTile.js +41 -41
- package/src/dataset/LGrid.js +54 -54
- package/src/dataset/TiledGrid.js +264 -264
- package/src/index.js +71 -71
- package/src/legend/ColorCategoryLegend.js +124 -124
- package/src/legend/ColorDiscreteLegend.js +103 -103
- package/src/legend/ColorLegend.js +128 -128
- package/src/legend/SegmentOrientationLegend.js +87 -87
- package/src/legend/SegmentWidthLegend.js +101 -101
- package/src/legend/SizeLegend.js +141 -141
- package/src/style/CompositionStyle.js +300 -300
- package/src/style/ContourStyle.js +54 -54
- package/src/style/DotDensityStyle.js +156 -156
- package/src/style/IsoFenceStyle.js +262 -262
- package/src/style/JoyPlotStyle.js +135 -135
- package/src/style/LegoStyle.js +112 -112
- package/src/style/MosaicStyle.js +107 -107
- package/src/style/NinjaStarStyle.js +125 -125
- package/src/style/PillarStyle.js +230 -230
- package/src/style/SegmentStyle.js +142 -142
- package/src/style/ShapeColorSizeStyle.js +152 -152
- package/src/style/SideCatStyle.js +172 -172
- package/src/style/SideStyle.js +216 -216
- package/src/style/SquareColorCatWGLStyle.js +120 -120
- package/src/style/SquareColorWGLStyle.js +146 -146
- package/src/style/StrokeStyle.js +131 -131
- package/src/style/TanakaStyle.js +160 -160
- package/src/style/TextStyle.js +132 -132
- package/src/style/TimeSeriesStyle.js +259 -259
- package/src/utils/Utils.js +35 -35
- package/src/utils/WebGLRectangleColoring.js +106 -106
- package/src/utils/WebGLSquareColoring.js +118 -118
- package/src/utils/WebGLSquareColoringAdvanced.js +230 -230
- package/src/utils/WebGLSquareColoringCatAdvanced.js +133 -133
- package/src/utils/WebGLSquareColoringKS.js +153 -153
- package/src/utils/stretching.js +131 -131
- package/src/utils/webGLUtils.js +71 -71
- package/src/utils/zoomUtils.js +142 -142
package/src/utils/stretching.js
CHANGED
|
@@ -1,131 +1,131 @@
|
|
|
1
|
-
//@ts-check
|
|
2
|
-
'use strict'
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Some function [0,1]->[0,1] to stretch range of values.
|
|
6
|
-
* @see https://github.com/eurostat/gridviz/blob/master/docs/reference.md#stretching
|
|
7
|
-
* @see https://observablehq.com/@jgaffuri/stretching
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* Function [0,1]->[0,1] to stretch range of values.
|
|
12
|
-
* Polynomial
|
|
13
|
-
*
|
|
14
|
-
* @param {number} t The value to stretch, within [0,1]
|
|
15
|
-
* @param {number} alpha 1: no stretching. <1: show low values. >1: show high values.
|
|
16
|
-
* @returns {number} The stretched value, within [0,1]
|
|
17
|
-
*/
|
|
18
|
-
export const sPow = (t, alpha = 3) => Math.pow(t, alpha)
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* Function [0,1]->[0,1] to stretch range of values.
|
|
22
|
-
* Polynomial (reverse)
|
|
23
|
-
*
|
|
24
|
-
* @param {number} t The value to stretch, within [0,1]
|
|
25
|
-
* @param {number} alpha 1: no stretching. <1: show low values. >1: show high values.
|
|
26
|
-
* @returns {number} The stretched value, within [0,1]
|
|
27
|
-
*/
|
|
28
|
-
export const sPowRev = (t, alpha = 3) => 1 - Math.pow(1 - t, 1 / alpha)
|
|
29
|
-
|
|
30
|
-
/**
|
|
31
|
-
* Function [0,1]->[0,1] to stretch range of values.
|
|
32
|
-
* Exponential
|
|
33
|
-
*
|
|
34
|
-
* @param {number} t The value to stretch, within [0,1]
|
|
35
|
-
* @param {number} alpha 0: no stretching. -Inf: show low values. Inf: show high values.
|
|
36
|
-
* @returns {number} The stretched value, within [0,1]
|
|
37
|
-
*/
|
|
38
|
-
export const sExp = (t, alpha = 3) => (alpha == 0 ? t : (Math.exp(t * alpha) - 1) / (Math.exp(alpha) - 1))
|
|
39
|
-
|
|
40
|
-
/**
|
|
41
|
-
* Function [0,1]->[0,1] to stretch range of values.
|
|
42
|
-
* Exponential (reverse)
|
|
43
|
-
*
|
|
44
|
-
* @param {number} t The value to stretch, within [0,1]
|
|
45
|
-
* @param {number} alpha 0: no stretching. -Inf: show low values. Inf: show high values.
|
|
46
|
-
* @returns {number} The stretched value, within [0,1]
|
|
47
|
-
*/
|
|
48
|
-
export const sExpRev = (t, alpha = 3) =>
|
|
49
|
-
alpha == 0 ? t : 1 - (1 / alpha) * Math.log(Math.exp(alpha) * (1 - t) + t)
|
|
50
|
-
|
|
51
|
-
/**
|
|
52
|
-
* Function [0,1]->[0,1] to stretch range of values.
|
|
53
|
-
* Circle, show low values
|
|
54
|
-
* NB: sCircleHigh and sCircleLow are inverse functions of each other.
|
|
55
|
-
*
|
|
56
|
-
* @param {number} t The value to stretch, within [0,1]
|
|
57
|
-
* @param {number} alpha 0: no stretching. 1: perfect circle section
|
|
58
|
-
* @returns {number} The stretched value, within [0,1]
|
|
59
|
-
*/
|
|
60
|
-
export const sCircleLow = (t, alpha = 0.8) => {
|
|
61
|
-
if (alpha == 0) return t
|
|
62
|
-
if (alpha == 1) return Math.sqrt(t * (2 - t))
|
|
63
|
-
const a = alpha / (1 - alpha)
|
|
64
|
-
return Math.sqrt(1 / (a * a) + t * (2 / a + 2 - t)) - 1 / a
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
/**
|
|
68
|
-
* Function [0,1]->[0,1] to stretch range of values.
|
|
69
|
-
* Circle, show high values
|
|
70
|
-
* NB: sCircleHigh and sCircleLow are inverse functions of each other.
|
|
71
|
-
*
|
|
72
|
-
* @param {number} t The value to stretch, within [0,1]
|
|
73
|
-
* @param {number} alpha 0: no stretching. 1: perfect circle section
|
|
74
|
-
* @returns {number} The stretched value, within [0,1]
|
|
75
|
-
*/
|
|
76
|
-
export const sCircleHigh = (t, alpha = 0.8) => 1 - sCircleLow(1 - t, alpha)
|
|
77
|
-
|
|
78
|
-
/**
|
|
79
|
-
* Inverse functions
|
|
80
|
-
*/
|
|
81
|
-
|
|
82
|
-
/**
|
|
83
|
-
* Inverse function of sExp
|
|
84
|
-
* @param {number} y
|
|
85
|
-
* @param {number} alpha
|
|
86
|
-
* @returns {number}
|
|
87
|
-
*/
|
|
88
|
-
export const sExpInverse = (y, alpha = 3) =>
|
|
89
|
-
alpha == 0 ? y : (1 / alpha) * Math.log(1 - y + y * Math.exp(alpha))
|
|
90
|
-
|
|
91
|
-
/**
|
|
92
|
-
* Inverse function of sExpRev
|
|
93
|
-
* @param {number} y
|
|
94
|
-
* @param {number} alpha
|
|
95
|
-
* @returns {number}
|
|
96
|
-
*/
|
|
97
|
-
export const sExpRevInverse = (y, alpha = 3) => (Math.exp(-alpha * y) - 1) / (Math.exp(-alpha) - 1)
|
|
98
|
-
|
|
99
|
-
/**
|
|
100
|
-
* Inverse function of sPow
|
|
101
|
-
* @param {number} y
|
|
102
|
-
* @param {number} alpha
|
|
103
|
-
* @returns {number}
|
|
104
|
-
*/
|
|
105
|
-
|
|
106
|
-
export const sPowInverse = (y, alpha = 3) => Math.pow(y, 1 / alpha)
|
|
107
|
-
|
|
108
|
-
/**
|
|
109
|
-
* Inverse function of sPowRev
|
|
110
|
-
* @param {number} y
|
|
111
|
-
* @param {number} alpha
|
|
112
|
-
* @returns {number}
|
|
113
|
-
*/
|
|
114
|
-
export const sPowRevInverse = (y, alpha = 3) => 1 - Math.pow(1 - y, alpha)
|
|
115
|
-
|
|
116
|
-
//test code
|
|
117
|
-
/*
|
|
118
|
-
for (let i = 0; i <= 1; i += 0.001) {
|
|
119
|
-
//const v = gviz.sExp(gviz.sExpInverse(i));
|
|
120
|
-
//const v = gviz.sExpInverse(gviz.sExp(i));
|
|
121
|
-
//const v = gviz.sExpRev(gviz.sExpRevInverse(i));
|
|
122
|
-
//const v = gviz.sExpRevInverse(gviz.sExpRev(i));
|
|
123
|
-
//const v = gviz.sPow(gviz.sPowInverse(i));
|
|
124
|
-
//const v = gviz.sPowInverse(gviz.sPow(i));
|
|
125
|
-
//const v = gviz.sPowRev(gviz.sPowRevInverse(i));
|
|
126
|
-
//const v = gviz.sPowRevInverse(gviz.sPowRev(i));
|
|
127
|
-
//const v = gviz.sCircleLow(gviz.sCircleHigh(i));
|
|
128
|
-
//const v = gviz.sCircleHigh(gviz.sCircleLow(i));
|
|
129
|
-
console.log(i - v)
|
|
130
|
-
}
|
|
131
|
-
*/
|
|
1
|
+
//@ts-check
|
|
2
|
+
'use strict'
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Some function [0,1]->[0,1] to stretch range of values.
|
|
6
|
+
* @see https://github.com/eurostat/gridviz/blob/master/docs/reference.md#stretching
|
|
7
|
+
* @see https://observablehq.com/@jgaffuri/stretching
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Function [0,1]->[0,1] to stretch range of values.
|
|
12
|
+
* Polynomial
|
|
13
|
+
*
|
|
14
|
+
* @param {number} t The value to stretch, within [0,1]
|
|
15
|
+
* @param {number} alpha 1: no stretching. <1: show low values. >1: show high values.
|
|
16
|
+
* @returns {number} The stretched value, within [0,1]
|
|
17
|
+
*/
|
|
18
|
+
export const sPow = (t, alpha = 3) => Math.pow(t, alpha)
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Function [0,1]->[0,1] to stretch range of values.
|
|
22
|
+
* Polynomial (reverse)
|
|
23
|
+
*
|
|
24
|
+
* @param {number} t The value to stretch, within [0,1]
|
|
25
|
+
* @param {number} alpha 1: no stretching. <1: show low values. >1: show high values.
|
|
26
|
+
* @returns {number} The stretched value, within [0,1]
|
|
27
|
+
*/
|
|
28
|
+
export const sPowRev = (t, alpha = 3) => 1 - Math.pow(1 - t, 1 / alpha)
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* Function [0,1]->[0,1] to stretch range of values.
|
|
32
|
+
* Exponential
|
|
33
|
+
*
|
|
34
|
+
* @param {number} t The value to stretch, within [0,1]
|
|
35
|
+
* @param {number} alpha 0: no stretching. -Inf: show low values. Inf: show high values.
|
|
36
|
+
* @returns {number} The stretched value, within [0,1]
|
|
37
|
+
*/
|
|
38
|
+
export const sExp = (t, alpha = 3) => (alpha == 0 ? t : (Math.exp(t * alpha) - 1) / (Math.exp(alpha) - 1))
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* Function [0,1]->[0,1] to stretch range of values.
|
|
42
|
+
* Exponential (reverse)
|
|
43
|
+
*
|
|
44
|
+
* @param {number} t The value to stretch, within [0,1]
|
|
45
|
+
* @param {number} alpha 0: no stretching. -Inf: show low values. Inf: show high values.
|
|
46
|
+
* @returns {number} The stretched value, within [0,1]
|
|
47
|
+
*/
|
|
48
|
+
export const sExpRev = (t, alpha = 3) =>
|
|
49
|
+
alpha == 0 ? t : 1 - (1 / alpha) * Math.log(Math.exp(alpha) * (1 - t) + t)
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* Function [0,1]->[0,1] to stretch range of values.
|
|
53
|
+
* Circle, show low values
|
|
54
|
+
* NB: sCircleHigh and sCircleLow are inverse functions of each other.
|
|
55
|
+
*
|
|
56
|
+
* @param {number} t The value to stretch, within [0,1]
|
|
57
|
+
* @param {number} alpha 0: no stretching. 1: perfect circle section
|
|
58
|
+
* @returns {number} The stretched value, within [0,1]
|
|
59
|
+
*/
|
|
60
|
+
export const sCircleLow = (t, alpha = 0.8) => {
|
|
61
|
+
if (alpha == 0) return t
|
|
62
|
+
if (alpha == 1) return Math.sqrt(t * (2 - t))
|
|
63
|
+
const a = alpha / (1 - alpha)
|
|
64
|
+
return Math.sqrt(1 / (a * a) + t * (2 / a + 2 - t)) - 1 / a
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/**
|
|
68
|
+
* Function [0,1]->[0,1] to stretch range of values.
|
|
69
|
+
* Circle, show high values
|
|
70
|
+
* NB: sCircleHigh and sCircleLow are inverse functions of each other.
|
|
71
|
+
*
|
|
72
|
+
* @param {number} t The value to stretch, within [0,1]
|
|
73
|
+
* @param {number} alpha 0: no stretching. 1: perfect circle section
|
|
74
|
+
* @returns {number} The stretched value, within [0,1]
|
|
75
|
+
*/
|
|
76
|
+
export const sCircleHigh = (t, alpha = 0.8) => 1 - sCircleLow(1 - t, alpha)
|
|
77
|
+
|
|
78
|
+
/**
|
|
79
|
+
* Inverse functions
|
|
80
|
+
*/
|
|
81
|
+
|
|
82
|
+
/**
|
|
83
|
+
* Inverse function of sExp
|
|
84
|
+
* @param {number} y
|
|
85
|
+
* @param {number} alpha
|
|
86
|
+
* @returns {number}
|
|
87
|
+
*/
|
|
88
|
+
export const sExpInverse = (y, alpha = 3) =>
|
|
89
|
+
alpha == 0 ? y : (1 / alpha) * Math.log(1 - y + y * Math.exp(alpha))
|
|
90
|
+
|
|
91
|
+
/**
|
|
92
|
+
* Inverse function of sExpRev
|
|
93
|
+
* @param {number} y
|
|
94
|
+
* @param {number} alpha
|
|
95
|
+
* @returns {number}
|
|
96
|
+
*/
|
|
97
|
+
export const sExpRevInverse = (y, alpha = 3) => (Math.exp(-alpha * y) - 1) / (Math.exp(-alpha) - 1)
|
|
98
|
+
|
|
99
|
+
/**
|
|
100
|
+
* Inverse function of sPow
|
|
101
|
+
* @param {number} y
|
|
102
|
+
* @param {number} alpha
|
|
103
|
+
* @returns {number}
|
|
104
|
+
*/
|
|
105
|
+
|
|
106
|
+
export const sPowInverse = (y, alpha = 3) => Math.pow(y, 1 / alpha)
|
|
107
|
+
|
|
108
|
+
/**
|
|
109
|
+
* Inverse function of sPowRev
|
|
110
|
+
* @param {number} y
|
|
111
|
+
* @param {number} alpha
|
|
112
|
+
* @returns {number}
|
|
113
|
+
*/
|
|
114
|
+
export const sPowRevInverse = (y, alpha = 3) => 1 - Math.pow(1 - y, alpha)
|
|
115
|
+
|
|
116
|
+
//test code
|
|
117
|
+
/*
|
|
118
|
+
for (let i = 0; i <= 1; i += 0.001) {
|
|
119
|
+
//const v = gviz.sExp(gviz.sExpInverse(i));
|
|
120
|
+
//const v = gviz.sExpInverse(gviz.sExp(i));
|
|
121
|
+
//const v = gviz.sExpRev(gviz.sExpRevInverse(i));
|
|
122
|
+
//const v = gviz.sExpRevInverse(gviz.sExpRev(i));
|
|
123
|
+
//const v = gviz.sPow(gviz.sPowInverse(i));
|
|
124
|
+
//const v = gviz.sPowInverse(gviz.sPow(i));
|
|
125
|
+
//const v = gviz.sPowRev(gviz.sPowRevInverse(i));
|
|
126
|
+
//const v = gviz.sPowRevInverse(gviz.sPowRev(i));
|
|
127
|
+
//const v = gviz.sCircleLow(gviz.sCircleHigh(i));
|
|
128
|
+
//const v = gviz.sCircleHigh(gviz.sCircleLow(i));
|
|
129
|
+
console.log(i - v)
|
|
130
|
+
}
|
|
131
|
+
*/
|
package/src/utils/webGLUtils.js
CHANGED
|
@@ -1,71 +1,71 @@
|
|
|
1
|
-
//@ts-check
|
|
2
|
-
'use strict'
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* @param {string} width
|
|
6
|
-
* @param {string} height
|
|
7
|
-
* @param {object} opts
|
|
8
|
-
* @returns {{canvas:HTMLCanvasElement, gl:WebGLRenderingContext}}
|
|
9
|
-
*/
|
|
10
|
-
export function makeWebGLCanvas(width, height, opts) {
|
|
11
|
-
const canvas = document.createElement('canvas')
|
|
12
|
-
canvas.setAttribute('width', width)
|
|
13
|
-
canvas.setAttribute('height', height)
|
|
14
|
-
const gl = canvas.getContext('webgl', opts)
|
|
15
|
-
if (!gl) {
|
|
16
|
-
throw new Error('Unable to initialize WebGL. Your browser or machine may not support it.')
|
|
17
|
-
}
|
|
18
|
-
return { canvas: canvas, gl: gl }
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* Initialize a shader program, so WebGL knows how to draw our data
|
|
23
|
-
*
|
|
24
|
-
* @param {WebGLRenderingContext} gl
|
|
25
|
-
* @param {...WebGLShader} shaders
|
|
26
|
-
* @returns {WebGLProgram}
|
|
27
|
-
*/
|
|
28
|
-
export function initShaderProgram(gl, ...shaders) {
|
|
29
|
-
/** @type {WebGLProgram|null} */
|
|
30
|
-
const program = gl.createProgram()
|
|
31
|
-
if (program == null) throw new Error('Cannot create webGL program')
|
|
32
|
-
for (const shader of shaders) gl.attachShader(program, shader)
|
|
33
|
-
gl.linkProgram(program)
|
|
34
|
-
if (gl.getProgramParameter(program, gl.LINK_STATUS)) return program
|
|
35
|
-
throw new Error(gl.getProgramInfoLog(program) || 'Cannot create webGL program (2)')
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
/**
|
|
39
|
-
* Creates a shader of the given type, uploads the source and compiles it.
|
|
40
|
-
*
|
|
41
|
-
* @param {WebGLRenderingContext} gl
|
|
42
|
-
* @param {number} type
|
|
43
|
-
* @param {...string} sources
|
|
44
|
-
* @returns {WebGLShader}
|
|
45
|
-
*/
|
|
46
|
-
export function createShader(gl, type, ...sources) {
|
|
47
|
-
/** @type {WebGLShader|null} */
|
|
48
|
-
const shader = gl.createShader(type)
|
|
49
|
-
if (shader == null) throw new Error('Cannot create webGL shader')
|
|
50
|
-
gl.shaderSource(shader, sources.join('\n'))
|
|
51
|
-
gl.compileShader(shader)
|
|
52
|
-
if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader
|
|
53
|
-
throw new Error(gl.getShaderInfoLog(shader) || 'Cannot create webGL shader (2)')
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
/**
|
|
57
|
-
* Check if webGL is supported
|
|
58
|
-
*
|
|
59
|
-
* @returns {boolean}
|
|
60
|
-
*/
|
|
61
|
-
export function checkWebGLSupport() {
|
|
62
|
-
try {
|
|
63
|
-
const canvas = document.createElement('canvas')
|
|
64
|
-
return !!window.WebGLRenderingContext &&
|
|
65
|
-
(canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))
|
|
66
|
-
? true
|
|
67
|
-
: false
|
|
68
|
-
} catch (err) {
|
|
69
|
-
return false
|
|
70
|
-
}
|
|
71
|
-
}
|
|
1
|
+
//@ts-check
|
|
2
|
+
'use strict'
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* @param {string} width
|
|
6
|
+
* @param {string} height
|
|
7
|
+
* @param {object} opts
|
|
8
|
+
* @returns {{canvas:HTMLCanvasElement, gl:WebGLRenderingContext}}
|
|
9
|
+
*/
|
|
10
|
+
export function makeWebGLCanvas(width, height, opts) {
|
|
11
|
+
const canvas = document.createElement('canvas')
|
|
12
|
+
canvas.setAttribute('width', width)
|
|
13
|
+
canvas.setAttribute('height', height)
|
|
14
|
+
const gl = canvas.getContext('webgl', opts)
|
|
15
|
+
if (!gl) {
|
|
16
|
+
throw new Error('Unable to initialize WebGL. Your browser or machine may not support it.')
|
|
17
|
+
}
|
|
18
|
+
return { canvas: canvas, gl: gl }
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Initialize a shader program, so WebGL knows how to draw our data
|
|
23
|
+
*
|
|
24
|
+
* @param {WebGLRenderingContext} gl
|
|
25
|
+
* @param {...WebGLShader} shaders
|
|
26
|
+
* @returns {WebGLProgram}
|
|
27
|
+
*/
|
|
28
|
+
export function initShaderProgram(gl, ...shaders) {
|
|
29
|
+
/** @type {WebGLProgram|null} */
|
|
30
|
+
const program = gl.createProgram()
|
|
31
|
+
if (program == null) throw new Error('Cannot create webGL program')
|
|
32
|
+
for (const shader of shaders) gl.attachShader(program, shader)
|
|
33
|
+
gl.linkProgram(program)
|
|
34
|
+
if (gl.getProgramParameter(program, gl.LINK_STATUS)) return program
|
|
35
|
+
throw new Error(gl.getProgramInfoLog(program) || 'Cannot create webGL program (2)')
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* Creates a shader of the given type, uploads the source and compiles it.
|
|
40
|
+
*
|
|
41
|
+
* @param {WebGLRenderingContext} gl
|
|
42
|
+
* @param {number} type
|
|
43
|
+
* @param {...string} sources
|
|
44
|
+
* @returns {WebGLShader}
|
|
45
|
+
*/
|
|
46
|
+
export function createShader(gl, type, ...sources) {
|
|
47
|
+
/** @type {WebGLShader|null} */
|
|
48
|
+
const shader = gl.createShader(type)
|
|
49
|
+
if (shader == null) throw new Error('Cannot create webGL shader')
|
|
50
|
+
gl.shaderSource(shader, sources.join('\n'))
|
|
51
|
+
gl.compileShader(shader)
|
|
52
|
+
if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader
|
|
53
|
+
throw new Error(gl.getShaderInfoLog(shader) || 'Cannot create webGL shader (2)')
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/**
|
|
57
|
+
* Check if webGL is supported
|
|
58
|
+
*
|
|
59
|
+
* @returns {boolean}
|
|
60
|
+
*/
|
|
61
|
+
export function checkWebGLSupport() {
|
|
62
|
+
try {
|
|
63
|
+
const canvas = document.createElement('canvas')
|
|
64
|
+
return !!window.WebGLRenderingContext &&
|
|
65
|
+
(canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))
|
|
66
|
+
? true
|
|
67
|
+
: false
|
|
68
|
+
} catch (err) {
|
|
69
|
+
return false
|
|
70
|
+
}
|
|
71
|
+
}
|