glsl-hash-blur

glsl-hash-blur

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

• applied to a texture
• editable glslbin demo

Usage

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.