TWGL (https://github.com/greggman/twgl.js) is an open-source WebGL library that serves to "make using the WebGL API less verbose". For example, here's a simple TWGL demo that shows its intelligible, yet low-level, API on top of WebGL:
const
canvas = document.getElementById('webgl-canvas'),
gl = canvas.getContext('webgl'),
program = twgl.createProgramInfo(gl, ['vertex-shader', 'fragment-shader']),
arrays = {
position: [
-1, -1, 0,
1, -1, 0,
-1, 1, 0,
-1, 1, 0,
1, -1, 0,
1, 1, 0
],
},
bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);
function draw(time) {
const { width, height } = gl.canvas;
twgl.resizeCanvasToDisplaySize(gl.canvas);
gl.viewport(0, 0, width, height);
const uniforms = {
time: time * 0.001,
resolution: [width, height],
};
gl.useProgram(program.program);
twgl.setBuffersAndAttributes(gl, program, bufferInfo);
twgl.setUniforms(program, uniforms);
twgl.drawBufferInfo(gl, bufferInfo);
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);
You can see the live demo on their GitHub page, which resembles the following:
