litegl.js

Litegl.js is a library that wraps WebGL to make it more user-friendly by creating classes for managing different items like Buffer, Mesh, Texture, Shader and other common aspects of any WebGL applications.

It is a fork from LightGL.js by Evan Wallace, but some major changes have been made.

Some of the main differences:

• Matrices have been replaced by glMatrix
• Meshes are forced to be stored in ArrayBuffer formats
• Meshes support range rendering with offset
• Removed fixed pipeline behaviour
• Better event handling (mouse position, mouse wheel, dragging)
• Textures expanded to support Arraybuffers and Cubemaps
• Allows to work with multiple WebGL contexts in the same page.

This library has been used in several projects like Rendeer.js or Canvas2DtoWebGL.

Download

You can download the full source code from GitHub, or use just the library using this link litegl.js (compressed version)

Usage

Include the script

<script src="js/litegl.js"></script>

Create the context by typing:

var gl = GL.create({width:800, height:600});

Attach it to the DOM:

document.getElementById("mycontainer").appendChild( gl.canvas )

Hook events

gl.ondraw = function() { ... }

gl.onupdate = function(dt) { ... }

Get input

gl.captureMouse();
gl.onmousedown = function(e) { ... }

Compile shader

var shader = new Shader( vertex_shader_code, fragment_shader_code); 

Create Mesh

var mesh = Mesh.cube(); 

Render

shader.uniforms( my_uniforms ).draw( mesh ); 

Examples

Check the examples in the examples folder.

Documentation

Click here to read the documentation, it is automatically generated using yui, and can be located in the doc folder.

Check also the gl-matrix documentation to a better understanding of how to operate with matrices and vectors.