Add texture.readPixels

dist/preview release/babylon.max.js

@@ -10277,6 +10277,9 @@ var BABYLON;
             this.releaseEffects();
             // Unbind
             this.unbindAllAttributes();
+            if (this._dummyFramebuffer) {
+                this._gl.deleteFramebuffer(this._dummyFramebuffer);
+            }
             this._gl = null;
             //WebVR
             this.disableVR();
@@ -10379,6 +10382,26 @@ var BABYLON;
                 this.fps = 1000.0 / (sum / (length - 1));
             }
         };
+        Engine.prototype._readTexturePixels = function (texture, width, height, faceIndex) {
+            if (faceIndex === void 0) { faceIndex = -1; }
+            var gl = this._gl;
+            if (!this._dummyFramebuffer) {
+                this._dummyFramebuffer = gl.createFramebuffer();
+            }
+            gl.bindFramebuffer(gl.FRAMEBUFFER, this._dummyFramebuffer);
+            if (faceIndex > -1) {
+                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex, texture, 0);
+            }
+            else {
+                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+            }
+            var readFormat = gl.RGBA;
+            var readType = gl.UNSIGNED_BYTE;
+            var buffer = new Uint8Array(4 * width * height);
+            gl.readPixels(0, 0, width, height, readFormat, readType, buffer);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            return buffer;
+        };
         Engine.prototype._canRenderToFloatFramebuffer = function () {
             if (this._webGLVersion > 1) {
                 return this._caps.colorBufferFloat;
@@ -19006,6 +19029,18 @@ var BABYLON;
         BaseTexture.prototype.clone = function () {
             return null;
         };
+        BaseTexture.prototype.readPixels = function (faceIndex) {
+            if (faceIndex === void 0) { faceIndex = 0; }
+            if (!this._texture) {
+                return null;
+            }
+            var size = this.getSize();
+            var engine = this.getScene().getEngine();
+            if (this._texture.isCube) {
+                return engine._readTexturePixels(this._texture, size.width, size.height, faceIndex);
+            }
+            return engine._readTexturePixels(this._texture, size.width, size.height);
+        };
         BaseTexture.prototype.releaseInternalTexture = function () {
             if (this._texture) {
                 this._scene.getEngine().releaseInternalTexture(this._texture);

dist/preview release/what's new.md

@@ -28,6 +28,7 @@
  - New blur mode for mirrors. [Demo](https://www.babylonjs-playground.com/#9I6NX1) ([deltakosh](https://github.com/deltakosh)) 
 
 ### Updates
+- new `Texture.readPixels()` function to read texture content ([deltakosh](https://github.com/deltakosh))
 - New helpers to use ExtrudePolygon. [Demo](http://www.babylonjs-playground.com/#RNCYVM#10) ([Cubees](https://github.com/Cubees))
 - PostProcess can now use alpha blending and share outputs ([deltakosh](https://github.com/deltakosh))
 - Added `ArcRotateCamera.panningInertia` to decouple inertia from panning inertia ([deltakosh](https://github.com/deltakosh))

src/Materials/Textures/babylon.baseTexture.ts

@@ -198,6 +198,21 @@
             return null;
         }
 
+        public readPixels(faceIndex = 0): Uint8Array {
+            if (!this._texture) {
+                return null;
+            }
+
+            var size = this.getSize();
+            var engine = this.getScene().getEngine();
+
+            if (this._texture.isCube) {
+                return engine._readTexturePixels(this._texture, size.width, size.height, faceIndex);
+            }
+
+            return engine._readTexturePixels(this._texture, size.width, size.height);
+        }
+
         public releaseInternalTexture(): void {
             if (this._texture) {
                 this._scene.getEngine().releaseInternalTexture(this._texture);

src/babylon.engine.ts

@@ -573,6 +573,8 @@
         private _workingCanvas: HTMLCanvasElement;
         private _workingContext: CanvasRenderingContext2D;
 
+        private _dummyFramebuffer: WebGLFramebuffer;
+
         private _externalData: StringDictionary<Object>;
         private _bindedRenderFunction: any;
 
@@ -3840,6 +3842,10 @@
             // Unbind
             this.unbindAllAttributes();
 
+            if (this._dummyFramebuffer) {
+                this._gl.deleteFramebuffer(this._dummyFramebuffer);
+            }
+
             this._gl = null;
 
             //WebVR
@@ -3956,6 +3962,29 @@
             }
         }
 
+        public _readTexturePixels(texture: WebGLTexture, width: number, height: number, faceIndex = -1): Uint8Array {
+            let gl = this._gl;
+            if (!this._dummyFramebuffer) {
+                this._dummyFramebuffer = gl.createFramebuffer();
+            }
+            gl.bindFramebuffer(gl.FRAMEBUFFER, this._dummyFramebuffer);
+
+            if (faceIndex > -1) {
+                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex, texture, 0);            
+            } else {
+                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+            }
+
+            let readFormat = gl.RGBA;
+            let readType = gl.UNSIGNED_BYTE;
+            let buffer = new Uint8Array(4 * width * height);
+            gl.readPixels(0, 0, width, height, readFormat, readType, buffer);
+            
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+
+            return buffer;
+        }    
+
         private _canRenderToFloatFramebuffer(): boolean {
             if (this._webGLVersion > 1) {
                 return this._caps.colorBufferFloat;