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:
<span style="color: #107800;">// add it to the stage</span>
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.
Software developer at Aspire Systems Poland. Problem solver. The more complicated the problem is, the more motivated he gets. Whether it’s designing, improving processes, architecture or coding, he will be the first one to jump right in.
We process cookies and make them available to Google Analytics (a service provided by Google, Inc.) to improve the performance of the website, to learn your preferences about using it and to tailor it to your needs. The data will be anonymised before being transmitted. If you do not agree to this, you may disable cookies in your browser. If you do not change your browser settings, you accept the fact that it saves cookies.