Fix ramp gradient for particles

dist/preview release/viewer/babylon.viewer.d.ts

@@ -168,11 +168,11 @@ declare module BabylonViewer {
                 * Mainly used for help and errors
                 * @param subScreen the name of the subScreen. Those can be defined in the configuration object
                 */
-            showOverlayScreen(subScreen: string): Promise<string> | Promise<Template>;
+            showOverlayScreen(subScreen: string): Promise<Template> | Promise<string>;
             /**
                 * Hide the overlay screen.
                 */
-            hideOverlayScreen(): Promise<string> | Promise<Template>;
+            hideOverlayScreen(): Promise<Template> | Promise<string>;
             /**
                 * show the viewer (in case it was hidden)
                 *
@@ -189,11 +189,11 @@ declare module BabylonViewer {
                 * Show the loading screen.
                 * The loading screen can be configured using the configuration object
                 */
-            showLoadingScreen(): Promise<string> | Promise<Template>;
+            showLoadingScreen(): Promise<Template> | Promise<string>;
             /**
                 * Hide the loading screen
                 */
-            hideLoadingScreen(): Promise<string> | Promise<Template>;
+            hideLoadingScreen(): Promise<Template> | Promise<string>;
             dispose(): void;
             protected _onConfigurationLoaded(configuration: ViewerConfiguration): void;
     }

dist/preview release/viewer/babylon.viewer.module.d.ts

@@ -200,11 +200,11 @@ declare module 'babylonjs-viewer/viewer/defaultViewer' {
                 * Mainly used for help and errors
                 * @param subScreen the name of the subScreen. Those can be defined in the configuration object
                 */
-            showOverlayScreen(subScreen: string): Promise<string> | Promise<Template>;
+            showOverlayScreen(subScreen: string): Promise<Template> | Promise<string>;
             /**
                 * Hide the overlay screen.
                 */
-            hideOverlayScreen(): Promise<string> | Promise<Template>;
+            hideOverlayScreen(): Promise<Template> | Promise<string>;
             /**
                 * show the viewer (in case it was hidden)
                 *
@@ -221,11 +221,11 @@ declare module 'babylonjs-viewer/viewer/defaultViewer' {
                 * Show the loading screen.
                 * The loading screen can be configured using the configuration object
                 */
-            showLoadingScreen(): Promise<string> | Promise<Template>;
+            showLoadingScreen(): Promise<Template> | Promise<string>;
             /**
                 * Hide the loading screen
                 */
-            hideLoadingScreen(): Promise<string> | Promise<Template>;
+            hideLoadingScreen(): Promise<Template> | Promise<string>;
             dispose(): void;
             protected _onConfigurationLoaded(configuration: ViewerConfiguration): void;
     }

src/Particles/babylon.particleSystem.ts

@@ -899,6 +899,10 @@
                 this._vertexBufferSize += 3;
             }
 
+            if (this._useRampGradients) {
+                this._vertexBufferSize += 4;
+            }
+
             let engine = this._scene.getEngine();
             this._vertexData = new Float32Array(this._capacity * this._vertexBufferSize * (this._useInstancing ? 1 : 4));
             this._vertexBuffer = new Buffer(engine, this._vertexData, true, this._vertexBufferSize);
@@ -932,6 +936,12 @@
                 dataOffset += 3;
             }
 
+            if (this._useRampGradients) {
+                var rampDataBuffer = this._vertexBuffer.createVertexBuffer("remapData", dataOffset, 4, this._vertexBufferSize, this._useInstancing);
+                this._vertexBuffers["remapData"] = rampDataBuffer;
+                dataOffset += 4;
+            }
+
             var offsets: VertexBuffer;
             if (this._useInstancing) {
                 var spriteData = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]);
@@ -943,11 +953,6 @@
             }
             this._vertexBuffers["offset"] = offsets;
 
-            if (this._useRampGradients) {
-                var rampDataBuffer = this._vertexBuffer.createVertexBuffer("rampData", dataOffset, 4, this._vertexBufferSize, this._useInstancing);
-                this._vertexBuffers["rampData"] = rampDataBuffer;
-                dataOffset += 4;
-            }
         }
 
         private _createIndexBuffer() {
@@ -1374,7 +1379,7 @@
                 // Inherited Velocity
                 particle.direction.addInPlace(this._inheritedVelocityOffset);
 
-                // Remap
+                // Ramp
                 if (this._useRampGradients) {
                     particle.remapData = new Vector4(0, 1, 0, 1);
                 }
@@ -1382,8 +1387,8 @@
         }
 
         /** @hidden */
-        public static _GetAttributeNamesOrOptions(isAnimationSheetEnabled = false, isBillboardBased = false): string[] {
-            var attributeNamesOrOptions = [VertexBuffer.PositionKind, VertexBuffer.ColorKind, "angle", "offset", "size", "remapData"];
+        public static _GetAttributeNamesOrOptions(isAnimationSheetEnabled = false, isBillboardBased = false, useRampGradients = false): string[] {
+            var attributeNamesOrOptions = [VertexBuffer.PositionKind, VertexBuffer.ColorKind, "angle", "offset", "size"]
 
             if (isAnimationSheetEnabled) {
                 attributeNamesOrOptions.push("cellIndex");
@@ -1393,6 +1398,10 @@
                 attributeNamesOrOptions.push("direction");
             }
 
+            if (useRampGradients) {
+                attributeNamesOrOptions.push("remapData");
+            }
+
             return attributeNamesOrOptions;
         }
 
@@ -1464,7 +1473,7 @@
             if (this._cachedDefines !== join) {
                 this._cachedDefines = join;
 
-                var attributesNamesOrOptions = ParticleSystem._GetAttributeNamesOrOptions(this._isAnimationSheetEnabled, this._isBillboardBased);
+                var attributesNamesOrOptions = ParticleSystem._GetAttributeNamesOrOptions(this._isAnimationSheetEnabled, this._isBillboardBased, this._useRampGradients);
                 var effectCreationOption = ParticleSystem._GetEffectCreationOptions(this._isAnimationSheetEnabled);
 
                 var samplers = ["diffuseSampler", "rampSampler"];

src/Particles/babylon.subEmitter.ts

@@ -38,23 +38,23 @@ module BABYLON {
             /**
              * the particle system to be used by the sub emitter
              */
-            public particleSystem:ParticleSystem){
+            public particleSystem: ParticleSystem) {
         }
         /**
          * Clones the sub emitter
          * @returns the cloned sub emitter
          */
-        clone():SubEmitter{
+        clone(): SubEmitter {
             // Clone particle system
             var emitter = this.particleSystem.emitter;
-            if(!emitter){
+            if (!emitter) {
                 emitter = new Vector3();
-            }else if(emitter instanceof Vector3){
+            } else if (emitter instanceof Vector3) {
                 emitter = emitter.clone();
-            }else if(emitter instanceof AbstractMesh){
+            } else if (emitter instanceof AbstractMesh) {
                 emitter = new Mesh("", emitter._scene);
             }
-            var clone = new SubEmitter(this.particleSystem.clone("",emitter));
+            var clone = new SubEmitter(this.particleSystem.clone("", emitter));
 
             // Clone properties
             clone.type = this.type;

src/Shaders/particles.vertex.fx

@@ -9,10 +9,10 @@ attribute float cellIndex;
 #ifndef BILLBOARD	
 attribute vec3 direction;
 #endif
-attribute vec2 offset;
 #ifdef RAMPGRADIENT
 attribute vec4 remapData;
 #endif
+attribute vec2 offset;
 
 // Uniforms
 uniform mat4 view;