glsl-hash-blur

1.0.3 • Public • Published

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.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.0.3
    21
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 1.0.3
    21
  • 1.0.2
    0
  • 1.0.1
    0
  • 1.0.0
    0

Package Sidebar

Install

npm i glsl-hash-blur

Weekly Downloads

21

Version

1.0.3

License

MIT

Last publish

Collaborators

  • hughsk
  • mikolalysenko
  • mattdesl
  • chrisdickinson
  • yoshuawuyts
  • mikkoh
  • rezaali
  • tatumcreative
  • wwwtyro
  • thibauts
  • bpostlethwaite
  • dfcreative
  • erkaman
  • gre
  • rreusser
  • vorg
  • archmoj
  • dy