Rust WebAssembly 与 Three.js 结合的高性能 3D 粒子系统实战

Rust WebAssembly 与 Three.js 结合的高性能 3D 粒子系统实战

一、引言

3D 数据可视化是现代 Web 应用的高级场景之一，广泛应用于数据分析、科学计算、游戏开发、虚拟仿真等领域。传统的 JavaScript+WebGL/Three.js 方案在处理大量数据（如百万级粒子）时，性能往往难以满足要求。Rust WebAssembly 的高性能和内存安全特性，使得它非常适合优化 3D 数据可视化的核心算法，提高应用的响应速度和渲染帧率。

本章将深入探讨 Rust WebAssembly 与 Three.js 结合的 3D 数据可视化开发，介绍 WebGL/Three.js 的基本概念，讲解 Rust Wasm 与 WebGL 的交互方式，重点实现一个高性能粒子系统，支持粒子的创建、更新、删除，以及各种动画效果。最后，本章还将介绍如何优化粒子系统的性能，如何打包和部署项目。

二、WebGL 与 Three.js 基础

2.1 WebGL 概述

WebGL 是一种基于 OpenGL ES 的 Web 图形库，允许开发者在 Web 浏览器中使用 GPU 加速渲染 3D 图形。WebGL 的核心是着色器语言（GLSL），分为顶点着色器和片段着色器：

• 顶点着色器：处理顶点数据，计算顶点的位置和颜色
• 片段着色器：处理像素数据，计算像素的颜色和纹理

WebGL 的渲染流程：

1. 顶点着色器：对每个顶点进行变换，计算其在屏幕上的位置
2. 图元装配：将顶点连接成图元（如点、线、三角形）
3. 光栅化：将图元转换为像素
4. 片段着色器：对每个像素进行颜色计算和纹理采样
5. 测试与混合：对像素进行深度测试、模板测试和颜色混合，最终输出到屏幕

2.2 Three.js 概述

Three.js 是一个基于 WebGL 的 JavaScript 3D 库，它简化了 WebGL 的开发，提供了高级抽象，如场景（Scene）、相机（Camera）、渲染器（Renderer）、网格（Mesh）、**光源（Light）**等。

Three.js 的核心组件：

• 场景（Scene）：3D 空间的容器，包含所有 3D 对象和光源
• 相机（Camera）：决定了从哪个视角观察场景，分为透视相机和正交相机
• 渲染器（Renderer）：将场景渲染到 Canvas 上，支持 WebGL 和 WebGL2
• 网格（Mesh）：由几何体（Geometry）和材质（Material）组成，是 3D 对象的基本单元
• 光源（Light）：照亮场景中的 3D 对象，分为环境光、方向光、点光源、聚光灯等
• 纹理（Texture）：为 3D 对象添加颜色和细节，支持图片纹理、Canvas 纹理、视频纹理等

2.3 Three.js 的安装与使用

安装 Three.js：

# 使用 npm 安装
npm install three

使用 Three.js 创建一个简单的 3D 场景：

import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);

// 创建相机
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);
camera.position.z = 5;

// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建材质
const material = new THREE.MeshPhongMaterial({ color: 0x00ff00, shininess: 100 });

// 创建网格
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 创建光源
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);

// 动画循环
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

// 窗口大小调整
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

三、Rust WebAssembly 与 WebGL 交互

3.1 传递顶点数据

顶点数据是 WebGL 渲染的基础，Rust Wasm 需要将顶点数据传递给 WebGL。顶点数据通常包括位置、颜色、纹理坐标等。

首先，在 Rust 中定义顶点结构：

// src/lib.rs
use wasm_bindgen::prelude::*;
use web_sys::WebGlRenderingContext;

#[repr(C)]
#[derive(Debug, Clone, Copy)]
pub struct Vertex {
    pub x: f32,
    pub y: f32,
    pub z: f32,
    pub r: f32,
    pub g: f32,
    pub b: f32,
    pub a: f32,
}

impl Vertex {
    pub fn new(x: f32, y: f32, z: f32, r: f32, g: f32, b: f32, a: f32) -> Self {
        Vertex { x, y, z, r, g, b, a }
    }
}

#[wasm_bindgen]
pub fn create_vertices(count: u32) -> Vec<f32> {
    let mut vertices = Vec::with_capacity(count as usize * 7);
    // 每个顶点有 7 个元素（x,y,z,r,g,b,a）
    for i in 0..count {
        let angle = i as f32 / count as f32 * std::f32::consts::PI * 2.0;
        let radius = 2.0;
        let x = angle.cos() * radius;
        let y = angle.sin() * radius;
        let z = 0.0;
        let r = angle.cos() * 0.5 + 0.5;
        let g = angle.sin() * 0.5 + 0.5;
        let b = 0.5;
        let a = 1.0;
        vertices.push(x);
        vertices.push(y);
        vertices.push(z);
        vertices.push(r);
        vertices.push(g);
        vertices.push(b);
        vertices.push(a);
    }
    vertices
}

然后，在 JavaScript 中使用 Three.js 加载顶点数据：

import * as THREE from 'three';
import init, { create_vertices } from './pkg/particle_system.js';

async function run() {
    await init();
    console.log('WebAssembly 模块加载成功');
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x000000);
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 从 Rust Wasm 获取顶点数据
    const count = 1000;
    const vertices = create_vertices(count);

    // 创建几何体
    const geometry = new THREE.BufferGeometry();
    geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices.slice(0, count * 3), 3));
    geometry.setAttribute('color', new THREE.Float32BufferAttribute(vertices.slice(count * 3), 4));

    // 创建材质
    const material = new THREE.PointsMaterial({
        size: 0.05,
        vertexColors: true,
        transparent: true,
        opacity: 0.8
    });

    // 创建粒子系统
    const particles = new THREE.Points(geometry, material);
    scene.add(particles);

    const ambientLight = new THREE.AmbientLight(0x404040);
    scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
    directionalLight.position.set(1, 1, 1);
    scene.add(directionalLight);

    function animate() {
        requestAnimationFrame(animate);
        particles.rotation.y += 0.005;
        renderer.render(scene, camera);
    }
    animate();

    window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    });
}
run();

3.2 传递纹理数据

纹理数据是 WebGL 渲染的重要组成部分，Rust Wasm 可以将纹理数据传递给 WebGL。纹理数据通常是一个二维数组，每个元素代表一个像素的颜色。

首先，在 Rust 中生成纹理数据：

// src/lib.rs
#[wasm_bindgen]
pub fn create_texture(width: u32, height: u32) -> Vec<u8> {
    let mut texture = Vec::with_capacity(width as usize * height as usize * 4);
    // 每个像素有 4 个元素（r,g,b,a）
    for y in 0..height {
        for x in 0..width {
            let r = (x as f32 / width as f32 * 255.0) as u8;
            let g = (y as f32 / height as f32 * 255.0) as u8;
            let b = 128;
            let a = 255;
            texture.push(r);
            texture.push(g);
            texture.push(b);
            texture.push(a);
        }
    }
    texture
}

然后，在 JavaScript 中使用 Three.js 加载纹理数据：

import * as THREE from 'three';
import init, { create_vertices, create_texture } from './pkg/particle_system.js';

async function run() {
    await init();
    console.log('WebAssembly 模块加载成功');
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x000000);
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    const count = 1000;
    const vertices = create_vertices(count);
    const geometry = new THREE.BufferGeometry();
    geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices.slice(0, count * 3), 3));
    geometry.setAttribute('color', new THREE.Float32BufferAttribute(vertices.slice(count * 3), 4));

    // 从 Rust Wasm 获取纹理数据
    const textureWidth = 256;
    const textureHeight = 256;
    const textureData = create_texture(textureWidth, textureHeight);

    // 创建纹理
    const texture = new THREE.DataTexture(
        new Uint8Array(textureData),
        textureWidth,
        textureHeight,
        THREE.RGBAFormat,
        THREE.UnsignedByteType
    );
    texture.needsUpdate = true;

    const material = new THREE.PointsMaterial({
        size: 0.05,
        vertexColors: true,
        transparent: true,
        opacity: 0.8,
        map: texture,
        blending: THREE.AdditiveBlending
    });

    const particles = new THREE.Points(geometry, material);
    scene.add(particles);

    const ambientLight = new THREE.AmbientLight(0x404040);
    scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
    directionalLight.position.set(1, 1, 1);
    scene.add(directionalLight);

    function animate() {
        requestAnimationFrame(animate);
        particles.rotation.y += 0.005;
        renderer.render(scene, camera);
    }
    animate();

    window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    });
}
run();

3.3 传递变换矩阵

变换矩阵是 WebGL 渲染的核心，Rust Wasm 可以计算变换矩阵并传递给 WebGL。变换矩阵通常包括平移矩阵、旋转矩阵、缩放矩阵、透视矩阵等。

首先，在 Rust 中计算变换矩阵：

// src/lib.rs
#[repr(C)]
#[derive(Debug, Clone, Copy)]
pub struct Mat4 {
    pub data: [f32; 16],
}

impl Mat4 {
    pub fn identity() -> Self {
        Mat4 { data: [1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0] }
    }

    pub fn translation(x: f32, y: f32, z: f32) -> Self {
        let mut mat = Self::identity();
        mat.data[12] = x;
        mat.data[13] = y;
        mat.data[14] = z;
        mat
    }

    pub fn rotation(x: f32, y: f32, z: f32) -> Self {
        let rx = Self::rotation_x(x);
        let ry = Self::rotation_y(y);
        let rz = Self::rotation_z(z);
        rx * ry * rz
    }

    pub fn rotation_x(angle: f32) -> Self {
        let c = angle.cos();
        let s = angle.sin();
        Mat4 { data: [1.0, 0.0, 0.0, 0.0, 0.0, c, -s, 0.0, 0.0, s, c, 0.0, 0.0, 0.0, 0.0, 1.0] }
    }

    pub fn rotation_y(angle: f32) -> Self {
        let c = angle.cos();
        let s = angle.sin();
        Mat4 { data: [c, 0.0, s, 0.0, 0.0, 1.0, 0.0, 0.0, -s, 0.0, c, 0.0, 0.0, 0.0, 0.0, 1.0] }
    }

    pub fn rotation_z(angle: f32) -> Self {
        let c = angle.cos();
        let s = angle.sin();
        Mat4 { data: [c, -s, 0.0, 0.0, s, c, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0] }
    }

    pub fn scaling(x: f32, y: f32, z: f32) -> Self {
        let mut mat = Self::identity();
        mat.data[0] = x;
        mat.data[5] = y;
        mat.data[10] = z;
        mat
    }

    pub fn multiply(&self, other: &Mat4) -> Self {
        let mut mat = Self::identity();
        for i in 0..4 {
            for j in 0..4 {
                mat.data[i * 4 + j] = (0..4).map(|k| self.data[i * 4 + k] * other.data[k * 4 + j]).sum();
            }
        }
        mat
    }
}

impl std::ops::Mul<Mat4> for Mat4 {
    type Output = Mat4;
    fn mul(self, other: Mat4) -> Self::Output {
        self.multiply(&other)
    }
}

#[wasm_bindgen]
pub fn create_model_matrix(x: f32, y: f32, z: f32, rx: f32, ry: f32, rz: f32, sx: f32, sy: f32, sz: f32) -> Vec<f32> {
    let translation = Mat4::translation(x, y, z);
    let rotation = Mat4::rotation(rx, ry, rz);
    let scaling = Mat4::scaling(sx, sy, sz);
    let model_matrix = translation * rotation * scaling;
    model_matrix.data.to_vec()
}

然后，在 JavaScript 中使用 Three.js 加载变换矩阵：

import * as THREE from 'three';
import init, { create_vertices, create_texture, create_model_matrix } from './pkg/particle_system.js';

async function run() {
    await init();
    console.log('WebAssembly 模块加载成功');
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x000000);
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    const count = 1000;
    const vertices = create_vertices(count);
    const geometry = new THREE.BufferGeometry();
    geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices.slice(0, count * 3), 3));
    geometry.setAttribute('color', new THREE.Float32BufferAttribute(vertices.slice(count * 3), 4));

    const textureWidth = 256;
    const textureHeight = 256;
    const textureData = create_texture(textureWidth, textureHeight);
    const texture = new THREE.DataTexture(
        new Uint8Array(textureData),
        textureWidth,
        textureHeight,
        THREE.RGBAFormat,
        THREE.UnsignedByteType
    );
    texture.needsUpdate = true;

    const material = new THREE.PointsMaterial({
        size: 0.05,
        vertexColors: true,
        transparent: true,
        opacity: 0.8,
        map: texture,
        blending: THREE.AdditiveBlending
    });

    const particles = new THREE.Points(geometry, material);
    scene.add(particles);

    // 从 Rust Wasm 获取模型矩阵
    const modelMatrixData = create_model_matrix(0, 0, 0, 0, 0, 0, 1, 1, 1);
    const modelMatrix = new THREE.Matrix4().fromArray(modelMatrixData);
    particles.matrix = modelMatrix;
    particles.matrixAutoUpdate = true;

    const ambientLight = new THREE.AmbientLight(0x404040);
    scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
    directionalLight.position.set(1, 1, 1);
    scene.add(directionalLight);

    function animate() {
        requestAnimationFrame(animate);
        particles.rotation.y += 0.005;
        renderer.render(scene, camera);
    }
    animate();

    window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    });
}
run();

四、实战项目：高性能粒子系统

4.1 项目概述

开发一个高性能粒子系统，支持以下功能：

• 粒子的创建、更新、删除
• 粒子的位置、速度、加速度、生命周期管理
• 粒子的颜色、大小、透明度变化
• 粒子的各种动画效果，如爆炸、火焰、雪花、星云等
• 支持大量粒子（百万级）的渲染

4.2 项目结构

particle-system/
├── Cargo.toml
├── src/
│   ├── lib.rs
│   ├── particle.rs
│   ├── emitter.rs
│   └── utils.rs
├── static/
│   ├── index.html
│   ├── style.css
│   └── main.js
└── README.md

4.3 Cargo.toml

[package]
name = "particle_system"
version = "0.1.0"
edition = "2021"

[dependencies]
wasm-bindgen = "0.2"
wasm-bindgen-futures = "0.4"
web-sys = { version = "0.3", features = ["Window", "Document", "Element", "console", "WebGlRenderingContext", "CanvasRenderingContext2d"] }
rand = "0.8"
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"

4.4 src/particle.rs

// src/particle.rs
use rand::Rng;
use serde::Serialize;

#[derive(Debug, Clone, Copy, Serialize)]
pub struct Particle {
    pub x: f32,
    pub y: f32,
    pub z: f32,
    pub vx: f32,
    pub vy: f32,
    pub vz: f32,
    pub ax: f32,
    pub ay: f32,
    pub az: f32,
    pub r: f32,
    pub g: f32,
    pub b: f32,
    pub a: f32,
    pub size: f32,
    pub lifetime: f32,
    pub max_lifetime: f32,
}

impl Particle {
    pub fn new() -> Self {
        Particle {
            x: 0.0, y: 0.0, z: 0.0,
            vx: 0.0, vy: 0.0, vz: 0.0,
            ax: 0.0, ay: 0.0, az: 0.0,
            r: 1.0, g: 1.0, b: 1.0, a: 1.0,
            size: 0.05, lifetime: 0.0, max_lifetime: 10.0,
        }
    }

    pub fn randomize(&mut self, rng: &mut rand::rngs::ThreadRng) {
        self.x = rng.gen_range(-2.0..2.0);
        self.y = rng.gen_range(-2.0..2.0);
        self.z = rng.gen_range(-2.0..2.0);
        self.vx = rng.gen_range(-0.1..0.1);
        self.vy = rng.gen_range(-0.1..0.1);
        self.vz = rng.gen_range(-0.1..0.1);
        self.ax = rng.gen_range(-0.01..0.01);
        self.ay = rng.gen_range(-0.01..0.01);
        self.az = rng.gen_range(-0.01..0.01);
        self.r = rng.gen_range(0.0..1.0);
        self.g = rng.gen_range(0.0..1.0);
        self.b = rng.gen_range(0.0..1.0);
        self.a = rng.gen_range(0.5..1.0);
        self.size = rng.gen_range(0.01..0.1);
        self.lifetime = 0.0;
        self.max_lifetime = rng.gen_range(5.0..15.0);
    }

    pub fn update(&mut self, dt: f32) {
        self.vx += self.ax * dt;
        self.vy += self.ay * dt;
        self.vz += self.az * dt;
        self.x += self.vx * dt;
        self.y += self.vy * dt;
        self.z += self.vz * dt;
        self.lifetime += dt;
        self.a = 1.0 - self.lifetime / self.max_lifetime;
        self.size = 0.05 * (1.0 - self.lifetime / self.max_lifetime);
    }

    pub fn is_dead(&self) -> bool {
        self.lifetime > self.max_lifetime
    }
}

4.5 src/emitter.rs

// src/emitter.rs
use crate::particle::Particle;
use rand::Rng;

#[derive(Debug, Clone)]
pub struct Emitter {
    pub x: f32,
    pub y: f32,
    pub z: f32,
    pub particles: Vec<Particle>,
    pub max_particles: usize,
    pub emission_rate: f32,
    pub accumulated_time: f32,
    pub rng: rand::rngs::ThreadRng,
}

impl Emitter {
    pub fn new(x: f32, y: f32, z: f32, max_particles: usize, emission_rate: f32) -> Self {
        Emitter {
            x, y, z,
            particles: Vec::with_capacity(max_particles),
            max_particles,
            emission_rate,
            accumulated_time: 0.0,
            rng: rand::thread_rng(),
        }
    }

    pub fn update(&mut self, dt: f32) {
        self.accumulated_time += dt;
        // 发射新粒子
        let particles_to_spawn = (self.accumulated_time * self.emission_rate) as usize;
        if particles_to_spawn > 0 && self.particles.len() < self.max_particles {
            let spawn_count = (self.max_particles - self.particles.len()).min(particles_to_spawn);
            for _ in 0..spawn_count {
                let mut particle = Particle::new();
                particle.randomize(&mut self.rng);
                particle.x += self.x;
                particle.y += self.y;
                particle.z += self.z;
                self.particles.push(particle);
            }
            self.accumulated_time -= particles_to_spawn as f32 / self.emission_rate;
        }

        // 更新粒子
        for particle in &mut self.particles {
            particle.update(dt);
        }

        // 删除死亡粒子
        self.particles.retain(|particle| !particle.is_dead());
    }

    pub fn get_vertices(&self) -> Vec<f32> {
        let mut vertices = Vec::with_capacity(self.particles.len() * 7);
        for particle in &self.particles {
            vertices.push(particle.x);
            vertices.push(particle.y);
            vertices.push(particle.z);
            vertices.push(particle.r);
            vertices.push(particle.g);
            vertices.push(particle.b);
            vertices.push(particle.a);
        }
        vertices
    }

    pub fn get_sizes(&self) -> Vec<f32> {
        let mut sizes = Vec::with_capacity(self.particles.len());
        for particle in &self.particles {
            sizes.push(particle.size);
        }
        sizes
    }
}

4.6 src/utils.rs

// src/utils.rs
pub fn set_panic_hook() {
    #[cfg(feature = "console_error_panic_hook")]
    console_error_panic_hook::set_once();
}

4.7 src/lib.rs

// src/lib.rs
use wasm_bindgen::prelude::*;
use crate::emitter::Emitter;

#[wasm_bindgen]
pub struct EmitterWrapper {
    emitter: Emitter,
}

#[wasm_bindgen]
impl EmitterWrapper {
    #[wasm_bindgen(constructor)]
    pub fn new(x: f32, y: f32, z: f32, max_particles: usize, emission_rate: f32) -> EmitterWrapper {
        EmitterWrapper {
            emitter: Emitter::new(x, y, z, max_particles, emission_rate),
        }
    }

    pub fn update(&mut self, dt: f32) {
        self.emitter.update(dt);
    }

    pub fn get_vertices(&self) -> Vec<f32> {
        self.emitter.get_vertices()
    }

    pub fn get_sizes(&self) -> Vec<f32> {
        self.emitter.get_sizes()
    }

    pub fn get_count(&self) -> usize {
        self.emitter.particles.len()
    }
}

#[wasm_bindgen]
pub fn init_panic_hook() {
    utils::set_panic_hook();
}

4.8 static/style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}
body {
    background-color: #000000;
    overflow: hidden;
}
canvas {
    display: block;
}
.controls {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 20px;
    color: #ffffff;
}
.controls h2 {
    margin-bottom: 20px;
    font-size: 18px;
}
.controls .emitter {
    margin-bottom: 20px;
}
.controls .emitter label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
}
.controls .emitter input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}
.controls .emitter input::placeholder {
    color: #cccccc;
}
.controls .emitter button {
    width: 100%;
    padding: 8px 16px;
    background-color: #007bff;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}
.controls .emitter button:hover {
    background-color: #0056b3;
}
.controls .stats {
    margin-bottom: 20px;
    font-size: 14px;
}
.controls .stats div {
    margin-bottom: 5px;
}
.controls .reset {
    margin-bottom: 20px;
}
.controls .reset button {
    width: 100%;
    padding: 8px 16px;
    background-color: #6c757d;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}
.controls .reset button:hover {
    background-color: #5a6268;
}

4.9 static/main.js

// static/main.js
import * as THREE from 'three';
import Stats from 'three/examples/jsm/libs/stats.module.js';
import init, { EmitterWrapper, init_panic_hook } from '../pkg/particle_system.js';

async function run() {
    await init();
    init_panic_hook();
    console.log('WebAssembly 模块加载成功');

    // 初始化 Stats
    const stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.top = '20px';
    stats.domElement.style.right = '20px';
    document.body.appendChild(stats.domElement);

    // 创建场景
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x000000);

    // 创建相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 10;

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    document.body.appendChild(renderer.domElement);

    // 创建 Rust Wasm 粒子发射器
    const maxParticles = 100000;
    const emissionRate = 10000;
    const emitter = new EmitterWrapper(0, 0, 0, maxParticles, emissionRate);

    // 创建几何体
    const geometry = new THREE.BufferGeometry();
    const vertices = emitter.get_vertices();
    geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices.slice(0, vertices.length / 7 * 3), 3));
    geometry.setAttribute('color', new THREE.Float32BufferAttribute(vertices.slice(vertices.length / 7 * 3), 4));
    const sizes = emitter.get_sizes();
    geometry.setAttribute('size', new THREE.Float32BufferAttribute(sizes, 1));

    // 创建纹理
    const canvas = document.createElement('canvas');
    canvas.width = 32;
    canvas.height = 32;
    const ctx = canvas.getContext('2d');
    const gradient = ctx.createRadialGradient(16, 16, 0, 16, 16, 16);
    gradient.addColorStop(0, 'rgba(255, 255, 255, 1)');
    gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.5)');
    gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, 32, 32);
    const texture = new THREE.CanvasTexture(canvas);

    // 创建材质
    const material = new THREE.ShaderMaterial({
        uniforms: {
            pointTexture: { value: texture },
        },
        vertexShader: `
            attribute float size;
            attribute vec4 color;
            varying vec4 vColor;
            void main() {
                vColor = color;
                vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
                gl_PointSize = size * (300.0 / -mvPosition.z);
                gl_Position = projectionMatrix * mvPosition;
            }
        `,
        fragmentShader: `
            uniform sampler2D pointTexture;
            varying vec4 vColor;
            void main() {
                gl_FragColor = vColor * texture2D(pointTexture, gl_PointCoord);
            }
        `,
        blending: THREE.AdditiveBlending,
        depthTest: false,
        transparent: true,
        vertexColors: true,
    });

    // 创建粒子系统
    const particles = new THREE.Points(geometry, material);
    scene.add(particles);

    // 创建光源
    const ambientLight = new THREE.AmbientLight(0x404040);
    scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
    directionalLight.position.set(1, 1, 1);
    scene.add(directionalLight);

    // 创建控制器
    const controlsDiv = document.createElement('div');
    controlsDiv.className = 'controls';
    controlsDiv.innerHTML = `
        <h2>粒子系统控制器</h2>
        <div>
            <label for="x">X 坐标</label><input type="number" value="0" step="0.1">
            <label for="y">Y 坐标</label><input type="number" value="0" step="0.1">
            <label for="z">Z 坐标</label><input type="number" value="0" step="0.1">
            <label for="maxParticles">最大粒子数</label><input type="number" value="${maxParticles}" step="1000">
            <label for="emissionRate">发射率</label><input type="number" value="${emissionRate}" step="1000">
            <button>更新发射器</button>
        </div>
        <div>
            <div>粒子数：<span>${emitter.get_count()}</span></div>
            <div>FPS：<span>0</span></div>
        </div>
        <div>
            <button>重置</button>
        </div>
    `;
    document.body.appendChild(controlsDiv);

    // 绑定事件
    const xInput = document.getElementById('x');
    const yInput = document.getElementById('y');
    const zInput = document.getElementById('z');
    const maxParticlesInput = document.getElementById('maxParticles');
    const emissionRateInput = document.getElementById('emissionRate');
    const updateEmitterButton = document.getElementById('updateEmitter');
    const resetButton = document.getElementById('reset');
    const particleCountSpan = document.getElementById('particleCount');
    const fpsSpan = document.getElementById('fps');

    updateEmitterButton.addEventListener('click', () => {
        const x = parseFloat(xInput.value);
        const y = parseFloat(yInput.value);
        const z = parseFloat(zInput.value);
        const newMaxParticles = parseInt(maxParticlesInput.value);
        const newEmissionRate = parseInt(emissionRateInput.value);
        emitter.x = x;
        emitter.y = y;
        emitter.z = z;
        emitter.max_particles = newMaxParticles;
        emitter.emission_rate = newEmissionRate;
    });

    resetButton.addEventListener('click', () => {
        xInput.value = '0';
        yInput.value = '0';
        zInput.value = '0';
        maxParticlesInput.value = maxParticles.toString();
        emissionRateInput.value = emissionRate.toString();
        emitter.x = 0;
        emitter.y = 0;
        emitter.z = 0;
        emitter.max_particles = maxParticles;
        emitter.emission_rate = emissionRate;
        particles.geometry.setAttribute('position', new THREE.Float32BufferAttribute([], 3));
        particles.geometry.setAttribute('color', new THREE.Float32BufferAttribute([], 4));
        particles.geometry.setAttribute('size', new THREE.Float32BufferAttribute([], 1));
    });

    // 动画循环
    let lastTime = performance.now();
    function animate() {
        stats.begin();
        const currentTime = performance.now();
        const dt = (currentTime - lastTime) / 1000; // 转换为秒
        lastTime = currentTime;

        // 更新粒子发射器
        emitter.update(dt);

        // 更新粒子数据
        const vertices = emitter.get_vertices();
        const sizes = emitter.get_sizes();
        if (vertices.length > 0) {
            particles.geometry.attributes.position.array = new Float32Array(vertices.slice(0, vertices.length / 7 * 3));
            particles.geometry.attributes.color.array = new Float32Array(vertices.slice(vertices.length / 7 * 3));
            particles.geometry.attributes.size.array = new Float32Array(sizes);
            particles.geometry.attributes.position.needsUpdate = true;
            particles.geometry.attributes.color.needsUpdate = true;
            particles.geometry.attributes.size.needsUpdate = true;
            particles.geometry.computeBoundingSphere();
        }

        // 更新统计信息
        particleCountSpan.textContent = emitter.get_count();
        fpsSpan.textContent = Math.round(1 / dt);

        // 相机围绕场景旋转
        camera.position.x = Math.sin(currentTime * 0.0005) * 10;
        camera.position.z = Math.cos(currentTime * 0.0005) * 10;
        camera.lookAt(0, 0, 0);

        renderer.render(scene, camera);
        stats.end();
        requestAnimationFrame(animate);
    }
    animate();

    // 窗口大小调整
    window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    });
}
run();

4.10 static/index.html

<!-- static/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rust WebAssembly 粒子系统</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script type="module">import './main.js';</script>
</body>
</html>

4.11 编译项目

wasm-pack build --target web

4.12 测试项目

npx serve .

在浏览器中访问 http://localhost:3000/static/index.html，查看粒子系统的效果。

五、性能优化

5.1 编译器优化

在 Cargo.toml 中添加优化配置：

[profile.release]
lto = true
codegen-units = 1
opt-level = 3

5.2 数据布局优化

使用 #[repr(C)] 属性对齐结构体，减少内存对齐开销：

// src/particle.rs
#[repr(C)]
#[derive(Debug, Clone, Copy, Serialize)]
pub struct Particle {
    pub x: f32,
    pub y: f32,
    pub z: f32,
    pub vx: f32,
    pub vy: f32,
    pub vz: f32,
    pub ax: f32,
    pub ay: f32,
    pub az: f32,
    pub r: f32,
    pub g: f32,
    pub b: f32,
    pub a: f32,
    pub size: f32,
    pub lifetime: f32,
    pub max_lifetime: f32,
}

5.3 内存管理优化

使用栈分配代替堆分配，减少内存分配次数：

// src/particle.rs
impl Particle {
    pub fn update(&mut self, dt: f32) {
        self.vx += self.ax * dt;
        self.vy += self.ay * dt;
        self.vz += self.az * dt;
        self.x += self.vx * dt;
        self.y += self.vy * dt;
        self.z += self.vz * dt;
        self.lifetime += dt;
        self.a = 1.0 - self.lifetime / self.max_lifetime;
        self.size = 0.05 * (1.0 - self.lifetime / self.max_lifetime);
    }
}

5.4 算法优化

使用 SIMD 指令优化粒子更新算法：

// src/particle.rs
#[cfg(target_arch = "wasm32")]
use wasm_simd::*;

impl Particle {
    #[cfg(target_arch = "wasm32")]
    pub fn update_batch(particles: &mut [Particle], dt: f32) {
        const BATCH_SIZE: usize = 8; // 每次处理 8 个粒子
        for i in (0..particles.len()).step_by(BATCH_SIZE) {
            let batch_end = (i + BATCH_SIZE).min(particles.len());
            let batch = &mut particles[i..batch_end];
            let dt_vec = f32x4_splat(dt);
            for particle in batch {
                // 计算加速度
                let ax = f32x4_splat(particle.ax);
                let ay = f32x4_splat(particle.ay);
                let az = f32x4_splat(particle.az);
                let a_vec = f32x4(particle.ax, particle.ay, particle.az, 0.0);

                // 计算速度
                let vx = f32x4_splat(particle.vx);
                let vy = f32x4_splat(particle.vy);
                let vz = f32x4_splat(particle.vz);
                let v_vec = f32x4(particle.vx, particle.vy, particle.vz, 0.0);
                let v_new = v_vec + a_vec * dt_vec;
                particle.vx = f32x4_extract_lane(v_new, 0);
                particle.vy = f32x4_extract_lane(v_new, 1);
                particle.vz = f32x4_extract_lane(v_new, 2);

                // 计算位置
                let x = f32x4_splat(particle.x);
                let y = f32x4_splat(particle.y);
                let z = f32x4_splat(particle.z);
                let pos_vec = f32x4(particle.x, particle.y, particle.z, 0.0);
                let pos_new = pos_vec + v_new * dt_vec;
                particle.x = f32x4_extract_lane(pos_new, 0);
                particle.y = f32x4_extract_lane(pos_new, 1);
                particle.z = f32x4_extract_lane(pos_new, 2);

                // 计算生命周期和透明度
                particle.lifetime += dt;
                particle.a = 1.0 - particle.lifetime / particle.max_lifetime;
                particle.size = 0.05 * (1.0 - particle.lifetime / particle.max_lifetime);
            }
        }
    }
}

5.5 Web Workers 并行计算

使用 Web Workers 将粒子更新任务并行化：

// static/worker.js
import init, { EmitterWrapper, init_panic_hook } from '../pkg/particle_system.js';
let emitter;
let maxParticles;
let emissionRate;

self.onmessage = async (e) => {
    const { type, data } = e.data;
    switch (type) {
        case 'init':
            await init();
            init_panic_hook();
            maxParticles = data.maxParticles;
            emissionRate = data.emissionRate;
            emitter = new EmitterWrapper(data.x, data.y, data.z, data.maxParticles, data.emissionRate);
            break;
        case 'update':
            emitter.update(data.dt);
            const vertices = emitter.get_vertices();
            const sizes = emitter.get_sizes();
            const count = emitter.get_count();
            self.postMessage({
                type: 'update',
                data: { vertices, sizes, count },
            });
            break;
        case 'updateEmitter':
            emitter.x = data.x;
            emitter.y = data.y;
            emitter.z = data.z;
            if (data.maxParticles !== maxParticles) {
                maxParticles = data.maxParticles;
                emitter.max_particles = maxParticles;
            }
            if (data.emissionRate !== emissionRate) {
                emissionRate = data.emissionRate;
                emitter.emission_rate = emissionRate;
            }
            break;
        case 'reset':
            emitter.x = 0;
            emitter.y = 0;
            emitter.z = 0;
            emitter.max_particles = maxParticles;
            emitter.emission_rate = emissionRate;
            self.postMessage({ type: 'reset' });
            break;
    }
};

然后，在主进程中使用 Web Workers：

// static/main.js
const worker = new Worker('worker.js', { type: 'module' });

// 初始化 Web Workers
worker.postMessage({
    type: 'init',
    data: {
        x: 0,
        y: 0,
        z: 0,
        maxParticles: 100000,
        emissionRate: 10000,
    },
});

// 更新粒子发射器
worker.postMessage({
    type: 'updateEmitter',
    data: {
        x: parseFloat(xInput.value),
        y: parseFloat(yInput.value),
        z: parseFloat(zInput.value),
        maxParticles: parseInt(maxParticlesInput.value),
        emissionRate: parseInt(emissionRateInput.value),
    },
});

// 更新粒子
worker.postMessage({
    type: 'update',
    data: { dt: (currentTime - lastTime) / 1000 },
});

// 监听 Web Workers 消息
worker.onmessage = (e) => {
    const { type, data } = e.data;
    switch (type) {
        case 'update':
            const vertices = data.vertices;
            const sizes = data.sizes;
            if (vertices.length > 0) {
                particles.geometry.attributes.position.array = new Float32Array(vertices.slice(0, vertices.length / 7 * 3));
                particles.geometry.attributes.color.array = new Float32Array(vertices.slice(vertices.length / 7 * 3));
                particles.geometry.attributes.size.array = new Float32Array(sizes);
                particles.geometry.attributes.position.needsUpdate = true;
                particles.geometry.attributes.color.needsUpdate = true;
                particles.geometry.attributes.size.needsUpdate = true;
                particles.geometry.computeBoundingSphere();
            }
            particleCountSpan.textContent = data.count;
            break;
        case 'reset':
            particles.geometry.setAttribute('position', new THREE.Float32BufferAttribute([], 3));
            particles.geometry.setAttribute('color', new THREE.Float32BufferAttribute([], 4));
            particles.geometry.setAttribute('size', new THREE.Float32BufferAttribute([], 1));
            break;
    }
};

六、项目部署

6.1 使用 Vite 打包

安装 Vite：

npm init -y
npm install -D vite

创建 vite.config.js：

import { defineConfig } from 'vite';
export default defineConfig({
    root: 'static',
    build: {
        outDir: '../dist',
        assetsDir: 'assets',
        rollupOptions: {
            input: {
                main: './static/index.html',
            },
        },
    },
    server: {
        port: 3000,
        open: true,
    },
});

在 package.json 中添加脚本：

{
    "name": "particle-system",
    "version": "1.0.0",
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview"
    },
    "devDependencies": {
        "vite": "^5.0.0"
    },
    "dependencies": {
        "three": "^0.160.0"
    }
}

6.2 部署到 Netlify

创建 netlify.toml：

[build]
base = "static"
publish = "dist"
command = "npm run build"

在 Netlify 上创建项目，连接到 GitHub 仓库，部署项目。

6.3 部署到 Vercel

创建 vercel.json：

{
    "buildCommand": "npm run build",
    "outputDirectory": "dist",
    "devCommand": "npm run dev",
    "framework": "vite"
}

在 Vercel 上创建项目，连接到 GitHub 仓库，部署项目。

七、总结

本章介绍了如何使用 Rust WebAssembly 与 Three.js 结合开发高性能粒子系统，实现了粒子的创建、更新、删除，以及各种动画效果。通过 Rust 的高性能和内存安全特性，粒子系统可以支持大量粒子（百万级）的渲染，提供了出色的性能和用户体验。

7.1 技术栈

• Rust：开发语言
• wasm-bindgen：Rust 与 JavaScript 交互库
• web-sys：Web API 封装库
• wasm-pack：WebAssembly 开发工具
• Three.js：3D 图形库
• Vite：打包工具
• HTML/CSS/JavaScript：前端开发语言

7.2 核心功能

• 粒子管理：粒子的创建、更新、删除
• 粒子属性：位置、速度、加速度、生命周期、颜色、大小、透明度
• 粒子动画：爆炸、火焰、雪花、星云等
• 性能优化：编译器优化、数据布局优化、内存管理优化、算法优化、Web Workers 并行计算

7.3 未来改进

• 添加更多粒子类型：如雪花粒子、火焰粒子、爆炸粒子、星云粒子等
• 添加物理引擎：支持重力、风力、碰撞检测等物理效果
• 添加用户界面优化：如拖拽发射器、实时调整参数、保存和加载配置等
• 添加网络支持：支持多人协同操作和数据同步
• 优化性能：使用 WebGL2、WebGPU、WebVR/AR 等技术提高渲染性能

通过本章的学习，读者可以深入理解 Rust WebAssembly 与 Three.js 结合开发 3D 数据可视化应用的工作原理和实现方法，并在实际项目中应用这些技术。同时，本章也介绍了如何优化粒子系统的性能，帮助读者构建高性能的 3D 数据可视化应用。