diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/NoiseFilter.js b/src/filters/noise/NoiseFilter.js index 2cc52ae..b4c0005 100644 --- a/src/filters/noise/NoiseFilter.js +++ b/src/filters/noise/NoiseFilter.js @@ -17,9 +17,10 @@ export default class NoiseFilter extends core.Filter { /** - * + * @param {number} noise - The noise intensity, should be a normalized value in the range [0, 1]. + * @param {number} seed - A random seed for the noise generation. Default is `Math.random()`. */ - constructor() + constructor(noise = 0.5, seed = Math.random()) { super( // vertex shader @@ -28,22 +29,38 @@ readFileSync(join(__dirname, './noise.frag'), 'utf8') ); - this.noise = 0.5; + this.noise = noise; + this.seed = seed; } /** - * The amount of noise to apply. + * The amount of noise to apply, this value should be in the range (0, 1]. * * @member {number} * @default 0.5 */ get noise() { - return this.uniforms.noise; + return this.uniforms.uNoise; } set noise(value) // eslint-disable-line require-jsdoc { - this.uniforms.noise = value; + this.uniforms.uNoise = value; + } + + /** + * A seed value to apply to the random noise generation. `Math.random()` is a good value to use. + * + * @member {number} + */ + get seed() + { + return this.uniforms.uSeed; + } + + set seed(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uSeed = value; } } diff --git a/src/filters/noise/noise.frag b/src/filters/noise/noise.frag index 3954a0a..23aef0e 100644 --- a/src/filters/noise/noise.frag +++ b/src/filters/noise/noise.frag @@ -3,7 +3,8 @@ varying vec2 vTextureCoord; varying vec4 vColor; -uniform float noise; +uniform float uNoise; +uniform float uSeed; uniform sampler2D uSampler; float rand(vec2 co) @@ -14,12 +15,20 @@ void main() { vec4 color = texture2D(uSampler, vTextureCoord); + float randomValue = rand(gl_FragCoord.xy * uSeed); + float diff = (randomValue - 0.5) * uNoise; - float diff = (rand(gl_FragCoord.xy) - 0.5) * noise; + // Un-premultiply alpha before applying the color matrix. See issue #3539. + if (color.a > 0.0) { + color.rgb /= color.a; + } color.r += diff; color.g += diff; color.b += diff; + // Premultiply alpha again. + color.rgb *= color.a; + gl_FragColor = color; }