glsl-sat

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

• 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

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