Improve how noise texture works with particles

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

@@ -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

@@ -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/Particles/babylon.gpuParticleSystem.ts

@@ -583,7 +583,7 @@
             this._scene.particleSystems.push(this);
 
             this._updateEffectOptions = {
-                attributes: ["position", "age", "life", "seed", "size", "color", "direction", "initialDirection", "angle", "cellIndex", "cellStartOffset"],
+                attributes: ["position", "age", "life", "seed", "size", "color", "direction", "initialDirection", "angle", "cellIndex", "cellStartOffset", "noiseCoordinates1", "noiseCoordinates2"],
                 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"],
@@ -668,7 +668,14 @@
                     updateVertexBuffers["cellStartOffset"] = source.createVertexBuffer("cellStartOffset", offset, 1);
                     offset += 1;
                 }
-            }            
+            }           
+            
+            if (this.noiseTexture) {
+                updateVertexBuffers["noiseCoordinates1"] = source.createVertexBuffer("noiseCoordinates1", offset, 3);
+                offset += 3;
+                updateVertexBuffers["noiseCoordinates2"] = source.createVertexBuffer("noiseCoordinates2", offset, 3);
+                offset += 3;
+            }
            
             let vao = this._engine.recordVertexArrayObject(updateVertexBuffers, null, this._updateEffect);
             this._engine.bindArrayBuffer(null);
@@ -711,7 +718,14 @@
                     renderVertexBuffers["cellStartOffset"] = source.createVertexBuffer("cellStartOffset", offset, 1, this._attributesStrideSize, true);
                     offset += 1;
                 }
-            }               
+            }     
+            
+            if (this.noiseTexture) {
+                renderVertexBuffers["noiseCoordinates1"] = source.createVertexBuffer("noiseCoordinates1", offset, 3, this._attributesStrideSize, true);
+                offset += 3;
+                renderVertexBuffers["noiseCoordinates2"] = source.createVertexBuffer("noiseCoordinates2", offset, 3, this._attributesStrideSize, true);
+                offset += 3;
+            }
 
             renderVertexBuffers["offset"] = spriteSource.createVertexBuffer("offset", 0, 2);
             renderVertexBuffers["uv"] = spriteSource.createVertexBuffer("uv", 2, 2);
@@ -747,7 +761,11 @@
                 if (this.spriteRandomStartCell) {
                     this._attributesStrideSize += 1;
                 }
-            }            
+            }     
+            
+            if (this.noiseTexture) {
+                this._attributesStrideSize += 6;
+            }
 
             for (var particleIndex = 0; particleIndex < this._capacity; particleIndex++) {
                 // position
@@ -802,7 +820,16 @@
                     if (this.spriteRandomStartCell) {
                         data.push(0.0); 
                     }
-                }                
+                }    
+                
+                if (this.noiseTexture) { // Random coordinates for reading into noise texture
+                    data.push(Math.random());
+                    data.push(Math.random());
+                    data.push(Math.random());
+                    data.push(Math.random());
+                    data.push(Math.random());
+                    data.push(Math.random());
+                }
             }
 
             // Sprite data
@@ -898,7 +925,12 @@
                 if (this.spriteRandomStartCell) {
                     this._updateEffectOptions.transformFeedbackVaryings.push("outCellStartOffset");
                 }
-            }               
+            }         
+            
+            if (this.noiseTexture) {
+                this._updateEffectOptions.transformFeedbackVaryings.push("outNoiseCoordinates1");
+                this._updateEffectOptions.transformFeedbackVaryings.push("outNoiseCoordinates2");
+            }
 
             this._updateEffectOptions.defines = defines;
             this._updateEffect = new Effect("gpuUpdateParticles", this._updateEffectOptions, this._scene.getEngine());   

src/Particles/babylon.particle.ts

@@ -124,6 +124,11 @@
         public _currentDrag1 = 0;
         /** @hidden */
         public _currentDrag2 = 0;  
+
+        /** @hidden */
+        public _randomNoiseCoordinates1: Vector3;
+        /** @hidden */
+        public _randomNoiseCoordinates2: Vector3;
      
 
         /**
@@ -252,6 +257,15 @@
             if (this.particleSystem.useRampGradients) {
                 other.remapData.copyFrom(this.remapData);
             }
+            if (this._randomNoiseCoordinates1) {
+                if (other._randomNoiseCoordinates1) {
+                    other._randomNoiseCoordinates1.copyFromFloats(Math.random(), Math.random(), Math.random());
+                    other._randomNoiseCoordinates2.copyFromFloats(Math.random(), Math.random(), Math.random());
+                } else {
+                    other._randomNoiseCoordinates1 = new Vector3(Math.random(), Math.random(), Math.random());
+                    other._randomNoiseCoordinates2 = new Vector3(Math.random(), Math.random(), Math.random());
+                }
+            }
         }
     }
 } 

src/Particles/babylon.particleSystem.ts

@@ -295,15 +295,9 @@
 
                         // Noise
                         if (noiseTextureData && noiseTextureSize) {
-                            let localPosition = Tmp.Vector3[0];
-                            let emitterPosition = Tmp.Vector3[1];
-
-                            this._emitterWorldMatrix.getTranslationToRef(emitterPosition);
-                            particle.position.subtractToRef(emitterPosition, localPosition);
-
-                            let fetchedColorR = this._fetchR(localPosition.y, localPosition.z, noiseTextureSize.width, noiseTextureSize.height, noiseTextureData);
-                            let fetchedColorG = this._fetchR(localPosition.x + 0.33, localPosition.z + 0.33, noiseTextureSize.width, noiseTextureSize.height, noiseTextureData);
-                            let fetchedColorB = this._fetchR(localPosition.x - 0.33, localPosition.y - 0.33, noiseTextureSize.width, noiseTextureSize.height, noiseTextureData);
+                            let fetchedColorR = this._fetchR(particle._randomNoiseCoordinates1.x, particle._randomNoiseCoordinates1.y, noiseTextureSize.width, noiseTextureSize.height, noiseTextureData);
+                            let fetchedColorG = this._fetchR(particle._randomNoiseCoordinates1.z, particle._randomNoiseCoordinates2.x, noiseTextureSize.width, noiseTextureSize.height, noiseTextureData);
+                            let fetchedColorB = this._fetchR(particle._randomNoiseCoordinates2.y, particle._randomNoiseCoordinates2.z, noiseTextureSize.width, noiseTextureSize.height, noiseTextureData);
 
                             let force = Tmp.Vector3[0];
                             let scaledForce = Tmp.Vector3[1];
@@ -1388,6 +1382,18 @@
                 if (this._useRampGradients) {
                     particle.remapData = new Vector4(0, 1, 0, 1);
                 }
+
+                // Noise texture coordinates
+                if (this.noiseTexture) {
+                    if (particle._randomNoiseCoordinates1) {
+                        particle._randomNoiseCoordinates1.copyFromFloats(Math.random(), Math.random(), Math.random());
+                        particle._randomNoiseCoordinates2.copyFromFloats(Math.random(), Math.random(), Math.random());
+                    } else {
+                        particle._randomNoiseCoordinates1 = new Vector3(Math.random(), Math.random(), Math.random());
+                        particle._randomNoiseCoordinates2 = new Vector3(Math.random(), Math.random(), Math.random());
+                    }            
+                }
+    
             }
         }
 

src/Shaders/gpuUpdateParticles.vertex.fx

@@ -91,6 +91,10 @@ in float cellIndex;
 in float cellStartOffset;
 #endif
 #endif
+#ifdef NOISE
+in vec3 noiseCoordinates1;
+in vec3 noiseCoordinates2;
+#endif
 
 // Output
 out vec3 outPosition;
@@ -116,6 +120,10 @@ out float outCellIndex;
 out float outCellStartOffset;
 #endif
 #endif
+#ifdef NOISE
+out vec3 outNoiseCoordinates1;
+out vec3 outNoiseCoordinates2;
+#endif
 
 #ifdef SIZEGRADIENTS
 uniform sampler2D sizeGradientSampler;
@@ -157,9 +165,7 @@ vec4 getRandomVec4(float offset) {
 }
 
 void main() {
-  float newAge = age + timeDelta;
-
-    
+  float newAge = age + timeDelta;    
 
   // If particle is dead and system is not stopped, spawn as new particle
   if (newAge >= life && stopFactor != 0.) {
@@ -320,6 +326,11 @@ void main() {
 #endif    
 #endif
 
+#ifdef NOISE
+    outNoiseCoordinates1 = noiseCoordinates1;
+    outNoiseCoordinates2 = noiseCoordinates2;
+#endif
+
   } else {
     float directionScale = timeDelta;
     outAge = newAge;
@@ -369,13 +380,17 @@ void main() {
 #ifdef NOISE
     vec3 localPosition = outPosition - emitterWM[3].xyz;
 
-    float fetchedR = texture(noiseSampler, vec2(localPosition.y, localPosition.z) * vec2(0.5) + vec2(0.5)).r;
-    float fetchedG = texture(noiseSampler, vec2(localPosition.x + 0.33, localPosition.z + 0.33) * vec2(0.5) + vec2(0.5)).r;
-    float fetchedB = texture(noiseSampler, vec2(localPosition.z - 0.33, localPosition.y - 0.33) * vec2(0.5) + vec2(0.5)).r;
+    float fetchedR = texture(noiseSampler, vec2(noiseCoordinates1.x, noiseCoordinates1.y) * vec2(0.5) + vec2(0.5)).r;
+    float fetchedG = texture(noiseSampler, vec2(noiseCoordinates1.z, noiseCoordinates2.x) * vec2(0.5) + vec2(0.5)).r;
+    float fetchedB = texture(noiseSampler, vec2(noiseCoordinates2.y, noiseCoordinates2.z) * vec2(0.5) + vec2(0.5)).r;
 
     vec3 force = vec3(2. * fetchedR - 1., 2. * fetchedG - 1., 2. * fetchedB - 1.) * noiseStrength;
 
     outDirection = outDirection + force * timeDelta;
+
+    outNoiseCoordinates1 = noiseCoordinates1;
+    outNoiseCoordinates2 = noiseCoordinates2;
+
 #endif    
 
 #ifdef ANGULARSPEEDGRADIENTS