粒子容器 - PixiJS v8 中的全新速度恶魔

凭借全新 ParticleContainer 的发布，PixiJS v8 将速度提升到了一个新的水平。这一新功能带来了令人惊叹的性能提升，能够渲染超过 100,000 个元素，且毫无压力。如果你有很多元素要放到屏幕上，那么你一定会喜欢的！

🚀 新粒子容器设计

PixiJS v8 中的关键区别在于，ParticleContainer 不再处理精灵，而是使用轻量级的粒子。虽然粒子与精灵共享许多属性（如纹理、位置、锚点、缩放、旋转、alpha 和颜色），但它们去除了不必要的开销。其结果是速度，纯净而简单。

你可能会问，有多快？在我的机器（Macbook Pro M3）上看一看吧

精灵 + 容器：200,000 个，60 帧/秒。
粒子 + 粒子容器：1,000,000 个，60 帧/秒！

是的，屏幕上有一百万只兔子，说实话，此时的主要瓶颈甚至不是渲染而是反弹动作背后的逻辑！试一试，自己看看

要点是，你现在可以高速渲染大量元素，从而使 PixiJS v8 成为高性能游戏或视觉密集型项目的理想选择。没错，这比 v7 粒子容器快3 倍以上！

如需了解有关如何将代码迁移到新粒子容器的更多信息，请查看迁移指南。

速度秘诀：静态属性与动态特性

为充分利用此性能野兽，了解静态属性与动态特性至关重要。PixiJS 为您提供了完全掌控的权限，决定哪些属性每帧都更新（动态特性），而哪些属性不需要持续更新（静态属性）。以下是它们的工作方式

静态属性：一旦设置，它们会保持不变，除非明确更改。保持它们为静态，您可以减少计算负载，这意味着更快的渲染。更新由您负责 :)
动态特性：无论如何，这些特性将在每帧中重新计算并上传到 GPU。

默认情况下，只有位置是动态的，但您可以在需要时配置其他位置。动态特性越少，渲染得就越快！

PixiJS v8 粒子容器用法

我们通过一个简单的示例了解如何开始

import { ParticleContainer, Particle, Texture } from 'pixi.js';

// Create a particle container with default options
const container = new ParticleContainer({
    // this is the default, but we show it here for clarity
    dynamicProperties: {
        position: true,  // Allow dynamic position changes (default)
        scale: false,    // Static scale for extra performance
        rotation: false, // Static rotation
        color: false     // Static color
    }
});

// Add particles
const texture = Texture.from('path/to/bunny.png');

for (let i = 0; i < 100000; ++i) {
    let particle = new Particle({
        texture,
        x: Math.random() * 800,
        y: Math.random() * 600,
    });

    container.addParticle(particle);
}

// Add container to the Pixi stage
app.stage.addChild(container);

在此示例中，我们创建了 ParticleContainer，尽可能将属性设置为静态，并生成了 100k 个粒子。通过使用共享纹理（欢迎使用精灵表！），我们可以确保所有粒子共享相同的图形资源，从而让渲染变得更加高效。

使用 ParticleContainer 的理由

当您需要在屏幕上呈现大量视觉元素时，尤其是在您希望它们实时移动和交互时，ParticleContainer 会闪亮登场。无论您是构建粒子效果、角色群还是抽象艺术装置，PixiJS v8 都会帮您搞定。静态属性与动态属性系统让您可以精细地控制性能，让您在灵活性与速度之间取得精细的平衡。

这基本上是我们所能实现的最快速的状态，同时仍在允许使用不同的纹理（通过精灵表）和增强开发者通过 JS 操作粒子的能力，并且不必将移动操作转移到 GPU（这可能会更快，但更复杂、更缺乏灵活性）。因此，即使我们选择将它们称为粒子，它们也更像是传统粒子与经典精灵之间的某种事物。

这非常适合帧率和渲染量至关重要的项目，例如游戏、交互式应用程序和大量的可视化呈现。通过控制粒子的动态特性，您可以针对自己的需求优化应用程序性能。

后续步骤

新 ParticleContainer 改变了游戏规则，但仍然有一些改进之处！其一，需要进一步优化属性的静态上传（您可能会注意到上面的示例在添加兔子时速度较慢——但在稳定之后会加速）。我们计划公开粒子分组的方式，以便开发人员可以添加/移除分组的属性，以使其更快或增加灵活性并进行自定义。但就目前而言，这是一个极好的起点，我们希望您喜欢新的 ParticleContainer！

🎉 结论

PixiJS v8 的 ParticleContainer 是在规模化渲染方面改变游戏规则的。其以全速推送数百万粒子的能力为游戏开发人员、动画师和创造性编码人员开辟了一个可能的世界。进入、试验新的 API，看看您的视觉效果可以飞多快！

准备尝试一下了吗？在 PixiJS v8 中试用新的 ParticleContainer，并在您的项目中突破性能限制！

🌐 保持联系

在社交媒体中关注 Doormat23 和 PixiJS 以获取最新更新。加入我们在 Discord 上充满活力的社区，进行实时讨论并获得支持。

🚀 新粒子容器设计​

速度秘诀：静态属性与动态特性​

PixiJS v8 粒子容器用法​

使用 ParticleContainer 的理由​

后续步骤​

🎉 结论​

🌐 保持联系​