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

const app = new PIXI.Application();
document.body.appendChild(app.view);
const geometry = 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
const vertexSrc = `
    precision mediump float;
    attribute vec2 aVertexPosition;
    attribute vec3 aColor;
    attribute vec2 aUvs;
    uniform mat3 translationMatrix;
    uniform mat3 projectionMatrix;
    varying vec2 vUvs;
    varying vec3 vColor;
    void main() {
        vUvs = aUvs;
        vColor = aColor;
        gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
    }`;
const fragmentSrc = `
    precision mediump float;
    varying vec3 vColor;
    varying vec2 vUvs;
    uniform sampler2D uSampler2;
    void main() {
        gl_FragColor = texture2D(uSampler2, vUvs) * vec4(vColor, 1.0);
    }`;
const uniforms = { uSampler2: PIXI.Texture.from('examples/assets/bg_scene_rotate.jpg') };
const shader = PIXI.Shader.from(vertexSrc, fragmentSrc, uniforms);
const triangle = 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

创作场景

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