我们很高兴在 PixiJS v8 Beta 版中独家展示 2D 网络图形的未来。虽然此 Beta 版本还未最终确定，但我们迫切希望你试玩一下，此版本中包含了惊人的性能提升和功能！
在十年的时间里——没错，你没有看错，就是十年！——我们对 PixiJS 引擎进行了重大的更改。但此新版本中的进步是我们所做过的最重大的进步！
有两个驱动因素促使我们重新设计 v8 中的代码库和渲染流水线
1. 😍 拥抱 WebGPU
新秀 WebGPU 提供了比其前身 WebGL 大幅提升的性能。它将网络计算和图形推向了一个新时代，提供更有效率和健壮的 API。很快，它将成为在网络上渲染大多数 GPU 驱动内容的首选方法。
这种转变让人想起 PixiJS 的最初推出。那时候，WebGL 是新的，仅在少数桌面浏览器中提供，而 Canvas 则是无处不在。PixiJS 的突出特点是它首先尝试使用 WebGL 进行渲染，然后将 Canvas 作为备用方案。这种方式让 PixiJS 内容在 WebGL 获得广泛应用时立即受益。时至今日，WebGL 现在可以在 95% 的浏览器上使用。
历史正在使用 WebGPU 重演，目前仅在少数桌面浏览器中得到支持，大约是 27% 的市场份额。然而，它普及只是时间问题。PixiJS 的目标是执行相同的回退策略，让您始终利用最好的可用技术，而无需重写代码。这正是版本 8 实现的目标，将在未来十年保护我们所做的一切 :D
2. 🚀 提升性能
PixiJS 一直以速度和高性能图形著称。在 v8 中，我们重新构建了架构，以优化静态和动态渲染。尽管 v7 很快，但它作为一个相对“简单的”渲染器运行。
v7 方法：
- 遍历场景图并确保所有转换正确
- 第二次遍历场景图并执行以下操作
- 构建要渲染的批次
- 将数据上传到 GPU
- 将批次绘制到屏幕中。
v8 方法
- 仅更新变更内容的转换
- 遍历场景图并构建一组指令。
- 一次性将所有场景数据上传到 GPU。
- 基于指令执行渲染。
此循环有三个主要更改，能给我们带来性能提升。
- 首先，我们只更新已更改的元素。如果没有任何移动，则不会执行代码，优化计算开销。
- 其次，如果场景图在后续帧中保持不变，我们将重复使用现有的渲染指令。这样可以避免为每帧重建这些指令的开销。
- 第三，如果场景中没有元素改变位置，则完全跳过数据上传步骤（步骤 3），从而节省带宽并进一步减少计算工作。
这些改进的最终效果是什么？在不同的用例中实现卓越的性能提升
CPU = cpu 渲染一帧所花费的时间 GPU = gpu 渲染一帧所花费的时间
| 小兔子情形 | V7 CPU | V8 CPU | CPU Dif | V7 GPU | V8 GPU | GPU dif |
|---|---|---|---|---|---|---|
| 所有 100k 个精灵都移动 | ~50 毫秒 | ~15 毫秒 | 233% | ~9 毫秒 | ~2 毫秒 | 350% |
| 100k 个精灵未移动 | ~21 毫秒 | ~0.12 毫秒 | 17417% | ~9 毫秒 | ~0.5 毫秒 | 1700% |
| 100k 个精灵（更改场景结构） | ~50 毫秒 | ~24 毫秒 | 108% | ~9 毫秒 | ~2 毫秒 | 350% |
这些基准数字基于您可以亲自尝试的 Bunnymark 测试！
请动手试试，你可以调整 url 中的参数更改小兔子的数量。我有兴趣知道你们都能看到什么数字！
最值得一提的是，这些改进适用于 WebGPU 和 WebGL 渲染器。如同 PixiJs 的所有花招一样，这些改进都是自动进行的：D
且慢，还有更多！
虽然本次大修的两个主要驱动力是性能和可用性，但我们并未就此止步。我们抓住这个机会提升了 API，为引擎引入了大量新特性——太多，以至于一篇博文都无法囊括！
请持续关注我们的博文，我们将在其中深入探讨新增功能和 API 改进，让你能够创建更加出色的项目。如需全面了解新增功能，请不要错过发行说明。
作为一项重要说明，尽管 PixiJS v8 进行了重大的内部更新，但它仍然保留了熟悉的大部分 API。我们进行这些更改是为了让 PixiJS 更健壮、更易于使用。在遇到修改时，请放心，v7 方法仍然适用——你只会看到一个弃用警告，引导你采用最佳实践。
交给你了！
在我们朝着候选版本迈进之际，现在是你们深入了解和探索 v8 的绝佳时机。你在这个阶段提供的反馈对于微调我们的引擎非常宝贵。我们邀请你分享你的想法——好坏都有——报告错误，甚至贡献代码。携手同行，我们能将 PixiJS 提升到前所未有的高度。
👇 不要等待，立即开始！在 GitHub 上探索 PixiJS v8 代码库
安装步骤：
你可以通过 npm 安装 beta 版本，如下所示
npm install pixi.js@prerelease-v8
然后你可以使用新的 autoDetectRenderer 函数创建最合适的渲染器
import { autoDetectRenderer } from "pixi.js";
async function init()
{
const renderer = await autoDetectRenderer({
// any settings
}); // will return a WebGL or WebGPU renderer
}
立即开始试用 PixiJS v8 Beta，与我们共同塑造 2D web 绘图的未来！🎉
保持联系！
"为了保持联系，我们邀请您关注 Doormat23 和 PixiJS 的社交媒体，我们将在那里很快揭幕更多激动人心的更新。或者，您可以在 Discord 上加入我们充满活力的社区，进行直接互动和实时对话。