Merge pull request #305 from gpujs/297-array-images

Closes #297 array of images

Author: robertleeplummerjr

README.md

@@ -170,6 +170,7 @@ myFunc();
 * 2d Array
 * 3d Array
 * HTML Image
+* Array of HTML Images
 To define an argument, simply add it to the kernel function like regular JavaScript.
 
 ### Input Examples
@@ -193,6 +194,34 @@ myFunc([1, 2, 3]);
 // Result: [1, 2, 3, 1, ... 1 ]
 ```
 
+An HTML Image:
+
+```js
+const myFunc = gpu.createKernel(function(image) {
+    const pixel = image[this.thread.y][this.thread.x];
+    this.color(pixel[0], pixel[1], pixel[2], pixel[3]);
+})
+  .setGraphical(true)
+  .setOutput([100]);
+    
+myFunc([1, 2, 3]);
+// Result: colorful image
+```
+
+An Array of HTML Images:
+
+```js
+const myFunc = gpu.createKernel(function(image) {
+    const pixel = image[this.thread.z][this.thread.y][this.thread.x];
+    this.color(pixel[0], pixel[1], pixel[2], pixel[3]);
+})
+  .setGraphical(true)
+  .setOutput([100]);
+    
+myFunc([1, 2, 3]);
+// Result: colorful image
+```
+
 ## Graphical Output
 
 Sometimes, you want to produce a `canvas` image instead of doing numeric computations. To achieve this, set the `graphical` flag to `true` and the output dimensions to `[width, height]`. The thread identifiers will now refer to the `x` and `y` coordinate of the pixel you are producing. Inside your kernel function, use `this.color(r,g,b)` or `this.color(r,g,b,a)` to specify the color of the pixel.

bin/gpu-core.js

@@ -4,8 +4,8 @@
  *
  * GPU Accelerated JavaScript
  *
- * @version 1.3.0
- * @date Mon Jun 04 2018 20:06:27 GMT-0400 (EDT)
+ * @version 1.4.0
+ * @date Tue Jun 05 2018 20:28:34 GMT-0400 (EDT)
  *
  * @license MIT
  * The MIT License

bin/gpu-core.min.js

@@ -336,8 +336,13 @@ module.exports = function (_KernelBase) {
 		value: function _processInputs() {
 			var result = [];
 			for (var i = 0; i < this.paramTypes.length; i++) {
-				if (this.paramTypes[i] === 'HTMLImage') {
-					result.push('  user_' + this.paramNames[i] + ' = this._imageTo2DArray(user_' + this.paramNames[i] + ')');
+				switch (this.paramTypes[i]) {
+					case 'HTMLImage':
+						result.push('  user_' + this.paramNames[i] + ' = this._imageTo2DArray(user_' + this.paramNames[i] + ')');
+						break;
+					case 'HTMLImageArray':
+						result.push('  user_' + this.paramNames[i] + ' = this._imageTo3DArray(user_' + this.paramNames[i] + ')');
+						break;
 				}
 			}
 			return result.join(';\n');
@@ -347,15 +352,24 @@ module.exports = function (_KernelBase) {
 		value: function _imageTo2DArray(image) {
 			this._canvasCtx.drawImage(image, 0, 0, image.width, image.height);
 			var pixelsData = this._canvasCtx.getImageData(0, 0, image.width, image.height).data;
-			var result = new Array(image.height);
+			var imageArray = new Array(image.height);
 			var index = 0;
 			for (var y = 0; y < image.height; y++) {
-				result[y] = new Array(image.width);
+				imageArray[y] = new Array(image.width);
 				for (var x = 0; x < image.width; x++) {
-					result[y][x] = [pixelsData[index++] / 255, pixelsData[index++] / 255, pixelsData[index++] / 255, pixelsData[index++] / 255];
+					imageArray[y][x] = [pixelsData[index++] / 255, pixelsData[index++] / 255, pixelsData[index++] / 255, pixelsData[index++] / 255];
 				}
 			}
-			return result;
+			return imageArray;
+		}
+	}, {
+		key: '_imageTo3DArray',
+		value: function _imageTo3DArray(images) {
+			var imagesArray = new Array(images.length);
+			for (var i = 0; i < images.length; i++) {
+				imagesArray[i] = this._imageTo2DArray(images[i]);
+			}
+			return imagesArray;
 		}
 	}], [{
 		key: 'compileKernel',

bin/gpu.js

@@ -718,7 +718,7 @@ module.exports = function (_FunctionNodeBase) {
 				}
 				var retDeclaration = [];
 				this.astGeneric(declaration, retDeclaration, funcParam);
-				if (retDeclaration[2] === 'getImage(') {
+				if (retDeclaration[2] === 'getImage2D(' || retDeclaration[2] === 'getImage3D(') {
 					if (i === 0) {
 						retArr.push('vec4 ');
 					}
@@ -993,9 +993,28 @@ module.exports = function (_FunctionNodeBase) {
 								retArr.push(mNode.property.raw);
 								retArr.push(']');
 								break;
+							case 'HTMLImageArray':
+								// Get from image
+								retArr.push('getImage3D(');
+								this.astGeneric(mNode.object, retArr, funcParam);
+								retArr.push(', vec2(');
+								this.astGeneric(mNode.object, retArr, funcParam);
+								retArr.push('Size[0],');
+								this.astGeneric(mNode.object, retArr, funcParam);
+								retArr.push('Size[1]), vec3(');
+								this.astGeneric(mNode.object, retArr, funcParam);
+								retArr.push('Dim[0],');
+								this.astGeneric(mNode.object, retArr, funcParam);
+								retArr.push('Dim[1],');
+								this.astGeneric(mNode.object, retArr, funcParam);
+								retArr.push('Dim[2]');
+								retArr.push('), ');
+								this.astGeneric(mNode.property, retArr, funcParam);
+								retArr.push(')');
+								break;
 							case 'HTMLImage':
 								// Get from image
-								retArr.push('getImage(');
+								retArr.push('getImage2D(');
 								this.astGeneric(mNode.object, retArr, funcParam);
 								retArr.push(', vec2(');
 								this.astGeneric(mNode.object, retArr, funcParam);

bin/gpu.min.js

@@ -1041,6 +1041,8 @@ module.exports = function (_KernelBase) {
 						result.push('uniform highp sampler2D user_' + paramName, 'uniform highp vec2 user_' + paramName + 'Size', 'uniform highp vec3 user_' + paramName + 'Dim');
 					} else if (paramType === 'Number') {
 						result.push('uniform highp float user_' + paramName);
+					} else {
+						throw new Error('Param type ' + paramType + ' not supported in WebGL, only WebGL2');
 					}
 				}
 			}

dist/backend/cpu/kernel.js

@@ -7,7 +7,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
 var FunctionBuilderBase = require('../function-builder-base');
-var WebGLFunctionNode = require('./function-node');
+var WebGL2FunctionNode = require('./function-node');
 
 /**
  * @class WebGLFunctionBuilder
@@ -25,7 +25,7 @@ module.exports = function (_FunctionBuilderBase) {
 
     var _this = _possibleConstructorReturn(this, (WebGL2FunctionBuilder.__proto__ || Object.getPrototypeOf(WebGL2FunctionBuilder)).call(this));
 
-    _this.Node = WebGLFunctionNode;
+    _this.Node = WebGL2FunctionNode;
     return _this;
   }