A minimalist WebGL
library for the browser

Lightweight, type-safe WebGL wrapper with a clean, modern API.

Get Started GitHub

Features

Minimalist API

Simple, intuitive interface for WebGL operations

Zero Dependencies

Pure TypeScript with no external dependencies

Type-Safe

Full TypeScript support with comprehensive types

Modern

Built for ES modules and modern browsers

Flexible

Low-level control when you need it

Lightweight

~10KB compiled, small bundle size

Quick Start

Installation

npm install gl-lite

Basic Usage

import { GLRenderer } from 'gl-lite';

// Create a renderer
const renderer = new GLRenderer({
  canvas: document.querySelector('canvas'),
});

// Create a shader program
const program = renderer.program({
  vert: `...`,
  frag: `...`,
});

// Render
renderer.clear([0, 0, 0, 1]);
program.draw();

API Overview

GLRenderer

Main entry point for creating a WebGL context and managing resources. 

new GLRenderer(params)
renderer.resize(width, height)
renderer.clear([r, g, b, a])
renderer.program(definition)
renderer.texture(params)
renderer.buffer(params)
renderer.framebuffer(texture)

GLProgram

Manages shaders, uniforms, and attributes. 

program.draw(props)
program.use(() => { ... })
program.dispose()

GLTexture

Handles texture creation and management. 

renderer.texture(params)
texture.bind(unit)
texture.update(params)
texture.resize(width, height)
texture.dispose()

GLBuffer

Manages vertex and index buffers. 

renderer.buffer(params)
buffer.update(data)
buffer.use(() => { ... })
buffer.dispose()

GLFramebuffer

Render-to-texture functionality. 

renderer.framebuffer(texture)
fbo.use(() => { ... })
fbo.dispose()

Examples

Dynamic Uniforms

const program = renderer.program({
  frag: `
    uniform float time;
    uniform vec2 resolution;
    // ... shader code
  `,
  uniforms: {
    time: (props) => props.time,
    resolution: (props) => [props.width, props.height],
  },
});

program.draw({ time, width, height });

Texture Loading

const image = new Image();
image.onload = () => {
  const texture = renderer.texture({
    data: image,
    flipY: true,
  });
  
  program.draw({ tex: texture });
};
image.src = 'image.png';

Custom Geometry

const positions = new Float32Array([
  -0.5, -0.5, 0.5, -0.5, 0.5, 0.5, -0.5, 0.5,
]);

const indices = new Uint16Array([0, 1, 2, 0, 2, 3]);

const program = renderer.program({
  attributes: {
    position: {
      buffer: renderer.buffer({ data: positions }),
      size: 2,
    },
  },
  elements: renderer.buffer({
    target: 'element',
    data: indices,
  }),
  count: indices.length,
});

program.draw();