PixiJS v8 发布了！🎉
准备好突破网页的可能性边界吧！PixiJS v8 已经发布，这将改变游戏规则。为了庆祝十年来的创新驱动，我们用最新的技术进步为 PixiJS 注入了强大动力，使其更快、更稳健、功能异常强大。从无缝集成 WebGPU 到利用现代 JavaScript 实现更流畅的开发，PixiJS v8 致力于让你轻松创建令人惊叹的网页体验。这不仅仅是一次更新；它是今天 2D 网页图形的未来。深入体验，让 PixiJS v8 将你的项目提升到前所未见的高度。让我们一起让网络变得更美好，每像素尽显精彩。
🌐 Get ready to push the boundaries of what's possible on the web! PixiJS v8 has landed, and it's a game-changer. Celebrating a decade of driving innovation, we've supercharged PixiJS with the latest technological advancements, making it faster, more robust, and ridiculously powerful. From the seamless integration of WebGPU to leveraging modern JavaScript for smoother development, PixiJS v8 is all about empowering you to create jaw-dropping web experiences with ease. It's not just an update; it's the future of 2D web graphics, today. Dive in and let PixiJS v8 elevate your projects to unseen heights. Let's make the web a more beautiful place, one pixi(el) at a time.
🚀 革新网页图形：欢迎使用 PixiJS v8
🌐 🚀 Revolutionizing Web Graphics: Welcome to PixiJS v8
很难相信 PixiJS 已经成为开源社区的一部分整整十年了。在这段时间里，数字字段经历了巨大的变化，PixiJS 也一样。我们见证了重大更新，比如转向 TypeScript，并且我们对引擎的主要部分进行了全面改造，比如资源加载和 WebGL 集成。
🌐 It's hard to believe that PixiJS has been part of the open-source community for a whopping ten years. In that time, the digital landscape has evolved tremendously, and so has PixiJS. We've seen significant updates, like the transition to TypeScript, and we've overhauled major parts of the engine, such as asset loading and WebGL integration.
现在，我们很高兴地推出 PixiJS v8，这可以说是我们迄今为止最重要的更新。此次发布不仅是对已经为我们服务良好的 v7 的不足之处的反思，更是对改进空间依然存在的承认。随着时间的推移，我们都遇到过希望能够优化我们代码的方面。通常，最好的解决方案和见解只有在我们暂时退一步看问题时才会出现，这让我们能够看到更大的整体图景。
🌐 Now, we're thrilled to unveil PixiJS v8, arguably our most substantial update ever. This release is not just a reflection on the shortcomings of v7, which has served us well, but an acknowledgment that there's always room for improvement. Over time, we've all encountered aspects of our code we wished we could refine. Often, the best solutions and insights emerge only after we've stepped back from the problem, allowing us to see the bigger picture.
在 PixiJS v8 中，我们的目标是重新审视并增强 PixiJS 的基础，简化其核心，而不仅仅是增加代码层。
🌐 With PixiJS v8, our aim was to revisit and enhance the foundation of PixiJS, streamlining its core rather than just adding layers of code.
我们对 v8 的愿景很清晰：
🌐 Our vision for v8 was clear:
- 长寿性： 我们设计了 v8 来经受时间的考验，预计它在未来十年仍将保持相关性和稳健性。
- 使用 WebGPU 的创新： 我们采用了最新的渲染技术，已经无缝整合了 WebGPU，这不仅是对现有 WebGL 渲染器的一个附加功能，而是作为核心范式，确保随着 WebGL 的逐步淘汰，PixiJS 仍然保持在技术前沿。
- 利用现代 JavaScript： JavaScript 的进步大大简化了开发。我们已经使用了对象解构和选项等功能，使 v8 更加干净和强大。
- 纠正过去的疏漏： 每个项目都有其教训。在 v8 中，我们已经解决并重新架构了 PixiJS 的某些方面，降低了复杂性并增强了功能，特别是在我们认为过去过度设计的字段（看着你，纹理！）。
- 提升性能： PixiJS 已以其速度著称。通过 v8，我们解锁了更高的性能，使其整体速度相比 v7 更快。
我们对 PixiJS v8 感到非常自豪，并渴望与你分享其改进和新功能。虽然存在一些破坏性 API 更改，但我们提供了迁移指南，并在可能的情况下确保与 v7 的兼容性。准备好体验 PixiJS v8 带来的下一水平的 2D 渲染吧！
🌐 We're incredibly proud of PixiJS v8 and eager to share the improvements and new features with you. While there are some breaking API changes, we've provided a migration guide and ensured compatibility with v7 wherever possible. Get ready to experience the next level of 2D rendering with PixiJS v8!
🔗 快速链接
🌐 🔗 Quick links
🎁 有什么新内容？
🌐 🎁 Whats New?
有许多更新需要讨论，远超过一篇文章能够涵盖的内容！以下是主要亮点。想要更详细地了解这些变化，请务必点击上面提供的链接。
🌐 There are numerous updates to discuss, more than can be covered in a single post! Below are the key highlights. For a more detailed exploration of these changes, be sure to follow the links provided above.
📈 新性能栏
🌐 📈 New Performance Bar
v8 的性能在 两个 渲染器上都更快。这意味着通过使用 v8 和 WebGL 渲染器，所有的速度提升都适用！这主要是因为我们非常注意创建了一个更具响应性的渲染循环，仅更新所需的内容。查看这里的数字：
🌐 The performance of v8 is faster for both renderers. This means by using v8 and the WebGL renderer, all the speed improvements apply! This is mainly as we have taken great care to make a more reactive render loop that only updates what it needs to. Check out the numbers here:
- CPU = CPU 渲染单帧所花费的时间
- GPU = GPU 渲染单帧所花费的时间
| 兔子情况 | V7 CPU | V8 CPU | CPU 差异 | V7 GPU | V8 GPU | GPU 差异 |
|---|---|---|---|---|---|---|
| 10万精灵全部移动 | ~50毫秒 | ~15毫秒 | 233% | ~9毫秒 | ~2毫秒 | 350% |
| 10万精灵不移动 | ~21毫秒 | ~0.12毫秒 | 17417% | ~9毫秒 | ~0.5毫秒 | 1700% |
| 10万精灵（更改场景结构） | ~50毫秒 | ~24毫秒 | 108% | ~9毫秒 | ~2毫秒 | 350% |
这些基准数值是基于你可以自己尝试的Bunnymark测试得出的。
🌐 These benchmark numbers are based on the Bunnymark test that you can try yourself.
🖥️ WebGPU 渲染器
🌐 🖥️ WebGPU Renderer
我们已经实现了用于渲染的 WebGPU 后端。虽然这在底层创建了更好的图形范式，并为丰富的网页内容的未来做好了准备，但需要注意的是，WebGPU 并不自动保证在所有情况下比 WebGL 性能更好，因为 PixiJS 在 CPU 端遇到的限制通常比 GPU 多。然而，对于具有大量批处理中断的场景，例如滤镜、蒙版和混合模式，WebGPU 可能由于其更现代的渲染方式而提供更好的性能。由于 WebGPU 相对较新，预计其速度会随着时间的推移而提升，类似于 WebGL 的发展。它为未来的进步奠定了坚实的基础。
🌐 We've implemented a WebGPU backend for rendering. Whilst this has created a better graphics paradigm under the hood and set us up for the future of rich web content, it's important to note that WebGPU does not automatically guarantee improved performance over WebGL in all scenarios, as PixiJS often encounters more limitations on the CPU side than the GPU. However, for scenes with numerous batch breaks, such as filters, masks, and blend modes, WebGPU may offer better performance due to its more modern to rendering. As WebGPU is relatively new, it's expected to enhance in speed over time, similar to the development of WebGL. It serves as a solid foundation for future advancements.
📦 新包结构
🌐 📦 New Package Structure
不再使用“lerna”。PixiJS 现在只是一个包，只有一个导入根：import {stuff} from ‘pixi.js’。这一变化意味着在应用编译期间我们现在有更好的树摇优化，如果没有导入，将减少包的大小。
🌐 No more "lerna." PixiJS is now just one package with one import root: import {stuff} from ‘pixi.js’. This change means we now have much better tree shaking during app compilation, reducing bundle size if not imported.
旧的：
🌐 Old:
import { Sprite } from '@pixi/sprite';
import { Graphic } from '@pixi/graphics';
新
🌐 New:
import { Sprite, Graphic } from 'pixi.js';
✨ 我们 保证 渲染器会正常工作
🌐 ✨ We promise the Renderer will work
在初始化渲染器时，这个过程现在是异步的。这有两个目的：首先，识别并加载必要的渲染器代码，以最小化为用户加载的内容。我们只加载用户正在使用的后端。如果用户使用的是 WebGPU，那么加载所有 WebGL 的内容就没有意义。其次，WebGPU 本身的初始化就是一个异步过程，所以我们需要在某个地方使用一个 promise！
🌐 When initializing a renderer, this process is now asynchronous. This serves two purposes: firstly, identifying and loading the necessary renderer code to minimize what is loaded for your users. We only load the one backend that your user is using. There's no point in loading all the WebGL stuff if they are using WebGPU. Secondly, the initialization of WebGPU itself is an asynchronous process, so we need to have a promise in there somewhere!
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
})();
🌟 场景升级
🌐 🌟 Scene Upgrades
- 引入了渲染组的概念，使容器能够利用 GPU 进行其变换。这促成了真正的二维硬件加速摄像机，非常适合通过平移和缩放来浏览大型静态世界，类似于摄像机在三维环境中的移动方式，而不是移动世界本身。这种方法可以显著提升性能。
const container = new Container({
isRenderGroup: true, // this containers transform is now handled on the GPU!
});
- 另一个很酷的新变化是，现在混合模式和色彩滤镜会被继承，就像变换和透明度一样。这意味着你现在可以轻松地给一个容器着色，它的所有子对象都会应用这个色彩滤镜——混合模式也是一样，非常简单：
// will make all the children tinted red
container.tint = 'red'
// will make all the children have the add blend mode
container.blendMode = 'add'
使用抗锯齿渲染到纹理已经被简化；你只需要在创建渲染纹理或应用滤镜时将新的抗锯齿属性设置为 true，就像创建渲染器时的过程一样。
🌐 Rendering to a texture with antialiasing has been simplified; you only need to enable the new antialiasing property by setting it to true during the creation of a render texture or when applying a filter, similar to the process used for creating your renderer.
const texture = RenderTexture.create({
width:100,
height:100,
antialias:true // easy as that
})
- 我们还增加了对各种类似 Photoshop 的滤镜的支持，这让你可以将渲染提升到一个新的水平！我们包含了所有经典滤镜：
- 颜色混合, 颜色加深混合, 颜色减淡混合, 变暗混合, 差值混合, 除混合, 排除混合, 强光混合, 强混合, 变亮混合, 线性加深混合, 线性减淡混合, 线性光混合, 亮度混合, 取反混合, 覆盖混合, 点光混合, 饱和度混合, 柔光混合, 相减混合, 亮光混合。
- 重要的是要提到，这些本质上是核心的过滤器，因此建议不要过度使用它们，以避免潜在的性能下降。
import `pixi.js/advanced-blend-modes` // make sure to include them in you lib! (or cherry pick one!)
myContainer.blendMode = 'color-burn` // easy!
🎨 图形升级
🌐 🎨 Graphics Upgrades
-
图形 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 的指导，请参阅迁移指南，或者为什么不直接尝试一些示例呢。
🌐 For more information on these graphics upgrades and guidance on how to adapt to the enhanced Graphics API, please refer to the migration guide, or why not jump in and play with some examples.
📝 文本升级
🌐 📝 Text Upgrades
文本已升级，以提供更好的性能和易用性！我们还将 HTMLText 集成到 v8 作为标准功能。
🌐 Text has been upgraded to allow for better performance and usability! We have also integrated HTMLText into v8 as standard.
现在可以根据你的喜好即时生成位图字体或预先安装。它们会在字体的字形被需要时动态添加字符，从而节省内存。位图文本的布局现在几乎与默认文本的布局相同，使你能够根据需要更轻松地在两者之间切换。
🌐 BitmapFonts can now be generated on the fly or installed upfront as you prefer. They dynamically add characters as the font's glyphs are required, saving on memory. The layout of bitmap text is almost identical to the layout of the default text now, making it easier to switch between the two depending on your needs.
const myText = new BitmapText({
text: 'hello im a bitmap font!',
// font will be dynamically created
style: {
fontFamily: 'Outfit',
fontSize: 12,
fill: 'red',
},
});
文本的填充和描边现在与图形的填充和描边相同。这意味着渐变、纹理以及所有可以填充和描边图形的有趣方式现在都可以应用到文本上。
🌐 Text fills and strokes now conform to the same fills and strokes as graphics. This means Gradients, textures, and all the fun ways you can fill and stroke graphics can now be applied to Text.
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
}
})
🤝 现在怎么办？参与进来！
🌐 🤝 What now? Get involved!
随着 PixiJS v8 踏入世界的第一步，我们期待着在你的反馈和贡献中看到它的成长。现在我们知道事情不会完美，但我们承诺会在 GitHub 和 Discord 上对出现的任何问题做出快速响应，重视你的意见以使 PixiJS 变得更好。
🌐 As PixiJS v8 takes its first steps into the world, we're eager to see it grow with your feedback and contributions. Now we know things won't be perfect, but we're committed to quick responses on GitHub and Discord to any issues that arise, valuing your input to make PixiJS even better.
衷心感谢我们的早期采用者（这里的每一位）测试 v8 的极限，感谢我们敬业的贡献者和团队的辛勤工作。你们的努力和见解对我们极为宝贵。没有你们，我们无法走到今天！
🌐 A heartfelt thanks to our early adopters (everyone in here) for testing the limits of v8, to our dedicated contributors and team for their hard work. Your efforts and insights are invaluable to us. We could not have gotten here without you!
最后，再次向 PlayCo 致以衷心的感谢，感谢他们对此次发布实现所提供的支持！
🌐 A final big shout-out to PlayCo for their support in making this release a reality!
让我们继续一起创新，推动网页图形的边界。你的参与是 PixiJS 发展的关键，我们很高兴看到在你的帮助下，我们能够走向何方。
🌐 Let's continue to innovate and push the boundaries of web graphics together. Your engagement is key to PixiJS's evolution, and we're excited to see where we can go with your help.
📲 保持联系
🌐 📲 Keep in touch
为了保持信息更新，我们邀请你在社交媒体上关注 Doormat23 和 PixiJS，我们将在那里不久后发布更多令人兴奋的更新。或者，你也可以加入我们充满活力的 Discord 社区，以进行直接互动和实时交流。
🌐 To stay in the loop, we invite you to follow Doormat23 and PixiJS on social media, where we'll be unveiling more exciting updates shortly. Alternatively, you can join our vibrant community on Discord for direct engagement and real-time chit-chats.