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 = ;let c = ;
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.bodycontainer: documentbody // '2d', 'webgl' or existing contextcontext: 'webgl' //context optionscanvas: documentantialias: truepremultipliedAlpha: falsealpha: false //default canvas sizewidth: nullheight: null //color to clearbackground: null //autofit on resizefit: true //autolaunch rendering loop, otherwise invoke draw calls manuallyautostart: true //enable floating point textures (webgl)float: true //viewport box or function returning viewport box, in terms of 2d canvas { //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 {} //initial data/options for shadertextures: {} 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.
Built with gl-component
- gl-spectrum
- gl-spectrogram
- gl-waveform
- plot-grid for creating html grids.
See also
- gl-util set of practical webgl methods
- settings-panel for creating control panels.
Credits
For API insight to gl-vis, in particular gl-plot3d; to gl-now, canvas-loop, regl. For routines to get-canvas-context, canvas-fit, raf-loop.
Contribute
Try building your own component based on gl-component, for inspiration see code of released components.