Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/realazthat/glsl-sat
glsl-sat is a shader generator for WebGL, to generate a summed-area-table texture of an input texture
https://github.com/realazthat/glsl-sat
Last synced: 2 months ago
JSON representation
glsl-sat is a shader generator for WebGL, to generate a summed-area-table texture of an input texture
- Host: GitHub
- URL: https://github.com/realazthat/glsl-sat
- Owner: realazthat
- License: mit
- Created: 2016-07-31T20:12:09.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-08-18T03:53:34.000Z (over 8 years ago)
- Last Synced: 2024-10-20T04:44:51.003Z (3 months ago)
- Language: JavaScript
- Size: 333 KB
- Stars: 23
- Watchers: 4
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-regl - glsl-sat
README
glsl-sat
---####Description
glsl-sat is a shader generator for WebGL, to generate a summed-area-table texture of an input texture.
Based on [**Summed-Area Tables Area Tables** And Their Application to Dynamic And Their Application to
Dynamic Glossy Environment Reflections](http://amd-dev.wpengine.netdna-cdn.com/wordpress/media/2012/10/GDC2005_SATEnvironmentReflections.pdf)See `glsl-sat-demo.js` for usage.
####Dependencies
* nodejs
* browserify
* [glsl-quad](https://github.com/realazthat/glsl-quad)
* [regl](https://github.com/mikolalysenko/regl)
* [glsl-numerify](https://github.com/realazthat/glsl-numerify) (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-sat
#install npm dependencies
npm install
#browser should open with the demo
budo glsl-sat-demo.js --open```
**Live:**
branch | demo
-------|-------
master | [glsl-sat-demo](https://realazthat.github.io/glsl-sat/master/www/glsl-sat-demo/index.html)
develop | [glsl-sat-demo](https://realazthat.github.io/glsl-sat/develop/www/glsl-sat-demo/index.html)Source Upscaled | Source Red Numerified | SAT Result Upscaled | SAT Result Red Numerified
-----------------|-----------------------|---------------------|----------------------------
| | |####Docs
```
const sat = require('./glsl-sat.js');
```##### `sat.computeNumPasses ({textureSize, sampleSize})`
* Computes the number of passes that will be required for a texture of this size, for a single direction.
Actual number of passes will be double what this returns.
* `textureSize` - the size of the texture in pixels. This should be the largest side.
* `sampleSize` - Sample size is stuck at 16 right now, so use 16.##### `sat.computeNumBitsRequired ({width, height, channelBitDepth})`
* Computes the number of bits of precision required to process and hold the resulting SAT texture, in the
intermediary and result FBOs. Note that this is theoretical; a few bits might be lost with 32 bit floats,
experimentation required.
* `width` the input texture width.
* `height` the input texture height.
* `channelBitDepth` the input texture bits per channel.##### `sat.computeSat ({regl, texture, fbos, currentFboIndex = 0, outFbo = null, components = 'rgba', type = 'vec4', clipY = 1})
* Does all the heavy lifting and computes the summed area table.
* `regl` - a regl context.
* `texture` - the regl input texture. should prolly be in opengl form; where the origin uv is the lower left of the texture.
* `fbos` - an array with at least 2 regl FBOs, used for ping-ponging during processing; should prolly have
a type of float (32-bit) for each channel.
* `currentFboIndex` the regl FBO index in `fbos` array to begin at for ping-ponging. The function will begin by incrementing this
value and using the next FBO in the array. The function will return a value in the form of
`{currentFboIndex}` with the position of the last-used FBO. Defaults to `0`.
* `outFbo` - destination regl FBO. Can be null, in which case the SAT will be left inside the `fbos` array
on the last ping-pong; the return value with be of the form `{currentFboIndex}` so that you
can retrieve it.
* `components` - a string indicating which components need to be processed and summed; defaults to `'rgba'`.
* `type` - a glsl type in string format indicating the type that can hold the compnents that need to be processed; defaults to `'vec4'`.
* `clipY` - a value that represents the clipspace y multiple; a default value of `1` indicates opengl-style lower-left-corner-as-origin;
a value of `-1` would mean a upper-left-corner-as-origin.
* returns a value in the form of `{currentFboIndex}` with the position of the last-used FBO.####Usage
See `glsl-sat-demo.js` for a full demo using [regl](https://github.com/mikolalysenko/regl)
and [resl](https://github.com/mikolalysenko/resl).An excerpt:
```
computeSat({texture: texture, fbos: fbos, outFbo: outFbo, regl});
```