BT

InfoQ Homepage News Pixi.js, HTML5 Alternative to Adobe Flash, Adds WebGL Support for Cross-Platform, Interactive Apps

Pixi.js, HTML5 Alternative to Adobe Flash, Adds WebGL Support for Cross-Platform, Interactive Apps

This item in japanese

Bookmarks

PixiJS, a standard-based, open-source alternative to Adobe Flash, recently released its fifth major version. PixiJS v5 abstracts a large set of WebGL features behind a new API which falls back to HTML5's canvas if needed. Developers thus need not dive into the WebGL API or deal with browser and device compatibility to create rich, interactive graphics, cross-platform applications, and games. Apart from first-class WebGL support, the new PixiJS also features faster rendering for graphics and sprites alike, lower GPU utilization, and upgraded filters and textures.

PixiJS, which describes itself as "The HTML5 Creation Engine," is a rendering library for easy authoring of interactive content, including rich graphics, that is reminiscent of Adobe Flash. PixiJS v5 additionally focuses on performance and developer experience. In the words of the PixiJS team:

The aim of this project is to provide a fast lightweight 2D library that works across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast.

PixiJS v5 has full WebGL support and will fall back to HTML5's canvas if WebGL is not available. However, PixiJS v5 abstracts low-level WebGL features behind a mid-level API that automatically optimizes the underlying WebGL layer when present. Concretely, the mid-level API includes Geometry, Shader, and State aspects, which serves to define Meshes which define the graphics at a given point of time. Adding event handlers and modifying properties of a Mesh result in the final interactive graphics. Pixi's documentation gives the example of a rotating textured triangle which is produced by the following 50 lines of code:

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;
});

In comparison, a trivial, static, colorless scene such as:

may require over 120 lines of code and includes 40+ accesses to the WebGL API.

WebGL (for Web Graphics Library) is a general, low-level, open-source, graphics Web API. WebGL commands are designed to tap directly into the feature set of Graphics Processing Unit (GPU). GPUs are massively parallel processors, consisting of a large number of computation units designed to work in parallel with each other, and in parallel with the CPU. WebGL is used mainly for rendering two-dimensional graphics and Interactive three-dimensional graphics in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and special effects code (shader code) involving framebuffers.

WebGL rendering is a pipelined process. The scene to visualize with WebGL is broken down in triangles (tesselation) made of three vertices. The first stage (vertex shading) of the pipeline takes the triangles and computes the canvas coordinates at which they should be drawn. The WebGL canvas is a three-dimensional canvas, with all three axes going from -1.0 to +1.0. The triangles are rasterized (second pipeline phase), then painted by the fragment shader (third phase) which will associate color, depth and other relevant properties to each pixel of the triangle. The resulting mapping is stored in a WebGL Framebuffer, so Framebuffer operations like depth testing or blending can be applied (fourth phase).

Because communication between GPU and CPU may be expensive, optimizing the graphics rendering involves maximizing GPU parallel usage and minimizing synchronization operations between GPU and CPU. PixiJS v5 adds batching and caching techniques to achieve this behind the scenes for an enhanced developer experience.

Additionally, PixiJS v5 features lower GPU utilization, and upgraded filters and textures.

PixiJS is released under the MIT License.

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.