PixiJS是 Adobe Flash 的一个开源替代品,最近发布了第五个主要版本。PixiJS v5通过一组新的 API 抽象了大量的 WebGL 特性,如果有必要可以回退到 HTML5 的Canvas。开发人员不需要再深入研究 WebGL API,也不需要处理浏览器和设备兼容性问题,就可以创建丰富的交互式图形、跨平台应用程序和游戏。除了一流的 WebGL 支持,新的 PixiJS 还提供了更快的图形和 sprite 渲染,更低的 GPU 利用率,以及升级过的过滤器和纹理。
PixiJS 将自己描述成“HTML5 创建引擎”,是一个渲染库,用于方便地创作交互式内容,包括丰富的图形,这让人想起 Adobe Flash。PixiJS v5 也很关注性能和开发人员体验。用 PixiJS 团队的话来说:
这个项目的目的是提供一个快速的轻量级 2D 库,可以跨所有设备工作。PixiJS 渲染器可以让每个人在不了解 WebGL 的情况下利用强大的硬件加速功能。而且它很快,真的非常快。
PixiJS v5 提供完整的WebGL支持,如果 WebGL 不可用,它将回退到 HTML5 的 Canvas。不过,PixiJS v5 通过一个中间层 API 抽象了底层的 WebGL 特性,该 API 在渲染时会自动优化底层的 WebGL 层。具体地说,中间层 API 包括 Geometry、Shader 和 State,它们用于定义在给定时间点定义图形的 Mesh。通过添加事件处理程序和修改 Mesh 属性将会得到最终的交互式图形。Pixi 的文档给出了一个旋转纹理三角形的例子,通过以下 50 行代码来生成这个三角形:
相比之下,一个静态、无色彩的场景如下所示:
这个需要超过120行代码,以及 40 多次调用 WebGL API。
WebGL(用于 Web 图形库)是一个开源的通用底层图形 Web API。WebGL 命令被设计成直接访问图形处理单元(GPU)的特性集。GPU 是大规模并行处理器,由大量计算单元组成,这些计算单元被设计成彼此并行工作,并与 CPU 并行运行。WebGL 主要用于在不使用插件的浏览器中渲染二维图形和交互式三维图形。WebGL 程序由 JavaScript 编写的控制代码和涉及帧缓冲的特殊效果代码(着色器代码)组成。
WebGL 渲染是一个管道化的过程。使用 WebGL 进行可视化的场景被分解为由三个顶点组成的三角形(镶嵌)。管道的第一阶段(顶点着色)获取三角形并计算它们应该绘制的 Canvas 坐标。WebGL Canvas 是一种三维画布,三个轴的值都是从-1.0 到+1.0。三角形被栅格化(第二管道阶段),然后由片段着色器(第三阶段)绘制,它将颜色、深度和其他相关属性与三角形的每个像素相关联。结果映射存储在 WebGL 帧缓冲区中,因此可以应用帧缓冲操作,如深度测试或混合(第四阶段)。
由于 GPU 和 CPU 之间的通信可能很昂贵,优化图形渲染涉及到最大化 GPU 并行使用和最小化 GPU 和 CPU 之间的同步操作。PixiJS v5 添加了批处理和缓存技术,以在幕后实现这些,从而增强开发者体验。
此外,PixiJS v5 具有较低的 GPU 利用率,并提供升级过的滤器和纹理。
PixiJS 基于 MIT 许可协议。
查看英文原文:Pixi.js, HTML5 Alternative to Adobe Flash, Adds WebGL Support for Cross-Platform, Interactive Apps
评论