基本模块

粒子系统的仿真器可添加各种属性模块，每个属性模块包含一种功能实现和与之相关的参数，目前内置有:

ParticleOverLifeScaleModule - 粒子生命周期内大小变化模块
ParticleOverLifeSpeedModule - 生命周期内速度变化模块
ParticleOverLifeRotationModule - 生命周期内自旋变化模块
ParticleOverLifeColorModule - 生命周期内颜色变化模块
ParticleGravityModifierModule - 重力变化模块
ParticleTextureSheetModule - 纹理图集模块

大小变换模块

若想使单个粒子的大小在它自己的整个生命周期内，随着时间变换而变换时，可以给仿真器添加 ParticleOverLifeScaleModule 模块:

// 添加生命周期内大小变换模块
let overLifeScaleModule = simulator.addModule(ParticleOverLifeScaleModule);
// 设置大小变换参数，从起始的 1倍大小 到 结束时 3倍大小
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()

内旋转变换模块

若想使单个粒子的旋转角度在它自己的整个生命周期内，随着时间变换而变换时，可以给仿真器添加 ParticleOverLifeRotationModule 模块:

// 添加生命周期内旋转变换模块
let overLifeRotationModule = simulator.addModule(ParticleOverLifeRotationModule);
// 设置自旋变换参数，从起始的 0° 到 结束时 270°
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()

颜色变换模块

若想使单个粒子的颜色在它自己的整个生命周期内，随着时间变换而变换时，可以给仿真器添加 ParticleOverLifeColorModule 模块:

// 添加生命周期内颜色变换模块
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;

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()

重力修改模块

在模拟粒子运动轨迹时可以给仿真器添加一个重力修改模块 ParticleGravityModifierModule ，使粒子可以根据重力方向移动：

// 添加重力修改模块
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()

纹理图集模块

当需要给每个粒子提供不同纹理或者使单个粒子附带纹理动画时可以给仿真器添加一个纹理图集模块 ParticleTextureSheetModule:

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

WebGPU Shader

后处理特效

基本模块

大小变换模块

内旋转变换模块

颜色变换模块

重力修改模块

纹理图集模块

基本模块 ​

大小变换模块 ​

内旋转变换模块 ​

颜色变换模块 ​

重力修改模块 ​

纹理图集模块 ​

基本模块

大小变换模块

内旋转变换模块

颜色变换模块

重力修改模块

纹理图集模块