Enable WebGL extensions when required

doc/errors/index.md

@@ -233,10 +233,6 @@ Cannot determine IIIF Image API version from provided image information JSON.
 
 A `WebGLArrayBuffer` must either be of type `ELEMENT_ARRAY_BUFFER` or `ARRAY_BUFFER`.
 
-### 63
-
-Support for the `OES_element_index_uint`, `OES_texture_float`, and `OES_texture_float_linear` WebGL extensions are mandatory for WebGL layers.
-
 ### 64
 
 Layer opacity must be a number.

src/ol/webgl/Helper.js

@@ -10,9 +10,7 @@ import {
   UNSIGNED_INT,
   UNSIGNED_SHORT,
   getContext,
-  getSupportedExtensions,
 } from '../webgl.js';
-import {assert} from '../asserts.js';
 import {clear} from '../obj.js';
 import {
   compose as composeTransform,
@@ -23,7 +21,6 @@ import {
 } from '../transform.js';
 import {create, fromTransform} from '../vec/mat4.js';
 import {getUid} from '../util.js';
-import {includes} from '../array.js';
 
 /**
  * @typedef {Object} BufferCacheEntry
@@ -272,20 +269,18 @@ class WebGLHelper extends Disposable {
      */
     this.bufferCache_ = {};
 
+    /**
+     * @private
+     * @type {Object<string, Object>}
+     */
+    this.extensionCache_ = {};
+
     /**
      * @private
      * @type {WebGLProgram}
      */
     this.currentProgram_ = null;
 
-    assert(includes(getSupportedExtensions(), 'OES_element_index_uint'), 63);
-    assert(includes(getSupportedExtensions(), 'OES_texture_float'), 63);
-    assert(includes(getSupportedExtensions(), 'OES_texture_float_linear'), 63);
-
-    gl.getExtension('OES_element_index_uint');
-    gl.getExtension('OES_texture_float');
-    gl.getExtension('OES_texture_float_linear');
-
     this.canvas_.addEventListener(
       ContextEventType.LOST,
       this.boundHandleWebGLContextLost_
@@ -373,6 +368,21 @@ class WebGLHelper extends Disposable {
     this.startTime_ = Date.now();
   }
 
+  /**
+   * Get a WebGL extension.  If the extension is not supported, null is returned.
+   * Extensions are cached after they are enabled for the first time.
+   * @param {string} name The extension name.
+   * @return {Object} The extension or null if not supported.
+   */
+  getExtension(name) {
+    if (name in this.extensionCache_) {
+      return this.extensionCache_[name];
+    }
+    const extension = this.gl_.getExtension(name);
+    this.extensionCache_[name] = extension;
+    return extension;
+  }
+
   /**
    * Just bind the buffer if it's in the cache. Otherwise create
    * the WebGL buffer, bind it, populate it, and add an entry to
@@ -511,6 +521,8 @@ class WebGLHelper extends Disposable {
    */
   drawElements(start, end) {
     const gl = this.getGL();
+    this.getExtension('OES_element_index_uint');
+
     const elementType = gl.UNSIGNED_INT;
     const elementSize = 4;
 

src/ol/webgl/TileTexture.js

@@ -30,13 +30,14 @@ function uploadImageTexture(gl, texture, image) {
 }
 
 /**
- * @param {WebGLRenderingContext} gl The WebGL context.
+ * @param {import("./Helper.js").default} helper The WebGL helper.
  * @param {WebGLTexture} texture The texture.
  * @param {import("../DataTile.js").Data} data The pixel data.
  * @param {import("../size.js").Size} size The pixel size.
  * @param {number} bandCount The band count.
  */
-function uploadDataTexture(gl, texture, data, size, bandCount) {
+function uploadDataTexture(helper, texture, data, size, bandCount) {
+  const gl = helper.getGL();
   bindAndConfigure(gl, texture);
 
   let format;
@@ -62,7 +63,14 @@ function uploadDataTexture(gl, texture, data, size, bandCount) {
     }
   }
 
-  const texType = data instanceof Float32Array ? gl.FLOAT : gl.UNSIGNED_BYTE;
+  let textureType;
+  if (data instanceof Float32Array) {
+    textureType = gl.FLOAT;
+    helper.getExtension('OES_texture_float');
+    helper.getExtension('OES_texture_float_linear');
+  } else {
+    textureType = gl.UNSIGNED_BYTE;
+  }
 
   gl.texImage2D(
     gl.TEXTURE_2D,
@@ -72,7 +80,7 @@ function uploadDataTexture(gl, texture, data, size, bandCount) {
     size[1],
     0,
     format,
-    texType,
+    textureType,
     data
   );
 }
@@ -140,7 +148,8 @@ class TileTexture extends EventTarget {
   }
 
   uploadTile_() {
-    const gl = this.helper_.getGL();
+    const helper = this.helper_;
+    const gl = helper.getGL();
     const tile = this.tile;
 
     if (tile instanceof ImageTile) {
@@ -163,7 +172,7 @@ class TileTexture extends EventTarget {
     if (textureCount === 1) {
       const texture = gl.createTexture();
       this.textures.push(texture);
-      uploadDataTexture(gl, texture, data, this.size, this.bandCount);
+      uploadDataTexture(helper, texture, data, this.size, this.bandCount);
       return;
     }
 
@@ -197,7 +206,7 @@ class TileTexture extends EventTarget {
         textureIndex < textureCount - 1 ? 4 : this.bandCount % 4;
       const texture = this.textures[textureIndex];
       const data = textureDataArrays[textureIndex];
-      uploadDataTexture(gl, texture, data, this.size, bandCount);
+      uploadDataTexture(helper, texture, data, this.size, bandCount);
     }
   }