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