For quite some time now we have been hearing this buzz word WebGL and perhaps just as most of you I have seen it as a way of making old 3d games available to the classics enthusiasts via browser without having to bother with installation and OS requirements. But, as it turns out, there is much more to the WebGL then just old Quake and Half-Life in your browser.
A few words of introduction
In a nutshell WebGl is an API which allows coders to harvest true power of the GPU (Graphics card basically) and display complex 3d as well as 2d graphics. Although this is pretty cool, it does require a certain amount of knowledge to produce something worth looking at. Enters Pixi.JS! Simple java script wrapper on the WebGl allowing for a quicker development of hardware accelerated web applications.
Pixi is getting famous
At this point Pixi is already a building block of a few large corporations’ websites (some parts of McDonalds.co.uk as a first one that comes to mind), so there is no reason to think it can’t handle the task of being a web content presenter. WebGl and by extension Pixi.JS allows achieving the level of performance and animation quality that Flash could never have.
Follow the code
It is probably a good time to get to the code example, so here is one which simply loads and displays a button then changes its image as soon as a user clicks/touches it:
var interactive = true; var stage = new PIXI.Stage(0x000000, interactive); // create a renderer instance. var renderer = PIXI.autoDetectRenderer(1280, 1024); // create some textures from an image path var textureButton = PIXI.Texture.fromImage("button.png"); var textureButtonDown = PIXI.Texture.fromImage("buttonDown.png"); // set the mousedown and touchstart callback... button.mousedown = button.touchstart = function(data){ this.isdown = true; this.setTexture(textureButtonDown); this.alpha = 1; } // add it to the stage stage.addChild(button);
Fireworks on mobile devices
You can see where this is going right? Background image, button etc… Yes, it is actually feasible to create a UI using Pixi.JS. Animations, transitions, fire, lasers, smoke and the whole shebang. And all of that running on your smartphone! Correct! Pixi will run on devices which could never run the resource-hungry flash. The only requirement is to be able to run WebGl and at this point in time it is supported by all major browsers. And if by any chance it is not? Fear not! Html5 is a fallback option for Pixi, so as long as WebGl or Html5 is supported you’re@home.
If you are still interested here is a simple demo utilizing Pixi. Also have a look at Pixi’s Bunny-Meter to see the performance gain in comparison to the good old flash for instance. And for less flashy, but more useful applications here is Pixi.js powering multi-screen interactive presentation!
Have you already got some opinion about Pixi? Don’t hesitate to share it! Comment below!