Orillusion

Appearance

本页内容

粒子动画 ​

粒子动画由组件 ParticleSystem 驱动，通过 ParticleSimulator 使用 ComputeShader 模拟粒子运动轨迹，实现粒子动画特效。

基本模块 ​

使用 ParticleSystem 组件时，需要指定一个粒子仿真器，目前仅 ParticleStandSimulator 仿真器可用，该粒子仿真器有以下基本模块：

名称描述
ParticleEmitModule粒子发射器模块(必备模块)
ParticleOverLifeScaleModule粒子生命周期内大小变化模块
ParticleOverLifeSpeedModule粒子生命周期内速度变化模块
ParticleOverLifeRotationModule粒子生命周期内旋转变化模块
ParticleGravityModifierModule粒子全局的重力变化模块
ParticleRotationModule粒子角速度旋转模块
ParticleTextureSheetModule粒子图集动画模块

基本使用 ​


Orillusion powered by WebGPU on Chrome/Edge 113+
Please upgrade to latest Chrome/Edge

<
ts
import {
    Camera3D, Vector3, Engine3D, ForwardRenderJob, HoverCameraController, Object3D, PlaneGeometry, Scene3D, CameraUtil, webGPUContext, HDRBloomPost, ParticleSystem, ParticleMaterial, ParticleStandSimulator, ParticleEmitModule, ShapeType, EmitLocation, ParticleGravityModifierModule, ParticleOverLifeColorModule, Vector4, BlendMode,
} from '@orillusion/core';

export class Sample_ParticleAnim {
    async run() {
        await Engine3D.init();

        let scene = new Scene3D();
        Camera3D.mainCamera = CameraUtil.createCamera3DObject(scene);
        Camera3D.mainCamera.perspective(60, webGPUContext.aspect, 0.1, 5000.0);

        let ctrl = Camera3D.mainCamera.object3D.addComponent(HoverCameraController);
        ctrl.setCamera(45, -20, 30, new Vector3(0, 15, 51));

        await this.initScene(scene);

        let renderJob = new ForwardRenderJob(scene);
        renderJob.addPost(new HDRBloomPost());
        Engine3D.startRender(renderJob);
    }

    async initScene(scene: Scene3D) {
        // 创建实体对象
        let obj = new Object3D();
        obj.x = 0;
        obj.y = 15;
        obj.z = 51;
        scene.addChild(obj);

        // 添加粒子系统组件
        let particleSystem = obj.addComponent(ParticleSystem);

        // 设置粒子材质
        let material = new ParticleMaterial();
        material.baseMap = await Engine3D.res.loadTexture('https://cdn.orillusion.com/particle/fx_a_glow_003.png');

        // 设置粒子形状
        particleSystem.geometry = new PlaneGeometry(5, 5, 1, 1, Vector3.Z_AXIS);
        particleSystem.material = material;

        // 使用指定仿真器
        let simulator = particleSystem.useSimulator(ParticleStandSimulator);

        // 添加发射器模块
        let emitter = simulator.addModule(ParticleEmitModule);
        emitter.maxParticle = 1 * 10000;
        emitter.duration = 10;
        emitter.emissionRate = 50;
        emitter.startLifecycle.setScalar(1);
        emitter.shapeType = ShapeType.Box;
        emitter.radius = 10;
        emitter.emitLocation = EmitLocation.Shell;
        emitter.boxSize = new Vector3(1, 0, 1);

        // 添加重力修改模块
        simulator.addModule(ParticleGravityModifierModule).gravity = new Vector3(0, 0.2, 0);

        // 添加生命周期色彩模块
        simulator.addModule(ParticleOverLifeColorModule).colorSegments = [
            new Vector4(1, 0.3, 0, 1),         new Vector4(0, 0.6, 1, 0)
        ];

        // 开始播放
        particleSystem.play();
    }
}

new Sample_ParticleAnim().run();

以火焰Demo为例，首先给场景指定的对象添加 ParticleSystem 组件，并指定粒子的形状，材质:

ts
// 创建一个3D对象实体，并添加到场景
let obj = new Object3D();
scene.addChild(obj);

// 为该对象添加 ParticleSystem 组件
let particleSystem = obj.addComponent(ParticleSystem);

// 创建粒子材质，并加载指定的粒子纹理
let material = new ParticleMaterial();
material.baseMap = await Engine3D.res.loadTexture('https://cdn.orillusion.com/particle/fx_a_glow_003.png');

// 设置单个粒子的形态
particleSystem.geometry = new PlaneGeometry(5, 5, 1, 1, Vector3.Z_AXIS);
particleSystem.material = material;

为 ParticleSystem 组件指定要使用的仿真器 ParticleStandSimulator:

ts
// 使用指定仿真器
let simulator = particleSystem.useSimulator(ParticleStandSimulator);

// 添加发射器模块(必要模块，不可缺少)
let emitter = simulator.addModule(ParticleEmitModule);
// 设置最大粒子数
emitter.maxParticle = 1 * 10000;
// 设置持续发射时间
emitter.duration = 10;
// 设置发射速率(x个/秒)
emitter.emissionRate = 50;
// 设置粒子生命周期大小
emitter.startLifecycle.setScalar(1);
// 设置发射器发射形状
emitter.shapeType = ShapeType.Box;
// 设置发射器从发射形状的哪个位置发射(这里从外壳发射)
emitter.emitLocation = EmitLocation.Shell;
// 设置发射器大小
emitter.boxSize = new Vector3(1, 0, 1);

为仿真器添加粒子模块，并配置属性参数:

ts
// 添加重力修改模块(给予一个向上的微重力)
simulator.addModule(ParticleGravityModifierModule).gravity = new Vector3(0, 0.2, 0);

// 添加生命周期色彩模块
simulator.addModule(ParticleOverLifeColorModule).colorSegments = [
    new Vector4(1, 0.3, 0, 1),
    new Vector4(0, 0.6, 1, 0)
];

开始播放粒子:

ts
// 开始播放
particleSystem.play();