ParticleContainer - PixiJS v8 中的新速度之王

PixiJS v8 通过发布其新的 ParticleContainer 将速度提升到了一个新的水平。这一新功能带来了令人惊叹的性能提升，能够轻松渲染超过10万个元素。如果你有大量元素要显示在屏幕上，你将会大吃一惊！

🌐 PixiJS v8 has taken speed to the next level with the release of its new ParticleContainer. This new feature brings a jaw-dropping performance boost, capable of rendering 100K+ without breaking a sweat. If you’ve got tons of elements to throw on the screen, you’re in for a treat!

🚀 新的 ParticleContainer 设计

🌐 🚀 New ParticleContainer Design

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

🌐 The key difference in PixiJS v8 is that the ParticleContainer doesn’t deal with sprites any more, it works with lightweight particles. While particles share many properties with sprites (like texture, position, anchor, scale, rotation, alpha and color), they cut out unnecessary overhead. The result is speed, pure and simple.

你问速度有多快？好吧，看一下我的机器（Macbook Pro M3）：

🌐 How fast, you ask? Well, take a look on my machine (Macbook Pro M3):

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

是的，那屏幕上有一百万只兔子，说实话，到那个时候主要的瓶颈甚至不是渲染，而是跳跃运动背后的逻辑！试试看，自己感受一下：

🌐 Yes, that’s a million bunnies on-screen, and honestly the main bottleneck at that point wasn’t even rendering but the logic behind the bouncing movement! Give this a spin and see for yourself:

关键要点是，现在你可以以极快的速度渲染大量元素，这使得 PixiJS v8 成为高性能游戏或视觉密集型项目的完美选择。是的，这比 v7 粒子容器快了3 倍以上！

🌐 The key takeaway is that you can now render huge volumes of elements absurdly fast, making PixiJS v8 a perfect choice for high-performance games or visually intensive projects. And yes this is faster than the v7 particle container by over 3x!

请查看迁移指南以获取有关如何将代码迁移到新的粒子容器的更多信息。

🌐 Please checkout the migration guide for more information on how to migrate your code to the new particle container.

速度秘密：静态属性与动态属性

🌐 Speed Secret: Static vs. Dynamic Properties

要充分发挥这款高性能利器的性能，理解静态与动态属性至关重要。PixiJS 让你可以完全控制哪些属性每一帧都会更新（动态），以及哪些属性不需要持续更新（静态）。它们的工作原理如下：

🌐 To get the most out of this performance beast, it’s essential to understand static vs. dynamic properties. PixiJS gives you full control over which properties update every frame (dynamic) and which don’t need constant updates (static). Here’s how they work:

• 静态属性：一旦设置，它们保持不变，除非显式更改。通过保持它们静态，可以减少计算负荷，从而实现更快速的渲染。更新它们是你的责任 :)
• 动态属性：这些属性每帧都会被重新计算并上传到 GPU，无论如何。

默认情况下，只有位置是动态的，但如果需要，你可以配置其他属性。动态属性越少，渲染速度就越快！

🌐 By default, only the position is dynamic, but you can configure others if needed. The fewer dynamic properties you have, the faster the rendering will be!

PixiJS v8 粒子容器使用

🌐 PixiJS v8 Particle Container Usage

让我们通过一个简单的例子来演示如何入门：

🌐 Let’s walk through a simple example of how to get started:

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，尽可能将属性设置为静态，并生成 10 万个粒子。通过使用共享纹理（你好，精灵表！），我们确保所有粒子共享相同的图形资源，从而使渲染更加高效。

🌐 In this example, we create a ParticleContainer, set properties to static where possible, and generate a 100k particles. By using a shared texture (hello, sprite sheets!), we ensure that all particles share the same graphical assets, making rendering even more efficient.

使用粒子容器的原因

🌐 Reasons to Use ParticleContainer

ParticleContainer 在你需要在屏幕上呈现 惊人的数量 的视觉元素时表现出色，尤其是当你希望它们实时移动和互动时。无论你是在构建粒子特效、角色群体，还是抽象艺术装置，PixiJS v8 都能满足你的需求。静态与动态属性系统让你可以对性能进行精细控制，从而微调灵活性与速度之间的平衡。

🌐 The ParticleContainer shines when you need insane numbers of visual elements on-screen, especially when you want them moving and interacting in real time. Whether you're building particle effects, swarms of characters, or abstract art installations, PixiJS v8 has you covered. The static vs. dynamic property system gives you granular control over performance, allowing you to fine-tune the balance between flexibility and speed.

这基本上是我们在仍然允许不同纹理（通过精灵图）并且仍然让开发者通过 JS 操纵粒子而不必将运动移动到 GPU（这可能更快，但更复杂且灵活性较低）的情况下能够做到的最快速度。因此，即使我们选择称它们为粒子，它们更像是传统粒子和经典精灵之间的某种东西。

🌐 This is basically the fastest we could make it by still keeping allowing for different textures (via sprite sheets) and still empowering devs to manipulate the particles via JS and not having to move the movement to the GPU (which might be faster, but is more complex and less flexible). So even though we are choosing to call them particles, they are more like something in between a traditional particle and a classic sprite.

这非常适合对帧率和渲染量有要求的项目——例如游戏、互动应用和高容量数据可视化。通过控制粒子的动态属性，你可以优化应用的性能以满足你的需求。

🌐 This is ideal for projects where frame rate and rendering volume matter—such as games, interactive apps, and high-volume data visualization. By controlling the dynamic properties of your particles, you can optimize your application’s performance to fit your needs.

后续步骤

🌐 Next Steps

新的 ParticleContainer 是一个游戏规则的改变者，但仍有一些需要改进的地方！首先，静态属性上传还有进一步优化的空间（你可能会注意到上面的示例在添加小兔子时速度较慢——但一旦稳定下来速度会加快）。我们计划公开颗粒是如何批处理的，这样开发者可以从批处理中添加/移除属性，使其更快，或增加更多灵活性和自定义。但就目前而言，这是一个很好的起点，我们希望你喜欢新的 ParticleContainer！

🌐 The new ParticleContainer is a game-changer, but there are still some areas for improvement! For one, there is room to optimise further the static uploading of properties (you may notice the example above is slower when adding bunnys - but then speeds up once stable). We plan to expose how the particles are batched so that developers can add / remove attributes from the batch to make it even faster or add more flexibility and customization. But for now, this is a great starting point and we hope you enjoy the new ParticleContainer!

🎉 结论

🌐 🎉 Conclusion

PixiJS v8 的 ParticleContainer 在大规模渲染方面是一个游戏规则的改变者。它能够以全速推动 数百万 个粒子，为游戏开发者、动画师和创意程序员开辟了无限可能。加入进来，试验新的 API，看看你的视觉效果能飞得有多快！

🌐 PixiJS v8’s ParticleContainer is a game-changer when it comes to rendering at scale. Its ability to push millions of particles at full speed opens up a world of possibilities for game developers, animators, and creative coders. Get in, experiment with the new API, and see just how fast your visuals can fly!

准备好试一试了吗？在 PixiJS v8 中试用全新的 ParticleContainer，并在你的项目中挑战性能极限！

🌐 Ready to give it a spin? Try out the new ParticleContainer in PixiJS v8, and push the limits of performance in your projects!

🌐 保持联系

🌐 🌐 Stay Connected

在社交媒体上关注 Doormat23 和 PixiJS 以获取最新动态。加入我们的 Discord 活跃社区，参与实时讨论和获取支持。

🌐 Follow Doormat23 and PixiJS on social media for the latest updates. Join our vibrant community on Discord for real-time discussions and support.