Basic Modules

The particle system simulator can add various attribute modules, each of which includes a functionality implementation and associated parameters. Currently, the following built-in modules are available:

• ParticleOverLifeScaleModule - Module for size variation over the particle's lifetime.
• ParticleOverLifeSpeedModule - Module for speed variation over the particle's lifetime.
• ParticleOverLifeRotationModule - Module for rotation variation over the particle's lifetime.
• ParticleOverLifeColorModule - Module for color variation over the particle's lifetime.
• ParticleGravityModifierModule - Module for gravity modification.
• ParticleTextureSheetModule - Module for texture atlas.

Size Variation Module

To make the size of individual particles change over their entire lifetimes, you can add the ParticleOverLifeScaleModule module to the simulator:

// Add the module for size variation over the particle's lifetime
let overLifeScaleModule = simulator.addModule(ParticleOverLifeScaleModule);
// Set the size variation parameters from 1x at the start to 3x at the end
overLifeScaleModule.scaleSegments = [
    new Vector4(1, 1, 1),
    new Vector4(3, 3, 3),
];

WebGPU is not supported in your browser
Please upgrade to latest Chrome/Edge

<

import { Engine3D, AtmosphericComponent, Vector3, Vector4, View3D, HoverCameraController, Object3D, PlaneGeometry, Scene3D, CameraUtil, webGPUContext } from '@orillusion/core';

import { ParticleSystem, ParticleMaterial, ParticleStandardSimulator, ParticleEmitterModule, ShapeType, EmitLocation, ParticleOverLifeScaleModule } from '@orillusion/particle';

class Sample_OverLifeScaleModule {
    async run() {
        await Engine3D.init();

        let scene = new Scene3D();
        scene.addComponent(AtmosphericComponent).sunY = 0.6;

        let camera = CameraUtil.createCamera3DObject(scene);
        camera.perspective(60, webGPUContext.aspect, 0.1, 5000.0);

        let ctrl = camera.object3D.addComponent(HoverCameraController);
        ctrl.setCamera(45, -15, 30);

        await this.initScene(scene);

        let view = new View3D();
        view.scene = scene;
        view.camera = camera;
        Engine3D.startRenderView(view);
    }

    async initScene(scene: Scene3D) {
        // 创建实体对象
        let obj = new Object3D();
        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(1, 1, 1, 1, Vector3.Z_AXIS);
        particleSystem.material = material;

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

        // 添加发射器模块
        let emitter = simulator.addModule(ParticleEmitterModule);
        emitter.maxParticle = 1000;
        emitter.duration = 10;
        emitter.emissionRate = 100;
        emitter.startLifecycle.setScalar(1);
        emitter.shapeType = ShapeType.Circle;
        emitter.radius = 10;
        emitter.emitLocation = EmitLocation.Shell;

        // 添加生命周期内大小变换模块
        let overLifeScaleModule = simulator.addModule(ParticleOverLifeScaleModule);
        overLifeScaleModule.scaleSegments = [new Vector4(1, 1, 1), new Vector4(3, 3, 3)];

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

new Sample_OverLifeScaleModule().run();

Rotation Variation Module

To make the rotation angle of individual particles change over their entire lifetimes, you can add the ParticleOverLifeRotationModule module to the simulator:

// Add the module for rotation variation over the particle's lifetime
let overLifeRotationModule = simulator.addModule(ParticleOverLifeRotationModule);
// Set the rotation variation parameters from 0° at the start to 270° at the end
overLifeRotationModule.rotationSegments = [
    new Vector4(0, 0, 0),
    new Vector4(0, 90 * DEGREES_TO_RADIANS, 0),
];

WebGPU is not supported in your browser
Please upgrade to latest Chrome/Edge

<

import { Engine3D, AtmosphericComponent, Vector3, Vector4, View3D, HoverCameraController, Object3D, PlaneGeometry, Scene3D, CameraUtil, webGPUContext, BoxGeometry, DEGREES_TO_RADIANS } from '@orillusion/core';

import { ParticleSystem, ParticleMaterial, ParticleStandardSimulator, ParticleEmitterModule, ShapeType, EmitLocation, ParticleOverLifeRotationModule } from '@orillusion/particle';

class Sample_OverLifeRotationModule {
    async run() {
        await Engine3D.init();

        let scene = new Scene3D();
        scene.addComponent(AtmosphericComponent).sunY = 0.6;

        let camera = CameraUtil.createCamera3DObject(scene);
        camera.perspective(60, webGPUContext.aspect, 0.1, 5000.0);

        let ctrl = camera.object3D.addComponent(HoverCameraController);
        ctrl.setCamera(45, -15, 30);

        await this.initScene(scene);

        let view = new View3D();
        view.scene = scene;
        view.camera = camera;
        Engine3D.startRenderView(view);
    }

    async initScene(scene: Scene3D) {
        // 创建实体对象
        let obj = new Object3D();
        scene.addChild(obj);

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

        // 设置粒子材质
        let material = new ParticleMaterial();

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

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

        // 添加发射器模块
        let emitter = simulator.addModule(ParticleEmitterModule);
        emitter.maxParticle = 1000;
        emitter.duration = 10;
        emitter.emissionRate = 100;
        emitter.startLifecycle.setScalar(1);
        emitter.shapeType = ShapeType.Circle;
        emitter.radius = 10;
        emitter.emitLocation = EmitLocation.Shell;

        // 添加生命周期内大小变换模块
        let overLifeRotationModule = simulator.addModule(ParticleOverLifeRotationModule);
        overLifeRotationModule.rotationSegments = [new Vector4(0, 0, 0), new Vector4(0, 0, 360 * DEGREES_TO_RADIANS)];

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

new Sample_OverLifeRotationModule().run();

Color Variation Module

To make the color of individual particles change over their entire lifetimes, you can add the ParticleOverLifeColorModule module to the simulator:

// Add the module for color variation over the particle's lifetime
let overLifeColorModule = simulator.addModule(ParticleOverLifeColorModule);
// Set the starting color
overLifeColorModule.startColor = new Color(1, 1, 0);
// Set the starting alpha
overLifeColorModule.startAlpha = 0.0;
// Set the ending color
overLifeColorModule.endColor = new Color(0.1, 0.6, 1);
// Set the ending alpha
overLifeColorModule.endAlpha = 1.0;

WebGPU is not supported in your browser
Please upgrade to latest Chrome/Edge

<

import { Engine3D, AtmosphericComponent, Vector3, Vector4, View3D, Color, HoverCameraController, Object3D, PlaneGeometry, Scene3D, CameraUtil, webGPUContext, BoxGeometry, DEGREES_TO_RADIANS } from '@orillusion/core';

import { ParticleSystem, ParticleMaterial, ParticleStandardSimulator, ParticleEmitterModule, ShapeType, EmitLocation, ParticleOverLifeColorModule } from '@orillusion/particle';

class Sample_OverLifeRotationModule {
    async run() {
        await Engine3D.init();

        let scene = new Scene3D();
        scene.addComponent(AtmosphericComponent).sunY = 0.6;

        let camera = CameraUtil.createCamera3DObject(scene);
        camera.perspective(60, webGPUContext.aspect, 0.1, 5000.0);

        let ctrl = camera.object3D.addComponent(HoverCameraController);
        ctrl.setCamera(45, -15, 30);

        await this.initScene(scene);

        let view = new View3D();
        view.scene = scene;
        view.camera = camera;
        Engine3D.startRenderView(view);
    }

    async initScene(scene: Scene3D) {
        // 创建实体对象
        let obj = new Object3D();
        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(1, 1, 1, 1, Vector3.Z_AXIS);
        particleSystem.material = material;

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

        // 添加发射器模块
        let emitter = simulator.addModule(ParticleEmitterModule);
        emitter.maxParticle = 1000;
        emitter.duration = 10;
        emitter.emissionRate = 100;
        emitter.startLifecycle.setScalar(1);
        emitter.shapeType = ShapeType.Circle;
        emitter.radius = 10;
        emitter.emitLocation = EmitLocation.Shell;

        // 添加生命周期内颜色变换模块
        let overLifeColorModule = simulator.addModule(ParticleOverLifeColorModule);
        // 设置起始时颜色
        overLifeColorModule.startColor = new Color(1, 1, 0);
        // 设置起始时透明度
        overLifeColorModule.startAlpha = 0.0;
        // 设置结束时颜色
        overLifeColorModule.endColor = new Color(0.1, 0.6, 1);
        // 设置结束时透明度
        overLifeColorModule.endAlpha = 1.0;

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

new Sample_OverLifeRotationModule().run();

Gravity Modifier Module

To modify the trajectory of particles based on gravity, you can add the ParticleGravityModifierModule module to the simulator:

// Add the gravity modifier module
let gravityModifier = simulator.addModule(ParticleGravityModifierModule);
gravityModifier.gravity = new Vector3(0, -0.98, 0);

WebGPU is not supported in your browser
Please upgrade to latest Chrome/Edge

<

import { Engine3D, AtmosphericComponent, Vector3, View3D, HoverCameraController, Object3D, PlaneGeometry, Scene3D, CameraUtil, webGPUContext, BoxGeometry, DEGREES_TO_RADIANS } from '@orillusion/core';

import { ParticleSystem, ParticleMaterial, ParticleStandardSimulator, ParticleEmitterModule, ShapeType, EmitLocation, ParticleGravityModifierModule } from '@orillusion/particle';

class Sample_OverLifeRotationModule {
    async run() {
        await Engine3D.init();

        let scene = new Scene3D();
        scene.addComponent(AtmosphericComponent).sunY = 0.6;

        let camera = CameraUtil.createCamera3DObject(scene);
        camera.perspective(60, webGPUContext.aspect, 0.1, 5000.0);

        let ctrl = camera.object3D.addComponent(HoverCameraController);
        ctrl.setCamera(45, -30, 80);

        await this.initScene(scene);

        let view = new View3D();
        view.scene = scene;
        view.camera = camera;
        Engine3D.startRenderView(view);
    }

    async initScene(scene: Scene3D) {
        // 创建实体对象
        let obj = new Object3D();
        obj.y = 10;
        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_fragment_003.png');

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

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

        // 添加发射器模块
        let emitter = simulator.addModule(ParticleEmitterModule);
        emitter.maxParticle = 10000;
        emitter.duration = 10;
        emitter.emissionRate = 1000;
        emitter.startLifecycle.setScalar(1);
        emitter.shapeType = ShapeType.Circle;
        emitter.radius = 60;
        emitter.emitLocation = EmitLocation.Shell;

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

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

new Sample_OverLifeRotationModule().run();

Texture Atlas Module

To provide different textures for each particle or animate individual particles with textures, you can add the ParticleTextureSheetModule module to the simulator:

// Add the texture atlas module
let sheetModule = simulator.addModule(ParticleTextureSheetModule);
// Set the number of sub-rectangles per column
sheetModule.clipCol = 4;
// Set the total number of sub-rectangles in the entire texture
sheetModule.totalClip = 4 * 4;
// Set the width of the entire texture
sheetModule.textureWidth = material.baseMap.width;
// Set the height of the entire texture
sheetModule.textureHeight = material.baseMap.height;
// Set the playback rate of the texture animation
sheetModule.playRate = 1.0;

WebGPU is not supported in your browser
Please upgrade to latest Chrome/Edge

<

import { Engine3D, AtmosphericComponent, Vector3, View3D, HoverCameraController, Object3D, PlaneGeometry, Scene3D, CameraUtil, webGPUContext } from '@orillusion/core';

import { ParticleSystem, ParticleMaterial, ParticleStandardSimulator, ParticleEmitterModule, ShapeType, EmitLocation, ParticleTextureSheetModule } from '@orillusion/particle';

class Sample_OverLifeRotationModule {
    async run() {
        await Engine3D.init();

        let scene = new Scene3D();
        scene.addComponent(AtmosphericComponent).sunY = 0.6;

        let camera = CameraUtil.createCamera3DObject(scene);
        camera.perspective(60, webGPUContext.aspect, 0.1, 5000.0);

        let ctrl = camera.object3D.addComponent(HoverCameraController);
        ctrl.setCamera(45, -15, 5);

        await this.initScene(scene);

        let view = new View3D();
        view.scene = scene;
        view.camera = camera;
        Engine3D.startRenderView(view);
    }

    async initScene(scene: Scene3D) {
        // 创建实体对象
        let obj = new Object3D();
        scene.addChild(obj);

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

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

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

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

        // 添加发射器模块
        let emitter = simulator.addModule(ParticleEmitterModule);
        emitter.maxParticle = 1000;
        emitter.duration = 10;
        emitter.emissionRate = 10;
        emitter.startLifecycle.setScalar(1);
        emitter.shapeType = ShapeType.Circle;
        emitter.radius = 2.0;
        emitter.emitLocation = EmitLocation.Shell;

        // 添加纹理图集模块
        let sheetModule = simulator.addModule(ParticleTextureSheetModule);
        // 设置每列包含多少个子块
        sheetModule.clipCol = 4;
        // 设置整张纹理总共包含多少个子块
        sheetModule.totalClip = 4 * 4;
        // 设置整张纹理的宽度
        sheetModule.textureWidth = material.baseMap.width;
        // 设置整张纹理的高度
        sheetModule.textureHeight = material.baseMap.height;
        // 设置纹理动画播放速率
        sheetModule.playRate = 10.0;

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

new Sample_OverLifeRotationModule().run();