Merge branch 'master' of https://github.com/BabylonJS/Babylon.js

dist/preview release/glTF2Interface/package.json

@@ -1,7 +1,7 @@
 {
     "name": "babylonjs-gltf2interface",
     "description": "A typescript declaration of babylon's gltf2 inteface.",
-    "version": "3.3.0-beta.4",
+    "version": "3.3.0-beta.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/gui/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-gui",
     "description": "The Babylon.js GUI library is an extension you can use to generate interactive user interface. It is build on top of the DynamicTexture.",
-    "version": "3.3.0-beta.4",
+    "version": "3.3.0-beta.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/inspector/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-inspector",
     "description": "The Babylon.js inspector.",
-    "version": "3.3.0-beta.4",
+    "version": "3.3.0-beta.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/loaders/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-loaders",
     "description": "The Babylon.js file loaders library is an extension you can use to load different 3D file types into a Babylon scene.",
-    "version": "3.3.0-beta.4",
+    "version": "3.3.0-beta.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -27,7 +27,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs-gltf2interface": "3.3.0-beta.4"
+        "babylonjs-gltf2interface": "3.3.0-beta.5"
     },
     "peerDependencies": {
         "babylonjs": ">=3.2.0-alpha"

dist/preview release/materialsLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-materials",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "3.3.0-beta.4",
+    "version": "3.3.0-beta.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/postProcessesLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-post-process",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "3.3.0-beta.4",
+    "version": "3.3.0-beta.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/proceduralTexturesLibrary/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-procedural-textures",
     "description": "The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.",
-    "version": "3.3.0-beta.4",
+    "version": "3.3.0-beta.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

dist/preview release/serializers/package.json

@@ -4,7 +4,7 @@
     },
     "name": "babylonjs-serializers",
     "description": "The Babylon.js serializers library is an extension you can use to serialize Babylon scenes.",
-    "version": "3.3.0-beta.4",
+    "version": "3.3.0-beta.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"
@@ -27,7 +27,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
-        "babylonjs-gltf2interface": "3.3.0-beta.4"
+        "babylonjs-gltf2interface": "3.3.0-beta.5"
     },
     "peerDependencies": {
         "babylonjs": ">=3.2.0-alpha"

dist/preview release/what's new.md

@@ -40,7 +40,8 @@
   - Added support for noise textures. [Doc](http://doc.babylonjs.com/babylon101/particles#noise-texture)
   - Added support for emit rate gradients. [Doc](http://doc.babylonjs.com/babylon101/particles#emit-rate-over-time)
   - Start size gradient support for particles. [Doc](http://doc.babylonjs.com/babylon101/particles#start-size-over-time) ([TrevorDev](https://github.com/TrevorDev))
-  - Cylinder particle emitter and constructor in baseParticle [Doc](https://doc.babylonjs.com/babylon101/particles#cylinder-emitter) ([TrevorDev](https://github.com/TrevorDev))
+  - Added support for cylinder particle emitter. [Doc](https://doc.babylonjs.com/babylon101/particles#cylinder-emitter) ([TrevorDev](https://github.com/TrevorDev))
+  - Added support for random start cell when using animated sprite sheets. [Doc](http://doc.babylonjs.com/how_to/animate)
 - Added SceneComponent to help decoupling Scene from its components. ([sebavan](http://www.github.com/sebavan))
 - Added [Environment Texture Tools](https://doc.babylonjs.com/how_to/physically_based_rendering#creating-a-compressed-environment-texture) to reduce the size of the usual .DDS file ([sebavan](http://www.github.com/sebavan))
 - Playground can now be used with TypeScript directly!. [Demo](https://www.babylonjs-playground.com/ts.html) ([Deltakosh](https://github.com/deltakosh), [NasimiAsl](https://github.com/NasimiAsl))

package.json

@@ -9,7 +9,7 @@
     ],
     "name": "babylonjs",
     "description": "Babylon.js is a JavaScript 3D engine based on webgl.",
-    "version": "3.3.0-beta.4",
+    "version": "3.3.0-beta.5",
     "repository": {
         "type": "git",
         "url": "https://github.com/BabylonJS/Babylon.js.git"

src/Engine/babylon.engine.ts

@@ -475,7 +475,7 @@
          * Returns the current version of the framework
          */
         public static get Version(): string {
-            return "3.3.0-beta.4";
+            return "3.3.0-beta.5";
         }
 
         // Updatable statics so stick with vars here

src/Particles/babylon.IParticleSystem.ts

@@ -172,6 +172,10 @@ module BABYLON {
          * If using a spritesheet (isAnimationSheetEnabled), defines the sprite cell height to use
          */
         spriteCellHeight: number;           
+        /**
+         * This allows the system to random pick the start cell ID between startSpriteCellID and endSpriteCellID
+         */
+        spriteRandomStartCell: boolean;            
 
         /** Gets or sets a Vector2 used to move the pivot (by default (0,0)) */
         translationPivot: Vector2;

src/Particles/babylon.baseParticleSystem.ts

@@ -208,6 +208,10 @@ module BABYLON {
          * If using a spritesheet (isAnimationSheetEnabled), defines the sprite cell height to use
          */
         public spriteCellHeight = 0;
+        /**
+         * This allows the system to random pick the start cell ID between startSpriteCellID and endSpriteCellID
+         */
+        public spriteRandomStartCell = false;   
 
         /** Gets or sets a Vector2 used to move the pivot (by default (0,0)) */
         public translationPivot = new Vector2(0, 0);        

src/Particles/babylon.gpuParticleSystem.ts

@@ -516,7 +516,7 @@
             this._scene.particleSystems.push(this);
 
             this._updateEffectOptions = {
-                attributes: ["position", "age", "life", "seed", "size", "color", "direction", "initialDirection", "angle", "cellIndex"],
+                attributes: ["position", "age", "life", "seed", "size", "color", "direction", "initialDirection", "angle", "cellIndex", "cellStartOffset"],
                 uniformsNames: ["currentCount", "timeDelta", "emitterWM", "lifeTime", "color1", "color2", "sizeRange", "scaleRange","gravity", "emitPower",
                                 "direction1", "direction2", "minEmitBox", "maxEmitBox", "radius", "directionRandomizer", "height", "coneAngle", "stopFactor", 
                                 "angleRange", "radiusRange", "cellInfos", "noiseStrength", "limitVelocityDamping"],
@@ -597,6 +597,10 @@
             if (this._isAnimationSheetEnabled) {
                 updateVertexBuffers["cellIndex"] = source.createVertexBuffer("cellIndex", offset, 1);
                 offset += 1;
+                if (this.spriteRandomStartCell) {
+                    updateVertexBuffers["cellStartOffset"] = source.createVertexBuffer("cellStartOffset", offset, 1);
+                    offset += 1;
+                }
             }            
            
             let vao = this._engine.recordVertexArrayObject(updateVertexBuffers, null, this._updateEffect);
@@ -636,6 +640,10 @@
             if (this._isAnimationSheetEnabled) {
                 renderVertexBuffers["cellIndex"] = source.createVertexBuffer("cellIndex", offset, 1, this._attributesStrideSize, true);
                 offset += 1;
+                if (this.spriteRandomStartCell) {
+                    renderVertexBuffers["cellStartOffset"] = source.createVertexBuffer("cellStartOffset", offset, 1, this._attributesStrideSize, true);
+                    offset += 1;
+                }
             }               
 
             renderVertexBuffers["offset"] = spriteSource.createVertexBuffer("offset", 0, 2);
@@ -669,6 +677,9 @@
 
             if (this._isAnimationSheetEnabled) {
                 this._attributesStrideSize += 1;
+                if (this.spriteRandomStartCell) {
+                    this._attributesStrideSize += 1;
+                }
             }            
 
             for (var particleIndex = 0; particleIndex < this._capacity; particleIndex++) {
@@ -721,6 +732,9 @@
 
                 if (this._isAnimationSheetEnabled) {
                     data.push(0.0); 
+                    if (this.spriteRandomStartCell) {
+                        data.push(0.0); 
+                    }
                 }                
             }
 
@@ -785,6 +799,9 @@
             
             if (this.isAnimationSheetEnabled) {
                 defines += "\n#define ANIMATESHEET";
+                if (this.spriteRandomStartCell) {
+                    defines += "\n#define ANIMATESHEETRANDOMSTART";
+                }
             }   
             
             if (this.noiseTexture) {
@@ -811,6 +828,9 @@
 
             if (this.isAnimationSheetEnabled) {
                 this._updateEffectOptions.transformFeedbackVaryings.push("outCellIndex");
+                if (this.spriteRandomStartCell) {
+                    this._updateEffectOptions.transformFeedbackVaryings.push("outCellStartOffset");
+                }
             }               
 
             this._updateEffectOptions.defines = defines;

src/Particles/babylon.particle.ts

@@ -61,6 +61,9 @@
         public cellIndex: number = 0;  
 
         /** @hidden */
+        public _randomCellOffset?: number;
+
+        /** @hidden */
         public _initialDirection: Nullable<Vector3>;
 
         /** @hidden */
@@ -115,7 +118,7 @@
          */
         constructor(
             /**
-             * particleSystem the particle system the particle belongs to.
+             * The particle system the particle belongs to.
              */
             public particleSystem: ParticleSystem) {
             if (!this.particleSystem.isAnimationSheetEnabled) {
@@ -133,12 +136,34 @@
          * Defines how the sprite cell index is updated for the particle
          */
         public updateCellIndex(): void {
+            let offsetAge = this.age;
+
+            if (this.particleSystem.spriteRandomStartCell) {
+                if (this._randomCellOffset === undefined) {         
+                    this._randomCellOffset = Math.random() * this.lifeTime;
+                }
+                offsetAge += this._randomCellOffset;
+            }
+
             let dist = (this._initialEndSpriteCellID - this._initialStartSpriteCellID);
-            let ratio = Scalar.Clamp(((this.age * this.particleSystem.spriteCellChangeSpeed) % this.lifeTime) / this.lifeTime);
+            let ratio = Scalar.Clamp(((offsetAge * this.particleSystem.spriteCellChangeSpeed) % this.lifeTime) / this.lifeTime);
 
             this.cellIndex = this._initialStartSpriteCellID + (ratio * dist) | 0;
         }
 
+        /** @hidden */
+        public _reset() {
+            this.age = 0;
+            this._currentColorGradient = null;
+            this._currentSizeGradient = null;
+            this._currentAngularSpeedGradient = null;
+            this._currentVelocityGradient = null;
+            this._currentLimitVelocityGradient = null;
+            this._currentDragGradient = null;
+            this.cellIndex = this.particleSystem.startSpriteCellID;
+            this._randomCellOffset = undefined;
+        }
+
         /**
          * Copy the properties of particle to another one.
          * @param other the particle to copy the information to.
@@ -159,6 +184,7 @@
             other.colorStep.copyFrom(this.colorStep);
             other.lifeTime = this.lifeTime;
             other.age = this.age;
+            other._randomCellOffset = undefined;
             other.size = this.size;
             other.scale.copyFrom(this.scale);
             other.angle = this.angle;

src/Particles/babylon.particleSystem.ts

@@ -886,9 +886,7 @@
             var particle: Particle;
             if (this._stockParticles.length !== 0) {
                 particle = <Particle>this._stockParticles.pop();
-                particle.age = 0;
-                particle._currentColorGradient = null;
-                particle.cellIndex = this.startSpriteCellID;
+                particle._reset();
             } else {
                 particle = new Particle(this);
             }

src/Shaders/gpuUpdateParticles.vertex.fx

@@ -87,6 +87,9 @@ in vec2 angle;
 #endif
 #ifdef ANIMATESHEET
 in float cellIndex;
+#ifdef ANIMATESHEETRANDOMSTART
+in float cellStartOffset;
+#endif
 #endif
 
 // Output
@@ -109,6 +112,9 @@ out vec2 outAngle;
 #endif
 #ifdef ANIMATESHEET
 out float outCellIndex;
+#ifdef ANIMATESHEETRANDOMSTART
+out float outCellStartOffset;
+#endif
 #endif
 
 #ifdef SIZEGRADIENTS
@@ -308,6 +314,10 @@ void main() {
 #endif
 #ifdef ANIMATESHEET      
     outCellIndex = cellInfos.x;
+
+#ifdef ANIMATESHEETRANDOMSTART
+    outCellStartOffset = randoms.a * outLife;
+#endif    
 #endif
 
   } else {
@@ -376,8 +386,15 @@ void main() {
 #endif
 
 #ifdef ANIMATESHEET      
+    float offsetAge = outAge;
     float dist = cellInfos.y - cellInfos.x;
-    float ratio = clamp(mod(outAge * cellInfos.z, life) / life, 0., 1.0);
+
+#ifdef ANIMATESHEETRANDOMSTART
+    outCellStartOffset = cellStartOffset;
+    offsetAge += cellStartOffset;
+#endif    
+
+    float ratio = clamp(mod(offsetAge * cellInfos.z, life) / life, 0., 1.0);
 
     outCellIndex = float(int(cellInfos.x + ratio * dist));
 #endif