Fix #5102

dist/preview release/babylon.max.js

@@ -17009,6 +17009,7 @@ var BABYLON;
         Engine.prototype._readTexturePixels = function (texture, width, height, faceIndex, level, buffer) {
             if (faceIndex === void 0) { faceIndex = -1; }
             if (level === void 0) { level = 0; }
+            if (buffer === void 0) { buffer = null; }
             var gl = this._gl;
             if (!this._dummyFramebuffer) {
                 var dummy = gl.createFramebuffer();
@@ -29874,12 +29875,13 @@ var BABYLON;
          * float values (0-1) depending of the underlying buffer type.
          * @param faceIndex defines the face of the texture to read (in case of cube texture)
          * @param level defines the LOD level of the texture to read (in case of Mip Maps)
-         * @param buffer defines a user defined buffer to fill with data
+         * @param buffer defines a user defined buffer to fill with data (can be null)
          * @returns The Array buffer containing the pixels data.
          */
         BaseTexture.prototype.readPixels = function (faceIndex, level, buffer) {
             if (faceIndex === void 0) { faceIndex = 0; }
             if (level === void 0) { level = 0; }
+            if (buffer === void 0) { buffer = null; }
             if (!this._texture) {
                 return null;
             }
@@ -56381,16 +56383,13 @@ var BABYLON;
             _this._createVertexBuffers();
             // Default emitter type
             _this.particleEmitterType = new BABYLON.BoxParticleEmitter();
-            // Update
-            var noiseTextureData = null;
+            // Update            
             _this.updateFunction = function (particles) {
                 var noiseTextureSize = null;
+                var noiseTextureData = null;
                 if (_this.noiseTexture) { // We need to get texture data back to CPU
                     noiseTextureSize = _this.noiseTexture.getSize();
-                    if (!noiseTextureData) {
-                        noiseTextureData = new Uint8Array(4 * noiseTextureSize.width * noiseTextureSize.height);
-                    }
-                    _this.noiseTexture.readPixels(0, 0, noiseTextureData);
+                    noiseTextureData = (_this.noiseTexture.getContent());
                 }
                 var _loop_1 = function () {
                     particle = particles[index];
@@ -57801,10 +57800,11 @@ var BABYLON;
             }
             var result = new ParticleSystem(name, this._capacity, this._scene, custom);
             result.customShader = program;
-            BABYLON.Tools.DeepCopy(this, result, ["particles", "customShader"]);
+            BABYLON.Tools.DeepCopy(this, result, ["particles", "customShader", "noiseTexture"]);
             if (newEmitter === undefined) {
                 newEmitter = this.emitter;
             }
+            result.noiseTexture = this.noiseTexture;
             result.emitter = newEmitter;
             if (this.particleTexture) {
                 result.particleTexture = new BABYLON.Texture(this.particleTexture.url, this._scene);
@@ -58107,9 +58107,8 @@ var BABYLON;
                 }
                 serializationObject.limitVelocityDamping = particleSystem.limitVelocityDamping;
             }
-            if (BABYLON.ProceduralTexture && particleSystem.noiseTexture && particleSystem.noiseTexture instanceof BABYLON.ProceduralTexture) {
-                var noiseTexture = particleSystem.noiseTexture;
-                serializationObject.noiseTexture = noiseTexture.serialize();
+            if (particleSystem.noiseTexture) {
+                serializationObject.noiseTexture = particleSystem.noiseTexture.serialize();
             }
         };
         /** @hidden */
@@ -74836,6 +74835,7 @@ var BABYLON;
             _this._matrices = {};
             _this._fallbackTextureUsed = false;
             _this._cachedDefines = "";
+            _this._contentUpdateId = -1;
             scene = _this.getScene();
             var component = scene._getComponent(BABYLON.SceneComponentConstants.NAME_PROCEDURALTEXTURE);
             if (!component) {
@@ -74867,6 +74867,18 @@ var BABYLON;
             _this._createIndexBuffer();
             return _this;
         }
+        /**
+         * Gets texture content (Use this function wisely as reading from a texture can be slow)
+         * @returns an ArrayBufferView (Uint8Array or Float32Array)
+         */
+        ProceduralTexture.prototype.getContent = function () {
+            if (this._contentData && this._currentRefreshId == this._contentUpdateId) {
+                return this._contentData;
+            }
+            this._contentData = this.readPixels(0, 0, this._contentData);
+            this._contentUpdateId = this._currentRefreshId;
+            return this._contentData;
+        };
         ProceduralTexture.prototype._createIndexBuffer = function () {
             var engine = this._engine;
             // Indices

dist/preview release/babylon.no-module.max.js

@@ -16976,6 +16976,7 @@ var BABYLON;
         Engine.prototype._readTexturePixels = function (texture, width, height, faceIndex, level, buffer) {
             if (faceIndex === void 0) { faceIndex = -1; }
             if (level === void 0) { level = 0; }
+            if (buffer === void 0) { buffer = null; }
             var gl = this._gl;
             if (!this._dummyFramebuffer) {
                 var dummy = gl.createFramebuffer();
@@ -29841,12 +29842,13 @@ var BABYLON;
          * float values (0-1) depending of the underlying buffer type.
          * @param faceIndex defines the face of the texture to read (in case of cube texture)
          * @param level defines the LOD level of the texture to read (in case of Mip Maps)
-         * @param buffer defines a user defined buffer to fill with data
+         * @param buffer defines a user defined buffer to fill with data (can be null)
          * @returns The Array buffer containing the pixels data.
          */
         BaseTexture.prototype.readPixels = function (faceIndex, level, buffer) {
             if (faceIndex === void 0) { faceIndex = 0; }
             if (level === void 0) { level = 0; }
+            if (buffer === void 0) { buffer = null; }
             if (!this._texture) {
                 return null;
             }
@@ -56348,16 +56350,13 @@ var BABYLON;
             _this._createVertexBuffers();
             // Default emitter type
             _this.particleEmitterType = new BABYLON.BoxParticleEmitter();
-            // Update
-            var noiseTextureData = null;
+            // Update            
             _this.updateFunction = function (particles) {
                 var noiseTextureSize = null;
+                var noiseTextureData = null;
                 if (_this.noiseTexture) { // We need to get texture data back to CPU
                     noiseTextureSize = _this.noiseTexture.getSize();
-                    if (!noiseTextureData) {
-                        noiseTextureData = new Uint8Array(4 * noiseTextureSize.width * noiseTextureSize.height);
-                    }
-                    _this.noiseTexture.readPixels(0, 0, noiseTextureData);
+                    noiseTextureData = (_this.noiseTexture.getContent());
                 }
                 var _loop_1 = function () {
                     particle = particles[index];
@@ -57768,10 +57767,11 @@ var BABYLON;
             }
             var result = new ParticleSystem(name, this._capacity, this._scene, custom);
             result.customShader = program;
-            BABYLON.Tools.DeepCopy(this, result, ["particles", "customShader"]);
+            BABYLON.Tools.DeepCopy(this, result, ["particles", "customShader", "noiseTexture"]);
             if (newEmitter === undefined) {
                 newEmitter = this.emitter;
             }
+            result.noiseTexture = this.noiseTexture;
             result.emitter = newEmitter;
             if (this.particleTexture) {
                 result.particleTexture = new BABYLON.Texture(this.particleTexture.url, this._scene);
@@ -58074,9 +58074,8 @@ var BABYLON;
                 }
                 serializationObject.limitVelocityDamping = particleSystem.limitVelocityDamping;
             }
-            if (BABYLON.ProceduralTexture && particleSystem.noiseTexture && particleSystem.noiseTexture instanceof BABYLON.ProceduralTexture) {
-                var noiseTexture = particleSystem.noiseTexture;
-                serializationObject.noiseTexture = noiseTexture.serialize();
+            if (particleSystem.noiseTexture) {
+                serializationObject.noiseTexture = particleSystem.noiseTexture.serialize();
             }
         };
         /** @hidden */
@@ -74803,6 +74802,7 @@ var BABYLON;
             _this._matrices = {};
             _this._fallbackTextureUsed = false;
             _this._cachedDefines = "";
+            _this._contentUpdateId = -1;
             scene = _this.getScene();
             var component = scene._getComponent(BABYLON.SceneComponentConstants.NAME_PROCEDURALTEXTURE);
             if (!component) {
@@ -74834,6 +74834,18 @@ var BABYLON;
             _this._createIndexBuffer();
             return _this;
         }
+        /**
+         * Gets texture content (Use this function wisely as reading from a texture can be slow)
+         * @returns an ArrayBufferView (Uint8Array or Float32Array)
+         */
+        ProceduralTexture.prototype.getContent = function () {
+            if (this._contentData && this._currentRefreshId == this._contentUpdateId) {
+                return this._contentData;
+            }
+            this._contentData = this.readPixels(0, 0, this._contentData);
+            this._contentUpdateId = this._currentRefreshId;
+            return this._contentData;
+        };
         ProceduralTexture.prototype._createIndexBuffer = function () {
             var engine = this._engine;
             // Indices

dist/preview release/es6.js

@@ -16976,6 +16976,7 @@ var BABYLON;
         Engine.prototype._readTexturePixels = function (texture, width, height, faceIndex, level, buffer) {
             if (faceIndex === void 0) { faceIndex = -1; }
             if (level === void 0) { level = 0; }
+            if (buffer === void 0) { buffer = null; }
             var gl = this._gl;
             if (!this._dummyFramebuffer) {
                 var dummy = gl.createFramebuffer();
@@ -29841,12 +29842,13 @@ var BABYLON;
          * float values (0-1) depending of the underlying buffer type.
          * @param faceIndex defines the face of the texture to read (in case of cube texture)
          * @param level defines the LOD level of the texture to read (in case of Mip Maps)
-         * @param buffer defines a user defined buffer to fill with data
+         * @param buffer defines a user defined buffer to fill with data (can be null)
          * @returns The Array buffer containing the pixels data.
          */
         BaseTexture.prototype.readPixels = function (faceIndex, level, buffer) {
             if (faceIndex === void 0) { faceIndex = 0; }
             if (level === void 0) { level = 0; }
+            if (buffer === void 0) { buffer = null; }
             if (!this._texture) {
                 return null;
             }
@@ -56348,16 +56350,13 @@ var BABYLON;
             _this._createVertexBuffers();
             // Default emitter type
             _this.particleEmitterType = new BABYLON.BoxParticleEmitter();
-            // Update
-            var noiseTextureData = null;
+            // Update            
             _this.updateFunction = function (particles) {
                 var noiseTextureSize = null;
+                var noiseTextureData = null;
                 if (_this.noiseTexture) { // We need to get texture data back to CPU
                     noiseTextureSize = _this.noiseTexture.getSize();
-                    if (!noiseTextureData) {
-                        noiseTextureData = new Uint8Array(4 * noiseTextureSize.width * noiseTextureSize.height);
-                    }
-                    _this.noiseTexture.readPixels(0, 0, noiseTextureData);
+                    noiseTextureData = (_this.noiseTexture.getContent());
                 }
                 var _loop_1 = function () {
                     particle = particles[index];
@@ -57768,10 +57767,11 @@ var BABYLON;
             }
             var result = new ParticleSystem(name, this._capacity, this._scene, custom);
             result.customShader = program;
-            BABYLON.Tools.DeepCopy(this, result, ["particles", "customShader"]);
+            BABYLON.Tools.DeepCopy(this, result, ["particles", "customShader", "noiseTexture"]);
             if (newEmitter === undefined) {
                 newEmitter = this.emitter;
             }
+            result.noiseTexture = this.noiseTexture;
             result.emitter = newEmitter;
             if (this.particleTexture) {
                 result.particleTexture = new BABYLON.Texture(this.particleTexture.url, this._scene);
@@ -58074,9 +58074,8 @@ var BABYLON;
                 }
                 serializationObject.limitVelocityDamping = particleSystem.limitVelocityDamping;
             }
-            if (BABYLON.ProceduralTexture && particleSystem.noiseTexture && particleSystem.noiseTexture instanceof BABYLON.ProceduralTexture) {
-                var noiseTexture = particleSystem.noiseTexture;
-                serializationObject.noiseTexture = noiseTexture.serialize();
+            if (particleSystem.noiseTexture) {
+                serializationObject.noiseTexture = particleSystem.noiseTexture.serialize();
             }
         };
         /** @hidden */
@@ -74803,6 +74802,7 @@ var BABYLON;
             _this._matrices = {};
             _this._fallbackTextureUsed = false;
             _this._cachedDefines = "";
+            _this._contentUpdateId = -1;
             scene = _this.getScene();
             var component = scene._getComponent(BABYLON.SceneComponentConstants.NAME_PROCEDURALTEXTURE);
             if (!component) {
@@ -74834,6 +74834,18 @@ var BABYLON;
             _this._createIndexBuffer();
             return _this;
         }
+        /**
+         * Gets texture content (Use this function wisely as reading from a texture can be slow)
+         * @returns an ArrayBufferView (Uint8Array or Float32Array)
+         */
+        ProceduralTexture.prototype.getContent = function () {
+            if (this._contentData && this._currentRefreshId == this._contentUpdateId) {
+                return this._contentData;
+            }
+            this._contentData = this.readPixels(0, 0, this._contentData);
+            this._contentUpdateId = this._currentRefreshId;
+            return this._contentData;
+        };
         ProceduralTexture.prototype._createIndexBuffer = function () {
             var engine = this._engine;
             // Indices

src/Engine/babylon.engine.ts

@@ -6975,7 +6975,7 @@
         }
 
         /** @hidden */
-        public _readTexturePixels(texture: InternalTexture, width: number, height: number, faceIndex = -1, level = 0, buffer?: ArrayBufferView): ArrayBufferView {
+        public _readTexturePixels(texture: InternalTexture, width: number, height: number, faceIndex = -1, level = 0, buffer: Nullable<ArrayBufferView> = null): ArrayBufferView {
             let gl = this._gl;
             if (!this._dummyFramebuffer) {
                 let dummy = gl.createFramebuffer();

src/Materials/Textures/Procedurals/babylon.proceduralTexture.ts

@@ -49,6 +49,9 @@
 
         private _cachedDefines = "";
 
+        private _contentUpdateId = -1;
+        private _contentData: Nullable<ArrayBufferView>;
+
         constructor(name: string, size: any, fragment: any, scene: Nullable<Scene>, fallbackTexture: Nullable<Texture> = null, generateMipMaps = true, public isCube = false) {
             super(null, scene, !generateMipMaps);
 
@@ -91,6 +94,21 @@
             this._createIndexBuffer();
         }
 
+        /**
+         * Gets texture content (Use this function wisely as reading from a texture can be slow)
+         * @returns an ArrayBufferView (Uint8Array or Float32Array)
+         */
+        public getContent(): Nullable<ArrayBufferView> {
+            if (this._contentData && this._currentRefreshId == this._contentUpdateId) {
+                return this._contentData;
+            }
+
+            this._contentData = this.readPixels(0, 0, this._contentData);
+            this._contentUpdateId = this._currentRefreshId;
+
+            return this._contentData;
+        }
+
         private _createIndexBuffer(): void {
             var engine = this._engine;
 

src/Materials/Textures/babylon.baseTexture.ts

@@ -314,10 +314,10 @@
          * float values (0-1) depending of the underlying buffer type.
          * @param faceIndex defines the face of the texture to read (in case of cube texture)
          * @param level defines the LOD level of the texture to read (in case of Mip Maps)
-         * @param buffer defines a user defined buffer to fill with data
+         * @param buffer defines a user defined buffer to fill with data (can be null)
          * @returns The Array buffer containing the pixels data.
          */
-        public readPixels(faceIndex = 0, level = 0, buffer?: ArrayBufferView): Nullable<ArrayBufferView> {
+        public readPixels(faceIndex = 0, level = 0, buffer: Nullable<ArrayBufferView> = null): Nullable<ArrayBufferView> {
             if (!this._texture) {
                 return null;
             }

src/Particles/babylon.baseParticleSystem.ts

@@ -166,7 +166,7 @@ module BABYLON {
         /**
          * Gets or sets a texture used to add random noise to particle positions
          */
-        public noiseTexture: Nullable<BaseTexture>;
+        public noiseTexture: Nullable<ProceduralTexture>;
 
         /** Gets or sets the strength to apply to the noise value (default is (10, 10, 10)) */
         public noiseStrength = new Vector3(10, 10, 10);

src/Particles/babylon.particleSystem.ts

@@ -179,17 +179,14 @@
             // Default emitter type
             this.particleEmitterType = new BoxParticleEmitter();
 
-            // Update
-            let noiseTextureData: Nullable<Uint8Array> = null;
+            // Update            
             this.updateFunction = (particles: Particle[]): void => {
                 let noiseTextureSize: Nullable<ISize> = null;
-
+                let noiseTextureData: Nullable<Uint8Array> = null;
+                
                 if (this.noiseTexture) { // We need to get texture data back to CPU
                     noiseTextureSize = this.noiseTexture.getSize();
-                    if (!noiseTextureData) {
-                        noiseTextureData = new Uint8Array(4 * noiseTextureSize.width * noiseTextureSize.height); 
-                    }
-                    this.noiseTexture.readPixels(0, 0, noiseTextureData);
+                    noiseTextureData = <Nullable<Uint8Array>>(this.noiseTexture.getContent());
                 }
 
                 for (var index = 0; index < particles.length; index++) {
@@ -1834,12 +1831,13 @@
             var result = new ParticleSystem(name, this._capacity, this._scene, custom);
             result.customShader = program;
 
-            Tools.DeepCopy(this, result, ["particles", "customShader"]);
+            Tools.DeepCopy(this, result, ["particles", "customShader", "noiseTexture"]);
 
             if (newEmitter === undefined) {
                 newEmitter = this.emitter;
             }
 
+            result.noiseTexture = this.noiseTexture;
             result.emitter = newEmitter;
             if (this.particleTexture) {
                 result.particleTexture = new Texture(this.particleTexture.url, this._scene);
@@ -2188,9 +2186,8 @@
                 serializationObject.limitVelocityDamping = particleSystem.limitVelocityDamping;
             }
 
-            if (ProceduralTexture && particleSystem.noiseTexture && particleSystem.noiseTexture instanceof ProceduralTexture) {
-                const noiseTexture = particleSystem.noiseTexture as ProceduralTexture;
-                serializationObject.noiseTexture = noiseTexture.serialize();
+            if (particleSystem.noiseTexture) {
+                serializationObject.noiseTexture = particleSystem.noiseTexture.serialize();
             }
         }