npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

glsl-sat

v0.1.0

Published

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

Downloads

5

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

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 -----------------|-----------------------|---------------------|---------------------------- | | |

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