a blur effect based on random hash offset
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
.npmignore
LICENSE.md
README.md
demo.frag
demo.js
demo.vert
index.glsl
package.json

README.md

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.