@infra7/lowgl

A lightweight, object-oriented WebGL wrapper that provides a streamlined and efficient interface for building high-performance 2D and 3D graphics applications in the browser. Designed with a focus on simplicity and optimization.

Installation

$ npm i -S @infra7/lowgl

Examples

import { GLContext } from '@infra7/lowgl';

const vert = `
precision highp float;
attribute vec2 apos;
void main() {
  gl_Position = vec4(apos, 0.0, 1.0);
}`;

const frag = `
precision highp float;
varying vec4 outColor;
uniform vec4 ucolor;
void main() {
  gl_FragColor = ucolor;
}`;

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

const canvas = document.getElementById('canvas') as HTMLCanvasElement;
const dpr = window.devicePixelRatio;
canvas.width = canvas.clientWidth * dpr;
canvas.height = canvas.clientHeight * dpr;

const ctx = new GLContext(canvas, { antialias: true });
const buffer = ctx.createVertexBuffer(vertices);
const program = ctx.createProgramFromSource(vert, frag);

const loop = () => {
  program.setAttrib('apos', buffer);
  program.setUniform('ucolor', [0, 0, 1, 1]);
  program.drawArrays('TRIANGLES', 0, 6);
  requestAnimationFrame(loop);
}

loop();