Webgl helper / rework create texture utils

Now only one util is available: `createTexture`, which
is tested and allows binding an image and reusing an existing texture.

src/ol/webgl/Helper.js

@@ -742,57 +742,36 @@ class WebGLHelper extends Disposable {
   // TODO: shutdown program
 
   /**
-   * TODO: these are not used and should be reworked
+   * Will create or reuse a given webgl texture and apply the given size. If no image data
-   * @param {number=} opt_wrapS wrapS.
+   * specified, the texture will be empty, otherwise image data will be used and the `size`
-   * @param {number=} opt_wrapT wrapT.
+   * parameter will be ignored.
-   * @return {WebGLTexture} The texture.
+   * Note: wrap parameters are set to clamp to edge, min filter is set to linear.
+   * @param {Array<number>} size Expected size of the texture
+   * @param {ImageData|HTMLImageElement|HTMLCanvasElement} [opt_data] Image data/object to bind to the texture
+   * @param {WebGLTexture} [opt_texture] Existing texture to reuse
+   * @return {WebGLTexture} The generated texture
+   * @api
    */
-  createTextureInternal(opt_wrapS, opt_wrapT) {
+  createTexture(size, opt_data, opt_texture) {
     const gl = this.getGL();
-    const texture = gl.createTexture();
+    const texture = opt_texture || gl.createTexture();
+
+    // set params & size
+    const level = 0;
+    const internalFormat = gl.RGBA;
+    const border = 0;
+    const format = gl.RGBA;
+    const type = gl.UNSIGNED_BYTE;
     gl.bindTexture(gl.TEXTURE_2D, texture);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    if (opt_data) {
+      gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, format, type, opt_data);
+    } else {
+      gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, size[0], size[1], border, format, type, null);
+    }
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 
-    if (opt_wrapS !== undefined) {
-      gl.texParameteri(
-        gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, opt_wrapS);
-    }
-    if (opt_wrapT !== undefined) {
-      gl.texParameteri(
-        gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, opt_wrapT);
-    }
-
-    return texture;
-  }
-
-  /**
-   * TODO: these are not used and should be reworked
-   * @param {number} width Width.
-   * @param {number} height Height.
-   * @param {number=} opt_wrapS wrapS.
-   * @param {number=} opt_wrapT wrapT.
-   * @return {WebGLTexture} The texture.
-   */
-  createEmptyTexture(width, height, opt_wrapS, opt_wrapT) {
-    const gl = this.getGL();
-    const texture = this.createTextureInternal(opt_wrapS, opt_wrapT);
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
-    return texture;
-  }
-
-
-  /**
-   * TODO: these are not used and should be reworked
-   * @param {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} image Image.
-   * @param {number=} opt_wrapS wrapS.
-   * @param {number=} opt_wrapT wrapT.
-   * @return {WebGLTexture} The texture.
-   */
-  createTexture(image, opt_wrapS, opt_wrapT) {
-    const gl = this.getGL();
-    const texture = this.createTextureInternal(opt_wrapS, opt_wrapT);
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
     return texture;
   }
 }

test/spec/ol/webgl/helper.test.js

@@ -220,5 +220,74 @@ describe('ol.webgl.WebGLHelper', function() {
       });
     });
 
+    describe('#createTexture', function() {
+      let h;
+      beforeEach(function() {
+        h = new WebGLHelper();
+      });
+
+      it('creates an empty texture from scratch', function() {
+        const width = 4;
+        const height = 4;
+        const t = h.createTexture([width, height]);
+        const gl = h.getGL();
+
+        const fb = gl.createFramebuffer();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, t, 0);
+        const data = new Uint8Array(width * height * 4);
+        gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, data);
+        gl.deleteFramebuffer(fb);
+
+        expect(data[0]).to.eql(0);
+        expect(data[1]).to.eql(0);
+        expect(data[2]).to.eql(0);
+        expect(data[3]).to.eql(0);
+        expect(data[4]).to.eql(0);
+        expect(data[5]).to.eql(0);
+        expect(data[6]).to.eql(0);
+        expect(data[7]).to.eql(0);
+      });
+
+      it('creates a texture from image data', function() {
+        const width = 4;
+        const height = 4;
+        const canvas = document.createElement('canvas');
+        const image = canvas.getContext('2d').createImageData(width, height);
+        for (let i = 0; i < image.data.length; i += 4) {
+          image.data[i] = 100;
+          image.data[i + 1] = 150;
+          image.data[i + 2] = 200;
+          image.data[i + 3] = 250;
+        }
+        const t = h.createTexture([width, height], image);
+        const gl = h.getGL();
+
+        const fb = gl.createFramebuffer();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, t, 0);
+        const data = new Uint8Array(width * height * 4);
+        gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, data);
+        gl.deleteFramebuffer(fb);
+
+        expect(data[0]).to.eql(100);
+        expect(data[1]).to.eql(150);
+        expect(data[2]).to.eql(200);
+        expect(data[3]).to.eql(250);
+        expect(data[4]).to.eql(100);
+        expect(data[5]).to.eql(150);
+        expect(data[6]).to.eql(200);
+        expect(data[7]).to.eql(250);
+      });
+
+      it('reuses a given texture', function() {
+        const width = 4;
+        const height = 4;
+        const gl = h.getGL();
+        const t1 = gl.createTexture();
+        const t2 = h.createTexture([width, height], undefined, t1);
+        expect(t1).to.be(t2);
+      });
+    });
   });
 });