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.
npm install @infra7/lowglA 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.
``ts`
$ npm i -S @infra7/lowgl
`ts
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();
``