diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e6fde6e 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/ColorMatrixFilter.js b/src/filters/colormatrix/ColorMatrixFilter.js index 679f8ec..e6fde6e 100644 --- a/src/filters/colormatrix/ColorMatrixFilter.js +++ b/src/filters/colormatrix/ColorMatrixFilter.js @@ -36,6 +36,8 @@ 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]; + + this.alpha = 1; } /** @@ -575,6 +577,26 @@ { this.uniforms.m = value; } + + /** + * The opacity value to use when mixing the original and resultant colors. + * + * When the value is 0, the original color is used without modification. + * When the value is 1, the result color is used. + * When in the range (0, 1) the color is interpolated between the original and result by this amount. + * + * @member {number} + * @default 1 + */ + get alpha() + { + return this.uniforms.uAlpha; + } + + set alpha(value) // eslint-disable-line require-jsdoc + { + this.uniforms.uAlpha = value; + } } // Americanized alias diff --git a/src/filters/colormatrix/colorMatrix.frag b/src/filters/colormatrix/colorMatrix.frag index c73c0e9..afca6a9 100644 --- a/src/filters/colormatrix/colorMatrix.frag +++ b/src/filters/colormatrix/colorMatrix.frag @@ -1,15 +1,24 @@ varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float m[20]; +uniform float uAlpha; void main(void) { vec4 c = texture2D(uSampler, vTextureCoord); + + if (uAlpha == 0.0) { + gl_FragColor = c; + return; + } + // Un-premultiply alpha before applying the color matrix. See issue #3539. if (c.a > 0.0) { c.rgb /= c.a; } + vec4 result; + result.r = (m[0] * c.r); result.r += (m[1] * c.g); result.r += (m[2] * c.b); @@ -34,8 +43,10 @@ result.a += (m[18] * c.a); result.a += m[19]; - // Premultiply alpha again. - result.rgb *= result.a; + vec3 rgb = mix(c.rgb, result.rgb, uAlpha); - gl_FragColor = result; + // Premultiply alpha again. + rgb *= result.a; + + gl_FragColor = vec4(rgb, result.a); }