glsl-quad

glsl-quad
---

####Description

glsl-quad provides simple utilities (simple quad mesh, shaders, etc.) for image processing with webgl.

See glsl-quad-demo.js for usage.

####Dependencies

* nodejs
* browserify
* regl (for demo)
* resl (for demo)
* budo (for quick demo as an alternative to running browserify)

####Demo

To run the demo, run:

``
cd ./glsl-quad

#install npm dependencies
npm install

#browser should open with the demo
budo glsl-quad-demo.js --open


`

Results:

branch | demo
--------|-------
master | glsl-quad-demo
| glsl-quad-uv-demo
| glsl-quad-pos-demo
| glsl-quad-vertical-flip-tests
develop | glsl-quad-demo
| glsl-quad-uv-demo
| glsl-quad-pos-demo
| glsl-quad-vertical-flip-tests

####Docs

`
const quad = require('./glsl-quad.js');
`

##### quad.verts

* A list of vertices that can be used for webgl positions, that make up a quad (two triangles).

##### quad.indices

* A list of indices that can be used for webgl triangles, that make up a quad (two triangles).

##### quad.uvs

* A list of uv attributes for the vertices.

##### quad.shader.frag

* Returns the webgl 1.0 fragment shader to use.
* The fragment shader expects a uniform shader (sampler2D) named u_tex.

##### quad.shader.vert

* Returns the webgl 1.0 vertex shader to use.
* The vertex shader expects:
* A uniform float named u_clip_y, representing whether to flip the y-axis; values of 1 or -1.
* An attribute list of vec2 positions of the vertices named a_position.
* An attribute list of vec2 uvs of the vertices named a_uv.


##### quad.bitmaps.directions.uri

* Returns a data uri for an image that can be used to test proper display directions.
* Can see the images in the glsl-quad/assets/ directory.


####Usage

See glsl-quad-demo.js for a full demo using regl
and resl.

An excerpt:

`

const drawTexture = regl({
frag: quad.shader.frag,
vert: quad.shader.vert,
attributes: {
a_position: quad.verts,
a_uv: quad.uvs
},
elements: quad.indices,
uniforms: {
u_tex: regl.prop('texture'),
u_clip_y: 1
}
});

drawTexture({texture});


``