litegl.js gives you clean classes for Mesh, Texture, Shader and FBO — without hiding the GL underneath or taking away any control.
A thin layer over WebGL that removes the boilerplate while keeping the low-level access when you want it.
Allows to write clean code while accessing the GPU.
Spin up a WebGL 1 or 2 context, canvas included, in a single call.
Fill typed-array buffers and upload to the GPU. Range rendering with offsets built in.
Load, fill, clone, copy and blur — for TEXTURE_2D and TEXTURE_CUBE_MAP.
Compile from strings, inject macros, and get every uniform location extracted for you.
Render to a texture, to many textures, or to a depth texture with a friendly FBO class.
plane, cube, sphere, cylinder, hemisphere and more, ready to draw.
Cross-browser mouse, keyboard and gamepad handling, plus an events system.
Ray tests against spheres, AABBs, planes and meshes, accelerated by an octree.
Parse and encode OBJ and binary meshes; load images and meshes from URLs.
Load glMatrix 2.x and litegl, create a context, and draw. That's it.
<script src="gl-matrix.js"></script> <script src="litegl.js"></script> <!-- exposes the GL namespace + Mesh, Texture, Shader... -->
import { GL, Mesh, Shader, Texture } from "litegl.js";
// glMatrix 2.x must be present as a global
// full TypeScript declarations included// 1 · create a context (creates the canvas for you)
const gl = GL.create({ width: 800, height: 600 });
document.body.appendChild(gl.canvas);
gl.animate(); // starts the render loop
// 2 · a mesh and a shader
const mesh = Mesh.cube();
const shader = new Shader(vertexSource, fragmentSource);
// 3 · input
gl.captureMouse();
gl.onmousemove = (e) => { if (e.dragging) mat4.rotateY(model, model, e.deltax * 0.01); };
// 4 · draw every frame
gl.ondraw = () => {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
shader.uniforms({ u_mvp: mvp, u_color: [1, 1, 1, 1] }).draw(mesh);
};
const texture = GL.Texture.fromURL("image.jpg", {
minFilter: gl.LINEAR_MIPMAP_LINEAR
});
gl.ondraw = () => {
texture.bind(0);
shader.uniforms({ u_texture: 0 }).draw(mesh);
};
Runnable demos covering the whole library. Open any of them — they live in the examples folder.
litegl.js is the foundation for several higher-level graphics libraries.