本次学习开始之前建议先学习webgl WebGL 理论基础 (webglfundamentals.org) 然后是着色器的一些基础知识 The Book of Shaders
为什么要学习pixi呢，作为2d渲染框架pixi的性能是非常不错的，主要就是通过webgl和webgpu实现canvas2d的效果。学习过webgl的同学都应该了解，只有三角和线的webgl要实现canvas2d这些api都是比较困难的，需要较好的数学功底，比如从pixi开始，直接学习2d渲染引擎设计的结构。
用途
PixiJS是一个渲染系统，使用WebGL（或可选的Canvas）来显示图像和其他2D视觉内容。它提供了完整的场景图，并提供交互支持，以处理点击和触摸事件。 基本上就是做游戏和绘图用。
-
在线游戏：创建丰富的互动性强的2D游戏，能够在浏览器中流畅运行，具有高性能。
-
教育内容：开发引人入胜的互动教育材料，使学习变得更加有趣和高效。
-
互动广告：设计引人注目的互动广告，吸引用户并增加参与度。
-
数据可视化：构建复杂且动态的数据可视化工具，以清晰和互动的方式展示信息。
-
网页应用：通过复杂的图形和动画增强网页应用，提升用户体验。
-
移动应用：使用Cordova或类似技术，将PixiJS应用转换为iOS和Android的移动应用。
-
桌面应用：通过Electron，将PixiJS应用打包成独立的桌面应用，适用于Windows、Mac和Linux。
-
艺术和设计工具：创建互动艺术项目或设计工具，利用PixiJS强大的渲染功能。
-
互动故事：开发互动故事或数字漫画，通过动画和互动吸引用户。
-
原型和演示：快速制作和演示具有丰富视觉效果和互动性的概念原型。
框架选择
PixiJS在2D图形渲染方面表现出色，适合需要高性能和复杂图形效果的应用。 如果需要3D渲染，可以选择Three.js； 如果需要高度定制的游戏开发功能，可以选择Phaser； 如果主要关注数据可视化，D3.js是更好的选择。 所以pixi主要的场景还是2d渲染。
优势
-
快速和高效的渲染：PixiJS利用WebGL提供硬件加速的图形渲染，如果WebGL不可用，它会自动回退到Canvas渲染。比起canvas的框架更加高效
-
丰富的图形功能：PixiJS支持精灵（Sprites）、文本、图形形状（如矩形、圆形、椭圆形、多边形等），以及粒子系统和滤镜效果。
-
动画和时间轴：提供了强大的动画系统，可以创建复杂的动画效果和过渡。
-
资源管理：具有内置的资源加载器，可以轻松加载和管理图像、音频、JSON等资源。
-
交互和事件处理：内置交互管理器，支持鼠标和触摸事件，使得创建交互式应用变得简单。
-
跨平台兼容性：除了在浏览器中运行外，PixiJS应用还可以通过Cordova和Electron等技术打包成移动应用和桌面应用。
-
开源和社区支持：PixiJS是一个开源项目，有一个活跃的社区提供支持和扩展。
-
可扩展性：PixiJS的架构设计使其高度可扩展，可以根据需求自定义和扩展功能。
