# gl-component

> Class for creating canvas-based components, both 2d/3d

Latest version **3.2.1** (published 2016-12-03) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install gl-component
pnpm add gl-component
yarn add gl-component
bun add gl-component
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 3.2.1 |
| Published | 2016-12-03 |
| First published | 2016-05-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 11 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ΔY |
| Maintainers | dfcreative |
| Keywords | gl, webgl, canvas, gpu, stackgl |

## Links

- npm: https://www.npmjs.com/package/gl-component
- Repository: https://github.com/dfcreative/gl-component
- Homepage: https://github.com/dfcreative/gl-component#readme
- Issues: https://github.com/dfcreative/gl-component/issues
- npm.io page: https://npm.io/package/gl-component

## Dependencies (11)

- [raf](https://npm.io/package/raf.md) ^3.2.0
- [gl-util](https://npm.io/package/gl-util.md) ^1.0.0
- [inherits](https://npm.io/package/inherits.md) ^2.0.1
- [raf-loop](https://npm.io/package/raf-loop.md) ^1.1.3
- [canvas-fit](https://npm.io/package/canvas-fit.md) ^1.5.0
- [color-rgba](https://npm.io/package/color-rgba.md) ^1.0.0
- [is-browser](https://npm.io/package/is-browser.md) ^2.0.1
- [is-plain-obj](https://npm.io/package/is-plain-obj.md) ^1.1.0
- [object-assign](https://npm.io/package/object-assign.md) ^4.1.0
- [number-is-integer](https://npm.io/package/number-is-integer.md) ^1.0.1
- [get-canvas-context](https://npm.io/package/get-canvas-context.md) ^1.0.1

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 3.2.1 (latest) — 2016-12-03
- 3.2.0 — 2016-12-03
- 3.1.0 — 2016-12-03
- 3.0.1 — 2016-12-03
- 3.0.0 — 2016-12-03
- 2.4.1 — 2016-11-30
- 2.4.0 — 2016-11-30
- 2.3.9 — 2016-11-22
- 2.3.8 — 2016-11-16
- 2.3.7 — 2016-11-15
- 2.3.6 — 2016-11-13
- 2.3.5 — 2016-10-24
- 2.3.4 — 2016-10-20
- 2.3.3 — 2016-10-20
- 2.3.2 — 2016-10-20
- … 62 more at https://npm.io/package/gl-component/versions

## README

# gl-component [![unstable](http://badges.github.io/stability-badges/dist/unstable.svg)](http://github.com/badges/stability-badges)

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

[![$ npm install gl-component](http://nodei.co/npm/gl-component.png?mini=true)](http://npmjs.org/package/gl-component)

```js
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**](http://requirebin.com/?gist=9ede0c194be3facf97a898674fde508c).

## 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:

```js
// 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](https://github.com/dfcreative/gl-util)

### `component.uniform(name, options)`

Set uniform.
See [gl-util/uniform](https://github.com/dfcreative/gl-util)

### `component.attribute(name, options)`

Set attribute data/options.
See [gl-util/attribute](https://github.com/dfcreative/gl-util)

### `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](https://github.com/audio-lab/gl-spectrum)
* [gl-spectrogram](https://github.com/audio-lab/gl-spectrogram)
* [gl-waveform](https://github.com/audio-lab/gl-waveform)
* [plot-grid](https://github.com/audio-lab/plot-grid) for creating html grids.


## See also

* [gl-util](https://github.com/dfcreative/gl-util) set of practical webgl methods
* [settings-panel](https://github.com/audio-lab/settings-panel) for creating control panels.


## Credits

For API insight to [gl-vis](https://github.com/gl-vis), in particular [gl-plot3d](https://github.com/gl-vis/gl-plot3d); to [gl-now](http://npmjs.org/package/gl-now), [canvas-loop](https://www.npmjs.com/package/canvas-loop), [regl](https://www.npmjs.com/package/regl). For routines to [get-canvas-context](https://www.npmjs.com/package/get-canvas-context), [canvas-fit](https://www.npmjs.com/package/canvas-fit), [raf-loop](https://www.npmjs.com/package/raf-loop).

## Contribute

Try building your own component based on gl-component, for inspiration see code of released components.

[site of the moment](http://www.stevemartin.com/)

---
_Source: https://npm.io/package/gl-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._