Skip to content

Lightweight Javascript WebGL library for handling Context, Meshes, Textures and Shaders. Relies on glMatrix 2.0, very easy to use.

License

Notifications You must be signed in to change notification settings

jagenjo/litegl.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

70 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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
  • Events system to trigger events from any object
  • Support for multiple WebGL contexts in the same page

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

Demos

Demos are included in the Examples folder but you can check them in this website.

Usage

Include the library and dependencies

<script src="js/gl-matrix-min.js"></script>
<script src="js/litegl.js"></script>

Create the context

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

Attach to DOM

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

Get user input

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

gl.captureKeys();
gl.onkey = function(e) { ... }

Compile shader

var shader = new GL.Shader( vertex_shader_code, fragment_shader_code );

Create Mesh

var mesh = new GL.Mesh({vertices:[-1,-1,0, 1,-1,0, 0,1,0], coords:[0,0, 1,0, 0.5,1]});

Load a texture

var texture = GL.Texture.fromURL("image.jpg", { minFilter: gl.LINEAR_MIPMAP_LINEAR });

Render

gl.ondraw = function() {
	texture.bind(0);
	var my_uniforms = { u_texture: 0, u_color: [1,1,1,1] };
	shader.uniforms( my_uniforms ).draw( mesh );
}

gl.animate(); //calls the requestAnimFrame constantly, which will call ondraw

Documentation

The doc folder contains the documentation. For info about http://glmatrix.com check the documentation in its website.

Utils

It includes several commands in the utils folder to generate doc, check errors and build minifyed version.

Feedback

You can write any feedback to [email protected]

About

Lightweight Javascript WebGL library for handling Context, Meshes, Textures and Shaders. Relies on glMatrix 2.0, very easy to use.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •  

Languages