Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

glsl-film-grain

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

glsl-film-grain

natural looking film grain using noise functions

  • 1.0.4
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
6.4K
increased by3.98%
Maintainers
1
Weekly downloads
 
Created
Source

glsl-film-grain

stable

img

(click for demo)

Natural looking film grain using 3D noise functions. Inspired by Martins Upitis.

This is a fairly expensive technique to achieve film grain, but it looks more realistic than a hash function and also produces better motion.

Simplest example:

#pragma glslify: grain = require(glsl-film-grain)

void main() {
    float grainSize = 2.0;
    float g = grain(texCoord, resolution / grainSize);
    vec3 color = vec3(g);
    gl_FragColor = vec4(color, 1.0);
}

Results in:

grain

See blending tips and the demo source for details.

Usage

NPM

f = grain(texCoord, resolution[, frame[, q]])

Returns a float for the monochromatic grain with the given options:

  • texCoord the UV coordinates of your scene
  • resolution the resolution of your scene in pixels, optionally scaled to adjust the grain size
  • frame the animation frame, which is an offset into the Z of the 3D noise
  • q is a coefficient for the offset calculation, and may evoke subtly different motion. Defaults to 2.5

blending tips

There are a lot of ways to blend the noise onto the 3D scene or image. The solution used in the demo uses glsl-blend-soft-light and glsl-luma.

    vec3 g = vec3(grain(texCoord, p));
  
    //blend the noise over the background, 
    //i.e. overlay, soft light, additive
    vec3 color = blend(backgroundColor, g);
    
    //get the luminance of the background
    float luminance = luma(backgroundColor);
    
    //reduce the noise based on some 
    //threshold of the background luminance
    float response = smoothstep(0.05, 0.5, luminance);
    color = mix(color, backgroundColor, pow(response, 2.0));
    
    //final color
    gl_FragColor = vec4(color, 1.0);

License

MIT, see LICENSE.md for details.

Keywords

FAQs

Package last updated on 11 Mar 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc