Gl-component NPM

gl-component

Class for canvas2d/webgl components. Straightens out setting up canvas, obtaining context, animation loop, resizing, viewport, textures, attributes, multipass rendering, node/browser compatibility. Basically, allows to focus on vis logic as much as possible.

Usage

const createComponent = require('gl-component');
let c = createComponent({
	//2d or webgl
	context: 'webgl',

	frag: `
		precision mediump float;

		uniform vec4 viewport;
		uniform sampler2D picture;

		void main () {
			vec2 coord = (gl_FragCoord.xy - viewport.xy) / viewport.zw;

			gl_FragColor = texture2D(picture, coord);
		}
	`,

	//vert is a-big-triangle if undefined

	textures: {picture: './texture.gif'}
});

That creates an image in webgl viewport. See in action.

API

`Component = require('gl-component')`

Component constructor, can be used in functional style let c = Component(opts) or object-oriented style let c = new Component(opts).

`component = Component(options|draw)`

Create instance based on options or draw method. Options are transfered to the instance.

Available options:

// place canvas into it, by default document.body
container: document.body,

// '2d', 'webgl' or existing context
context: 'webgl',

//context options
canvas: document.createElement('canvas'),
antialias: true,
premultipliedAlpha: false,
alpha: false,

//default canvas size
width: null,
height: null,

//color to clear
background: null,

//autofit on resize
fit: true,

//autolaunch rendering loop, otherwise invoke draw calls manually
autostart: true,

//enable floating point textures (webgl)
float: true,

//viewport box or function returning viewport box, in terms of 2d canvas
viewport: function (w, h) {
	//left, top, width, height
	return [0, 0, w, h - 20];
},

//fragment shader code (webgl)
frag: `
	uniform vec4 viewport; //available through gl-component

	void main () {
		gl_FragColor = vec4(0,0,0,0)
	}
`,

//vertex shader code (webgl)
vert: `
	uniform vec4 viewport;
	attribute vec2 position; //available through gl-component
	void main () {
		gl_Position = vec4(position, 0, 1);
	}
`,

//draw method is called by render once per frame, put canvas2d/webgl draw calls here
draw: function (context, viewport, arg) {
},

//initial data/options for shader
textures: {}, attributes: {}, uniforms: {},

`component.render()`

Plans draw call on the next animation frame.

`component.bind()`

Attaches component program, viewport and attributes.

`component.draw()`

Runs drawing routine. Make sure bind is called before calling draw.

`component.clear()`

Clear canvas viewport, the opposite of draw.

`component.update()`

Updates background and viewport.

`component.texture(name?, options)`

Set texture data/options. See gl-util/texture

`component.uniform(name, options)`

Set uniform. See gl-util/uniform

`component.attribute(name, options)`

Set attribute data/options. See gl-util/attribute

`component.start()`

Start animation loop — will be calling draw each animation frame.

`component.stop()`

Stop animation loop.

`component.on('draw', (gl, viewport, data) => {})`

Fired by render before draw call.

`component.on('render', () => {})`

Fired first in every render call, in case of autostart - once per frame.

`component.on('resize', () => {})`

Fired with every resize call (after being resized).

`component.*`

Instance contains all context attributes obtained with gl.getContextAttributes.

What gl-component is not

It is not a webgl wrapper, it does not supersede webgl API. The main purpose is making launch and init of webgl easy in DOM, allowing to focus on vis. It does not try to serve as a main entry point nor replace native API, this.gl always provides direct access to drawing context, so you can and are expected to manipulate it.
It is not designed for custom rendering, like multipass rendering, texture swapping, stencil/depth/multitexture control, computational shaders etc. The main purpose is a simple way to put webgl rendering process to canvas. Although, customization can be easily done with hooks/redefining methods, but everything you would have to do manually, here is to say creating framebuffers, renderbuffers etc.
It does not manage multiple programs, gl-component is bound to a single program. Best practice for managing multiple programs is creating a separate gl-component with shared context.