gloopy
Graphics Language? Object Oriented Programming? Yes!
What is this?
A library that provides a sane object-oriented wrapper around WebGL.
More than that, it's a way for me to learn the low-level nuts and bolts of the WebGL API, which have so far eluded me.
Mostly, though, it's an unfinished project that you absolutely shouldn't use. Try Three.js if you want a high-level GL library (scene graphs, lighting etc) or REGL if you prefer something slightly lower-level.
Using it
This API is aspirational (readme driven development) and subject to frequent change.
import { Context } from 'gloopy';
const gloopy = new Context(document.querySelector('canvas'));
const triangle = gloopy.program({
fragment: `
precision mediump float;
uniform vec4 color;
void main () {
gl_FragColor = color;
}
`,
vertex: `
precision mediump float;
attribute vec2 position;
void main () {
gl_Position = vec4(position, 0, 1);
}
`,
attributes: {
position: gloopy.array([
-1, 0,
0, -1,
1, 1
], 2)
},
uniforms: {
color: [1, 0, 0, 1]
}
});
// clear the canvas
gloopy.clear({
color: [0, 0, 0, 1],
depth: 1
});
// draw a red triangle
triangle.draw();
// draw a blue triangle
triangle.uniforms.color = [0, 0, 1, 1];
triangle.draw();