HarmonyOS开发：烟雾特效与流体模拟

核心要点

• 烟雾特效是流体模拟的经典应用，通过Navier-Stokes方程简化实现真实感烟雾
• HarmonyOS Canvas提供像素级操作能力，结合粒子系统可模拟流体动力学
• 本文详细讲解烟雾扩散、湍流扰动、温度影响等核心算法的完整实现

一、背景与动机

1.1 烟雾特效的应用场景

烟雾特效在游戏和应用开发中有着广泛的应用：

1.2 流体模拟技术演进

classDef historyNode fill:#9B59B6,stroke:#8E44AD,stroke-width:3px,color:#fff
classDef methodNode fill:#3498DB,stroke:#2980B9,stroke-width:2px,color:#fff
classDef modernNode fill:#2ECC71,stroke:#27AE60,stroke-width:2px,color:#fff

flowchart TB
    A[流体模拟发展]:::historyNode --> B[早期方法]:::methodNode
    A --> C[现代方法]:::modernNode
    
    B --> B1[粒子系统]:::methodNode
    B --> B2[元胞自动机]:::methodNode
    B --> B3[弹簧质点]:::methodNode
    
    C --> C1[网格法<br/>Eulerian]:::modernNode
    C --> C2[粒子法<br/>Lagrangian]:::modernNode
    C --> C3[混合法<br/>SPH/FLIP]:::modernNode
    
    C1 --> D1[稳定流体<br/>Stam 1999]:::modernNode
    C2 --> D2[SPH流体<br/>Müller 2003]:::modernNode
    C3 --> D3[FLIP方法<br/>Zhu 2005]:::modernNode

1.3 HarmonyOS实现优势

HarmonyOS平台为烟雾特效提供了理想的运行环境：

• 高性能Canvas：支持像素级操作和ImageData快速处理
• Worker多线程：流体计算可在后台线程进行
• ArkTS优化：类型安全的数值计算
• 状态管理V2：响应式的参数调整

二、核心原理

2.1 流体动力学基础

烟雾作为一种流体，其运动遵循Navier-Stokes方程：

∂u/∂t + (u·∇)u = -1/ρ ∇p + ν∇²u + f

其中：

• u：速度场
• p：压力场
• ρ：密度
• ν：粘性系数
• f：外力

2.2 稳定流体算法

Jos Stam提出的稳定流体算法将计算分解为四个步骤：

classDef stepNode fill:#E74C3C,stroke:#C0392B,stroke-width:3px,color:#fff
classDef detailNode fill:#F39C12,stroke:#D68910,stroke-width:2px,color:#fff

flowchart LR
    A[输入速度场]:::stepNode --> B[添加外力<br/>Add Force]:::stepNode
    B --> C[平流<br/>Advection]:::stepNode
    C --> D[扩散<br/>Diffusion]:::stepNode
    D --> E[投影<br/>Projection]:::stepNode
    E --> F[无散度速度场]:::stepNode
    
    B --> B1[重力/风力]:::detailNode
    C --> C1[半拉格朗日]:::detailNode
    D --> D1[Jacobi迭代]:::detailNode
    E --> E1[压力求解]:::detailNode

2.3 烟雾密度方程

烟雾的密度场演化方程：

∂ρ/∂t + (u·∇)ρ = κ∇²ρ + S

其中：

• ρ：烟雾密度
• κ：扩散系数
• S：烟雾源

2.4 网格数据结构

// 流体网格
class FluidGrid {
  // 网格尺寸
  readonly width: number;
  readonly height: number;
  readonly cellSize: number;
  
  // 速度场 (u, v分量)
  private u: Float32Array;  // x方向速度
  private v: Float32Array;  // y方向速度
  
  // 密度场
  private density: Float32Array;
  
  // 压力场
  private pressure: Float32Array;
  
  // 散度场
  private divergence: Float32Array;
  
  constructor(width: number, height: number) {
    this.width = width;
    this.height = height;
    this.cellSize = 1.0;
    
    const size = width * height;
    this.u = new Float32Array(size);
    this.v = new Float32Array(size);
    this.density = new Float32Array(size);
    this.pressure = new Float32Array(size);
    this.divergence = new Float32Array(size);
  }
  
  // 索引转换
  private idx(x: number, y: number): number {
    return y * this.width + x;
  }
  
  // 获取速度
  getVelocity(x: number, y: number): [number, number] {
    const i = this.idx(x, y);
    return [this.u[i], this.v[i]];
  }
  
  // 设置速度
  setVelocity(x: number, y: number, u: number, v: number): void {
    const i = this.idx(x, y);
    this.u[i] = u;
    this.v[i] = v;
  }
  
  // 获取密度
  getDensity(x: number, y: number): number {
    return this.density[this.idx(x, y)];
  }
  
  // 设置密度
  setDensity(x: number, y: number, value: number): void {
    this.density[this.idx(x, y)] = value;
  }
}

三、代码实战

3.1 流体求解器核心

// 流体求解器配置
interface FluidSolverConfig {
  width: number;
  height: number;
  viscosity: number;      // 粘性系数
  diffusion: number;      // 扩散系数
  dt: number;             // 时间步长
  iterations: number;     // 迭代次数
}

// 流体求解器
class FluidSolver {
  private grid: FluidGrid;
  private config: FluidSolverConfig;
  
  // 临时缓冲区
  private u0: Float32Array;
  private v0: Float32Array;
  private density0: Float32Array;
  
  constructor(config: FluidSolverConfig) {
    this.config = config;
    this.grid = new FluidGrid(config.width, config.height);
    
    const size = config.width * config.height;
    this.u0 = new Float32Array(size);
    this.v0 = new Float32Array(size);
    this.density0 = new Float32Array(size);
  }
  
  // 主更新函数
  update(): void {
    const { viscosity, diffusion, dt, iterations } = this.config;
    
    // 1. 速度场平流
    this.advection(this.grid.u, this.grid.v, this.grid.u, this.u0, dt);
    this.advection(this.grid.u, this.grid.v, this.grid.v, this.v0, dt);
    
    // 2. 速度场扩散
    this.diffusion(this.u0, this.grid.u, viscosity, dt, iterations);
    this.diffusion(this.v0, this.grid.v, viscosity, dt, iterations);
    
    // 3. 投影（使速度场无散度）
    this.project(this.grid.u, this.grid.v, iterations);
    
    // 4. 密度平流
    this.advection(this.grid.u, this.grid.v, this.grid.density, this.density0, dt);
    
    // 5. 密度扩散
    this.diffusion(this.density0, this.grid.density, diffusion, dt, iterations);
  }
  
  // 平流（半拉格朗日方法）
  private advection(
    u: Float32Array,
    v: Float32Array,
    field: Float32Array,
    output: Float32Array,
    dt: number
  ): void {
    const { width, height } = this.config;
    
    for (let y = 1; y < height - 1; y++) {
      for (let x = 1; x < width - 1; x++) {
        const i = y * width + x;
        
        // 回溯位置
        const x0 = x - u[i] * dt;
        const y0 = y - v[i] * dt;
        
        // 双线性插值
        output[i] = this.interpolate(field, x0, y0);
      }
    }
  }
  
  // 双线性插值
  private interpolate(field: Float32Array, x: number, y: number): number {
    const { width, height } = this.config;
    
    // 边界约束
    x = Math.max(0.5, Math.min(width - 1.5, x));
    y = Math.max(0.5, Math.min(height - 1.5, y));
    
    const i0 = Math.floor(x);
    const j0 = Math.floor(y);
    const i1 = i0 + 1;
    const j1 = j0 + 1;
    
    const s1 = x - i0;
    const s0 = 1 - s1;
    const t1 = y - j0;
    const t0 = 1 - t1;
    
    return (
      s0 * (t0 * field[j0 * width + i0] + t1 * field[j1 * width + i0]) +
      s1 * (t0 * field[j0 * width + i1] + t1 * field[j1 * width + i1])
    );
  }
  
  // 扩散（Jacobi迭代）
  private diffusion(
    input: Float32Array,
    output: Float32Array,
    diff: number,
    dt: number,
    iterations: number
  ): void {
    const { width, height } = this.config;
    const a = dt * diff * (width - 2) * (height - 2);
    const c = 1 + 4 * a;
    
    for (let iter = 0; iter < iterations; iter++) {
      for (let y = 1; y < height - 1; y++) {
        for (let x = 1; x < width - 1; x++) {
          const i = y * width + x;
          output[i] = (
            input[i] +
            a * (
              output[i - 1] + output[i + 1] +
              output[i - width] + output[i + width]
            )
          ) / c;
        }
      }
    }
  }
  
  // 投影（压力求解）
  private project(u: Float32Array, v: Float32Array, iterations: number): void {
    const { width, height } = this.config;
    
    // 计算散度
    for (let y = 1; y < height - 1; y++) {
      for (let x = 1; x < width - 1; x++) {
        const i = y * width + x;
        this.grid.divergence[i] = -0.5 * (
          u[i + 1] - u[i - 1] +
          v[i + width] - v[i - width]
        );
        this.grid.pressure[i] = 0;
      }
    }
    
    // 求解压力（Jacobi迭代）
    for (let iter = 0; iter < iterations; iter++) {
      for (let y = 1; y < height - 1; y++) {
        for (let x = 1; x < width - 1; x++) {
          const i = y * width + x;
          this.grid.pressure[i] = (
            this.grid.divergence[i] +
            this.grid.pressure[i - 1] +
            this.grid.pressure[i + 1] +
            this.grid.pressure[i - width] +
            this.grid.pressure[i + width]
          ) / 4;
        }
      }
    }
    
    // 减去压力梯度
    for (let y = 1; y < height - 1; y++) {
      for (let x = 1; x < width - 1; x++) {
        const i = y * width + x;
        u[i] -= 0.5 * (this.grid.pressure[i + 1] - this.grid.pressure[i - 1]);
        v[i] -= 0.5 * (this.grid.pressure[i + width] - this.grid.pressure[i - width]);
      }
    }
  }
  
  // 添加外力
  addForce(x: number, y: number, fx: number, fy: number): void {
    const i = y * this.config.width + x;
    this.grid.u[i] += fx;
    this.grid.v[i] += fy;
  }
  
  // 添加烟雾源
  addSmoke(x: number, y: number, amount: number): void {
    const i = y * this.config.width + x;
    this.grid.density[i] += amount;
  }
  
  // 获取网格
  getGrid(): FluidGrid {
    return this.grid;
  }
}

3.2 烟雾渲染器

// 烟雾渲染配置
interface SmokeRenderConfig {
  color: [number, number, number];  // RGB颜色
  opacity: number;                   // 基础透明度
  fadeSpeed: number;                 // 消散速度
}

// 烟雾渲染器
class SmokeRenderer {
  private ctx: CanvasRenderingContext2D;
  private config: SmokeRenderConfig;
  private imageData: ImageData | null = null;
  
  constructor(ctx: CanvasRenderingContext2D, config: SmokeRenderConfig) {
    this.ctx = ctx;
    this.config = config;
  }
  
  // 渲染烟雾
  render(grid: FluidGrid, width: number, height: number): void {
    // 创建或复用ImageData
    if (!this.imageData || 
        this.imageData.width !== width || 
        this.imageData.height !== height) {
      this.imageData = this.ctx.createImageData(width, height);
    }
    
    const data = this.imageData.data;
    const { color, opacity } = this.config;
    
    // 填充像素数据
    for (let y = 0; y < height; y++) {
      for (let x = 0; x < width; x++) {
        const density = grid.getDensity(x, y);
        const i = (y * width + x) * 4;
        
        // 根据密度计算颜色
        const alpha = Math.min(255, density * opacity * 255);
        
        data[i] = color[0];      // R
        data[i + 1] = color[1];  // G
        data[i + 2] = color[2];  // B
        data[i + 3] = alpha;     // A
      }
    }
    
    // 绘制到画布
    this.ctx.putImageData(this.imageData, 0, 0);
  }
  
  // 带纹理的渲染
  renderWithTexture(
    grid: FluidGrid,
    width: number,
    height: number,
    texture: ImageBitmap
  ): void {
    // 先渲染密度场
    this.render(grid, width, height);
    
    // 使用纹理进行混合
    this.ctx.globalCompositeOperation = 'source-atop';
    this.ctx.drawImage(texture, 0, 0, width, height);
    this.ctx.globalCompositeOperation = 'source-over';
  }
}

3.3 湍流扰动系统

// 湍流配置
interface TurbulenceConfig {
  frequency: number;     // 扰动频率
  amplitude: number;     // 扰动幅度
  octaves: number;       // 八度数
  persistence: number;   // 持续性
}

// 柏林噪声生成器
class PerlinNoise {
  private permutation: number[];
  
  constructor(seed: number = 0) {
    this.permutation = this.generatePermutation(seed);
  }
  
  private generatePermutation(seed: number): number[] {
    const p = [];
    for (let i = 0; i < 256; i++) p[i] = i;
    
    // Fisher-Yates洗牌
    let random = seed;
    for (let i = 255; i > 0; i--) {
      random = (random * 16807) % 2147483647;
      const j = random % (i + 1);
      [p[i], p[j]] = [p[j], p[i]];
    }
    
    // 重复排列
    return [...p, ...p];
  }
  
  // 柏林噪声
  noise(x: number, y: number): number {
    const X = Math.floor(x) & 255;
    const Y = Math.floor(y) & 255;
    
    x -= Math.floor(x);
    y -= Math.floor(y);
    
    const u = this.fade(x);
    const v = this.fade(y);
    
    const A = this.permutation[X] + Y;
    const B = this.permutation[X + 1] + Y;
    
    return this.lerp(v,
      this.lerp(u,
        this.grad(this.permutation[A], x, y),
        this.grad(this.permutation[B], x - 1, y)
      ),
      this.lerp(u,
        this.grad(this.permutation[A + 1], x, y - 1),
        this.grad(this.permutation[B + 1], x - 1, y - 1)
      )
    );
  }
  
  // 分形噪声
  fbm(x: number, y: number, octaves: number, persistence: number): number {
    let total = 0;
    let frequency = 1;
    let amplitude = 1;
    let maxValue = 0;
    
    for (let i = 0; i < octaves; i++) {
      total += this.noise(x * frequency, y * frequency) * amplitude;
      maxValue += amplitude;
      amplitude *= persistence;
      frequency *= 2;
    }
    
    return total / maxValue;
  }
  
  private fade(t: number): number {
    return t * t * t * (t * (t * 6 - 15) + 10);
  }
  
  private lerp(t: number, a: number, b: number): number {
    return a + t * (b - a);
  }
  
  private grad(hash: number, x: number, y: number): number {
    const h = hash & 3;
    const u = h < 2 ? x : y;
    const v = h < 2 ? y : x;
    return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v);
  }
}

// 湍流扰动器
class TurbulenceField {
  private noise: PerlinNoise;
  private config: TurbulenceConfig;
  private time: number = 0;
  
  constructor(config: TurbulenceConfig) {
    this.config = config;
    this.noise = new PerlinNoise();
  }
  
  // 获取湍流速度
  getVelocity(x: number, y: number): [number, number] {
    const { frequency, amplitude, octaves, persistence } = this.config;
    
    const nx = x * frequency + this.time;
    const ny = y * frequency;
    
    // 使用噪声生成扰动场
    const vx = this.noise.fbm(nx, ny, octaves, persistence) * amplitude;
    const vy = this.noise.fbm(nx + 100, ny + 100, octaves, persistence) * amplitude;
    
    return [vx, vy];
  }
  
  // 更新时间
  update(dt: number): void {
    this.time += dt * this.config.frequency;
  }
}

3.4 完整示例：香烟烟雾效果

@Entry
@Component
struct CigaretteSmokeDemo {
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private ctx: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  
  private solver: FluidSolver | null = null;
  private renderer: SmokeRenderer | null = null;
  private turbulence: TurbulenceField | null = null;
  
  private width: number = 200;
  private height: number = 200;
  private scale: number = 3;
  
  aboutToAppear() {
    // 初始化流体求解器
    this.solver = new FluidSolver({
      width: this.width,
      height: this.height,
      viscosity: 0.0001,
      diffusion: 0.0001,
      dt: 0.1,
      iterations: 4
    });
    
    // 初始化渲染器
    this.renderer = new SmokeRenderer(this.ctx, {
      color: [200, 200, 200],
      opacity: 1.0,
      fadeSpeed: 0.01
    });
    
    // 初始化湍流
    this.turbulence = new TurbulenceField({
      frequency: 0.05,
      amplitude: 2,
      octaves: 4,
      persistence: 0.5
    });
  }
  
  build() {
    Column() {
      Canvas(this.ctx)
        .width(this.width * this.scale)
        .height(this.height * this.scale)
        .onReady(() => {
          this.ctx.scale(this.scale, this.scale);
          this.startSimulation();
        })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#1a1a2e')
  }
  
  private startSimulation(): void {
    // 烟雾源位置
    const sourceX = Math.floor(this.width / 2);
    const sourceY = this.height - 10;
    
    const simulate = () => {
      if (!this.solver || !this.renderer || !this.turbulence) return;
      
      // 添加烟雾源
      this.solver.addSmoke(sourceX, sourceY, 1);
      this.solver.addSmoke(sourceX - 1, sourceY, 0.5);
      this.solver.addSmoke(sourceX + 1, sourceY, 0.5);
      
      // 添加上升力
      this.solver.addForce(sourceX, sourceY, 0, -5);
      
      // 添加湍流扰动
      const grid = this.solver.getGrid();
      for (let y = 0; y < this.height; y++) {
        for (let x = 0; x < this.width; x++) {
          const [vx, vy] = this.turbulence.getVelocity(x, y);
          const density = grid.getDensity(x, y);
          if (density > 0.1) {
            this.solver.addForce(x, y, vx * density * 0.1, vy * density * 0.1);
          }
        }
      }
      
      // 更新流体
      this.solver.update();
      this.turbulence.update(0.016);
      
      // 渲染
      this.ctx.clearRect(0, 0, this.width, this.height);
      this.renderer.render(grid, this.width, this.height);
      
      requestAnimationFrame(simulate);
    };
    
    simulate();
  }
}

3.5 爆炸烟雾效果

// 爆炸烟雾控制器
class ExplosionSmoke {
  private solver: FluidSolver;
  private renderer: SmokeRenderer;
  private particles: SmokeParticle[] = [];
  
  constructor(
    solver: FluidSolver,
    renderer: SmokeRenderer
  ) {
    this.solver = solver;
    this.renderer = renderer;
  }
  
  // 触发爆炸
  explode(x: number, y: number, intensity: number): void {
    const grid = this.solver.getGrid();
    const radius = Math.floor(intensity * 10);
    
    // 添加烟雾密度
    for (let dy = -radius; dy <= radius; dy++) {
      for (let dx = -radius; dx <= radius; dx++) {
        const dist = Math.sqrt(dx * dx + dy * dy);
        if (dist <= radius) {
          const factor = 1 - dist / radius;
          this.solver.addSmoke(x + dx, y + dy, intensity * factor * factor);
        }
      }
    }
    
    // 添加爆炸冲击波
    for (let dy = -radius; dy <= radius; dy++) {
      for (let dx = -radius; dx <= radius; dx++) {
        const dist = Math.sqrt(dx * dx + dy * dy);
        if (dist > 0 && dist <= radius) {
          const factor = (1 - dist / radius) * intensity;
          const fx = (dx / dist) * factor * 10;
          const fy = (dy / dist) * factor * 10;
          this.solver.addForce(x + dx, y + dy, fx, fy);
        }
      }
    }
    
    // 创建飞散粒子
    for (let i = 0; i < 20; i++) {
      const angle = Math.random() * Math.PI * 2;
      const speed = intensity * (2 + Math.random() * 3);
      this.particles.push({
        x: x,
        y: y,
        vx: Math.cos(angle) * speed,
        vy: Math.sin(angle) * speed,
        life: 1,
        size: 2 + Math.random() * 3
      });
    }
  }
  
  // 更新
  update(dt: number): void {
    this.solver.update();
    
    // 更新粒子
    for (let i = this.particles.length - 1; i >= 0; i--) {
      const p = this.particles[i];
      p.x += p.vx * dt;
      p.y += p.vy * dt;
      p.vy += 50 * dt; // 重力
      p.life -= dt * 0.5;
      
      if (p.life <= 0) {
        this.particles.splice(i, 1);
      } else {
        // 粒子也产生烟雾
        this.solver.addSmoke(Math.floor(p.x), Math.floor(p.y), p.life * 0.5);
      }
    }
  }
}

// 烟雾粒子
interface SmokeParticle {
  x: number;
  y: number;
  vx: number;
  vy: number;
  life: number;
  size: number;
}

四、踩坑与注意事项

4.1 数值稳定性问题

问题1：时间步长过大导致发散

// ❌ 错误：时间步长过大
const dt = 0.5; // 可能导致数值爆炸

// ✅ 正确：使用CFL条件限制时间步长
function calculateStableDT(maxVelocity: number, cellSize: number): number {
  const cfl = 0.5; // CFL数，通常小于1
  return cfl * cellSize / maxVelocity;
}

问题2：迭代次数不足

// ❌ 错误：迭代次数太少
const iterations = 1; // 压力求解不准确

// ✅ 正确：根据网格大小调整迭代次数
const iterations = Math.max(4, Math.floor(Math.log2(Math.max(width, height))));

4.2 边界条件处理

// 边界条件类型
enum BoundaryType {
  DIRICHLET = 'dirichlet',  // 固定值边界
  NEUMANN = 'neumann',      // 零梯度边界
  PERIODIC = 'periodic'     // 周期边界
}

// 应用边界条件
function applyBoundary(
  field: Float32Array,
  width: number,
  height: number,
  type: BoundaryType
): void {
  switch (type) {
    case BoundaryType.NEUMANN:
      // 左右边界
      for (let y = 0; y < height; y++) {
        field[y * width] = field[y * width + 1];
        field[y * width + width - 1] = field[y * width + width - 2];
      }
      // 上下边界
      for (let x = 0; x < width; x++) {
        field[x] = field[width + x];
        field[(height - 1) * width + x] = field[(height - 2) * width + x];
      }
      break;
      
    case BoundaryType.PERIODIC:
      // 周期边界实现
      for (let y = 0; y < height; y++) {
        field[y * width] = field[y * width + width - 2];
        field[y * width + width - 1] = field[y * width + 1];
      }
      break;
  }
}

4.3 性能优化策略

// 使用TypedArray提升性能
// ❌ 普通数组
const density: number[][] = [];

// ✅ TypedArray
const density: Float32Array = new Float32Array(width * height);

// 使用Web Worker进行计算
// worker.ts
function updateFluid(params: FluidUpdateParams): Float32Array {
  // 流体计算逻辑
  return result;
}

// 主线程
const worker = new Worker('worker.ts');
worker.postMessage(params);
worker.onmessage = (e) => {
  const result = e.data;
  // 更新渲染
};

4.4 内存管理

// ⚠️ 注意：ImageData创建开销大
// ❌ 每帧创建新的ImageData
function render() {
  const imageData = ctx.createImageData(width, height); // 性能差
  // ...
}

// ✅ 复用ImageData
class OptimizedRenderer {
  private imageData: ImageData;
  
  constructor(ctx: CanvasRenderingContext2D, width: number, height: number) {
    this.imageData = ctx.createImageData(width, height);
  }
  
  render() {
    // 复用this.imageData
    const data = this.imageData.data;
    // 直接修改data
  }
}

五、总结

5.1 技术对比

5.2 核心要点总结

1. 数值稳定性：严格控制时间步长和迭代次数
2. 边界条件：正确处理边界以保证物理正确性
3. 性能优化：使用TypedArray、Worker、对象池
4. 视觉效果：结合噪声扰动增加真实感
5. 参数调优：根据实际效果调整粘性和扩散系数

5.3 扩展方向

• GPU加速：使用WebGL Compute Shader
• 3D流体：扩展为三维烟雾模拟
• 温度耦合：考虑温度对流体的影响
• 化学反应：烟雾的颜色和密度变化
• 交互响应：响应用户触摸和风力

烟雾特效是流体模拟的经典应用，通过本文的系统性讲解，开发者可以在HarmonyOS平台上实现性能优异、效果逼真的烟雾效果，为游戏和应用增添丰富的视觉表现力。