Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/realazthat/glsl-gaussian

glsl-gaussian is a shader generator for WebGL, to generate a gaussian blur of an input texture
https://github.com/realazthat/glsl-gaussian

Last synced: 26 days ago
JSON representation

glsl-gaussian is a shader generator for WebGL, to generate a gaussian blur of an input texture

Awesome Lists containing this project

README 

        

glsl-gaussian

---



####Description



glsl-gaussian is a shader generator for WebGL, to generate a gaussian blur of an input texture.



See `glsl-gaussian-live-demo.js`, `glsl-gaussian-demo.js` for usage.



####Dependencies



* nodejs

* browserify

* [glsl-quad](https://github.com/realazthat/glsl-quad)

* [glsl-sat](https://github.com/realazthat/glsl-sat)

* [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-gaussian

    

    #install npm dependencies

    npm install

    

    #browser should open with the demo

    budo glsl-gaussian-demo.js --open



    #browser should open with the demo

    budo glsl-gaussian-live-demo.js --open



```



**Live:**



 branch | demo

--------|-------

master  | [glsl-gaussian-demo](https://realazthat.github.io/glsl-gaussian/master/www/glsl-gaussian-demo/index.html)

        | [glsl-gaussian-live-demo](https://realazthat.github.io/glsl-gaussian/master/www/glsl-gaussian-live-demo/index.html)

develop | [glsl-gaussian-demo](https://realazthat.github.io/glsl-gaussian/develop/www/glsl-gaussian-demo/index.html)

        | [glsl-gaussian-live-demo](https://realazthat.github.io/glsl-gaussian/develop/www/glsl-gaussian-live-demo/index.html)



**Results:**



(Image credit: [Storm Cell Over the Southern Appalachian Mountains](http://www.nasa.gov/content/storm-cell-over-the-southern-appalachian-mountains),

*NASA / Stu Broce*, public domain by virtue of being created by NASA)



 Source Image |

--------------|




 Gaussian Blur with radius 1  | Gaussian Blur with radius 2 | Gaussian Blur with radius 4 |

------------------------------|-----------------------------|-----------------------------|

|||



####Docs



```

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

```



##### `gaussian.blur.gaussian.compute ({regl, texture, radius, fbos, currentFboIndex = 0, boxPasses = 3, outFbo = null, components = 'rgba', type = 'vec4', clipY = 1})`



* Computes the guassian blur of the given texture.

* `regl` - a regl context.

* `radius` - The radius of the gaussian blur; that is to say, the kernel window around the pixel will be of size `(2*radius+1)X(2*radius+1)`.

* `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 result 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 blurred; defaults to `'rgba'`.

* `type` - a glsl type in string format indicating the type that can hold the components 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.



##### `gaussian.blur.box.shader.vert ({textureWidth, textureHeight, radius, components = 'rgba', type = 'vec4'})`



* Generate a vertex shader that computes the box blur from a Summed Area Table texture.

    Returns the vertex shader as a string.

* `textureWidth` - The width of the inputtexture.

* `textureHeight` - The height of the input texture.

* `radius` - The radius of the box blur; that is to say, the box around the pixel will be of size `(2*radius+1)X(2*radius+1)`. 

* `components` - a string indicating which components need to be processed and blurred; defaults to `'rgba'`.

* `type` - a glsl type in string format indicating the type that can hold the components that need to be processed; defaults to `'vec4'`.



##### `gaussian.blur.box.shader.frag ({textureWidth, textureHeight, radius, components = 'rgba', type = 'vec4'})`



* Generate a fragment shader that computes the box blur from a Summed Area Table texture.

    Returns the fragment shader as a string.

* See `gaussian.box.shader.vert()` for params.



##### `gaussian.blur.box.compute ({regl, src, radius, outFbo = null, components = 'rgba', type = 'vec4', clipY = 1})`



* Given an input texture, will compute the box blur.

* `regl` - a regl context.

* `src` - A dictionary of the form `{satTexture}` OR `{texture, fbos, currentFboIndex}`.

  *  In the first form, the Summed Area Table

    is provided by you, the user. No FBOs are needed, just be sure to specify the `outFbo` argument.

  * In the second form, you provide the input texture yourself (via the `texture` argument), and FBOs

    for pingponging during computation of SAT. The FBOs should be an array of at least 2. The FBOs

    should prolly be of a high precision type (such as float 32 bit). `currentFboIndex` will be

    returned in the form `{currentFboIndex}` representing the last-used FBO. If `outFbo` is not

    specified, then this FBO slot will hold the result of the blur.

* `radius` - The radius of the box blur; that is to say, the box around the pixel will be of size (2*radius+1). 

* `outFbo` - Destination regl FBO. Can be null, in which case `src.fbos` is expected to exist; the result of

             of the computation will be left inside the `src.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 blurred; defaults to `'rgba'`.

* `type` - a glsl type in string format indicating the type that can hold the components 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.



####Usage



See `glsl-gaussian-demo.js` for a full demo using [regl](https://github.com/mikolalysenko/regl)

and [resl](https://github.com/mikolalysenko/resl).



An excerpt:



```



  gaussian.blur.gaussian.compute({regl, texture, radius, fbos, outFbo, components: 'rgb', type: 'vec3'});



```