PixiJS 是什么
¥What PixiJS Is
那么 PixiJS 到底是什么？PixiJS 的核心是一个渲染系统，它使用 WebGL（或可选的 Canvas）来显示图片和其他 2D 视觉内容。它提供了完整的场景图（要渲染的对象的层次结构），并提供交互支持以支持处理单击和触摸事件。它是现代 HTML5 世界中 Flash 的自然替代品，但提供了超出 Flash 所能实现的更好的性能和像素级效果。它非常适合在线游戏、教育内容、互动广告、数据可视化......任何复杂图形非常重要的基于 Web 的应用。与 Cordova 和 Electron 等技术相结合，PixiJS 应用可以作为移动和桌面应用分发到浏览器之外。
¥So what exactly is PixiJS? At its heart, PixiJS is a rendering system that uses WebGL (or optionally Canvas) to display images and other 2D visual content. It provides a full scene graph (a hierarchy of objects to render), and provides interaction support to enable handling click and touch events. It is a natural replacement for Flash in the modern HTML5 world, but provides better performance and pixel-level effects that go beyond what Flash could achieve. It is perfect for online games, educational content, interactive ads, data visualization... any web-based application where complex graphics are important. And coupled with technology such as Cordova and Electron, PixiJS apps can be distributed beyond the browser as mobile and desktop applications.
以下是 PixiJS 的其他功能：
¥Here's what else you get with PixiJS:
PixiJS 是...快速
¥PixiJS Is ... Fast
PixiJS 与其他基于 Web 的渲染解决方案的主要区别之一是速度。从头开始，渲染管道的构建就是为了从用户的浏览器中获得最大的性能。自动精灵和几何批处理、谨慎使用 GPU 资源、紧凑的场景图 - 无论你的应用是什么，速度都是宝贵的，而 PixiJS 可以满足你的需求。
¥One of the major features that distinguishes PixiJS from other web-based rendering solutions is speed. From the ground up, the render pipeline has been built to get the most performance possible out of your users' browsers. Automatic sprite and geometry batching, careful use of GPU resources, a tight scene graph - no matter your application, speed is valuable, and PixiJS has it to spare.
...不仅仅是雪碧图
¥... More Than Just Sprites
在页面上绘制图片可以使用 HTML5 和 DOM 来处理，那么为什么要使用 PixiJS 呢？除了性能之外，答案是 PixiJS 远远超出了简单图片的范围。使用 MeshRope 绘制小径和轨道。使用 图形 绘制多边形、直线、圆形和其他图元。文本 提供全文渲染支持，其性能与精灵一样。即使在绘制简单图片时，PixiJS 本身也支持 spritesheet，以实现高效加载和易于开发。
¥Drawing images on a page can be handled with HTML5 and the DOM, so why use PixiJS? Beyond performance, the answer is that PixiJS goes well beyond simple images. Draw trails and tracks with MeshRope. Draw polygons, lines, circles and other primitives with Graphics. Text provides full text rendering support that's just as performant as sprites. And even when drawing simple images, PixiJS natively supports spritesheets for efficient loading and ease of development.
...硬件加速
¥... Hardware accelerated
JavaScript 有两个 API 用于处理图形渲染的硬件加速：WebGL 和更现代的 WebGPU。两者本质上都提供了一个 JavaScript API，用于访问用户的 GPU，以实现快速渲染和高级效果。PixiJS 利用它们有效地显示数千个移动精灵，甚至在移动设备上也是如此。然而，使用 WebGL 和 WebGPU 提供的不仅仅是速度。通过使用 筛选 类，你可以编写着色器程序（或使用预构建的程序！）来实现置换贴图、模糊和其他仅使用 DOM 或 Canvas API 无法完成的高级视觉效果。
¥JavaScript has two APIs for handling hardware acceleration for graphical rendering: WebGL and the more modern WebGPU. Both essentially offer a JavaScript API for accessing users' GPUs for fast rendering and advanced effects. PixiJS leverages them to efficiently display thousands of moving sprites, even on mobile devices. However, using WebGL and WebGPU offers more than just speed. By using the Filter class, you can write shader programs (or use pre-built ones!) to achieve displacement maps, blurring, and other advanced visual effects that cannot be accomplished with just the DOM or Canvas APIs.
...开源
¥... Open Source
想了解发动机的工作原理吗？试图追踪错误？被闭源项目的关闭所困扰吗？使用 PixiJS，你可以获得一个具有完整源代码访问权限的成熟项目。我们获得了 MIT 的兼容性许可，并获得了 托管在 GitHub 上 的问题跟踪和易于访问许可。
¥Want to understand how the engine works? Trying to track down a bug? Been burned by closed-source projects going dark? With PixiJS, you get a mature project with full source code access. We're MIT licensed for compatibility, and hosted on GitHub for issue tracking and ease of access.
...可扩展
¥... Extensible
开源有帮助。基于 JavaScript 也是如此。但 PixiJS 易于扩展的真正原因是系统每个部分的干净内部 API。经过多年的开发和 5 个主要版本，无论你有什么需求，PixiJS 都已准备好让你的项目取得成功。
¥Open source helps. So does being based on JavaScript. But the real reason PixiJS is easy to extend is the clean internal API that underlies every part of the system. After years of development and 5 major releases, PixiJS is ready to make your project a success, no matter what your needs.
...易于部署
¥... Easy to Deploy
Flash 需要播放器。Unity 需要安装程序或应用商店。PixiJS 需要...一个浏览器。在网络上部署 PixiJS 与部署网站完全相同。仅此而已 - JavaScript + 图片 + 音频，就像你已经做过一百次一样。你的用户只需访问 URL，你的游戏或其他内容就可以运行了。但它并不止于网络。如果你想部署移动应用，请将 PixiJS 代码封装在 Cordova 中。想要部署独立的桌面程序？构建一个 Electron 封装器，然后你就可以开始摇滚了。
¥Flash required the player. Unity requires an installer or app store. PixiJS requires... a browser. Deploying PixiJS on the web is exactly like deploying a web site. That's all it is - JavaScript + images + audio, like you've done a hundred times. Your users simply visit a URL, and your game or other content is ready to run. But it doesn't stop at the web. If you want to deploy a mobile app, wrap your PixiJS code in Cordova. Want to deploy a standalone desktop program? Build an Electron wrapper, and you're ready to rock.