WebGLSnapshot can now grab from a framebuffer

Author: photonstorm

src/renderer/snapshot/WebGLSnapshot.js

@@ -29,45 +29,54 @@ var WebGLSnapshot = function (sourceCanvas, config)
     var encoderOptions = GetFastValue(config, 'encoder', 0.92);
     var x = GetFastValue(config, 'x', 0);
     var y = GetFastValue(config, 'y', 0);
-    var width = GetFastValue(config, 'width', gl.drawingBufferWidth);
-    var height = GetFastValue(config, 'height', gl.drawingBufferHeight);
+
     var getPixel = GetFastValue(config, 'getPixel', false);
 
+    var isFramebuffer = GetFastValue(config, 'isFramebuffer', false);
+
+    var bufferWidth = (isFramebuffer) ? GetFastValue(config, 'bufferWidth', 1) : gl.drawingBufferWidth;
+    var bufferHeight = (isFramebuffer) ? GetFastValue(config, 'bufferHeight', 1) : gl.drawingBufferHeight;
+
     if (getPixel)
     {
         var pixel = new Uint8Array(4);
 
-        gl.readPixels(x, gl.drawingBufferHeight - y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
+        gl.readPixels(x, bufferHeight - y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
 
         callback.call(null, new Color(pixel[0], pixel[1], pixel[2], pixel[3] / 255));
     }
     else
     {
-        var pixels = new Uint8Array(width * height * 4);
+        var width = GetFastValue(config, 'width', bufferWidth);
+        var height = GetFastValue(config, 'height', bufferHeight);
+
+        var total = width * height * 4;
+
+        var pixels = new Uint8Array(total);
 
-        gl.readPixels(x, gl.drawingBufferHeight - y - height, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+        gl.readPixels(x, bufferHeight - y - height, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
 
         var canvas = CanvasPool.createWebGL(this, width, height);
         var ctx = canvas.getContext('2d');
 
         var imageData = ctx.getImageData(0, 0, width, height);
 
         var data = imageData.data;
-    
+
         for (var py = 0; py < height; py++)
         {
             for (var px = 0; px < width; px++)
             {
                 var sourceIndex = ((height - py) * width + px) * 4;
-                var destIndex = (py * width + px) * 4;
+                var destIndex = (isFramebuffer) ? total - ((py * width + (width - px)) * 4) : (py * width + px) * 4;
 
                 data[destIndex + 0] = pixels[sourceIndex + 0];
                 data[destIndex + 1] = pixels[sourceIndex + 1];
                 data[destIndex + 2] = pixels[sourceIndex + 2];
                 data[destIndex + 3] = pixels[sourceIndex + 3];
             }
         }
-    
+
         ctx.putImageData(imageData, 0, 0);
 
         var image = new Image();