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: about 5 hours 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 (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2016-08-18T03:53:34.000Z (almost 8 years ago)
• Last Synced: 2024-05-13T07:02:45.900Z (about 2 months ago)
• Language: JavaScript
• Size: 333 KB
• Stars: 23
• Watchers: 4
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• 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});

```