准备好推动网络中可能性的边界！PixiJS v8 已发布，它将改变游戏规则。庆祝十年来引领创新，我们通过最新的技术进步为 PixiJS 赋能，使其更快速、更稳定、而且功能强大得不可思议。从与 WebGPU 的无缝集成到利用现代 JavaScript 进行更流畅的开发，PixiJS v8 旨在赋能你，让你轻而易举地创造令人惊叹的网络体验。它不仅仅是一个更新；它代表着 2D 网络图形的未来，就是今天。深入了解，让 PixiJS v8 将你的项目提升到前所未有的高度。让我们让网络变得更美好，一次一个 pixi(el)！
🚀 革命化 Web 图形：欢迎来到 PixiJS v8
很难相信 PixiJS 已经成为开源社区的一个重要组成部分，时间长达十年。在此期间，数字格局发生了巨大的变化，PixiJS 也是如此。我们已经看到了重要的更新，例如向 TypeScript 转换，并且我们已经对引擎的主要部分进行了全面改进，例如资产加载和 WebGL 集成。
现在，我们很高兴地推出 PixiJS v8，这可能是我们有史以来最重要的更新。该版本不仅反映了 v7 的不足之处，而且承认始终有改进空间。随着时间的推移，我们都遇到了希望能够改进的代码方面。通常，只有在退一步解决问题并看到全貌后，才能找到最佳的解决方案和见解。
有了 PixiJS v8，我们的目标是重新审视和提升 PixiJS 的基础，简化核心，而不是只是添加代码层。
我们对 v8 的愿景很明确
- 寿命：我们设计 v8 以经受时间的考验，预计它将在未来十年内保持相关性和稳定性。
- 使用 WebGPU 的创新：我们接受渲染技术的最新成果，无缝整合 WebGPU，不是作为现有 WebGL 渲染器的附加项，而是作为一种核心范例，确保 PixiJS 在 WebGL 淘汰后仍保持领先地位。
- 利用现代 JavaScript：JavaScript 的进步极大地简化了开发。我们利用对象解构和选项等特性，让 v8 更加简洁强大。
- 纠正过去的疏忽：每个项目都有自己的教训。借助 v8，我们已解决问题并重新设计了 PixiJS 的某些方面，降低了复杂性并增强了功能，特别是在过去我们认为设计过度的领域（看着你，纹理！）。
- 提升性能：PixiJS 已因其速度而闻名。借助 v8，我们解锁了更高的性能，使其与 v7 相比全面提升速度。
我们对 PixiJS v8 感到无比自豪，并渴望与你分享改进之处和新特性。虽然有一些重大 API 更改，但我们提供了迁移指南，并尽最大可能确保与 v7 的兼容性。准备好使用 PixiJS v8 体验 2D 渲染的下一个级别吧！
🔗 快速链接
🎁 有什么新东西？
有很多更新需要讨论，单篇文章无法涵盖所有内容！以下是重点内容。如需更详细地了解这些更改，请务必点按上面提供的链接。
📈 新的性能栏
v8 的性能对两个渲染器都更快。这意味着通过使用 v8 和 WebGL 渲染器，所有速度提升都会生效！这主要是由于我们非常注意创建仅更新必需项的更具响应性的渲染循环。此处查看数字
- CPU = CPU 渲染单帧所花费的时间
- GPU = GPU 渲染单帧所花费的时间
| 小兔的情况 | V7 CPU | V8 CPU | CPU 差异 | V7 GPU | V8 GPU | GPU 差异 |
|---|---|---|---|---|---|---|
| 10 万个精灵全部移动 | ~50ms | ~15ms | 233% | ~9ms | ~2ms | 350% |
| 10 万个精灵保持静止 | ~21ms | ~0.12ms | 17417% | ~9ms | ~0.5ms | 1700% |
| 10 万个精灵（更改场景结构） | ~50ms | ~24ms | 108% | ~9ms | ~2ms | 350% |
这些基准数字基于 Bunnymark 测试，您可以自己尝试。
🖥️ WebGPU 渲染器
我们已经实现了一个 WebGPU 后端用于渲染。虽然这在屏幕下方创造了更好的图形范例，并且让我们为丰富的 Web 内容的未来做好准备，但需要注意的是，WebGPU 并不自动保证在所有场景中性能都优于 WebGL，因为 PixiJS 通常在 CPU 端遇到比 GPU 端更多的限制。不过，对于有着大量批处理中断的场景（例如滤镜、蒙版和混合模式），WebGPU 可能可以提供更好的性能，因为它对渲染来说更新。由于 WebGPU 相对较新，预计它的速度会随着时间的推移而提高，类似于 WebGL 的开发。它为未来的进步奠定了坚实的基础。
📦 新包结构
不再需要“lerna”。PixiJS 现在只有一个包，只有一个导入根目录：import {stuff} from ‘pixi.js’。此更改意味着我们在应用程序编译期间现在可以进行更好的摇树，如果未导入，可以减小包体积。
旧的
import { Sprite } from "@pixi/sprite";
import { Graphic } from "@pixi/graphics";
新的
import { Sprite, Graphic } from "pixi.js";
✨ 我们保证渲染器会工作
初始化渲染器时，此过程现在是异步的。这有两个目的：首先，识别并加载必要的渲染器代码，以最大程度减少为您的用户加载的内容。我们仅加载您的用户正在使用的后端。如果他们正在使用 WebGPU，就没有必要加载所有 WebGL 内容。其次，WebGPU 本身的初始化是一个异步过程，因此我们需要在某个地方有一个 Promise！
import { Application, autoDetectRenderer } from "pixi.js";
const app = new Application();
(async () => {
await app.init({
// application options
});
// or
const renderer = await autoDetectRenderer({}); // WebGL or WebGPU
// do pixi things
})();
🌟 场景升级
- 渲染组的概念已引入，使容器能够为其变换利用 GPU。这有助于生成一个真正的 2D 硬件加速相机，非常适合通过平移和缩放在大型静态世界中导航，类似于相机在 3D 环境中移动，而不是移动世界本身。这种方法可以显著提升性能。
const container = new Container({
isRenderGroup:true // this containers transform is now handled on the GPU!
})
- 另一个炫酷的新变化是，现在混合模式和色调采用继承方式，非常类似于变换和 alpha。这意味着现在可以轻松为容器上色，其所有子级都将应用此色调 - 对于混合模式来说也一样，方法和
// will make all the children tinted red
container.tint = 'red'
// will make all the children have the add blend mode
container.blendMode = 'add'
使用抗锯齿对纹理进行渲染已简化；您只需要在创建渲染纹理或应用滤镜时将其设置为 true 即可启用新的抗锯齿属性，类似于用于创建渲染器的流程。
const texture = RenderTexture.create({
width:100,
height:100,
antialias:true // easy as that
})
- 我们还增加了对多种类似 Photoshop 的滤镜的支持，这使您可以将您的渲染提升至新的水平！我们已经包括所有经典滤镜
- ColorBlend、ColorBurnBlend、ColorDodgeBlend、DarkenBlend、DifferenceBlend、DivideBlend、ExclusionBlend、HardLightBlend、HardMixBlend、LightenBlend、LinearBurnBlend、LinearDodgeBlend、LinearLightBlend、LuminosityBlend、NegationBlend、OverlayBlend、PinLightBlend、SaturationBlend、SoftLightBlend、SubtractBlend、VividLightBlend。
- 需要注意的是，这些本质上是滤镜，因此建议不要过度使用它们，以免造成潜在的减速。
import `pixi.js/advanced-blend-modes` // make sure to include them in you lib! (or cherry pick one!)
myContainer.blendMode = 'color-burn` // easy!
🎨 图形升级
图形 API 已进行更改，变得更加直观和用户友好，与 HTML Canvas 2D 上下文 API 非常相似。例如，绘制和填充矩形已简化为以下内容
graphics
.rect(50, 50, 100, 100)
.fill('blue');引入了
GraphicsContext，为所有图形操作提供支持。类似于一个纹理可用于多个精灵，单个 GraphicsContext 现在可由多个 Graphics 对象使用，从而提高效率和灵活性。已添加对 SVG 绘制的支持。例如
graphics.svg('M 100 350 q 150 -300 300 0');已引入渐变填充支持，目前仅限于线性渐变，从而实现更具视觉吸引力的设计。
新的
GraphicsPath类支持绘制和共享形状。此功能非常有用，因为它允许创建可使用buildGeometryFromPath函数转换为网格几何的路径，从而为复杂而精细的图形设计开辟了新的可能性。
const path = new GraphicsPath()
.rect(-50, -50, 100, 100)
// create geometry from the path:
const geometry = buildGeometryFromPath({
path,
});
const mesh = new Mesh({
geometry,
texture: Texture.WHITE,
});
有关这些图形升级的更多信息以及如何适应增强型图形 API 的指导，请参阅迁移指南，或立即加入并试玩一些示例。
📝 文本升级
我们已对文本进行了升级，以便实现更佳的性能和可用性！我们还将 HTMLText 标准化整合到了 v8 中。
你现在可以选择即时生成 BitmapFonts 或预先安装。当需要使用字体的字形时，它们会动态添加字符，从而节省内存。现在，位图文本的布局与默认文本的布局几乎相同，这让你可以根据自己的需要在两者之间轻松切换。
const myText = new BitmapText({
text: 'hello im a bitmap font!',
// font will be dynamically created
style:{
fontFamily: 'Outfit',
fontSize: 12,
fill: 'red',
}
})
文本填充和笔触现在符合与图形相同的填充和笔触。这意味着你现在可以将渐变、纹理以及你可以用来填充和描边图形的所有有趣方式应用到文本。
const myText = new Text({
text: 'hello im some fancy text',
// font will be dynamically created!
style:{
fontFamily: 'Outfit',
fontSize: 12,
fill: { texture, color:'red'} // same as graphics api fills
stroke: { width:3, color:'blue' } // same as graphics api strokes
}
})
🤝 现在该做什么？参与进来！
随着 PixiJS v8 迈出其第一步，我们热切期待看到它随着你的反馈和贡献而成长。我们知道事情不会完美，但我们致力于在 GitHub 和 Discord 上对出现的任何问题做出快速响应，并重视你的意见，以便让 PixiJS 变得更好。
衷心感谢我们的早期使用者（这里 的每个人）对 v8 的限制进行了测试，感谢我们的敬业的贡献者和团队的辛勤工作。你们的努力和见解对我们来说是无价的。没有你们，我们无法走到这里！
最后，要向 PlayCo 表示衷心的感谢，感谢他们在让此版本成为现实方面给予的支持！
让我们继续创新，共同推进网络图形的边界。你的参与是让 PixiJS 发展的关键，我们很高兴看到在你的帮助下，我们能达到什么高度。
📲 保持联系
为了让你及时了解最新信息，我们邀请你在社交媒体上关注 Doormat23 和 PixiJS，我们将在那里很快公布更多令人兴奋的更新。或者，你也可以加入我们在 Discord 上充满活力的社区，进行直接参与和实时聊天。