TWGL

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:

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.149.233.72