ol 7.3.0 → 7.3.1-dev

package/webgl/BaseTileRepresentation.js

@@ -0,0 +1,108 @@
+/**
+ * @module ol/webgl/BaseTileRepresentation
+ */
+
+import EventTarget from '../events/Target.js';
+import EventType from '../events/EventType.js';
+import ImageTile from '../ImageTile.js';
+import TileState from '../TileState.js';
+import {abstract} from '../util.js';
+
+/**
+ * @typedef {import("../Tile.js").default} BaseTileType
+ */
+
+/**
+ * @template {BaseTileType} TileType
+ * @typedef {Object} TileRepresentationOptions
+ * @property {TileType} tile The tile.
+ * @property {import("../tilegrid/TileGrid.js").default} grid Tile grid.
+ * @property {import("../webgl/Helper.js").default} helper WebGL helper.
+ * @property {number} [gutter=0] The size in pixels of the gutter around image tiles to ignore.
+ */
+
+/**
+ * @classdesc
+ * Base class for representing a tile in a webgl context
+ * @template {import("../Tile.js").default} TileType
+ * @abstract
+ */
+class BaseTileRepresentation extends EventTarget {
+  /**
+   * @param {TileRepresentationOptions<TileType>} options The tile representation options.
+   */
+  constructor(options) {
+    super();
+
+    /**
+     * @type {TileType}
+     */
+    this.tile;
+    this.handleTileChange_ = this.handleTileChange_.bind(this);
+
+    /**
+     * @type {number}
+     * @protected
+     */
+    this.gutter_ = options.gutter || 0;
+
+    /**
+     * @type {import("../webgl/Helper.js").default}
+     * @protected
+     */
+    this.helper_ = options.helper;
+
+    this.loaded = false;
+    this.ready = false;
+  }
+
+  /**
+   * @param {TileType} tile Tile.
+   */
+  setTile(tile) {
+    if (tile !== this.tile) {
+      if (this.tile) {
+        this.tile.removeEventListener(EventType.CHANGE, this.handleTileChange_);
+      }
+      this.tile = tile;
+      this.loaded = tile.getState() === TileState.LOADED;
+      if (this.loaded) {
+        this.uploadTile();
+      } else {
+        if (tile instanceof ImageTile) {
+          const image = tile.getImage();
+          if (image instanceof Image && !image.crossOrigin) {
+            image.crossOrigin = 'anonymous';
+          }
+        }
+        tile.addEventListener(EventType.CHANGE, this.handleTileChange_);
+      }
+    }
+  }
+
+  /**
+   * @abstract
+   * @protected
+   */
+  uploadTile() {
+    abstract();
+  }
+
+  setReady() {
+    this.ready = true;
+    this.dispatchEvent(EventType.CHANGE);
+  }
+
+  handleTileChange_() {
+    if (this.tile.getState() === TileState.LOADED) {
+      this.loaded = true;
+      this.uploadTile();
+    }
+  }
+
+  disposeInternal() {
+    this.tile.removeEventListener(EventType.CHANGE, this.handleTileChange_);
+  }
+}
+
+export default BaseTileRepresentation;

package/webgl/Buffer.d.ts

@@ -15,9 +15,9 @@ export namespace BufferUsage {
     export { DYNAMIC_DRAW };
 }
 export default WebGLArrayBuffer;
-import { STATIC_DRAW } from "../webgl.js";
-import { STREAM_DRAW } from "../webgl.js";
-import { DYNAMIC_DRAW } from "../webgl.js";
+import { STATIC_DRAW } from '../webgl.js';
+import { STREAM_DRAW } from '../webgl.js';
+import { DYNAMIC_DRAW } from '../webgl.js';
 /**
  * @classdesc
  * Object used to store an array of data as well as usage information for that data.
@@ -59,19 +59,22 @@ declare class WebGLArrayBuffer {
     /**
      * Populates the buffer with an array of the given size (all values will be zeroes).
      * @param {number} size Array size
+     * @return {WebGLArrayBuffer} This
      */
-    ofSize(size: number): void;
+    ofSize(size: number): WebGLArrayBuffer;
     /**
      * Populates the buffer with an array of the given size.
      * @param {Array<number>} array Numerical array
+     * @return {WebGLArrayBuffer} This
      */
-    fromArray(array: Array<number>): void;
+    fromArray(array: Array<number>): WebGLArrayBuffer;
     /**
      * Populates the buffer with a raw binary array buffer.
      * @param {ArrayBuffer} buffer Raw binary buffer to populate the array with. Note that this buffer must have been
      * initialized for the same typed array class.
+     * @return {WebGLArrayBuffer} This
      */
-    fromArrayBuffer(buffer: ArrayBuffer): void;
+    fromArrayBuffer(buffer: ArrayBuffer): WebGLArrayBuffer;
     /**
      * @return {number} Buffer type.
      */

package/webgl/Buffer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Buffer.d.ts","sourceRoot":"","sources":["Buffer.js"],"names":[],"mappings":"AA2HA;;;;GAIG;AACH,2CAHW,MAAM,GACL,uBAAuB,GAAC,sBAAsB,CAWzD;;;;;0BA1HS,MAAM;;;;;;;;;;AAQhB;;;;;;;;;;;;;;;GAeG;AACH;IACE;;;;OAIG;IACH,kBAJW,MAAM,8BAwBhB;IAnBC;;;OAGG;IACH,cAAiB;IAEjB;;;OAGG;IACH,aAAgB;IAIhB;;;OAGG;IACH,cAAkE;IAGpE;;;OAGG;IACH,aAFW,MAAM,QAIhB;IAED;;;OAGG;IACH,iBAFW,MAAM,MAAM,CAAC,QAIvB;IAED;;;;OAIG;IACH,wBAHW,WAAW,QAKrB;IAED;;OAEG;IACH,WAFY,MAAM,CAIjB;IAED;;;OAGG;IACH,YAFY,YAAY,GAAC,WAAW,CAInC;IAED;;OAEG;IACH,YAFY,MAAM,CAIjB;IAED;;;OAGG;IACH,WAFY,MAAM,CAIjB;CACF"}
+{"version":3,"file":"Buffer.d.ts","sourceRoot":"","sources":["Buffer.js"],"names":[],"mappings":"AAiIA;;;;GAIG;AACH,2CAHW,MAAM,GACL,uBAAuB,GAAC,sBAAsB,CAWzD;;;;;0BAhIS,MAAM;;;;;;;4BANT,aAAa;4BAAb,aAAa;6BAAb,aAAa;AAcpB;;;;;;;;;;;;;;;GAeG;AACH;IACE;;;;OAIG;IACH,kBAJW,MAAM,8BAwBhB;IAnBC;;;OAGG;IACH,cAAiB;IAEjB;;;OAGG;IACH,aAAgB;IAIhB;;;OAGG;IACH,cAAkE;IAGpE;;;;OAIG;IACH,aAHW,MAAM,GACL,gBAAgB,CAK3B;IAED;;;;OAIG;IACH,iBAHW,MAAM,MAAM,CAAC,GACZ,gBAAgB,CAK3B;IAED;;;;;OAKG;IACH,wBAJW,WAAW,GAEV,gBAAgB,CAK3B;IAED;;OAEG;IACH,WAFY,MAAM,CAIjB;IAED;;;OAGG;IACH,YAFY,YAAY,GAAC,WAAW,CAInC;IAED;;OAEG;IACH,YAFY,MAAM,CAIjB;IAED;;;OAGG;IACH,WAFY,MAAM,CAIjB;CACF"}

package/webgl/Buffer.js

@@ -68,26 +68,32 @@ class WebGLArrayBuffer {
   /**
    * Populates the buffer with an array of the given size (all values will be zeroes).
    * @param {number} size Array size
+   * @return {WebGLArrayBuffer} This
    */
   ofSize(size) {
     this.array = new (getArrayClassForType(this.type))(size);
+    return this;
   }
 
   /**
    * Populates the buffer with an array of the given size.
    * @param {Array<number>} array Numerical array
+   * @return {WebGLArrayBuffer} This
    */
   fromArray(array) {
     this.array = getArrayClassForType(this.type).from(array);
+    return this;
   }
 
   /**
    * Populates the buffer with a raw binary array buffer.
    * @param {ArrayBuffer} buffer Raw binary buffer to populate the array with. Note that this buffer must have been
    * initialized for the same typed array class.
+   * @return {WebGLArrayBuffer} This
    */
   fromArrayBuffer(buffer) {
     this.array = new (getArrayClassForType(this.type))(buffer);
+    return this;
   }
 
   /**

package/webgl/Helper.d.ts

@@ -24,7 +24,7 @@ export namespace DefaultUniform {
     const TIME: string;
     const ZOOM: string;
     const RESOLUTION: string;
-    const SIZE_PX: string;
+    const VIEWPORT_SIZE_PX: string;
     const PIXEL_RATIO: string;
 }
 /**
@@ -140,10 +140,10 @@ export type CanvasCacheItem = {
      */
     users: number;
 };
-import { UNSIGNED_BYTE } from "../webgl.js";
-import { UNSIGNED_SHORT } from "../webgl.js";
-import { UNSIGNED_INT } from "../webgl.js";
-import { FLOAT } from "../webgl.js";
+import { UNSIGNED_BYTE } from '../webgl.js';
+import { UNSIGNED_SHORT } from '../webgl.js';
+import { UNSIGNED_INT } from '../webgl.js';
+import { FLOAT } from '../webgl.js';
 /**
  * @classdesc
  * This class is intended to provide low-level functions related to WebGL rendering, so that accessing
@@ -324,14 +324,14 @@ declare class WebGLHelper extends Disposable {
     private tmpMat4_;
     /**
      * @private
-     * @type {Object<string, WebGLUniformLocation>}
+     * @type {Object<string, Object<string, WebGLUniformLocation>>}
      */
-    private uniformLocations_;
+    private uniformLocationsByProgram_;
     /**
      * @private
-     * @type {Object<string, number>}
+     * @type {Object<string, Object<string, number>>}
      */
-    private attribLocations_;
+    private attribLocationsByProgram_;
     /**
      * Holds info about custom uniforms used in the post processing pass.
      * If the uniform is a texture, the WebGL Texture object will be stored here.
@@ -400,6 +400,13 @@ declare class WebGLHelper extends Disposable {
      * @param {boolean} [disableAlphaBlend] If true, no alpha blending will happen.
      */
     prepareDraw(frameState: import("../Map.js").FrameState, disableAlphaBlend?: boolean | undefined): void;
+    /**
+     * Prepare a program to use a texture.
+     * @param {WebGLTexture} texture The texture.
+     * @param {number} slot The texture slot.
+     * @param {string} uniformName The corresponding uniform name.
+     */
+    bindTexture(texture: WebGLTexture, slot: number, uniformName: string): void;
     /**
      * Clear the render target & bind it for future draw operations.
      * This is similar to `prepareDraw`, only post processes will not be applied.
@@ -478,8 +485,8 @@ declare class WebGLHelper extends Disposable {
      */
     getAttributeLocation(name: string): number;
     /**
-     * Modifies the given transform to apply the rotation/translation/scaling of the given frame state.
-     * The resulting transform can be used to convert world space coordinates to view coordinates.
+     * Sets the given transform to apply the rotation/translation/scaling of the given frame state.
+     * The resulting transform can be used to convert world space coordinates to view coordinates in the [-1, 1] range.
      * @param {import("../Map.js").FrameState} frameState Frame state.
      * @param {import("../transform").Transform} transform Transform to update.
      * @return {import("../transform").Transform} The updated transform object.
@@ -549,5 +556,5 @@ declare class WebGLHelper extends Disposable {
      */
     createTexture(size: Array<number>, data?: HTMLCanvasElement | HTMLImageElement | ImageData | undefined, texture?: WebGLTexture | undefined): WebGLTexture;
 }
-import Disposable from "../Disposable.js";
+import Disposable from '../Disposable.js';
 //# sourceMappingURL=Helper.d.ts.map

package/webgl/Helper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Helper.d.ts","sourceRoot":"","sources":["Helper.js"],"names":[],"mappings":"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"}
+{"version":3,"file":"Helper.d.ts","sourceRoot":"","sources":["Helper.js"],"names":[],"mappings":"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"}

package/webgl/Helper.js

@@ -49,7 +49,7 @@ export const DefaultUniform = {
   TIME: 'u_time',
   ZOOM: 'u_zoom',
   RESOLUTION: 'u_resolution',
-  SIZE_PX: 'u_sizePx',
+  VIEWPORT_SIZE_PX: 'u_viewportSizePx',
   PIXEL_RATIO: 'u_pixelRatio',
 };
 
@@ -389,15 +389,15 @@ class WebGLHelper extends Disposable {
 
     /**
      * @private
-     * @type {Object<string, WebGLUniformLocation>}
+     * @type {Object<string, Object<string, WebGLUniformLocation>>}
      */
-    this.uniformLocations_ = {};
+    this.uniformLocationsByProgram_ = {};
 
     /**
      * @private
-     * @type {Object<string, number>}
+     * @type {Object<string, Object<string, number>>}
      */
-    this.attribLocations_ = {};
+    this.attribLocationsByProgram_ = {};
 
     /**
      * Holds info about custom uniforms used in the post processing pass.
@@ -410,8 +410,6 @@ class WebGLHelper extends Disposable {
       this.setUniforms(options.uniforms);
     }
 
-    const gl = this.getGL();
-
     /**
      * An array of PostProcessingPass objects is kept in this variable, built from the steps provided in the
      * options. If no post process was given, a default one is used (so as not to have to make an exception to
@@ -420,16 +418,17 @@ class WebGLHelper extends Disposable {
      * @private
      */
     this.postProcessPasses_ = options.postProcesses
-      ? options.postProcesses.map(function (options) {
-          return new WebGLPostProcessingPass({
-            webGlContext: gl,
-            scaleRatio: options.scaleRatio,
-            vertexShader: options.vertexShader,
-            fragmentShader: options.fragmentShader,
-            uniforms: options.uniforms,
-          });
-        })
-      : [new WebGLPostProcessingPass({webGlContext: gl})];
+      ? options.postProcesses.map(
+          (options) =>
+            new WebGLPostProcessingPass({
+              webGlContext: this.gl_,
+              scaleRatio: options.scaleRatio,
+              vertexShader: options.vertexShader,
+              fragmentShader: options.fragmentShader,
+              uniforms: options.uniforms,
+            })
+        )
+      : [new WebGLPostProcessingPass({webGlContext: this.gl_})];
 
     /**
      * @type {string|null}
@@ -455,7 +454,6 @@ class WebGLHelper extends Disposable {
         value: uniforms[name],
       });
     }
-    this.uniformLocations_ = {};
   }
 
   /**
@@ -488,7 +486,7 @@ class WebGLHelper extends Disposable {
    * @param {import("./Buffer").default} buffer Buffer.
    */
   bindBuffer(buffer) {
-    const gl = this.getGL();
+    const gl = this.gl_;
     const bufferKey = getUid(buffer);
     let bufferCache = this.bufferCache_[bufferKey];
     if (!bufferCache) {
@@ -508,7 +506,7 @@ class WebGLHelper extends Disposable {
    * @param {import("./Buffer").default} buffer Buffer.
    */
   flushBufferData(buffer) {
-    const gl = this.getGL();
+    const gl = this.gl_;
     this.bindBuffer(buffer);
     gl.bufferData(buffer.getType(), buffer.getArray(), buffer.getUsage());
   }
@@ -517,7 +515,7 @@ class WebGLHelper extends Disposable {
    * @param {import("./Buffer.js").default} buf Buffer.
    */
   deleteBuffer(buf) {
-    const gl = this.getGL();
+    const gl = this.gl_;
     const bufferKey = getUid(buf);
     const bufferCacheEntry = this.bufferCache_[bufferKey];
     if (bufferCacheEntry && !gl.isContextLost()) {
@@ -553,15 +551,20 @@ class WebGLHelper extends Disposable {
    * @param {boolean} [disableAlphaBlend] If true, no alpha blending will happen.
    */
   prepareDraw(frameState, disableAlphaBlend) {
-    const gl = this.getGL();
+    const gl = this.gl_;
     const canvas = this.getCanvas();
     const size = frameState.size;
     const pixelRatio = frameState.pixelRatio;
 
-    canvas.width = size[0] * pixelRatio;
-    canvas.height = size[1] * pixelRatio;
-    canvas.style.width = size[0] + 'px';
-    canvas.style.height = size[1] + 'px';
+    if (
+      canvas.width !== size[0] * pixelRatio ||
+      canvas.height !== size[1] * pixelRatio
+    ) {
+      canvas.width = size[0] * pixelRatio;
+      canvas.height = size[1] * pixelRatio;
+      canvas.style.width = size[0] + 'px';
+      canvas.style.height = size[1] + 'px';
+    }
 
     // loop backwards in post processes list
     for (let i = this.postProcessPasses_.length - 1; i >= 0; i--) {
@@ -577,6 +580,19 @@ class WebGLHelper extends Disposable {
     gl.blendFunc(gl.ONE, disableAlphaBlend ? gl.ZERO : gl.ONE_MINUS_SRC_ALPHA);
   }
 
+  /**
+   * Prepare a program to use a texture.
+   * @param {WebGLTexture} texture The texture.
+   * @param {number} slot The texture slot.
+   * @param {string} uniformName The corresponding uniform name.
+   */
+  bindTexture(texture, slot, uniformName) {
+    const gl = this.gl_;
+    gl.activeTexture(gl.TEXTURE0 + slot);
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.uniform1i(this.getUniformLocation(uniformName), slot);
+  }
+
   /**
    * Clear the render target & bind it for future draw operations.
    * This is similar to `prepareDraw`, only post processes will not be applied.
@@ -586,7 +602,7 @@ class WebGLHelper extends Disposable {
    * @param {boolean} [disableAlphaBlend] If true, no alpha blending will happen.
    */
   prepareDrawToRenderTarget(frameState, renderTarget, disableAlphaBlend) {
-    const gl = this.getGL();
+    const gl = this.gl_;
     const size = renderTarget.getSize();
 
     gl.bindFramebuffer(gl.FRAMEBUFFER, renderTarget.getFramebuffer());
@@ -604,7 +620,7 @@ class WebGLHelper extends Disposable {
    * @param {number} end End index.
    */
   drawElements(start, end) {
-    const gl = this.getGL();
+    const gl = this.gl_;
     this.getExtension('OES_element_index_uint');
 
     const elementType = gl.UNSIGNED_INT;
@@ -691,7 +707,10 @@ class WebGLHelper extends Disposable {
       frameState.viewState.resolution
     );
     this.setUniformFloatValue(DefaultUniform.PIXEL_RATIO, pixelRatio);
-    this.setUniformFloatVec2(DefaultUniform.SIZE_PX, [size[0], size[1]]);
+    this.setUniformFloatVec2(DefaultUniform.VIEWPORT_SIZE_PX, [
+      size[0],
+      size[1],
+    ]);
   }
 
   /**
@@ -699,7 +718,7 @@ class WebGLHelper extends Disposable {
    * @param {import("../Map.js").FrameState} frameState Frame state.
    */
   applyUniforms(frameState) {
-    const gl = this.getGL();
+    const gl = this.gl_;
 
     let value;
     let textureSlot = 0;
@@ -790,11 +809,9 @@ class WebGLHelper extends Disposable {
    * @param {import("../Map.js").FrameState} frameState Frame state.
    */
   useProgram(program, frameState) {
-    const gl = this.getGL();
+    const gl = this.gl_;
     gl.useProgram(program);
     this.currentProgram_ = program;
-    this.uniformLocations_ = {};
-    this.attribLocations_ = {};
     this.applyFrameState(frameState);
     this.applyUniforms(frameState);
   }
@@ -809,7 +826,7 @@ class WebGLHelper extends Disposable {
    * @return {WebGLShader} Shader object
    */
   compileShader(source, type) {
-    const gl = this.getGL();
+    const gl = this.gl_;
     const shader = gl.createShader(type);
     gl.shaderSource(shader, source);
     gl.compileShader(shader);
@@ -823,7 +840,7 @@ class WebGLHelper extends Disposable {
    * @return {WebGLProgram} Program
    */
   getProgram(fragmentShaderSource, vertexShaderSource) {
-    const gl = this.getGL();
+    const gl = this.gl_;
 
     const fragmentShader = this.compileShader(
       fragmentShaderSource,
@@ -857,8 +874,8 @@ class WebGLHelper extends Disposable {
     gl.deleteShader(vertexShader);
 
     if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-      const message = `GL program linking failed: ${gl.getShaderInfoLog(
-        vertexShader
+      const message = `GL program linking failed: ${gl.getProgramInfoLog(
+        program
       )}`;
       throw new Error(message);
     }
@@ -872,13 +889,15 @@ class WebGLHelper extends Disposable {
    * @return {WebGLUniformLocation} uniformLocation
    */
   getUniformLocation(name) {
-    if (this.uniformLocations_[name] === undefined) {
-      this.uniformLocations_[name] = this.getGL().getUniformLocation(
-        this.currentProgram_,
-        name
-      );
+    const programUid = getUid(this.currentProgram_);
+    if (this.uniformLocationsByProgram_[programUid] === undefined) {
+      this.uniformLocationsByProgram_[programUid] = {};
+    }
+    if (this.uniformLocationsByProgram_[programUid][name] === undefined) {
+      this.uniformLocationsByProgram_[programUid][name] =
+        this.gl_.getUniformLocation(this.currentProgram_, name);
     }
-    return this.uniformLocations_[name];
+    return this.uniformLocationsByProgram_[programUid][name];
   }
 
   /**
@@ -887,18 +906,20 @@ class WebGLHelper extends Disposable {
    * @return {number} attribLocation
    */
   getAttributeLocation(name) {
-    if (this.attribLocations_[name] === undefined) {
-      this.attribLocations_[name] = this.getGL().getAttribLocation(
-        this.currentProgram_,
-        name
-      );
+    const programUid = getUid(this.currentProgram_);
+    if (this.attribLocationsByProgram_[programUid] === undefined) {
+      this.attribLocationsByProgram_[programUid] = {};
+    }
+    if (this.attribLocationsByProgram_[programUid][name] === undefined) {
+      this.attribLocationsByProgram_[programUid][name] =
+        this.gl_.getAttribLocation(this.currentProgram_, name);
     }
-    return this.attribLocations_[name];
+    return this.attribLocationsByProgram_[programUid][name];
   }
 
   /**
-   * Modifies the given transform to apply the rotation/translation/scaling of the given frame state.
-   * The resulting transform can be used to convert world space coordinates to view coordinates.
+   * Sets the given transform to apply the rotation/translation/scaling of the given frame state.
+   * The resulting transform can be used to convert world space coordinates to view coordinates in the [-1, 1] range.
    * @param {import("../Map.js").FrameState} frameState Frame state.
    * @param {import("../transform").Transform} transform Transform to update.
    * @return {import("../transform").Transform} The updated transform object.
@@ -908,8 +929,6 @@ class WebGLHelper extends Disposable {
     const rotation = frameState.viewState.rotation;
     const resolution = frameState.viewState.resolution;
     const center = frameState.viewState.center;
-
-    resetTransform(transform);
     composeTransform(
       transform,
       0,
@@ -929,7 +948,7 @@ class WebGLHelper extends Disposable {
    * @param {number} value Value
    */
   setUniformFloatValue(uniform, value) {
-    this.getGL().uniform1f(this.getUniformLocation(uniform), value);
+    this.gl_.uniform1f(this.getUniformLocation(uniform), value);
   }
 
   /**
@@ -938,7 +957,7 @@ class WebGLHelper extends Disposable {
    * @param {Array<number>} value Array of length 4.
    */
   setUniformFloatVec2(uniform, value) {
-    this.getGL().uniform2fv(this.getUniformLocation(uniform), value);
+    this.gl_.uniform2fv(this.getUniformLocation(uniform), value);
   }
 
   /**
@@ -947,7 +966,7 @@ class WebGLHelper extends Disposable {
    * @param {Array<number>} value Array of length 4.
    */
   setUniformFloatVec4(uniform, value) {
-    this.getGL().uniform4fv(this.getUniformLocation(uniform), value);
+    this.gl_.uniform4fv(this.getUniformLocation(uniform), value);
   }
 
   /**
@@ -956,11 +975,7 @@ class WebGLHelper extends Disposable {
    * @param {Array<number>} value Matrix value
    */
   setUniformMatrixValue(uniform, value) {
-    this.getGL().uniformMatrix4fv(
-      this.getUniformLocation(uniform),
-      false,
-      value
-    );
+    this.gl_.uniformMatrix4fv(this.getUniformLocation(uniform), false, value);
   }
 
   /**
@@ -979,15 +994,8 @@ class WebGLHelper extends Disposable {
     if (location < 0) {
       return;
     }
-    this.getGL().enableVertexAttribArray(location);
-    this.getGL().vertexAttribPointer(
-      location,
-      size,
-      type,
-      false,
-      stride,
-      offset
-    );
+    this.gl_.enableVertexAttribArray(location);
+    this.gl_.vertexAttribPointer(location, size, type, false, stride, offset);
   }
 
   /**
@@ -1038,7 +1046,7 @@ class WebGLHelper extends Disposable {
    * @return {WebGLTexture} The generated texture
    */
   createTexture(size, data, texture) {
-    const gl = this.getGL();
+    const gl = this.gl_;
     texture = texture || gl.createTexture();
 
     // set params & size