Nightly

dist/preview release/what's new.md

@@ -6,7 +6,7 @@
 - Added new `MixMaterial` to the Materials Library allowing to mix up to 8 textures ([julien-moreau](https://github.com/julien-moreau))
 - Added new `PhotoDome` object to display 360 photos. [Demo](https://www.babylonjs-playground.com/#14KRGG#0) ([SzeyinLee](https://github.com/SzeyinLee))
 - New GUI 3D controls toolset. [Complete doc + demos](http://doc.babylonjs.com/how_to/gui3d) ([Deltakosh](https://github.com/deltakosh))
-- Added Environmnent Texture Tools to reduce the size of the usual .DDS file ([sebavan](http://www.github.com/sebavan)) [How to](https://doc.babylonjs.com/how_to/physically_based_rendering#creating-a-compressed-environment-texture)
+- Added [Environmnent 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))
 
 ## Updates
 
@@ -29,6 +29,7 @@
 - Gizmo and gizmoManager class used to manipulate meshes in a scene, position, rotation, scale gizmos ([TrevorDev](https://github.com/TrevorDev))
 - Added a new `mesh.ignoreNonUniformScaling` to turn off non uniform scaling compensation ([Deltakosh](https://github.com/deltakosh))
 - AssetsManager tasks will only run when their state is INIT. It is now possible to remove a task from the assets manager ([RaananW](https://github.com/RaananW))
+- Added support for `minScaleX`, `minScaleY`, `maxScaleX`, `maxScaleY` for particles ([Deltakosh](https://github.com/deltakosh))
 
 ### glTF Loader
 

src/Helpers/babylon.particleHelper.ts

@@ -48,6 +48,22 @@ module BABYLON {
          */
         maxSize: number;
         /**
+         * Minimum scale of each particle on X axis
+         */
+        minScaleX: number;
+        /**
+         * Maximum scale of each particle on X axis
+         */
+        maxScaleX: number;       
+        /**
+         * Minimum scale of each particle on Y axis
+         */
+        minScaleY: number;
+        /**
+         * Maximum scale of each particle on Y axis
+         */
+        maxScaleY: number;           
+        /**
          * Minimum lifetime for each particle
          */
         minLifeTime: number;
@@ -183,6 +199,12 @@ module BABYLON {
             system.minSize = data.minSize;
             system.maxSize = data.maxSize;
 
+            system.minScaleX = data.minScaleX;
+            system.maxScaleX = data.maxScaleX;    
+            
+            system.minScaleY = data.minScaleY;
+            system.maxScaleY = data.maxScaleY;              
+
             // Life time of each particle (random between...
             system.minLifeTime = data.minLifeTime;
             system.maxLifeTime = data.maxLifeTime;
@@ -263,6 +285,12 @@ module BABYLON {
             outData.minSize = system.minSize;
             outData.maxSize = system.maxSize;
 
+            outData.minScaleX = system.minScaleX;
+            outData.maxScaleX = system.maxScaleX;     
+            
+            outData.minScaleY = system.minScaleY;
+            outData.maxScaleY = system.maxScaleY;             
+
             // Life time of each particle (random between...
             outData.minLifeTime = system.minLifeTime;
             outData.maxLifeTime = system.maxLifeTime;

src/Particles/babylon.IParticleSystem.ts

@@ -62,7 +62,25 @@ module BABYLON {
         /**
          * Maximum Size of emitting particles.
          */
-        maxSize: number;        
+        maxSize: number;     
+        
+        /**
+         * Minimum scale of emitting particles on X axis.
+         */
+        minScaleX: number;
+        /**
+         * Maximum scale of emitting particles on X axis.
+         */
+        maxScaleX: number;        
+
+        /**
+         * Minimum scale of emitting particles on Y axis.
+         */
+        minScaleY: number;
+        /**
+         * Maximum scale of emitting particles on Y axis.
+         */
+        maxScaleY: number;             
         
         /**
          * Random color of each particle after it has been emitted, between color1 and color2 vectors.

src/Particles/babylon.gpuParticleSystem.ts

@@ -57,7 +57,7 @@
 
         private _randomTexture: RawTexture;
 
-        private readonly _attributesStrideSize = 16;
+        private readonly _attributesStrideSize = 18;
         private _updateEffectOptions: EffectCreationOptions;
 
         private _randomTextureSize: number;
@@ -119,7 +119,25 @@
         /**
          * Maximum Size of emitting particles.
          */
-        public maxSize = 1;        
+        public maxSize = 1;  
+        
+        /**
+         * Minimum scale of emitting particles on X axis.
+         */
+        public minScaleX = 1;
+        /**
+         * Maximum scale of emitting particles on X axis.
+         */
+        public maxScaleX = 1;        
+
+        /**
+         * Minimum scale of emitting particles on Y axis.
+         */
+        public minScaleY = 1;
+        /**
+         * Maximum scale of emitting particles on Y axis.
+         */
+        public maxScaleY = 1;           
         
         /**
          * Random color of each particle after it has been emitted, between color1 and color2 vectors.
@@ -356,7 +374,7 @@
 
             this._updateEffectOptions = {
                 attributes: ["position", "age", "life", "seed", "size", "color", "direction", "angle"],
-                uniformsNames: ["currentCount", "timeDelta", "generalRandoms", "emitterWM", "lifeTime", "color1", "color2", "sizeRange", "gravity", "emitPower",
+                uniformsNames: ["currentCount", "timeDelta", "generalRandoms", "emitterWM", "lifeTime", "color1", "color2", "sizeRange", "scaleRange","gravity", "emitPower",
                                 "direction1", "direction2", "minEmitBox", "maxEmitBox", "radius", "directionRandomizer", "height", "coneAngle", "stopFactor", 
                                 "angleRange"],
                 uniformBuffersNames: [],
@@ -393,10 +411,10 @@
             updateVertexBuffers["age"] = source.createVertexBuffer("age", 3, 1);
             updateVertexBuffers["life"] = source.createVertexBuffer("life", 4, 1);
             updateVertexBuffers["seed"] = source.createVertexBuffer("seed", 5, 1);
-            updateVertexBuffers["size"] = source.createVertexBuffer("size", 6, 1);
-            updateVertexBuffers["color"] = source.createVertexBuffer("color", 7, 4);
-            updateVertexBuffers["direction"] = source.createVertexBuffer("direction", 11, 3);
-            updateVertexBuffers["angle"] = source.createVertexBuffer("angle", 14, 2);
+            updateVertexBuffers["size"] = source.createVertexBuffer("size", 6, 3);
+            updateVertexBuffers["color"] = source.createVertexBuffer("color", 9, 4);
+            updateVertexBuffers["direction"] = source.createVertexBuffer("direction", 13, 3);
+            updateVertexBuffers["angle"] = source.createVertexBuffer("angle", 16, 2);
            
             let vao = this._engine.recordVertexArrayObject(updateVertexBuffers, null, this._updateEffect);
             this._engine.bindArrayBuffer(null);
@@ -409,9 +427,9 @@
             renderVertexBuffers["position"] = source.createVertexBuffer("position", 0, 3, this._attributesStrideSize, true);
             renderVertexBuffers["age"] = source.createVertexBuffer("age", 3, 1, this._attributesStrideSize, true);
             renderVertexBuffers["life"] = source.createVertexBuffer("life", 4, 1, this._attributesStrideSize, true);
-            renderVertexBuffers["size"] = source.createVertexBuffer("size", 6, 1, this._attributesStrideSize, true);           
-            renderVertexBuffers["color"] = source.createVertexBuffer("color", 7, 4, this._attributesStrideSize, true);
-            renderVertexBuffers["angle"] = source.createVertexBuffer("angle", 14, 2, this._attributesStrideSize, true);
+            renderVertexBuffers["size"] = source.createVertexBuffer("size", 6, 3, this._attributesStrideSize, true);           
+            renderVertexBuffers["color"] = source.createVertexBuffer("color", 9, 4, this._attributesStrideSize, true);
+            renderVertexBuffers["angle"] = source.createVertexBuffer("angle", 16, 2, this._attributesStrideSize, true);
 
             renderVertexBuffers["offset"] = spriteSource.createVertexBuffer("offset", 0, 2);
             renderVertexBuffers["uv"] = spriteSource.createVertexBuffer("uv", 2, 2);
@@ -444,6 +462,8 @@
 
               // Size
               data.push(0.0);
+              data.push(0.0);
+              data.push(0.0);
 
               // color
               data.push(0.0);
@@ -571,6 +591,7 @@
             this._updateEffect.setDirectColor4("color1", this.color1);
             this._updateEffect.setDirectColor4("color2", this.color2);
             this._updateEffect.setFloat2("sizeRange", this.minSize, this.maxSize);
+            this._updateEffect.setFloat4("scaleRange", this.minScaleX, this.maxScaleX, this.minScaleY, this.maxScaleY);
             this._updateEffect.setFloat2("angleRange", this.minAngularSpeed, this.maxAngularSpeed);
             this._updateEffect.setVector3("gravity", this.gravity);
 

src/Particles/babylon.particle.ts

@@ -41,6 +41,11 @@
         public size = 0;
 
         /**
+         * The current scale of the particle.
+         */
+        public scale = new Vector2(1, 1);        
+
+        /**
          * The current angle of the particle.
          */
         public angle = 0;
@@ -134,6 +139,7 @@
             other.lifeTime = this.lifeTime;
             other.age = this.age;
             other.size = this.size;
+            other.scale.copyFrom(this.scale);
             other.angle = this.angle;
             other.angularSpeed = this.angularSpeed;
             other.particleSystem = this.particleSystem;

src/Particles/babylon.particleSystem.ts

@@ -93,6 +93,24 @@
         public maxSize = 1;
 
         /**
+         * Minimum scale of emitting particles on X axis.
+         */
+        public minScaleX = 1;
+        /**
+         * Maximum scale of emitting particles on X axis.
+         */
+        public maxScaleX = 1;        
+
+        /**
+         * Minimum scale of emitting particles on Y axis.
+         */
+        public minScaleY = 1;
+        /**
+         * Maximum scale of emitting particles on Y axis.
+         */
+        public maxScaleY = 1;           
+
+        /**
          * Minimum angular speed of emitting particles (Z-axis rotation for each particle).
          */
         public minAngularSpeed = 0;
@@ -330,7 +348,7 @@
         private _stopped = false;
         private _actualFrame = 0;
         private _scaledUpdateSpeed: number;
-        private _vertexBufferSize = 11;
+        private _vertexBufferSize = 12;
         private _isAnimationSheetEnabled: boolean;
 
         // end of sheet animation
@@ -382,7 +400,7 @@
             this._epsilon = epsilon;
             this._isAnimationSheetEnabled = isAnimationSheetEnabled;
             if (isAnimationSheetEnabled) {
-                this._vertexBufferSize = 12;
+                this._vertexBufferSize = 13;
             }
 
             this._scene = scene || Engine.LastCreatedScene;
@@ -393,22 +411,24 @@
 
             this._createIndexBuffer();
 
-            // 11 floats per particle (x, y, z, r, g, b, a, angle, size, offsetX, offsetY) + 1 filler
+            // 13 floats per particle (x, y, z, r, g, b, a, angle, scaleX, scaleY, offsetX, offsetY) + 1 filler
             this._vertexData = new Float32Array(capacity * this._vertexBufferSize * 4);
             this._vertexBuffer = new Buffer(scene.getEngine(), this._vertexData, true, this._vertexBufferSize);
 
             var positions = this._vertexBuffer.createVertexBuffer(VertexBuffer.PositionKind, 0, 3);
             var colors = this._vertexBuffer.createVertexBuffer(VertexBuffer.ColorKind, 3, 4);
-            var options = this._vertexBuffer.createVertexBuffer("options", 7, 4);
+            var options = this._vertexBuffer.createVertexBuffer("options", 7, 3);
+            var size = this._vertexBuffer.createVertexBuffer("size", 10, 2);
 
             if (this._isAnimationSheetEnabled) {
-                var cellIndexBuffer = this._vertexBuffer.createVertexBuffer("cellIndex", 11, 1);
+                var cellIndexBuffer = this._vertexBuffer.createVertexBuffer("cellIndex", 12, 1);
                 this._vertexBuffers["cellIndex"] = cellIndexBuffer;
             }
 
             this._vertexBuffers[VertexBuffer.PositionKind] = positions;
             this._vertexBuffers[VertexBuffer.ColorKind] = colors;
             this._vertexBuffers["options"] = options;
+            this._vertexBuffers["size"] = size;
 
             // Default emitter type
             this.particleEmitterType = new BoxParticleEmitter();
@@ -534,9 +554,10 @@
             this._vertexData[offset + 5] = particle.color.b;
             this._vertexData[offset + 6] = particle.color.a;
             this._vertexData[offset + 7] = particle.angle;
-            this._vertexData[offset + 8] = particle.size;
-            this._vertexData[offset + 9] = offsetX;
-            this._vertexData[offset + 10] = offsetY;
+            this._vertexData[offset + 8] = offsetX;
+            this._vertexData[offset + 9] = offsetY;   
+            this._vertexData[offset + 10] = particle.scale.x * particle.size;
+            this._vertexData[offset + 11] = particle.scale.y * particle.size;      
         }
 
         /**
@@ -562,10 +583,11 @@
             this._vertexData[offset + 5] = particle.color.b;
             this._vertexData[offset + 6] = particle.color.a;
             this._vertexData[offset + 7] = particle.angle;
-            this._vertexData[offset + 8] = particle.size;
-            this._vertexData[offset + 9] = offsetX;
-            this._vertexData[offset + 10] = offsetY;
-            this._vertexData[offset + 11] = particle.cellIndex;
+            this._vertexData[offset + 8] = offsetX;
+            this._vertexData[offset + 9] = offsetY;   
+            this._vertexData[offset + 10] = particle.scale.x * particle.size;
+            this._vertexData[offset + 11] = particle.scale.y * particle.size;
+            this._vertexData[offset + 12] = particle.cellIndex;
         }
 
         // start of sub system methods
@@ -677,6 +699,7 @@
                 particle.lifeTime = Scalar.RandomRange(this.minLifeTime, this.maxLifeTime);
 
                 particle.size = Scalar.RandomRange(this.minSize, this.maxSize);
+                particle.scale.copyFromFloats(Scalar.RandomRange(this.minScaleX, this.maxScaleX), Scalar.RandomRange(this.minScaleY, this.maxScaleY));
                 particle.angularSpeed = Scalar.RandomRange(this.minAngularSpeed, this.maxAngularSpeed);
 
                 var step = Scalar.RandomRange(0, 1.0);
@@ -712,11 +735,11 @@
                 var effectCreationOption: any;
 
                 if (this._isAnimationSheetEnabled) {
-                    attributesNamesOrOptions = [VertexBuffer.PositionKind, VertexBuffer.ColorKind, "options", "cellIndex"];
+                    attributesNamesOrOptions = [VertexBuffer.PositionKind, VertexBuffer.ColorKind, "options", "size", "cellIndex"];
                     effectCreationOption = ["invView", "view", "projection", "particlesInfos", "vClipPlane", "textureMask"];
                 }
                 else {
-                    attributesNamesOrOptions = [VertexBuffer.PositionKind, VertexBuffer.ColorKind, "options"];
+                    attributesNamesOrOptions = [VertexBuffer.PositionKind, VertexBuffer.ColorKind, "options", "size", ];
                     effectCreationOption = ["invView", "view", "projection", "vClipPlane", "textureMask"]
                 }
 
@@ -1074,6 +1097,10 @@
             serializationObject.maxAngularSpeed = this.maxAngularSpeed;
             serializationObject.minSize = this.minSize;
             serializationObject.maxSize = this.maxSize;
+            serializationObject.minScaleX = this.minScaleX;
+            serializationObject.maxScaleX = this.maxScaleX;
+            serializationObject.minScaleY = this.minScaleY;
+            serializationObject.maxScaleY = this.maxScaleY;            
             serializationObject.minEmitPower = this.minEmitPower;
             serializationObject.maxEmitPower = this.maxEmitPower;
             serializationObject.minLifeTime = this.minLifeTime;
@@ -1169,6 +1196,14 @@
             particleSystem.maxAngularSpeed = parsedParticleSystem.maxAngularSpeed;
             particleSystem.minSize = parsedParticleSystem.minSize;
             particleSystem.maxSize = parsedParticleSystem.maxSize;
+
+            if (parsedParticleSystem.minScaleX) {
+                particleSystem.minScaleX = parsedParticleSystem.minScaleX;
+                particleSystem.maxScaleX = parsedParticleSystem.maxScaleX;                
+                particleSystem.minScaleY = parsedParticleSystem.minScaleY;
+                particleSystem.maxScaleY = parsedParticleSystem.maxScaleY;                
+            }
+
             particleSystem.minLifeTime = parsedParticleSystem.minLifeTime;
             particleSystem.maxLifeTime = parsedParticleSystem.maxLifeTime;
             particleSystem.minEmitPower = parsedParticleSystem.minEmitPower;

src/Shaders/gpuRenderParticles.vertex.fx

@@ -8,7 +8,7 @@ uniform mat4 projection;
 in vec3 position;
 in float age;
 in float life;
-in float size;
+in vec3 size;
 in vec4 color;
 in vec2 offset;
 in vec2 uv;
@@ -29,7 +29,7 @@ void main() {
   float ratio = age / life;
   vColor = color * vec4(1.0 - ratio) + colorDead * vec4(ratio);
 
-  vec2 cornerPos = offset * size;
+  vec2 cornerPos = offset * size.yz * size.x;
 
   // Rotate
 	vec4 rotatedCorner;

src/Shaders/gpuUpdateParticles.vertex.fx

@@ -10,6 +10,7 @@ uniform mat4 emitterWM;
 uniform vec2 lifeTime;
 uniform vec2 emitPower;
 uniform vec2 sizeRange;
+uniform vec4 scaleRange;
 uniform vec4 color1;
 uniform vec4 color2;
 uniform vec3 gravity;
@@ -45,7 +46,7 @@ in vec3 position;
 in float age;
 in float life;
 in float seed;
-in float size;
+in vec3 size;
 in vec4 color;
 in vec3 direction;
 in vec2 angle;
@@ -55,7 +56,7 @@ out vec3 outPosition;
 out float outAge;
 out float outLife;
 out float outSeed;
-out float outSize;
+out vec3 outSize;
 out vec4 outColor;
 out vec3 outDirection;
 out vec2 outAngle;
@@ -77,7 +78,7 @@ void main() {
       outLife = life;
       outSeed = seed;
       outColor = vec4(0.,0.,0.,0.);
-      outSize = 0.;
+      outSize = vec3(0., 0., 0.);
       outDirection = direction;
       outAngle = angle;
       return;
@@ -96,7 +97,9 @@ void main() {
     outSeed = seed;
 
     // Size
-    outSize = sizeRange.x + (sizeRange.y - sizeRange.x) * randoms.g;
+    outSize.x = sizeRange.x + (sizeRange.y - sizeRange.x) * randoms.g;
+    outSize.y = scaleRange.x + (scaleRange.y - scaleRange.x) * randoms.b;
+    outSize.z = scaleRange.z + (scaleRange.w - scaleRange.z) * randoms.a;
 
     // Color
     outColor = color1 + (color2 - color1) * randoms.b;

src/Shaders/particles.vertex.fx

@@ -1,7 +1,8 @@
 // Attributes
 attribute vec3 position;
 attribute vec4 color;
-attribute vec4 options;
+attribute vec3 options;
+attribute vec2 size;
 attribute float cellIndex;
 
 // Uniforms
@@ -22,9 +23,8 @@ varying float fClipDistance;
 void main(void) {	
 	vec3 viewPos = (view * vec4(position, 1.0)).xyz; 
 	vec2 cornerPos;
-	float size = options.y;
 	float angle = options.x;
-	vec2 offset = options.zw;
+	vec2 offset = options.yz;
 	
 	cornerPos = vec2(offset.x - 0.5, offset.y  - 0.5) * size;