Nixon's Pants Missing


    0.1.0 • Public • Published



    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.



    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


    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


    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.


    See glsl-sat-demo.js for a full demo using regl and resl.

    An excerpt:

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


    npm i glsl-sat

    DownloadsWeekly Downloads






    Last publish


    • realazthat