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();

License

LIL