WebGL (Web Graphics Library)

WebGL Overview

WebGL stand for Web Graphics Library and is maintained and designed by Kronos Group. It is a set of functions (API, Application Programming Interface) coded in JavaScript and specialized in rendering 2D and 3D Graphics. WebGL is implemented on all modern browser and on mobile devices.

WebGL is based on the OpenGL ES 2.0 specification and for maximizing portability to mobile devices retains the semantics of OpenGL ES

OpenGL is cross-platform and language independent. It treats exclusively of rendering, no APIs related to input, audio, or windowing being provided.

WebGL integrates fully into web standards and allow extensive use of GPU (Graphics Processing Unit) for physic and image processing. WebGL is composed of a set of control code and shaders code, runned on computer/mobile device GPU

best web gl renderer
pixi.js webgl renderered graphics

Shader Overview

A shader is a program specializing in doing shading, i.e. rendering appropriates colors level for an image. It calculates the rendering effects directly on the computer hardware allowing maximum speed and an high level of flexibility.

Shaders are used to describe the absorption and scattering of light, the texture to use, reflections and refractions, shading, movement of primitive and post-processing effects. By its design of the rendering process, shaders are ideal candidates for parallel execution by the GPU graphics card. Shaders are flexible and efficient: seemingly complicated surfaces can be made from simple geometry.

Open GL Shader Language

Also known as GLSL or glslang is a standardized shader language of the OpenGL Architecture Review Board.

The language provides from the beginning rich elements, unifying the treatment process on the geometry (vertex processing) and the pixels (fragment processing) with the same set of instructions, allowing instruction loops, and (more usually) conditional branching.

Historically, the GLSL language succeeded comparable various extensions that were in OpenGL, such as ARB_vertex_program, ARB_fragment_program and others. These extensions however use an assembler type of low-level language with some restrictions, and their use is now discouraged. Both extensions have also been preceded by other proposals that do not remain in the latest specifications

2D HTML5 Game
Javascript Sprite Packer

Pixi.js WebGL Implementation

Sprite Basic has chosen Pixi.js WebGL implementation for graphic rendering and shader processing of its HTML 5 Game Engine. In addition to be the best WebGL implementation for 2D graphics available to date, Pixi.js offers a huge set of existing, familiar filters such as blurs and pixelations but also allows users to create their own unique filters such as bespoke displacements and halftone effects.

On devices where WebGL rendering is not available, it falls back graciously to Canvas rendering at amazing speed.

Pixi.js let you also tint and use blend modes that behave in a manner analogous to other leading visual packages such as Photoshop or Flash. Blend modes and tinting are supported by both the canvas and WebGL renderers.

With Pixi.js, Sprite Basic make the best WebGL and Canvas renderer available to users with a simple and effective functions set.


Technologies