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

July 25, 2019 0 Comments

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

 

 

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 = </span> <span class="sb"> precision mediump float;</span> <span class="sb"> attribute vec2 aVertexPosition;</span> <span class="sb"> attribute vec3 aColor;</span> <span class="sb"> attribute vec2 aUvs;</span> <span class="sb"> uniform mat3 translationMatrix;</span> <span class="sb"> uniform mat3 projectionMatrix;</span> <span class="sb"> varying vec2 vUvs;</span> <span class="sb"> varying vec3 vColor;</span> <span class="sb"> void main() {</span> <span class="sb"> vUvs = aUvs;</span> <span class="sb"> vColor = aColor;</span> <span class="sb"> gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);</span> <span class="sb"> }; const fragmentSrc = </span> <span class="sb"> precision mediump float;</span> <span class="sb"> varying vec3 vColor;</span> <span class="sb"> varying vec2 vUvs;</span> <span class="sb"> uniform sampler2D uSampler2;</span> <span class="sb"> void main() {</span> <span class="sb"> gl_FragColor = texture2D(uSampler2, vUvs) * vec4(vColor, 1.0);</span> <span class="sb"> }; const uniforms = { uSampler2: PIXI.Texture.from('examples/assets/bgscenerotate.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.


Tag cloud