粒子渲染器

粒子渲染器（ParticleRenderer）负责粒子的渲染绘制，目前提供SpriteParticleRenderer和InstancedParticleRenderer两种类型的粒子渲染器。此外，开发人员可以根据实际需求扩展粒子渲染器。

🌏 SpriteParticelRenderer：使用“点精灵”方式渲染粒子，常用于火、烟雾、雨、雪、雾、飞线等粒子渲染：

import { NormalBlending } from 'three';
import { SpriteParticleRenderer } from '@tx3d/particlesystem';

// 创建一个点精灵粒子渲染器
const renderer = new SpriteParticleRenderer( {

    total: 1000,
    map: 'assets/textures/rain.png',
    blending: NormalBlending

} );

提示

SpriteParticleRenderer的初始化参数，详见ParticleRendererParameters。

🌏 InstancedParticleRenderer：使用实例化方式渲染粒子，常用于落煤、落石等粒子渲染：

import { InstancedParticleRenderer } from '@tx3d/particlesystem';

// 创建一个实例化粒子渲染器
const renderer = new InstancedParticleRenderer( {

    url: 'assets/models/煤矿.gltf' // glTF数据路径，必不可少

} );

提示

InstancedParticleRenderer的初始化参数，详见InstancedParticleRendererParameters。

注意

粒子渲染器可以渲染的最大粒子数目（total）需大于等于其拥有的发射器可发射的最大粒子数目总和！

粒子渲染器接口

🌏 addEmitter 添加一个粒子发射器

// 添加一个粒子发射器
renderer.addEmitter( emitter );

🌏 getEmitter 通过索引获取粒子发射器

// 获取0号索引粒子发射器
const emitter = renderer.getEmitter( 0 );

🌏 removeEmitter 移除一个粒子发射器

// 移除一个粒子发射器
renderer.removeEmitter( emitter );

🌏 removeAllEmitters 移除所有粒子发射器

// 移除所有粒子发射器
renderer.removeAllEmitters();

🌏 destroy 销毁粒子发射器

// 销毁粒子发射器
renderer.destroy();

扩展粒子渲染器

扩展粒子渲染器时需要注意以下几点：

🌏 必须重载以下方法

  🌏 getType 返回粒子渲染器类型，用于粒子模板数据生成

  🌏 _updateRenderer 逐帧更新粒子渲染器

  🌏 _destroyRenderer 销毁粒子渲染器

  🌏 _serialize 序列化粒子渲染器，用于粒子模板数据生成

此外，根据实际需求选择重载粒子排序方法_sortParticles

提示

默认情况粒子按照距相机距离由远及近进行排序（因为大多数情况下粒子属于透明物体，所以使用降序），可以根据实际情况选择升序排序或其它排序方式。粒子渲染器提供了_sortParticlesByCamera方法实现安装距相机距离升序或降序排序。

import { Particle } from '@tx3d/particlesystem';

protected _sortParticles( particles: Array<Particle> ): void {

    // 升序排序
    this._sortParticlesByCamera( particles, false );

}

🌏 粒子渲染对象需要赋值给粒子渲染器的 _renderer 属性

🌏 粒子渲染器的 _total 属性用于设置可渲染的最大粒子数目，默认2000；_renderOrder属性用于设置粒子渲染顺序，默认RenderOrder.Default。创建粒子渲染器时可以通过total和renderOrder参数初始化属性。

import { RenderOrder } from '@tx3d/core';

const renderer = new CustomParticleRenderer( { total: 500, renderOrder: RenderOrder.Default + 1 } );

扩展粒子渲染器示例代码

import { Particle, ParticleRenderer } from '@tx3d/particlesystem';

/**
 * 扩展粒子渲染器类
 */
class CustomParticleRenderer extends ParticleRenderer {

    construct( parameters: any ) {

        super( parameters );

        // 准备粒子渲染器
        this._prepare( parameters );

    }

    // public functions

    /**
     * 获取粒子渲染器类型
     */ 
    getType(): string {

        return 'custom';

    }

    // private functions

    /**
     * 准备粒子渲染器
     */ 
    private _prepare( parameters ): void {

        // TODO:准备材质

        // TODO:准备Geometry

        // 构建粒子渲染器
        this._renderer = new InstancedMesh( geometry, material, this._total );

    }

    // protected functions

    /** 
     * 更新粒子渲染器
    */
    protected _updateRenderer( particles: Particle[] ): void {

        // TODO:更新粒子渲染器

    }

    /**
     * 销毁粒子渲染器
     */ 
    protected _destroyRenderer(): void {

        // TODO:销毁粒子渲染器

    }

    /**
     * 序列化粒子渲染器
     */ 
    protected _serialize( meta: any ): void {

        // TODO:序列化粒子渲染器

    }

}

// 创建扩展粒子渲染器
const renderer = new CustomParticleRenderer( { total: 1000, renderOrder: RenderOrder.Default + 1 } );