Nightingale Posing Mischievously
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    glsl-hash-blurpublic

    glsl-hash-blur

    stable

    grain

    A fast blur effect that uses a random hash to compute the sample offset. This gives a snowy/grainy feel to the blur. When requiring, you must specify a sample function and the iterations (a const or #define integer).

    vec3 tex(vec2 uv);
     
    #pragma glslify: blur require('glsl-hash-blur', sample=tex, iterations=20) 
     
    vec3 tex(vec2 uv) {
      return texture2D(iChannel0, uv).rgb;
    }
     
    void main() {
      float aspect = resolution.x / resolution.y;
      gl_FragColor.rgb = blur(vUv, radius, aspect);
    }

    See demo.frag for an implementation of a vignette blur.

    The effect was inspired by David Hoskins' ShaderToy.

    Note: Use highp precision for best results on mobile and other low-end devices.

    Demos

    Usage

    NPM

    blur = require('glsl-hash-blur', sample=S, iterations=I)

    Requires the module with your desired sampling function S and iteration count I. The sample function has the following signature:

    vec3 sample(in vec2 uv);

    vec3 blur(vec2 uv, float radius[, float aspect[, float offset]])

    Using the sample function provided above, this will create a blur using the specified UV coordinates and radius strength. The radius is typically multiplied by texel size, e.g. 1.0 / resolution.x.

    The aspect (defaults to 1.0) is recommended to produce a more accurate blur; e.g. resolution.x / resolution.y.

    The offset is optional (defaults to 0.0). It offsets the uvs during randomization, which can produce a "jitter" effect like moving film noise.

    Running From Source

    To build/run the demo from source:

    git clone https://github.com/stackgl/glsl-hash-blur.git
    cd glsl-hash-blur
    npm install

    Then run the following to start development:

    npm run start

    And open http://localhost:9966/. Changes to the file will trigger a LiveReload event on the page.

    To run the production build:

    npm run build

    License

    MIT, see LICENSE.md for details.

    install

    npm i glsl-hash-blur

    Downloadsweekly downloads

    17

    version

    1.0.3

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar