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 helps simplifying working with WebGL without having to handle all the low-level calls but without losing any freedom.

Some features are:

Easy context creation
Classes for:
- Meshes and Buffers: Fill a buffer easily and upload it to the GPU
- Textures: load, fill, clone, copy (even blur) for TEXTURE_2D and TEXTURE_CUBE_MAP
- Shaders: compile from string, from file, insert preprocessor macros, extracts all the uniform locations
- FrameBufferObjects: to render to a texture, to multiple textures, to depth texture.
Some basic primitive shapes (plane, cube, sphere, cylinder, hemisphere).
OBJ parser and encoder (easy to add new ones)
Loaders for Images and Meshes from URL (uses a placeholder till its loaded)
Uses typed-arrays for everything (uses glMatrix for all operations)
No garbage generated (reuses containers)
Basic Raytracing (for ray-sphere and ray-plane collision)
Events system
Cross-browser input handling for mouse, keyboard and gamepad
Supports multiple WebGL contexts
Supports WebGL1 and WebGL2
Octree class

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.

For a list of similar libraries check this list

Demos

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

Usage

Include the library and dependencies

<span class="pl-kos"><</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">js/gl-matrix-min.js</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span>
<span class="pl-kos"><</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">js/litegl.js</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span>

Create the context

<span class="pl-k">var</span> <span class="pl-s1">gl</span> <span class="pl-c1">=</span> <span class="pl-c1">GL</span><span class="pl-kos">.</span><span class="pl-en">create</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">width</span>:<span class="pl-c1">800</span><span class="pl-kos">,</span> <span class="pl-c1">height</span>:<span class="pl-c1">600</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

Attach to DOM

<span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">"mycontainer"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span> <span class="pl-s1">gl</span><span class="pl-kos">.</span><span class="pl-c1">canvas</span> <span class="pl-kos">)</span>

Get user input

<span class="pl-s1">gl</span><span class="pl-kos">.</span><span class="pl-en">captureMouse</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">gl</span><span class="pl-kos">.</span><span class="pl-en">onmousedown</span> <span class="pl-c1">=</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> ... <span class="pl-kos">}</span><span class="pl-s1">gl</span><span class="pl-kos">.</span><span class="pl-en">captureKeys</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">gl</span><span class="pl-kos">.</span><span class="pl-en">onkey</span> <span class="pl-c1">=</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> ... <span class="pl-kos">}</span>

Compile shader

<span class="pl-k">var</span> <span class="pl-s1">shader</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">GL</span><span class="pl-kos">.</span><span class="pl-c1">Shader</span><span class="pl-kos">(</span> <span class="pl-s1">vertex_shader_code</span><span class="pl-kos">,</span> <span class="pl-s1">fragment_shader_code</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>

Create Mesh

<span class="pl-k">var</span> <span class="pl-s1">mesh</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">GL</span><span class="pl-kos">.</span><span class="pl-c1">Mesh</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">vertices</span>:<span class="pl-kos">[</span><span class="pl-c1">-</span><span class="pl-c1">1</span><span class="pl-kos">,</span><span class="pl-c1">-</span><span class="pl-c1">1</span><span class="pl-kos">,</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">1</span><span class="pl-kos">,</span><span class="pl-c1">-</span><span class="pl-c1">1</span><span class="pl-kos">,</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">1</span><span class="pl-kos">,</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-c1">coords</span>:<span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">1</span><span class="pl-kos">,</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">0.5</span><span class="pl-kos">,</span><span class="pl-c1">1</span><span class="pl-kos">]</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

Load a texture

<span class="pl-k">var</span> <span class="pl-s1">texture</span> <span class="pl-c1">=</span> <span class="pl-c1">GL</span><span class="pl-kos">.</span><span class="pl-c1">Texture</span><span class="pl-kos">.</span><span class="pl-en">fromURL</span><span class="pl-kos">(</span><span class="pl-s">"image.jpg"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">minFilter</span>: <span class="pl-s1">gl</span><span class="pl-kos">.</span><span class="pl-c1">LINEAR_MIPMAP_LINEAR</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

Render

<span class="pl-s1">gl</span><span class="pl-kos">.</span><span class="pl-en">ondraw</span> <span class="pl-c1">=</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
	<span class="pl-s1">texture</span><span class="pl-kos">.</span><span class="pl-en">bind</span><span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
	<span class="pl-k">var</span> <span class="pl-s1">my_uniforms</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">u_texture</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">u_color</span>: <span class="pl-kos">[</span><span class="pl-c1">1</span><span class="pl-kos">,</span><span class="pl-c1">1</span><span class="pl-kos">,</span><span class="pl-c1">1</span><span class="pl-kos">,</span><span class="pl-c1">1</span><span class="pl-kos">]</span> <span class="pl-kos">}</span><span class="pl-kos">;</span>
	<span class="pl-s1">shader</span><span class="pl-kos">.</span><span class="pl-en">uniforms</span><span class="pl-kos">(</span> <span class="pl-s1">my_uniforms</span> <span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">draw</span><span class="pl-kos">(</span> <span class="pl-s1">mesh</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-s1">gl</span><span class="pl-kos">.</span><span class="pl-en">animate</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">//calls the requestAnimFrame constantly, which will call ondraw</span>

For better understanding of all the features and how to use them check the guides folder.