PIXI入门系列之开篇

前言

对于PIXI系列，目前的规划是分为入门篇、源码篇两部分：

• 入门篇主要是熟悉PIXI的API使用，预计会有大概3-4篇文章，大概分为对PIXI的认知、PIXI API的基本使用、结合案例提高PIXI的熟练使用
• 源码篇顾名思义则是PIXI源代码的分析，主要学习其架构逻辑以及相关性能优化处理

本篇文章是PIXI入门系列的开篇，主要聊聊如下两个问题：

• PIXI是什么以及应用场景
• PIXI的大体发展历史，从而对其有较为完整的认知

PIXI是什么

实际上这部分可以去看PIXI的官网，官网有较为详细的说明，这里提炼下主要点：

• PIXI是一个HTML5渲染引擎，用于显示图像和其他2D视觉内容
• PIXI是使用WebGL（或者WebGPU、Canvas）来实现图形绘制的，渲染速度非常快

虽然底层使用WebGL技术来绘制视觉内容，但是PIXI的定位是2D，如果你的项目需要3D则需要去学习Three.js或者Babylon.js。为什么选择PIXI？实际上官网上也有详细的说明：

• PIXI使用WebGL/WebGPU绘制内容，渲染速度非常快，支持使用着色器实现高级视觉效果
• 支持高效地绘制图像、文本、多种图形、轨迹等多种元素

PixiJS被设计为做一件事，就是渲染2D图形内容，你可以用PIXI来开发相关可视化类项目并获得高效的性能，例如：

• 基于Web的小游戏类项目
• 数据可视化项目
• 地图交互类项目
• 视觉类图形编辑器
• …

PIXI发展历史

截止到现在PIXI最新的稳定版本是8.1.0，整个库的发展历史从使用的底层绘制技术的角度去划分，主要分为三个阶段：

• canvas阶段：PIXI从v5版本之后就移除了内置的canvas渲染器（在v5版本之前PIXI内置了WebGL渲染器、Canvas渲染器，当浏览器不支持WebGL技术时就会使用Canvas来渲染），如果想要使用Canvas渲染器，就需要使用pixi-legacy或@pixi/canvas-renderer库
• webGL阶段：实际上在v8版本之前，PIXI内置的渲染器只有WebGL渲染器
• webGPU阶段：在v8版本发布后，PIXI内置的渲染器有WebGPU渲染器、WebGL渲染器，优先使用WebGPU，不支持WebGPU的才会降级使用WebGL

PIXI最新的版本V8.1.0会依次降级使用相关的图形绘制技术，即WebGPU、WebGL、Canvas，由于移除内置的Canvas渲染器逻辑，如果不支持WebGl等技术这部分的逻辑也仅仅抛出警告错误，开发者需要使用带有Canvas渲染器逻辑的其他库来替换。

总结

本篇文章主要是去了解PIXI是什么、应用场景以及目前的底层技术发展，对于全局理解PIXI有着很好的帮助，一些具体的细节可以去PIXI官网去了解。

目前主流的浏览器基本上都支持WebGL，通常情况下无需考虑PIXI底层使用什么技术来实现图像渲染，关注业务逻辑本身就行。只需要记住两点就可以：

• PIXI的定位是在Canvas标签中渲染2D视觉内容
• PIXI目前使用WebGL/WebGPU来实现图形渲染，如果想要使用Canvas技术渲染则需要pixi-legacy或@pixi/canvas-renderer

这里额外提及下之前开源的两个仓库，相信对于Canvas、Three.js的学习可以提供一定的助力：

• canvas2d
• three3d