Flash 替代者 PiXiJS 为交互式 App 提供跨平台 WebGL 支持

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 行代码来生成这个三角形：

 复制代码

constapp = new PIXI.Application();
document.body.appendChild(app.view);
constgeometry = new PIXI.Geometry()
    .addAttribute('aVertexPosition',// the attribute name
        [-100,-100,// x, y
           100,-100,// x, y
           100,100],// x, y
       2)// the size of the attribute
    .addAttribute('aColor',// the attribute name
        [1,0,0,// r, g, b
           0,1,0,// r, g, b
           0,0,1],// r, g, b
       3)// the size of the attribute
    .addAttribute('aUvs',// the attribute name
        [0,0,// u, v
           1,0,// u, v
           1,1],// u, v
       2);// the size of the attribute
constvertexSrc = `
    precision mediumpfloat;
    attribute vec2 aVertexPosition;
    attribute vec3 aColor;
    attribute vec2 aUvs;
    uniform mat3 translationMatrix;
    uniform mat3 projectionMatrix;
    varying vec2 vUvs;
    varying vec3 vColor;
   voidmain() {
        vUvs = aUvs;
        vColor = aColor;
        gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition,1.0)).xy,0.0,1.0);
    }`;
constfragmentSrc = `
    precision mediumpfloat;
    varying vec3 vColor;
    varying vec2 vUvs;
    uniform sampler2D uSampler2;
   voidmain() {
        gl_FragColor = texture2D(uSampler2, vUvs) * vec4(vColor,1.0);
    }`;
constuniforms = { uSampler2: PIXI.Texture.from('examples/assets/bg_scene_rotate.jpg') };
constshader = PIXI.Shader.from(vertexSrc, fragmentSrc, uniforms);
consttriangle = new PIXI.Mesh(geometry, shader);
triangle.position.set(400,300);
triangle.scale.set(2);
app.stage.addChild(triangle);
app.ticker.add((delta) => {
    triangle.rotation +=0.01;
});

相比之下，一个静态、无色彩的场景如下所示：

这个需要超过 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