fix: #553 call gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); on every texture type and add unit tests

fix: Framebuffer loss after texture is deleted
fix: Split up array and primitive (index.js) types of KernelValues and introduce .setup()
  * This was needed to handle .toArray() from the fix from #553
fix: Performance fix, define texture types in `kernelValue.setup()`, rather than on every `kernelValue.updateValue()`

Author: robertleeplummerjr

dist/gpu-browser-core.js

@@ -1,6 +1,6 @@
 {
   "name": "gpu.js",
-  "version": "2.4.6",
+  "version": "2.4.7",
   "description": "GPU Accelerated JavaScript",
   "engines": {
     "node": ">=8.0.0"

dist/gpu-browser-core.min.js

@@ -321,6 +321,7 @@ function getToArrayString(kernelResult, textureName) {
  */
 function findKernelValue(argument, kernelValues, values, context, uploadedValues) {
   if (argument === null) return null;
+  if (kernelValues === null) return null;
   switch (typeof argument) {
     case 'boolean':
     case 'number':

dist/gpu-browser.js

@@ -24,24 +24,26 @@ class GLTexture extends Texture {
     }
   }
 
+  /**
+   * @private
+   */
   cloneTexture() {
     this.texture._refs--;
     const { context: gl, size, texture } = this;
     const existingFramebuffer = gl.getParameter(gl.FRAMEBUFFER_BINDING);
-    if (!texture._framebuffer) {
-      texture._framebuffer = gl.createFramebuffer();
+    if (!this._framebuffer) {
+      this._framebuffer = gl.createFramebuffer();
     }
-    texture._framebuffer.width = size[0];
-    texture._framebuffer.width = size[1];
-    gl.bindFramebuffer(gl.FRAMEBUFFER, texture._framebuffer);
+    this._framebuffer.width = size[0];
+    this._framebuffer.height = size[1];
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this._framebuffer);
     selectTexture(gl, texture);
     gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
     const target = gl.createTexture();
     selectTexture(gl, target);
     gl.texImage2D(gl.TEXTURE_2D, 0, this.internalFormat, size[0], size[1], 0, this.textureFormat, this.textureType, null);
     gl.copyTexSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 0, 0, size[0], size[1]);
     target._refs = 1;
-    target._framebuffer = texture._framebuffer;
     this.texture = target;
     if (existingFramebuffer) {
       gl.bindFramebuffer(gl.FRAMEBUFFER, existingFramebuffer);
@@ -50,8 +52,9 @@ class GLTexture extends Texture {
 
   delete() {
     super.delete();
-    if (this.texture._refs === 0 && this.texture._framebuffer) {
-      this.context.deleteFramebuffer(this.texture._framebuffer);
+    if (this.texture._refs === 0 && this._framebuffer) {
+      this.context.deleteFramebuffer(this._framebuffer);
+      this._framebuffer = null;
     }
   }
 }

dist/gpu-browser.min.js

@@ -0,0 +1,88 @@
+const { WebGLKernelValue } = require('./index');
+const { Input } = require('../../../input');
+
+/**
+ * @abstract
+ */
+class WebGLKernelArray extends WebGLKernelValue {
+  /**
+   *
+   * @param {number} width
+   * @param {number} height
+   */
+  checkSize(width, height) {
+    if (!this.kernel.validate) return;
+    const { maxTextureSize } = this.kernel.constructor.features;
+    if (width > maxTextureSize || height > maxTextureSize) {
+      if (width > height) {
+        throw new Error(`Argument width of ${width} larger than maximum size of ${maxTextureSize} for your GPU`);
+      } else {
+        throw new Error(`Argument height of ${height} larger than maximum size of ${maxTextureSize} for your GPU`);
+      }
+    }
+  }
+
+  setup() {
+    this.requestTexture();
+    this.setupTexture();
+    this.defineTexture();
+  }
+
+  requestTexture() {
+    this.texture = this.onRequestTexture();
+  }
+
+  defineTexture() {
+    const { context: gl } = this;
+    gl.activeTexture(this.contextHandle);
+    gl.bindTexture(gl.TEXTURE_2D, this.texture);
+    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);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+  }
+
+  setupTexture() {
+    this.contextHandle = this.onRequestContextHandle();
+    this.index = this.onRequestIndex();
+    this.dimensionsId = this.id + 'Dim';
+    this.sizeId = this.id + 'Size';
+  }
+
+  /**
+   * bit storage ratio of source to target 'buffer', i.e. if 8bit array -> 32bit tex = 4
+   * @param value
+   * @returns {number}
+   */
+  getBitRatio(value) {
+    if (Array.isArray(value[0])) {
+      return this.getBitRatio(value[0]);
+    } else if (value.constructor === Input) {
+      return this.getBitRatio(value.value);
+    }
+    switch (value.constructor) {
+      case Uint8ClampedArray:
+      case Uint8Array:
+      case Int8Array:
+        return 1;
+      case Uint16Array:
+      case Int16Array:
+        return 2;
+      case Float32Array:
+      case Int32Array:
+      default:
+        return 4;
+    }
+  }
+
+  destroy() {
+    if (this.prevArg) {
+      this.prevArg.delete();
+    }
+    this.context.deleteTexture(this.texture);
+  }
+}
+
+module.exports = {
+  WebGLKernelArray
+};

package-lock.json

@@ -1,13 +1,12 @@
 const { utils } = require('../../../utils');
-const { WebGLKernelValue } = require('./index');
+const { WebGLKernelArray } = require('./array');
 
-class WebGLKernelValueHTMLImage extends WebGLKernelValue {
+class WebGLKernelValueHTMLImage extends WebGLKernelArray {
   constructor(value, settings) {
     super(value, settings);
     const { width, height } = value;
     this.checkSize(width, height);
     this.dimensions = [width, height, 1];
-    this.requestTexture();
     this.textureSize = [width, height];
     this.uploadValue = value;
   }
@@ -32,10 +31,6 @@ class WebGLKernelValueHTMLImage extends WebGLKernelValue {
     const { context: gl } = this;
     gl.activeTexture(this.contextHandle);
     gl.bindTexture(gl.TEXTURE_2D, this.texture);
-    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);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
     gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.uploadValue = inputImage);
     this.kernel.setUniform1i(this.id, this.index);