Regl

Regl (https://github.com/regl-project/regl) is an open-source WebGL library with a functional flavor. As its documentation explains, Regl "simplifies WebGL programming by removing as much shared state as it can get away with. To do this, it replaces the WebGL API with two fundamental abstractions, resources and commands". Here's the snippet of code that illustrates the functional Regl API:

const regl = require('regl')();

const vertexShader = `
precision mediump float;

attribute vec2 position;

void main(void) {
gl_Position = vec4(position, 0, 1);
}
`;

const fragmentShader = `
precision mediump float;

uniform vec4 color;

void main(void) {
gl_FragColor = color;
}
`;

const drawTriangle = regl({
vert: vertexShader,
frag: fragmentShader,
attributes: {
position: regl.buffer([
[-2, -2],
[4, -2],
[4, 4]
])
},
uniforms: {
color: regl.prop('color')
},
count: 3
});

regl.frame(({ time }) => {

regl.clear({
color: [1, 1, 1, 1],
depth: 1
});

drawTriangle({
color: [
Math.cos(time * 0.001),
Math.sin(time * 0.0008),
Math.cos(time * 0.003),
1
]
});

});

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.22.181.81