Add graphical mode for cpu

fuzzie360 · fuzzie360 · commit 7520e31b0235 · 2016-02-24T23:00:19.000+08:00
diff --git a/src/backend/fallback.js b/src/backend/fallback.js
@@ -79,8 +79,18 @@
 				}
 			}
 			
+			var canvas;
+			var canvasCtx;
+			var imageData;
+			var data;
 			if (opt.graphical) {
-				throw "CPU fallback for graphical output is not supported!";
+				canvas = gpu.getCanvas('cpu');
+				canvas.width = threadDim[0];
+				canvas.height = threadDim[1];
+				
+				canvasCtx = canvas.getContext("2d");
+				imageData = canvasCtx.createImageData(threadDim[0], threadDim[1]);
+				data = new Uint8ClampedArray(threadDim[0]*threadDim[1]*4);
 			}
 			
 			var ctx = {
@@ -89,20 +99,50 @@
 					y: 0,
 					z: 0
 				},
-				dimensions: threadDim,
-				color: function(r, g, b, a) {
-					console.warn("color() does nothing on fallback mode");
+				dimensions: {
+					x: threadDim[0],
+					y: threadDim[1],
+					z: threadDim[2]
 				}
 			};
 			
+			ctx.color = function(r, g, b, a) {
+				if (a == undefined) {
+					a = 1.0;
+				}
+				
+				r = Math.floor(r * 255);
+				g = Math.floor(g * 255);
+				b = Math.floor(b * 255);
+				a = Math.floor(a * 255);
+				
+				var width = ctx.dimensions.x;
+				var height = ctx.dimensions.y;
+				
+				var x = ctx.thread.x;
+				var y = height - ctx.thread.y - 1;
+				
+				var index = x + y*width;
+				
+				data[index*4+0] = r;
+				data[index*4+1] = g;
+				data[index*4+2] = b;
+				data[index*4+3] = a;
+			};
+			
 			for (ctx.thread.z=0; ctx.thread.z<threadDim[2]; ctx.thread.z++) {
 				for (ctx.thread.y=0; ctx.thread.y<threadDim[1]; ctx.thread.y++) {
 					for (ctx.thread.x=0; ctx.thread.x<threadDim[0]; ctx.thread.x++) {
 						ret[ctx.thread.z][ctx.thread.y][ctx.thread.x] = kernel.apply(ctx, kernelArgs);
 					}
 				}
 			}
-					
+			
+			if (opt.graphical) {
+				imageData.data.set(data);
+				canvasCtx.putImageData(imageData, 0, 0);
+			}
+			
 			if (opt.dimensions.length == 1) {
 				ret = ret[0][0];
 			} else if (opt.dimensions.length == 2) {
@@ -117,6 +157,16 @@
 			return ret;
 		};
 		
+		ret.debug = function(flag) {
+			opt.debug = flag;
+			return ret;
+		};
+		
+		ret.graphical = function(flag) {
+			opt.graphical = flag;
+			return ret;
+		};
+		
 		ret.wraparound = function() {
 			opt.wraparound = false;
 			return ret;
@@ -137,6 +187,10 @@
 			return gpu.createKernel(kernel, opt);
 		};
 		
+		ret.getCanvas = function() {
+			return gpu.getCanvas('cpu');
+		};
+		
 		return ret;
 	};
 })(GPU);
diff --git a/src/backend/glsl.js b/src/backend/glsl.js
@@ -494,6 +494,16 @@
 			return ret;
 		};
 		
+		ret.debug = function(flag) {
+			opt.debug = flag;
+			return ret;
+		};
+		
+		ret.graphical = function(flag) {
+			opt.graphical = flag;
+			return ret;
+		};
+		
 		ret.wraparound = function(flag) {
 			opt.wraparound = flag;
 			return ret;
@@ -514,6 +524,10 @@
 			return gpu.createKernel(kernel, opt);
 		};
 		
+		ret.getCanvas = function() {
+			return gpu.getCanvas();
+		};
+		
 		return ret;
 	};
 
diff --git a/src/gpu.js b/src/gpu.js
@@ -4,8 +4,6 @@
 /// GPU.JS core class =D
 ///
 var GPU = (function() {
-	var gl, canvas;
-	
 	// https://gist.github.com/TooTallNate/4750953
 	function endianness() {
 		var b = new ArrayBuffer(4);
@@ -18,9 +16,12 @@ var GPU = (function() {
 	}
 	
 	function GPU(ctx) {
+		var gl, canvas, canvasCpu;
+		
 		canvas = undefined;
 		gl = ctx;
 		if (gl === undefined) {
+			canvasCpu = document.createElement('canvas');
 			canvas = document.createElement('canvas');
 			canvas.width = 2;
 			canvas.height = 2;
@@ -38,6 +39,7 @@ var GPU = (function() {
 		
 		this.gl = gl;
 		this.canvas = canvas;
+		this.canvasCpu = canvasCpu;
 		this.programCache = {};
 		this.endianness = endianness();
 		
@@ -49,7 +51,11 @@ var GPU = (function() {
 		return this.gl;
 	};
 	
-	GPU.prototype.getCanvas = function() {
+	GPU.prototype.getCanvas = function(mode) {
+		if (mode == "cpu") {
+			return this.canvasCpu;
+		}
+		
 		return this.canvas;
 	};
 
