• Adobe发布新版PixiJS 提供跨平台 WebGL 支持
  • 发布于 2个月前
  • 226 热度
    0 评论
  • 林勇
  • 0 粉丝 39 篇博客
  •   
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 许可协议。
用户评论