/glsl-sat

glsl-sat is a shader generator for WebGL, to generate a summed-area-table texture of an input texture

Primary LanguageJavaScriptMIT LicenseMIT

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

See glsl-sat-demo.js for usage.

####Dependencies

####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
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 and resl.

An excerpt:


  computeSat({texture: texture, fbos: fbos, outFbo: outFbo, regl});