improved color ramp support 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<Template> | Promise<string>;
+            showOverlayScreen(subScreen: string): Promise<string> | Promise<Template>;
             /**
                 * Hide the overlay screen.
                 */
-            hideOverlayScreen(): Promise<Template> | Promise<string>;
+            hideOverlayScreen(): Promise<string> | Promise<Template>;
             /**
                 * 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<Template> | Promise<string>;
+            showLoadingScreen(): Promise<string> | Promise<Template>;
             /**
                 * Hide the loading screen
                 */
-            hideLoadingScreen(): Promise<Template> | Promise<string>;
+            hideLoadingScreen(): Promise<string> | Promise<Template>;
             dispose(): void;
             protected _onConfigurationLoaded(configuration: ViewerConfiguration): void;
     }
@@ -924,7 +924,7 @@ declare module BabylonViewer {
       * @param name the name of the custom optimizer configuration
       * @param upgrade set to true if you want to upgrade optimizer and false if you want to degrade
       */
-    export function getCustomOptimizerByName(name: string, upgrade?: boolean): typeof extendedUpgrade;
+    export function getCustomOptimizerByName(name: string, upgrade?: boolean): (sceneManager: SceneManager) => boolean;
     export function registerCustomOptimizer(name: string, optimizer: (sceneManager: SceneManager) => boolean): void;
 }
 declare module BabylonViewer {
@@ -1558,20 +1558,6 @@ declare module BabylonViewer {
     export function addLoaderPlugin(name: string, plugin: ILoaderPlugin): void;
 }
 declare module BabylonViewer {
-    /**
-        * A custom upgrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedUpgrade(sceneManager: SceneManager): boolean;
-    /**
-        * A custom degrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedDegrade(sceneManager: SceneManager): boolean;
-}
-declare module BabylonViewer {
 }
 declare module BabylonViewer {
     export interface IEnvironmentMapConfiguration {

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<Template> | Promise<string>;
+            showOverlayScreen(subScreen: string): Promise<string> | Promise<Template>;
             /**
                 * Hide the overlay screen.
                 */
-            hideOverlayScreen(): Promise<Template> | Promise<string>;
+            hideOverlayScreen(): Promise<string> | Promise<Template>;
             /**
                 * 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<Template> | Promise<string>;
+            showLoadingScreen(): Promise<string> | Promise<Template>;
             /**
                 * Hide the loading screen
                 */
-            hideLoadingScreen(): Promise<Template> | Promise<string>;
+            hideLoadingScreen(): Promise<string> | Promise<Template>;
             dispose(): void;
             protected _onConfigurationLoaded(configuration: ViewerConfiguration): void;
     }
@@ -985,14 +985,13 @@ declare module 'babylonjs-viewer/templating/viewerTemplatePlugin' {
 }
 
 declare module 'babylonjs-viewer/optimizer/custom' {
-    import { extendedUpgrade } from "babylonjs-viewer/optimizer/custom/extended";
     import { SceneManager } from "babylonjs-viewer/managers/sceneManager";
     /**
       *
       * @param name the name of the custom optimizer configuration
       * @param upgrade set to true if you want to upgrade optimizer and false if you want to degrade
       */
-    export function getCustomOptimizerByName(name: string, upgrade?: boolean): typeof extendedUpgrade;
+    export function getCustomOptimizerByName(name: string, upgrade?: boolean): (sceneManager: SceneManager) => boolean;
     export function registerCustomOptimizer(name: string, optimizer: (sceneManager: SceneManager) => boolean): void;
 }
 
@@ -1663,22 +1662,6 @@ declare module 'babylonjs-viewer/loader/plugins' {
     export function addLoaderPlugin(name: string, plugin: ILoaderPlugin): void;
 }
 
-declare module 'babylonjs-viewer/optimizer/custom/extended' {
-    import { SceneManager } from 'babylonjs-viewer/managers/sceneManager';
-    /**
-        * A custom upgrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedUpgrade(sceneManager: SceneManager): boolean;
-    /**
-        * A custom degrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedDegrade(sceneManager: SceneManager): boolean;
-}
-
 declare module 'babylonjs-viewer/configuration/interfaces' {
     export * from 'babylonjs-viewer/configuration/interfaces/cameraConfiguration';
     export * from 'babylonjs-viewer/configuration/interfaces/colorGradingConfiguration';

src/Math/babylon.math.ts

@@ -386,10 +386,22 @@
          * @returns a new Color3 object
          */
         public static Lerp(start: Color3, end: Color3, amount: number): Color3 {
-            var r = start.r + ((end.r - start.r) * amount);
-            var g = start.g + ((end.g - start.g) * amount);
-            var b = start.b + ((end.b - start.b) * amount);
-            return new Color3(r, g, b);
+            var result = new Color3(0.0, 0.0, 0.0);
+            Color3.LerpToRef(start, end, amount, result);
+            return result;
+        }
+
+        /**
+         * Creates a new Color3 with values linearly interpolated of "amount" between the start Color3 and the end Color3
+         * @param left defines the start value
+         * @param right defines the end value
+         * @param amount defines the gradient factor
+         * @param result defines the Color3 object where to store the result
+         */
+        public static LerpToRef(left: Color3, right: Color3, amount: number, result: Color3): void {
+            result.r = left.r + ((right.r - left.r) * amount);
+            result.g = left.g + ((right.g - left.g) * amount);
+            result.b = left.b + ((right.b - left.b) * amount);
         }
 
         /**
@@ -810,6 +822,17 @@
             result.a = left.a + (right.a - left.a) * amount;
         }
 
+        
+        /**
+         * Creates a new Color4 from a Color3 and an alpha value
+         * @param color3 defines the source Color3 to read from
+         * @param alpha defines the alpha component (1.0 by default)
+         * @returns a new Color4 object
+         */
+        public static FromColor3(color3: Color3, alpha: number = 1.0): Color4 {
+            return new Color4(color3.r, color3.g, color3.b, alpha);
+        }
+
         /**
          * Creates a new Color4 from the starting index element of the given array
          * @param array defines the source array to read from

src/Particles/babylon.IParticleSystem.ts

@@ -436,13 +436,13 @@ module BABYLON {
          * @param color defines the color to affect to the specified gradient
          * @returns the current particle system
          */
-        addRampGradient(gradient: number, color: Color4): IParticleSystem;     
+        addRampGradient(gradient: number, color: Color3): IParticleSystem;     
         /**
          * Gets the current list of ramp gradients.
          * You must use addRampGradient and removeRampGradient to udpate this list
          * @returns the list of ramp gradients
          */
-        getRampGradients(): Nullable<Array<ColorGradient>>;             
+        getRampGradients(): Nullable<Array<Color3Gradient>>;             
         
         /**
          * Adds a new color remap gradient

src/Particles/babylon.baseParticleSystem.ts

@@ -258,7 +258,7 @@ module BABYLON {
         protected _dragGradients: Nullable<Array<FactorGradient>> = null;
         protected _emitRateGradients: Nullable<Array<FactorGradient>> = null;
         protected _startSizeGradients: Nullable<Array<FactorGradient>> = null;
-        protected _rampGradients: Nullable<Array<ColorGradient>> = null;
+        protected _rampGradients: Nullable<Array<Color3Gradient>> = null;
         protected _colorRemapGradients: Nullable<Array<FactorGradient>> = null;
         protected _alphaRemapGradients: Nullable<Array<FactorGradient>> = null;        
 

src/Particles/babylon.gpuParticleSystem.ts

@@ -512,7 +512,7 @@
          * @param color defines the color to affect to the specified gradient
          * @returns the current particle system
          */
-        public addRampGradient(gradient: number, color: Color4): IParticleSystem {
+        public addRampGradient(gradient: number, color: Color3): IParticleSystem {
             //Not supported by GPUParticleSystem          
 
             return this;
@@ -533,7 +533,7 @@
          * Not supported by GPUParticleSystem
          * @returns the list of ramp gradients
          */
-        public getRampGradients(): Nullable<Array<ColorGradient>> {
+        public getRampGradients(): Nullable<Array<Color3Gradient>> {
             return null;
         }             
         

src/Particles/babylon.particleSystem.ts

@@ -728,18 +728,18 @@
             }
 
             let data = new Uint8Array(this._rawTextureWidth * 4);
-            let tmpColor = Tmp.Color4[0];
+            let tmpColor = Tmp.Color3[0];
 
             for (var x = 0; x < this._rawTextureWidth; x++) {
                 var ratio = x / this._rawTextureWidth;
 
                 Tools.GetCurrentGradient(ratio, this._rampGradients, (currentGradient, nextGradient, scale) => {
 
-                    Color4.LerpToRef((<ColorGradient>currentGradient).color1, (<ColorGradient>nextGradient).color1, scale, tmpColor);
+                    Color3.LerpToRef((<Color3Gradient>currentGradient).color, (<Color3Gradient>nextGradient).color, scale, tmpColor);
                     data[x * 4] = tmpColor.r * 255;
                     data[x * 4 + 1] = tmpColor.g * 255;
                     data[x * 4 + 2] = tmpColor.b * 255;
-                    data[x * 4 + 3] = tmpColor.a * 255;
+                    data[x * 4 + 3] = 255;
                 });
 
             }
@@ -752,7 +752,7 @@
          * You must use addRampGradient and removeRampGradient to udpate this list
          * @returns the list of ramp gradients
          */
-        public getRampGradients(): Nullable<Array<ColorGradient>> {
+        public getRampGradients(): Nullable<Array<Color3Gradient>> {
             return this._rampGradients;
         }
 
@@ -762,14 +762,14 @@
          * @param color defines the color to affect to the specified gradient
          * @returns the current particle system
          */
-        public addRampGradient(gradient: number, color: Color4): ParticleSystem {
+        public addRampGradient(gradient: number, color: Color3): ParticleSystem {
             if (!this._rampGradients) {
                 this._rampGradients = [];
             }
 
-            let rampGradient = new ColorGradient();
+            let rampGradient = new Color3Gradient();
             rampGradient.gradient = gradient;
-            rampGradient.color1 = color;
+            rampGradient.color = color;
             this._rampGradients.push(rampGradient);
 
             this._rampGradients.sort((a, b) => {
@@ -1836,7 +1836,7 @@
             }
             if (this._rampGradients) {
                 this._rampGradients.forEach((v) => {
-                    result.addRampGradient(v.gradient, v.color1);
+                    result.addRampGradient(v.gradient, v.color);
                 });
             }
             if (this._colorRemapGradients) {
@@ -1960,7 +1960,7 @@
                 for (var rampGradient of rampGradients) {
                     var serializedGradient: any = {
                         gradient: rampGradient.gradient,
-                        color1: rampGradient.color1.asArray()
+                        color: rampGradient.color.asArray()
                     };
 
                     serializationObject.rampGradients.push(serializedGradient);
@@ -2224,7 +2224,7 @@
 
             if (parsedParticleSystem.rampGradients) {
                 for (var rampGradient of parsedParticleSystem.rampGradients) {
-                    particleSystem.addRampGradient(rampGradient.gradient, Color4.FromArray(rampGradient.color1));
+                    particleSystem.addRampGradient(rampGradient.gradient, Color3.FromArray(rampGradient.color1));
                 }
             }
 

src/Shaders/particles.fragment.fx

@@ -24,13 +24,15 @@ void main(void) {
 	vec4 baseColor = (textureColor * textureMask + (vec4(1., 1., 1., 1.) - textureMask)) * vColor;
 
 	#ifdef RAMPGRADIENT
-		float alpha = textureColor.a;
+		float alpha = baseColor.a;
 		float remappedColorIndex = clamp((alpha - remapRanges.x) / remapRanges.y, 0.0, 1.0);
 
-		baseColor.rgb *= texture2D(rampSampler, vec2(remappedColorIndex, 0.)).rgb;
+		vec4 rampColor = texture2D(rampSampler, vec2(1.0 - remappedColorIndex, 0.));
+		baseColor.rgb *= rampColor.rgb;
 
 		// Remapped alpha
-		baseColor.a = clamp((alpha - remapRanges.z) / remapRanges.w, 0.0, 1.0);
+		float finalAlpha = baseColor.a;
+		baseColor.a = clamp((alpha * rampColor.a - remapRanges.z) / remapRanges.w, 0.0, 1.0);
 	#endif
 
 	#ifdef BLENDMULTIPLYMODE

src/Tools/babylon.tools.ts

@@ -12,7 +12,7 @@
         gradient: number;
     }
 
-    /** Class used to store color gradient */
+    /** Class used to store color4 gradient */
     export class ColorGradient implements IValueGradient {
         /**
          * Gets or sets the gradient value (between 0 and 1)
@@ -42,6 +42,18 @@
         }
     }
 
+    /** Class used to store color 3 gradient */
+    export class Color3Gradient implements IValueGradient {
+        /**
+         * Gets or sets the gradient value (between 0 and 1)
+         */
+        public gradient: number;
+        /**
+         * Gets or sets the associated color
+         */
+        public color: Color3;
+    }    
+
     /** Class used to store factor gradient */
     export class FactorGradient implements IValueGradient {
         /**