feat(particle): add NoiseModule for simplex noise turbulence

e2e/case/particleRenderer-noise.ts

@@ -0,0 +1,111 @@
+/**
+ * @title Particle Noise
+ * @category Particle
+ */
+import {
+  AssetType,
+  BlendMode,
+  Camera,
+  Color,
+  Engine,
+  Entity,
+  ParticleCompositeCurve,
+  ParticleCurveMode,
+  ParticleGradientMode,
+  ParticleMaterial,
+  ParticleRenderer,
+  ParticleSimulationSpace,
+  ConeShape,
+  Texture2D,
+  WebGLEngine
+} from "@galacean/engine";
+import { initScreenshot, updateForE2E } from "./.mockForE2E";
+
+WebGLEngine.create({
+  canvas: "canvas"
+}).then((engine) => {
+  engine.canvas.resizeByClientSize();
+
+  const scene = engine.sceneManager.activeScene;
+  const rootEntity = scene.createRootEntity();
+  scene.background.solidColor = new Color(0, 0, 0, 1);
+
+  const cameraEntity = rootEntity.createChild("camera");
+  cameraEntity.transform.setPosition(0, 0, 0);
+  const camera = cameraEntity.addComponent(Camera);
+  camera.fieldOfView = 60;
+
+  engine.resourceManager
+    .load({
+      url: "https://mdn.alipayobjects.com/huamei_b4l2if/afts/img/A*JPsCSK5LtYkAAAAAAAAAAAAADil6AQ/original",
+      type: AssetType.Texture
+    })
+    .then((texture) => {
+      createNoiseParticle(engine, rootEntity, <Texture2D>texture);
+
+      updateForE2E(engine, 200);
+      initScreenshot(engine, camera);
+    });
+});
+
+function createNoiseParticle(engine: Engine, rootEntity: Entity, texture: Texture2D): void {
+  const particleEntity = new Entity(engine, "Noise");
+  particleEntity.transform.setPosition(0, 0, -2);
+
+  const particleRenderer = particleEntity.addComponent(ParticleRenderer);
+  const generator = particleRenderer.generator;
+  generator.useAutoRandomSeed = false;
+
+  const material = new ParticleMaterial(engine);
+  material.baseColor = new Color(0.4, 0.8, 1.0, 1.0);
+  material.blendMode = BlendMode.Additive;
+  material.baseTexture = texture;
+  particleRenderer.setMaterial(material);
+
+  const { main, emission, noise, colorOverLifetime } = generator;
+
+  // Main
+  main.duration = 3;
+  main.isLoop = true;
+  main.startLifetime.constantMin = 0.3;
+  main.startLifetime.constantMax = 0.6;
+  main.startLifetime.mode = ParticleCurveMode.TwoConstants;
+  main.startSpeed.constantMin = 4;
+  main.startSpeed.constantMax = 4;
+  main.startSpeed.mode = ParticleCurveMode.TwoConstants;
+  main.startSize.constantMin = 0.05;
+  main.startSize.constantMax = 0.1;
+  main.startSize.mode = ParticleCurveMode.TwoConstants;
+  main.gravityModifier.constant = -0.5;
+  main.simulationSpace = ParticleSimulationSpace.Local;
+  main.maxParticles = 200;
+
+  // Emission
+  emission.rateOverTime.constant = 40;
+  const coneShape = new ConeShape();
+  coneShape.angle = 25;
+  coneShape.radius = 0.00001;
+  emission.shape = coneShape;
+
+  // Color over lifetime
+  // colorOverLifetime.enabled = true;
+  // colorOverLifetime.color.mode = ParticleGradientMode.Gradient;
+  // const gradient = colorOverLifetime.color.gradient;
+  // gradient.alphaKeys[0].alpha = 0;
+  // gradient.alphaKeys[1].alpha = 0;
+  // gradient.addAlphaKey(0.1, 1.0);
+  // gradient.addAlphaKey(0.8, 1.0);
+
+  // Noise
+  noise.enabled = true;
+  noise.strengthX = new ParticleCompositeCurve(1);
+  noise.strengthY = new ParticleCompositeCurve(1);
+  noise.strengthZ = new ParticleCompositeCurve(1);
+  noise.frequency = 1;
+  noise.scrollSpeed = 0;
+  noise.octaveCount = 1;
+  noise.octaveIntensityMultiplier = 0.5;
+  noise.octaveFrequencyMultiplier = 2.0;
+
+  rootEntity.addChild(particleEntity);
+}

e2e/config.ts

@@ -430,6 +430,12 @@ export const E2E_CONFIG = {
       caseFileName: "particleRenderer-horizontal-billboard",
       threshold: 0,
       diffPercentage: 0.2162
+    },
+    noiseModule: {
+      category: "Particle",
+      caseFileName: "particleRenderer-noise",
+      threshold: 0,
+      diffPercentage: 0
     }
   },
   PostProcess: {

packages/core/src/particle/ParticleGenerator.ts

@@ -33,6 +33,7 @@ import { ParticleCompositeCurve } from "./modules/ParticleCompositeCurve";
 import { RotationOverLifetimeModule } from "./modules/RotationOverLifetimeModule";
 import { SizeOverLifetimeModule } from "./modules/SizeOverLifetimeModule";
 import { TextureSheetAnimationModule } from "./modules/TextureSheetAnimationModule";
+import { NoiseModule } from "./modules/NoiseModule";
 import { VelocityOverLifetimeModule } from "./modules/VelocityOverLifetimeModule";
 
 /**
@@ -83,6 +84,9 @@ export class ParticleGenerator {
   /** Texture sheet animation module. */
   @deepClone
   readonly textureSheetAnimation = new TextureSheetAnimationModule(this);
+  /** Noise module. */
+  @deepClone
+  readonly noise: NoiseModule;
 
   /** @internal */
   _currentParticleCount = 0;
@@ -190,6 +194,7 @@ export class ParticleGenerator {
     this.forceOverLifetime = new ForceOverLifetimeModule(this);
     this.sizeOverLifetime = new SizeOverLifetimeModule(this);
     this.limitVelocityOverLifetime = new LimitVelocityOverLifetimeModule(this);
+    this.noise = new NoiseModule(this);
 
     this.emission.enabled = true;
   }
@@ -613,6 +618,7 @@ export class ParticleGenerator {
     this.sizeOverLifetime._updateShaderData(shaderData);
     this.rotationOverLifetime._updateShaderData(shaderData);
     this.colorOverLifetime._updateShaderData(shaderData);
+    this.noise._updateShaderData(shaderData);
   }
 
   /**
@@ -628,20 +634,23 @@ export class ParticleGenerator {
     this.limitVelocityOverLifetime._resetRandomSeed(seed);
     this.rotationOverLifetime._resetRandomSeed(seed);
     this.colorOverLifetime._resetRandomSeed(seed);
+    this.noise._resetRandomSeed(seed);
   }
 
   /**
    * @internal
    */
-  _setTransformFeedback(enabled: boolean): void {
-    this._useTransformFeedback = enabled;
+  _setTransformFeedback(): void {
+    const needed = this.limitVelocityOverLifetime.enabled || this.noise.enabled;
+    if (needed === this._useTransformFeedback) return;
+    this._useTransformFeedback = needed;
 
     // Switching TF mode invalidates all active particle state: feedback buffers and instance
     // buffer layout are incompatible between the two paths. Clear rather than show a one-frame
     // jump; new particles will fill in naturally from the next emit cycle.
     this._clearActiveParticles();
 
-    if (enabled) {
+    if (needed) {
       if (!this._feedbackSimulator) {
         this._feedbackSimulator = new ParticleTransformFeedbackSimulator(this._renderer.engine);
       }
@@ -701,9 +710,7 @@ export class ParticleGenerator {
    * @internal
    */
   _cloneTo(target: ParticleGenerator): void {
-    if (target.limitVelocityOverLifetime.enabled) {
-      target._setTransformFeedback(true);
-    }
+    target._setTransformFeedback();
   }
 
   /**
@@ -942,7 +949,9 @@ export class ParticleGenerator {
       instanceVertices[offset + 20] = colorOverLifetime._colorGradientRand.random();
     }
 
-    // instanceVertices[offset + 21] = rand.random();
+    if (this.noise.enabled) {
+      instanceVertices[offset + 21] = this.noise._noiseRand.random();
+    }
 
     const rotationOverLifetime = this.rotationOverLifetime;
     if (rotationOverLifetime.enabled && rotationOverLifetime.rotationZ.mode === ParticleCurveMode.TwoConstants) {
@@ -1385,6 +1394,22 @@ export class ParticleGenerator {
     min.add(worldOffsetMin);
     max.add(worldOffsetMax);
 
+    // Noise module impact: noise output is normalized to [-1, 1],
+    // max displacement = |strength_max|
+    const { noise } = this;
+    if (noise.enabled) {
+      let noiseMaxX: number, noiseMaxY: number, noiseMaxZ: number;
+      if (noise.separateAxes) {
+        noiseMaxX = Math.abs(noise.strengthX._getMax());
+        noiseMaxY = Math.abs(noise.strengthY._getMax());
+        noiseMaxZ = Math.abs(noise.strengthZ._getMax());
+      } else {
+        noiseMaxX = noiseMaxY = noiseMaxZ = Math.abs(noise.strengthX._getMax());
+      }
+      min.set(min.x - noiseMaxX, min.y - noiseMaxY, min.z - noiseMaxZ);
+      max.set(max.x + noiseMaxX, max.y + noiseMaxY, max.z + noiseMaxZ);
+    }
+
     min.add(worldPosition);
     max.add(worldPosition);
   }

packages/core/src/particle/enums/ParticleRandomSubSeeds.ts

@@ -18,5 +18,6 @@ export enum ParticleRandomSubSeeds {
   Shape = 0xaf502044,
   GravityModifier = 0xa47b8c4d,
   ForceOverLifetime = 0xe6fb937c,
-  LimitVelocityOverLifetime = 0xb5a21f7e
+  LimitVelocityOverLifetime = 0xb5a21f7e,
+  Noise = 0xf4b2c8a1
 }

packages/core/src/particle/index.ts

@@ -20,4 +20,5 @@ export { SizeOverLifetimeModule } from "./modules/SizeOverLifetimeModule";
 export { TextureSheetAnimationModule } from "./modules/TextureSheetAnimationModule";
 export { VelocityOverLifetimeModule } from "./modules/VelocityOverLifetimeModule";
 export { LimitVelocityOverLifetimeModule } from "./modules/LimitVelocityOverLifetimeModule";
+export { NoiseModule } from "./modules/NoiseModule";
 export * from "./modules/shape/index";

packages/core/src/particle/modules/LimitVelocityOverLifetimeModule.ts

@@ -241,7 +241,7 @@ export class LimitVelocityOverLifetimeModule extends ParticleGeneratorModule {
         return;
       }
       this._enabled = value;
-      this._generator._setTransformFeedback(value);
+      this._generator._setTransformFeedback();
       this._generator._renderer._onGeneratorParamsChanged();
     }
   }