Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/realazthat/glsl-quad
glsl-quad provides simple utilities (simple quad mesh, shaders, etc.) for image processing with webgl.
https://github.com/realazthat/glsl-quad
Last synced: 26 days ago
JSON representation
glsl-quad provides simple utilities (simple quad mesh, shaders, etc.) for image processing with webgl.
- Host: GitHub
- URL: https://github.com/realazthat/glsl-quad
- Owner: realazthat
- License: mit
- Created: 2016-07-29T15:57:59.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-11-10T22:46:04.000Z (about 8 years ago)
- Last Synced: 2024-11-06T16:51:04.154Z (about 1 month ago)
- Language: JavaScript
- Size: 235 KB
- Stars: 6
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-regl - glsl-quad
README
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](https://github.com/mikolalysenko/regl) (for demo)
* [resl](https://github.com/mikolalysenko/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](https://realazthat.github.io/glsl-quad/master/www/glsl-quad-demo/index.html)
| [glsl-quad-uv-demo](https://realazthat.github.io/glsl-quad/master/www/glsl-quad-uv-demo/index.html)
| [glsl-quad-pos-demo](https://realazthat.github.io/glsl-quad/master/www/glsl-quad-pos-demo/index.html)
| [glsl-quad-vertical-flip-tests](https://realazthat.github.io/glsl-quad/master/www/glsl-quad-vertical-flip-tests/index.html)
develop | [glsl-quad-demo](https://realazthat.github.io/glsl-quad/develop/www/glsl-quad-demo/index.html)
| [glsl-quad-uv-demo](https://realazthat.github.io/glsl-quad/develop/www/glsl-quad-uv-demo/index.html)
| [glsl-quad-pos-demo](https://realazthat.github.io/glsl-quad/develop/www/glsl-quad-pos-demo/index.html)
| [glsl-quad-vertical-flip-tests](https://realazthat.github.io/glsl-quad/develop/www/glsl-quad-vertical-flip-tests/index.html)
####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](https://github.com/mikolalysenko/regl)
and [resl](https://github.com/mikolalysenko/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});
```