Awesome
glsl-sat
####Description
glsl-sat is a shader generator for WebGL, to generate a summed-area-table texture of an input texture.
See glsl-sat-demo.js
for usage.
####Dependencies
- nodejs
- browserify
- glsl-quad
- regl
- glsl-numerify (for demo)
- 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 |
develop | glsl-sat-demo |
Source Upscaled | Source Red Numerified | SAT Result Upscaled | SAT Result Red Numerified |
---|---|---|---|
<img src="http://i.imgur.com/nhR71n4.png" alt="Source Upscaled"> | <img src="http://i.imgur.com/0iVMjng.png" alt="Source Red Numerified"> | <img src="http://i.imgur.com/4o4aEv9.png" alt="SAT Result Upscaled"> | <img src="http://i.imgur.com/f0eBldB.png" alt="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 infbos
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 to0
.outFbo
- destination regl FBO. Can be null, in which case the SAT will be left inside thefbos
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 of1
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
and resl.
An excerpt:
computeSat({texture: texture, fbos: fbos, outFbo: outFbo, regl});