@lightningjs/renderer 0.6.0 → 0.6.1
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 +1 -1
- package/dist/src/core/CoreNode.d.ts +63 -15
- package/dist/src/core/CoreNode.js +238 -118
- package/dist/src/core/CoreNode.js.map +1 -1
- package/dist/src/core/CoreTextNode.d.ts +1 -0
- package/dist/src/core/CoreTextNode.js +13 -0
- package/dist/src/core/CoreTextNode.js.map +1 -1
- package/dist/src/core/Stage.d.ts +6 -2
- package/dist/src/core/Stage.js +24 -21
- package/dist/src/core/Stage.js.map +1 -1
- package/dist/src/core/animations/CoreAnimation.js +11 -2
- package/dist/src/core/animations/CoreAnimation.js.map +1 -1
- package/dist/src/core/lib/ContextSpy.d.ts +12 -0
- package/dist/src/core/lib/ContextSpy.js +38 -0
- package/dist/src/core/lib/ContextSpy.js.map +1 -0
- package/dist/src/core/lib/WebGlContext.d.ts +414 -0
- package/dist/src/core/lib/WebGlContext.js +640 -0
- package/dist/src/core/lib/WebGlContext.js.map +1 -0
- package/dist/src/core/lib/WebGlContextWrapper.d.ts +496 -0
- package/dist/src/core/lib/WebGlContextWrapper.js +779 -0
- package/dist/src/core/lib/WebGlContextWrapper.js.map +1 -0
- package/dist/src/core/platform.js +4 -0
- package/dist/src/core/platform.js.map +1 -1
- package/dist/src/core/renderers/webgl/WebGlCoreRenderer.js +9 -8
- package/dist/src/core/renderers/webgl/WebGlCoreRenderer.js.map +1 -1
- package/dist/src/core/text-rendering/font-face-types/SdfTrFontFace/SdfTrFontFace.js +4 -5
- package/dist/src/core/text-rendering/font-face-types/SdfTrFontFace/SdfTrFontFace.js.map +1 -1
- package/dist/src/core/text-rendering/renderers/CanvasTextRenderer.js +15 -13
- package/dist/src/core/text-rendering/renderers/CanvasTextRenderer.js.map +1 -1
- package/dist/tsconfig.dist.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/core/CoreNode.ts +293 -149
- package/src/core/CoreTextNode.ts +16 -0
- package/src/core/Stage.ts +28 -31
- package/src/core/animations/CoreAnimation.ts +11 -2
- package/src/core/platform.ts +5 -0
- package/src/core/renderers/webgl/WebGlCoreRenderer.ts +9 -40
- package/src/core/text-rendering/font-face-types/SdfTrFontFace/SdfTrFontFace.ts +4 -5
- package/src/core/text-rendering/renderers/CanvasTextRenderer.ts +19 -15
- package/src/core/scene/Scene.ts +0 -120
|
@@ -0,0 +1,779 @@
|
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-unsafe-return */
|
|
2
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
3
|
+
/* eslint-disable @typescript-eslint/no-unsafe-argument */
|
|
4
|
+
import { assertTruthy } from '../../utils.js';
|
|
5
|
+
import { isWebGl2 } from '../renderers/webgl/internal/WebGlUtils.js';
|
|
6
|
+
/**
|
|
7
|
+
* Optimized WebGL Context Wrapper
|
|
8
|
+
*
|
|
9
|
+
* @remarks
|
|
10
|
+
* This class contains the subset of the WebGLRenderingContext & WebGL2RenderingContext
|
|
11
|
+
* API that is used by the renderer. Select high volume WebGL methods include
|
|
12
|
+
* caching optimizations to avoid making WebGL calls if the state is already set
|
|
13
|
+
* to the desired value.
|
|
14
|
+
*
|
|
15
|
+
* While most methods contained are direct passthroughs to the WebGL context,
|
|
16
|
+
* some methods combine multiple WebGL calls into one for convenience, modify
|
|
17
|
+
* arguments to be more convenient, or are replaced by more specific methods.
|
|
18
|
+
*
|
|
19
|
+
* Not all methods are optimized. Only methods that are called frequently
|
|
20
|
+
* and/or have a high cost are optimized.
|
|
21
|
+
*
|
|
22
|
+
* A subset of GLenum constants are also exposed as properties on this class
|
|
23
|
+
* for convenience.
|
|
24
|
+
*/
|
|
25
|
+
export class WebGlContextWrapper {
|
|
26
|
+
gl;
|
|
27
|
+
//#region Cached WebGL State
|
|
28
|
+
activeTextureUnit = 0;
|
|
29
|
+
texture2dUnits;
|
|
30
|
+
texture2dParams = new WeakMap();
|
|
31
|
+
scissorEnabled;
|
|
32
|
+
scissorX;
|
|
33
|
+
scissorY;
|
|
34
|
+
scissorWidth;
|
|
35
|
+
scissorHeight;
|
|
36
|
+
blendEnabled;
|
|
37
|
+
blendSrcRgb;
|
|
38
|
+
blendDstRgb;
|
|
39
|
+
blendSrcAlpha;
|
|
40
|
+
blendDstAlpha;
|
|
41
|
+
boundArrayBuffer;
|
|
42
|
+
boundElementArrayBuffer;
|
|
43
|
+
curProgram;
|
|
44
|
+
programUniforms = new WeakMap();
|
|
45
|
+
//#endregion Cached WebGL State
|
|
46
|
+
//#region Canvas
|
|
47
|
+
canvas;
|
|
48
|
+
//#endregion Canvas
|
|
49
|
+
//#region WebGL Enums
|
|
50
|
+
MAX_RENDERBUFFER_SIZE;
|
|
51
|
+
MAX_TEXTURE_SIZE;
|
|
52
|
+
MAX_VIEWPORT_DIMS;
|
|
53
|
+
MAX_VERTEX_TEXTURE_IMAGE_UNITS;
|
|
54
|
+
MAX_TEXTURE_IMAGE_UNITS;
|
|
55
|
+
MAX_COMBINED_TEXTURE_IMAGE_UNITS;
|
|
56
|
+
MAX_VERTEX_ATTRIBS;
|
|
57
|
+
MAX_VARYING_VECTORS;
|
|
58
|
+
MAX_VERTEX_UNIFORM_VECTORS;
|
|
59
|
+
MAX_FRAGMENT_UNIFORM_VECTORS;
|
|
60
|
+
TEXTURE_MAG_FILTER;
|
|
61
|
+
TEXTURE_MIN_FILTER;
|
|
62
|
+
TEXTURE_WRAP_S;
|
|
63
|
+
TEXTURE_WRAP_T;
|
|
64
|
+
LINEAR;
|
|
65
|
+
CLAMP_TO_EDGE;
|
|
66
|
+
RGBA;
|
|
67
|
+
UNSIGNED_BYTE;
|
|
68
|
+
UNPACK_PREMULTIPLY_ALPHA_WEBGL;
|
|
69
|
+
FLOAT;
|
|
70
|
+
TRIANGLES;
|
|
71
|
+
UNSIGNED_SHORT;
|
|
72
|
+
ONE;
|
|
73
|
+
ONE_MINUS_SRC_ALPHA;
|
|
74
|
+
VERTEX_SHADER;
|
|
75
|
+
FRAGMENT_SHADER;
|
|
76
|
+
STATIC_DRAW;
|
|
77
|
+
COMPILE_STATUS;
|
|
78
|
+
LINK_STATUS;
|
|
79
|
+
DYNAMIC_DRAW;
|
|
80
|
+
//#endregion WebGL Enums
|
|
81
|
+
constructor(gl) {
|
|
82
|
+
this.gl = gl;
|
|
83
|
+
// The following code extracts the current state of the WebGL context
|
|
84
|
+
// to our local JavaScript cached version of it. This is so we can
|
|
85
|
+
// avoid making WebGL calls if we don't need to.
|
|
86
|
+
// We could assume that the WebGL context is in a default state, but
|
|
87
|
+
// in the future we may want to support restoring a broken WebGL context
|
|
88
|
+
// and this will help with that.
|
|
89
|
+
this.activeTextureUnit =
|
|
90
|
+
gl.getParameter(gl.ACTIVE_TEXTURE) - gl.TEXTURE0;
|
|
91
|
+
const maxTextureUnits = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS);
|
|
92
|
+
// save current texture units
|
|
93
|
+
this.texture2dUnits = new Array(maxTextureUnits)
|
|
94
|
+
.fill(undefined)
|
|
95
|
+
.map((_, i) => {
|
|
96
|
+
this.activeTexture(i);
|
|
97
|
+
return gl.getParameter(gl.TEXTURE_BINDING_2D);
|
|
98
|
+
});
|
|
99
|
+
// restore active texture unit
|
|
100
|
+
this.activeTexture(this.activeTextureUnit);
|
|
101
|
+
this.scissorEnabled = gl.isEnabled(gl.SCISSOR_TEST);
|
|
102
|
+
const scissorBox = gl.getParameter(gl.SCISSOR_BOX);
|
|
103
|
+
this.scissorX = scissorBox[0];
|
|
104
|
+
this.scissorY = scissorBox[1];
|
|
105
|
+
this.scissorWidth = scissorBox[2];
|
|
106
|
+
this.scissorHeight = scissorBox[3];
|
|
107
|
+
this.blendEnabled = gl.isEnabled(gl.BLEND);
|
|
108
|
+
this.blendSrcRgb = gl.getParameter(gl.BLEND_SRC_RGB);
|
|
109
|
+
this.blendDstRgb = gl.getParameter(gl.BLEND_DST_RGB);
|
|
110
|
+
this.blendSrcAlpha = gl.getParameter(gl.BLEND_SRC_ALPHA);
|
|
111
|
+
this.blendDstAlpha = gl.getParameter(gl.BLEND_DST_ALPHA);
|
|
112
|
+
this.boundArrayBuffer = gl.getParameter(gl.ARRAY_BUFFER_BINDING);
|
|
113
|
+
this.boundElementArrayBuffer = gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING);
|
|
114
|
+
this.curProgram = gl.getParameter(gl.CURRENT_PROGRAM);
|
|
115
|
+
this.canvas = gl.canvas;
|
|
116
|
+
// Extract GLenums
|
|
117
|
+
this.MAX_RENDERBUFFER_SIZE = gl.MAX_RENDERBUFFER_SIZE;
|
|
118
|
+
this.MAX_TEXTURE_SIZE = gl.MAX_TEXTURE_SIZE;
|
|
119
|
+
this.MAX_VIEWPORT_DIMS = gl.MAX_VIEWPORT_DIMS;
|
|
120
|
+
this.MAX_VERTEX_TEXTURE_IMAGE_UNITS = gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS;
|
|
121
|
+
this.MAX_TEXTURE_IMAGE_UNITS = gl.MAX_TEXTURE_IMAGE_UNITS;
|
|
122
|
+
this.MAX_COMBINED_TEXTURE_IMAGE_UNITS = gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS;
|
|
123
|
+
this.MAX_VERTEX_ATTRIBS = gl.MAX_VERTEX_ATTRIBS;
|
|
124
|
+
this.MAX_VARYING_VECTORS = gl.MAX_VARYING_VECTORS;
|
|
125
|
+
this.MAX_VERTEX_UNIFORM_VECTORS = gl.MAX_VERTEX_UNIFORM_VECTORS;
|
|
126
|
+
this.MAX_FRAGMENT_UNIFORM_VECTORS = gl.MAX_FRAGMENT_UNIFORM_VECTORS;
|
|
127
|
+
this.TEXTURE_MAG_FILTER = gl.TEXTURE_MAG_FILTER;
|
|
128
|
+
this.TEXTURE_MIN_FILTER = gl.TEXTURE_MIN_FILTER;
|
|
129
|
+
this.TEXTURE_WRAP_S = gl.TEXTURE_WRAP_S;
|
|
130
|
+
this.TEXTURE_WRAP_T = gl.TEXTURE_WRAP_T;
|
|
131
|
+
this.LINEAR = gl.LINEAR;
|
|
132
|
+
this.CLAMP_TO_EDGE = gl.CLAMP_TO_EDGE;
|
|
133
|
+
this.RGBA = gl.RGBA;
|
|
134
|
+
this.UNSIGNED_BYTE = gl.UNSIGNED_BYTE;
|
|
135
|
+
this.UNPACK_PREMULTIPLY_ALPHA_WEBGL = gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL;
|
|
136
|
+
this.FLOAT = gl.FLOAT;
|
|
137
|
+
this.TRIANGLES = gl.TRIANGLES;
|
|
138
|
+
this.UNSIGNED_SHORT = gl.UNSIGNED_SHORT;
|
|
139
|
+
this.ONE = gl.ONE;
|
|
140
|
+
this.ONE_MINUS_SRC_ALPHA = gl.ONE_MINUS_SRC_ALPHA;
|
|
141
|
+
this.MAX_VERTEX_TEXTURE_IMAGE_UNITS = gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS;
|
|
142
|
+
this.TRIANGLES = gl.TRIANGLES;
|
|
143
|
+
this.UNSIGNED_SHORT = gl.UNSIGNED_SHORT;
|
|
144
|
+
this.VERTEX_SHADER = gl.VERTEX_SHADER;
|
|
145
|
+
this.FRAGMENT_SHADER = gl.FRAGMENT_SHADER;
|
|
146
|
+
this.STATIC_DRAW = gl.STATIC_DRAW;
|
|
147
|
+
this.COMPILE_STATUS = gl.COMPILE_STATUS;
|
|
148
|
+
this.LINK_STATUS = gl.LINK_STATUS;
|
|
149
|
+
this.DYNAMIC_DRAW = gl.DYNAMIC_DRAW;
|
|
150
|
+
}
|
|
151
|
+
/**
|
|
152
|
+
* Returns true if the WebGL context is WebGL2
|
|
153
|
+
*
|
|
154
|
+
* @returns
|
|
155
|
+
*/
|
|
156
|
+
isWebGl2() {
|
|
157
|
+
return isWebGl2(this.gl);
|
|
158
|
+
}
|
|
159
|
+
/**
|
|
160
|
+
* ```
|
|
161
|
+
* gl.activeTexture(textureUnit + gl.TEXTURE0);
|
|
162
|
+
* ```
|
|
163
|
+
*
|
|
164
|
+
* @remarks
|
|
165
|
+
* **WebGL Difference**: `textureUnit` is based from 0, not `gl.TEXTURE0`.
|
|
166
|
+
*
|
|
167
|
+
* @param textureUnit
|
|
168
|
+
*/
|
|
169
|
+
activeTexture(textureUnit) {
|
|
170
|
+
const { gl } = this;
|
|
171
|
+
if (this.activeTextureUnit !== textureUnit) {
|
|
172
|
+
gl.activeTexture(textureUnit + gl.TEXTURE0);
|
|
173
|
+
this.activeTextureUnit = textureUnit;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
/**
|
|
177
|
+
* ```
|
|
178
|
+
* gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
179
|
+
* ```
|
|
180
|
+
* @remarks
|
|
181
|
+
* **WebGL Difference**: Bind target is always `gl.TEXTURE_2D`
|
|
182
|
+
*
|
|
183
|
+
* @param texture
|
|
184
|
+
*/
|
|
185
|
+
bindTexture(texture) {
|
|
186
|
+
const { gl, activeTextureUnit, texture2dUnits } = this;
|
|
187
|
+
if (texture2dUnits[activeTextureUnit] === texture) {
|
|
188
|
+
return;
|
|
189
|
+
}
|
|
190
|
+
texture2dUnits[activeTextureUnit] = texture;
|
|
191
|
+
gl.bindTexture(this.gl.TEXTURE_2D, texture);
|
|
192
|
+
}
|
|
193
|
+
_getActiveTexture() {
|
|
194
|
+
const { activeTextureUnit, texture2dUnits } = this;
|
|
195
|
+
return texture2dUnits[activeTextureUnit];
|
|
196
|
+
}
|
|
197
|
+
/**
|
|
198
|
+
* ```
|
|
199
|
+
* gl.texParameteri(gl.TEXTURE_2D, pname, param);
|
|
200
|
+
* ```
|
|
201
|
+
* @remarks
|
|
202
|
+
* **WebGL Difference**: Bind target is always `gl.TEXTURE_2D`
|
|
203
|
+
*
|
|
204
|
+
* @param pname
|
|
205
|
+
* @param param
|
|
206
|
+
* @returns
|
|
207
|
+
*/
|
|
208
|
+
texParameteri(pname, param) {
|
|
209
|
+
const { gl, texture2dParams } = this;
|
|
210
|
+
const activeTexture = this._getActiveTexture();
|
|
211
|
+
if (!activeTexture) {
|
|
212
|
+
throw new Error('No active texture');
|
|
213
|
+
}
|
|
214
|
+
let textureParams = texture2dParams.get(activeTexture);
|
|
215
|
+
if (!textureParams) {
|
|
216
|
+
textureParams = {};
|
|
217
|
+
texture2dParams.set(activeTexture, textureParams);
|
|
218
|
+
}
|
|
219
|
+
if (textureParams[pname] === param) {
|
|
220
|
+
return;
|
|
221
|
+
}
|
|
222
|
+
textureParams[pname] = param;
|
|
223
|
+
gl.texParameteri(gl.TEXTURE_2D, pname, param);
|
|
224
|
+
}
|
|
225
|
+
texImage2D(level, internalFormat, widthOrFormat, heightOrType, borderOrSource, format, type, pixels) {
|
|
226
|
+
const { gl } = this;
|
|
227
|
+
if (format) {
|
|
228
|
+
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, widthOrFormat, heightOrType, borderOrSource, format, type, pixels);
|
|
229
|
+
}
|
|
230
|
+
else {
|
|
231
|
+
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, widthOrFormat, heightOrType, borderOrSource);
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
/**
|
|
235
|
+
* ```
|
|
236
|
+
* gl.pixelStorei(pname, param);
|
|
237
|
+
* ```
|
|
238
|
+
*
|
|
239
|
+
* @param pname
|
|
240
|
+
* @param param
|
|
241
|
+
*/
|
|
242
|
+
pixelStorei(pname, param) {
|
|
243
|
+
const { gl } = this;
|
|
244
|
+
gl.pixelStorei(pname, param);
|
|
245
|
+
}
|
|
246
|
+
/**
|
|
247
|
+
* ```
|
|
248
|
+
* gl.generateMipmap(gl.TEXTURE_2D);
|
|
249
|
+
* ```
|
|
250
|
+
*
|
|
251
|
+
* @remarks
|
|
252
|
+
* **WebGL Difference**: Bind target is always `gl.TEXTURE_2D`
|
|
253
|
+
*/
|
|
254
|
+
generateMipmap() {
|
|
255
|
+
const { gl } = this;
|
|
256
|
+
gl.generateMipmap(gl.TEXTURE_2D);
|
|
257
|
+
}
|
|
258
|
+
/**
|
|
259
|
+
* ```
|
|
260
|
+
* gl.createTexture();
|
|
261
|
+
* ```
|
|
262
|
+
*
|
|
263
|
+
* @returns
|
|
264
|
+
*/
|
|
265
|
+
createTexture() {
|
|
266
|
+
const { gl } = this;
|
|
267
|
+
return gl.createTexture();
|
|
268
|
+
}
|
|
269
|
+
/**
|
|
270
|
+
* ```
|
|
271
|
+
* gl.deleteTexture(texture);
|
|
272
|
+
* ```
|
|
273
|
+
*
|
|
274
|
+
* @param texture
|
|
275
|
+
*/
|
|
276
|
+
deleteTexture(texture) {
|
|
277
|
+
const { gl } = this;
|
|
278
|
+
if (texture) {
|
|
279
|
+
this.texture2dParams.delete(texture);
|
|
280
|
+
}
|
|
281
|
+
gl.deleteTexture(texture);
|
|
282
|
+
}
|
|
283
|
+
/**
|
|
284
|
+
* ```
|
|
285
|
+
* gl.viewport(x, y, width, height);
|
|
286
|
+
* ```
|
|
287
|
+
*/
|
|
288
|
+
viewport(x, y, width, height) {
|
|
289
|
+
const { gl } = this;
|
|
290
|
+
gl.viewport(x, y, width, height);
|
|
291
|
+
}
|
|
292
|
+
/**
|
|
293
|
+
* ```
|
|
294
|
+
* gl.clearColor(red, green, blue, alpha);
|
|
295
|
+
* ```
|
|
296
|
+
*
|
|
297
|
+
* @param red
|
|
298
|
+
* @param green
|
|
299
|
+
* @param blue
|
|
300
|
+
* @param alpha
|
|
301
|
+
*/
|
|
302
|
+
clearColor(red, green, blue, alpha) {
|
|
303
|
+
const { gl } = this;
|
|
304
|
+
gl.clearColor(red, green, blue, alpha);
|
|
305
|
+
}
|
|
306
|
+
/**
|
|
307
|
+
* ```
|
|
308
|
+
* gl["enable"|"disable"](gl.SCISSOR_TEST);
|
|
309
|
+
* ```
|
|
310
|
+
* @param enable
|
|
311
|
+
*/
|
|
312
|
+
setScissorTest(enable) {
|
|
313
|
+
const { gl, scissorEnabled } = this;
|
|
314
|
+
if (enable === scissorEnabled) {
|
|
315
|
+
return;
|
|
316
|
+
}
|
|
317
|
+
if (enable) {
|
|
318
|
+
gl.enable(gl.SCISSOR_TEST);
|
|
319
|
+
}
|
|
320
|
+
else {
|
|
321
|
+
gl.disable(gl.SCISSOR_TEST);
|
|
322
|
+
}
|
|
323
|
+
this.scissorEnabled = enable;
|
|
324
|
+
}
|
|
325
|
+
/**
|
|
326
|
+
* ```
|
|
327
|
+
* gl.scissor(x, y, width, height);
|
|
328
|
+
* ```
|
|
329
|
+
*
|
|
330
|
+
* @param x
|
|
331
|
+
* @param y
|
|
332
|
+
* @param width
|
|
333
|
+
* @param height
|
|
334
|
+
*/
|
|
335
|
+
scissor(x, y, width, height) {
|
|
336
|
+
const { gl, scissorX, scissorY, scissorWidth, scissorHeight } = this;
|
|
337
|
+
if (x !== scissorX ||
|
|
338
|
+
y !== scissorY ||
|
|
339
|
+
width !== scissorWidth ||
|
|
340
|
+
height !== scissorHeight) {
|
|
341
|
+
gl.scissor(x, y, width, height);
|
|
342
|
+
this.scissorX = x;
|
|
343
|
+
this.scissorY = y;
|
|
344
|
+
this.scissorWidth = width;
|
|
345
|
+
this.scissorHeight = height;
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
/**
|
|
349
|
+
* ```
|
|
350
|
+
* gl["enable"|"disable"](gl.BLEND);
|
|
351
|
+
* ```
|
|
352
|
+
*
|
|
353
|
+
* @param blend
|
|
354
|
+
* @returns
|
|
355
|
+
*/
|
|
356
|
+
setBlend(blend) {
|
|
357
|
+
const { gl, blendEnabled } = this;
|
|
358
|
+
if (blend === blendEnabled) {
|
|
359
|
+
return;
|
|
360
|
+
}
|
|
361
|
+
if (blend) {
|
|
362
|
+
gl.enable(gl.BLEND);
|
|
363
|
+
}
|
|
364
|
+
else {
|
|
365
|
+
gl.disable(gl.BLEND);
|
|
366
|
+
}
|
|
367
|
+
this.blendEnabled = blend;
|
|
368
|
+
}
|
|
369
|
+
/**
|
|
370
|
+
* ```
|
|
371
|
+
* gl.blendFunc(src, dst);
|
|
372
|
+
* ```
|
|
373
|
+
*
|
|
374
|
+
* @param src
|
|
375
|
+
* @param dst
|
|
376
|
+
*/
|
|
377
|
+
blendFunc(src, dst) {
|
|
378
|
+
const { gl, blendSrcRgb, blendDstRgb, blendSrcAlpha, blendDstAlpha } = this;
|
|
379
|
+
if (src !== blendSrcRgb ||
|
|
380
|
+
dst !== blendDstRgb ||
|
|
381
|
+
src !== blendSrcAlpha ||
|
|
382
|
+
dst !== blendDstAlpha) {
|
|
383
|
+
gl.blendFunc(src, dst);
|
|
384
|
+
this.blendSrcRgb = src;
|
|
385
|
+
this.blendDstRgb = dst;
|
|
386
|
+
this.blendSrcAlpha = src;
|
|
387
|
+
this.blendDstAlpha = dst;
|
|
388
|
+
}
|
|
389
|
+
}
|
|
390
|
+
/**
|
|
391
|
+
* ```
|
|
392
|
+
* createBuffer();
|
|
393
|
+
* ```
|
|
394
|
+
*
|
|
395
|
+
* @returns
|
|
396
|
+
*/
|
|
397
|
+
createBuffer() {
|
|
398
|
+
const { gl } = this;
|
|
399
|
+
return gl.createBuffer();
|
|
400
|
+
}
|
|
401
|
+
/**
|
|
402
|
+
* ```
|
|
403
|
+
* gl.clear(gl.COLOR_BUFFER_BIT);
|
|
404
|
+
* ```
|
|
405
|
+
*
|
|
406
|
+
* @remarks
|
|
407
|
+
* **WebGL Difference**: Clear mask is always `gl.COLOR_BUFFER_BIT`
|
|
408
|
+
*/
|
|
409
|
+
clear() {
|
|
410
|
+
const { gl } = this;
|
|
411
|
+
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
412
|
+
}
|
|
413
|
+
/**
|
|
414
|
+
* ```
|
|
415
|
+
* gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
|
416
|
+
* gl.bufferData(gl.ARRAY_BUFFER, data, usage);
|
|
417
|
+
* ```
|
|
418
|
+
*
|
|
419
|
+
* @remarks
|
|
420
|
+
* **WebGL Combo**: `gl.bindBuffer` and `gl.bufferData` are combined into one function.
|
|
421
|
+
*
|
|
422
|
+
* @param buffer
|
|
423
|
+
* @param data
|
|
424
|
+
* @param usage
|
|
425
|
+
*/
|
|
426
|
+
arrayBufferData(buffer, data, usage) {
|
|
427
|
+
const { gl, boundArrayBuffer } = this;
|
|
428
|
+
if (boundArrayBuffer !== buffer) {
|
|
429
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
|
430
|
+
this.boundArrayBuffer = buffer;
|
|
431
|
+
}
|
|
432
|
+
gl.bufferData(gl.ARRAY_BUFFER, data, usage);
|
|
433
|
+
}
|
|
434
|
+
/**
|
|
435
|
+
* ```
|
|
436
|
+
* gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);
|
|
437
|
+
* gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, data, usage);
|
|
438
|
+
* ```
|
|
439
|
+
* @remarks
|
|
440
|
+
* **WebGL Combo**: `gl.bindBuffer` and `gl.bufferData` are combined into one function.
|
|
441
|
+
*
|
|
442
|
+
* @param buffer
|
|
443
|
+
* @param data
|
|
444
|
+
* @param usage
|
|
445
|
+
*/
|
|
446
|
+
elementArrayBufferData(buffer, data, usage) {
|
|
447
|
+
const { gl, boundElementArrayBuffer } = this;
|
|
448
|
+
if (boundElementArrayBuffer !== buffer) {
|
|
449
|
+
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);
|
|
450
|
+
this.boundElementArrayBuffer = buffer;
|
|
451
|
+
}
|
|
452
|
+
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, data, usage);
|
|
453
|
+
}
|
|
454
|
+
/**
|
|
455
|
+
* ```
|
|
456
|
+
* gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
|
457
|
+
* gl.vertexAttribPointer(index, size, type, normalized, stride, offset);
|
|
458
|
+
* ```
|
|
459
|
+
*
|
|
460
|
+
* @remarks
|
|
461
|
+
* **WebGL Combo**: `gl.bindBuffer` and `gl.vertexAttribPointer` are combined into one function.
|
|
462
|
+
*
|
|
463
|
+
* @param buffer
|
|
464
|
+
* @param index
|
|
465
|
+
* @param size
|
|
466
|
+
* @param type
|
|
467
|
+
* @param normalized
|
|
468
|
+
* @param stride
|
|
469
|
+
* @param offset
|
|
470
|
+
*/
|
|
471
|
+
vertexAttribPointer(buffer, index, size, type, normalized, stride, offset) {
|
|
472
|
+
const { gl, boundArrayBuffer } = this;
|
|
473
|
+
if (boundArrayBuffer !== buffer) {
|
|
474
|
+
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
|
475
|
+
this.boundArrayBuffer = buffer;
|
|
476
|
+
}
|
|
477
|
+
gl.vertexAttribPointer(index, size, type, normalized, stride, offset);
|
|
478
|
+
}
|
|
479
|
+
/**
|
|
480
|
+
* ```
|
|
481
|
+
* gl.useProgram(program);
|
|
482
|
+
* ```
|
|
483
|
+
*
|
|
484
|
+
* @param program
|
|
485
|
+
* @returns
|
|
486
|
+
*/
|
|
487
|
+
useProgram(program) {
|
|
488
|
+
const { gl, curProgram } = this;
|
|
489
|
+
if (curProgram === program) {
|
|
490
|
+
return;
|
|
491
|
+
}
|
|
492
|
+
gl.useProgram(program);
|
|
493
|
+
this.curProgram = program;
|
|
494
|
+
}
|
|
495
|
+
setUniform(type, location, ...args) {
|
|
496
|
+
const { gl, programUniforms } = this;
|
|
497
|
+
let uniforms = programUniforms.get(this.curProgram);
|
|
498
|
+
if (!uniforms) {
|
|
499
|
+
uniforms = new Map();
|
|
500
|
+
programUniforms.set(this.curProgram, uniforms);
|
|
501
|
+
}
|
|
502
|
+
const uniformArgs = uniforms.get(location);
|
|
503
|
+
if (!uniformArgs || !compareArrays(uniformArgs, args)) {
|
|
504
|
+
uniforms.set(location, args);
|
|
505
|
+
gl[type](location, ...args);
|
|
506
|
+
}
|
|
507
|
+
}
|
|
508
|
+
/**
|
|
509
|
+
* ```
|
|
510
|
+
* gl.getParameter(pname);
|
|
511
|
+
* ```
|
|
512
|
+
*
|
|
513
|
+
* @param pname
|
|
514
|
+
* @returns
|
|
515
|
+
*/
|
|
516
|
+
getParameter(pname) {
|
|
517
|
+
const { gl } = this;
|
|
518
|
+
return gl.getParameter(pname);
|
|
519
|
+
}
|
|
520
|
+
/**
|
|
521
|
+
* ```
|
|
522
|
+
* gl.drawElements(mode, count, type, offset);
|
|
523
|
+
* ```
|
|
524
|
+
*
|
|
525
|
+
* @param mode
|
|
526
|
+
* @param count
|
|
527
|
+
* @param type
|
|
528
|
+
* @param offset
|
|
529
|
+
*/
|
|
530
|
+
drawElements(mode, count, type, offset) {
|
|
531
|
+
const { gl } = this;
|
|
532
|
+
gl.drawElements(mode, count, type, offset);
|
|
533
|
+
}
|
|
534
|
+
/**
|
|
535
|
+
* ```
|
|
536
|
+
* gl.drawArrays(mode, first, count);
|
|
537
|
+
* ```
|
|
538
|
+
*
|
|
539
|
+
* @param name
|
|
540
|
+
* @returns
|
|
541
|
+
*/
|
|
542
|
+
getExtension(name) {
|
|
543
|
+
const { gl } = this;
|
|
544
|
+
return gl.getExtension(name);
|
|
545
|
+
}
|
|
546
|
+
/**
|
|
547
|
+
* ```
|
|
548
|
+
* gl.createVertexArray();
|
|
549
|
+
* ```
|
|
550
|
+
*
|
|
551
|
+
* @returns
|
|
552
|
+
*/
|
|
553
|
+
createVertexArray() {
|
|
554
|
+
const { gl } = this;
|
|
555
|
+
assertTruthy(gl instanceof WebGL2RenderingContext);
|
|
556
|
+
return gl.createVertexArray();
|
|
557
|
+
}
|
|
558
|
+
/**
|
|
559
|
+
* ```
|
|
560
|
+
* gl.bindVertexArray(vertexArray);
|
|
561
|
+
* ```
|
|
562
|
+
*
|
|
563
|
+
* @param vertexArray
|
|
564
|
+
*/
|
|
565
|
+
bindVertexArray(vertexArray) {
|
|
566
|
+
const { gl } = this;
|
|
567
|
+
assertTruthy(gl instanceof WebGL2RenderingContext);
|
|
568
|
+
gl.bindVertexArray(vertexArray);
|
|
569
|
+
}
|
|
570
|
+
/**
|
|
571
|
+
* ```
|
|
572
|
+
* gl.getAttribLocation(program, name);
|
|
573
|
+
* ```
|
|
574
|
+
*
|
|
575
|
+
* @param program
|
|
576
|
+
* @param name
|
|
577
|
+
* @returns
|
|
578
|
+
*/
|
|
579
|
+
getAttribLocation(program, name) {
|
|
580
|
+
const { gl } = this;
|
|
581
|
+
return gl.getAttribLocation(program, name);
|
|
582
|
+
}
|
|
583
|
+
/**
|
|
584
|
+
* ```
|
|
585
|
+
* gl.getUniformLocation(program, name);
|
|
586
|
+
* ```
|
|
587
|
+
*
|
|
588
|
+
* @param program
|
|
589
|
+
* @param name
|
|
590
|
+
* @returns
|
|
591
|
+
*/
|
|
592
|
+
getUniformLocation(program, name) {
|
|
593
|
+
const { gl } = this;
|
|
594
|
+
return gl.getUniformLocation(program, name);
|
|
595
|
+
}
|
|
596
|
+
/**
|
|
597
|
+
* ```
|
|
598
|
+
* gl.enableVertexAttribArray(index);
|
|
599
|
+
* ```
|
|
600
|
+
*
|
|
601
|
+
* @param index
|
|
602
|
+
*/
|
|
603
|
+
enableVertexAttribArray(index) {
|
|
604
|
+
const { gl } = this;
|
|
605
|
+
gl.enableVertexAttribArray(index);
|
|
606
|
+
}
|
|
607
|
+
/**
|
|
608
|
+
* ```
|
|
609
|
+
* gl.disableVertexAttribArray(index);
|
|
610
|
+
* ```
|
|
611
|
+
*
|
|
612
|
+
* @param index
|
|
613
|
+
*/
|
|
614
|
+
disableVertexAttribArray(index) {
|
|
615
|
+
const { gl } = this;
|
|
616
|
+
gl.disableVertexAttribArray(index);
|
|
617
|
+
}
|
|
618
|
+
/**
|
|
619
|
+
* ```
|
|
620
|
+
* gl.createShader(type);
|
|
621
|
+
* ```
|
|
622
|
+
*
|
|
623
|
+
* @param type
|
|
624
|
+
* @returns
|
|
625
|
+
*/
|
|
626
|
+
createShader(type) {
|
|
627
|
+
const { gl } = this;
|
|
628
|
+
return gl.createShader(type);
|
|
629
|
+
}
|
|
630
|
+
/**
|
|
631
|
+
* ```
|
|
632
|
+
* gl.compileShader(shader);
|
|
633
|
+
* ```
|
|
634
|
+
*
|
|
635
|
+
* @param shader
|
|
636
|
+
* @returns
|
|
637
|
+
*/
|
|
638
|
+
compileShader(shader) {
|
|
639
|
+
const { gl } = this;
|
|
640
|
+
gl.compileShader(shader);
|
|
641
|
+
}
|
|
642
|
+
/**
|
|
643
|
+
* ```
|
|
644
|
+
* gl.attachShader(program, shader);
|
|
645
|
+
* ```
|
|
646
|
+
*
|
|
647
|
+
* @param program
|
|
648
|
+
* @param shader
|
|
649
|
+
*/
|
|
650
|
+
attachShader(program, shader) {
|
|
651
|
+
const { gl } = this;
|
|
652
|
+
gl.attachShader(program, shader);
|
|
653
|
+
}
|
|
654
|
+
/**
|
|
655
|
+
* ```
|
|
656
|
+
* gl.linkProgram(program);
|
|
657
|
+
* ```
|
|
658
|
+
*
|
|
659
|
+
* @param program
|
|
660
|
+
*/
|
|
661
|
+
linkProgram(program) {
|
|
662
|
+
const { gl } = this;
|
|
663
|
+
gl.linkProgram(program);
|
|
664
|
+
}
|
|
665
|
+
/**
|
|
666
|
+
* ```
|
|
667
|
+
* gl.deleteProgram(shader);
|
|
668
|
+
* ```
|
|
669
|
+
*
|
|
670
|
+
* @param shader
|
|
671
|
+
*/
|
|
672
|
+
deleteProgram(shader) {
|
|
673
|
+
const { gl } = this;
|
|
674
|
+
gl.deleteProgram(shader);
|
|
675
|
+
}
|
|
676
|
+
/**
|
|
677
|
+
* ```
|
|
678
|
+
* gl.getShaderParameter(shader, pname);
|
|
679
|
+
* ```
|
|
680
|
+
*
|
|
681
|
+
* @param shader
|
|
682
|
+
* @param pname
|
|
683
|
+
*/
|
|
684
|
+
getShaderParameter(shader, pname) {
|
|
685
|
+
const { gl } = this;
|
|
686
|
+
return gl.getShaderParameter(shader, pname);
|
|
687
|
+
}
|
|
688
|
+
/**
|
|
689
|
+
* ```
|
|
690
|
+
* gl.getShaderInfoLog(shader);
|
|
691
|
+
* ```
|
|
692
|
+
*
|
|
693
|
+
* @param shader
|
|
694
|
+
*/
|
|
695
|
+
getShaderInfoLog(shader) {
|
|
696
|
+
const { gl } = this;
|
|
697
|
+
return gl.getShaderInfoLog(shader);
|
|
698
|
+
}
|
|
699
|
+
/**
|
|
700
|
+
* ```
|
|
701
|
+
* gl.createProgram();
|
|
702
|
+
* ```
|
|
703
|
+
*
|
|
704
|
+
* @returns
|
|
705
|
+
*/
|
|
706
|
+
createProgram() {
|
|
707
|
+
const { gl } = this;
|
|
708
|
+
return gl.createProgram();
|
|
709
|
+
}
|
|
710
|
+
/**
|
|
711
|
+
* ```
|
|
712
|
+
* gl.getProgramParameter(program, pname);
|
|
713
|
+
* ```
|
|
714
|
+
*
|
|
715
|
+
* @param program
|
|
716
|
+
* @param pname
|
|
717
|
+
* @returns
|
|
718
|
+
*/
|
|
719
|
+
getProgramParameter(program, pname) {
|
|
720
|
+
const { gl } = this;
|
|
721
|
+
return gl.getProgramParameter(program, pname);
|
|
722
|
+
}
|
|
723
|
+
/**
|
|
724
|
+
* ```
|
|
725
|
+
* gl.getProgramInfoLog(program);
|
|
726
|
+
* ```
|
|
727
|
+
*
|
|
728
|
+
* @param program
|
|
729
|
+
* @returns
|
|
730
|
+
*/
|
|
731
|
+
getProgramInfoLog(program) {
|
|
732
|
+
const { gl } = this;
|
|
733
|
+
return gl.getProgramInfoLog(program);
|
|
734
|
+
}
|
|
735
|
+
/**
|
|
736
|
+
* ```
|
|
737
|
+
* gl.shaderSource(shader, source);
|
|
738
|
+
* ```
|
|
739
|
+
*
|
|
740
|
+
* @param shader
|
|
741
|
+
* @param source
|
|
742
|
+
*/
|
|
743
|
+
shaderSource(shader, source) {
|
|
744
|
+
const { gl } = this;
|
|
745
|
+
gl.shaderSource(shader, source);
|
|
746
|
+
}
|
|
747
|
+
/**
|
|
748
|
+
* ```
|
|
749
|
+
* gl.deleteShader(shader);
|
|
750
|
+
* ```
|
|
751
|
+
*
|
|
752
|
+
* @param shader
|
|
753
|
+
*/
|
|
754
|
+
deleteShader(shader) {
|
|
755
|
+
const { gl } = this;
|
|
756
|
+
gl.deleteShader(shader);
|
|
757
|
+
}
|
|
758
|
+
}
|
|
759
|
+
/**
|
|
760
|
+
*
|
|
761
|
+
*
|
|
762
|
+
* @param a
|
|
763
|
+
* @param b
|
|
764
|
+
* @returns
|
|
765
|
+
*/
|
|
766
|
+
export function compareArrays(a, b) {
|
|
767
|
+
if (a.length !== b.length) {
|
|
768
|
+
return false;
|
|
769
|
+
}
|
|
770
|
+
return a.every((v, i) => {
|
|
771
|
+
if (Array.isArray(v)) {
|
|
772
|
+
return compareArrays(v, b[i]);
|
|
773
|
+
}
|
|
774
|
+
else {
|
|
775
|
+
return v === b[i];
|
|
776
|
+
}
|
|
777
|
+
});
|
|
778
|
+
}
|
|
779
|
+
//# sourceMappingURL=WebGlContextWrapper.js.map
|