Premultiplied Alpha blending

Author: bitnenfer

v3/src/gameobjects/components/TransformMatrix.js

@@ -68,10 +68,10 @@ var TransformMatrix = new Class({
         return this.transform(radianCos, radianSin, -radianSin, radianCos, 0, 0);
     },
 
-    multiply: function (lhs)
+    multiply: function (rhs)
     {
         var matrix = this.matrix;
-        var otherMatrix = lhs.matrix;
+        var otherMatrix = rhs.matrix;
 
         var a0 = matrix[0];
         var b0 = matrix[1];

v3/src/renderer/webgl/WebGLRenderer.js

@@ -80,9 +80,9 @@ var WebGLRenderer = new Class({
             preserveDrawingBuffer: false,
 
             WebGLContextOptions: {
-                alpha: true,
+                alpha: false,
                 antialias: true,
-                premultipliedAlpha: true,
+                premultipliedAlpha: false,
                 stencil: true,
                 preserveDrawingBuffer: false
             }
@@ -142,14 +142,15 @@ var WebGLRenderer = new Class({
         gl.disable(gl.CULL_FACE);
         gl.enable(gl.BLEND);
         gl.clearColor(color.redGL, color.greenGL, color.blueGL, color.alphaGL);
+        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
 
         //  Map Blend Modes
 
         this.blendModes = [];
 
         for (var i = 0; i <= 16; i++)
         {
-            this.blendModes.push({ func: [ gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA ], equation: gl.FUNC_ADD });
+            this.blendModes.push({ func: [ gl.ONE, gl.ONE_MINUS_SRC_ALPHA ], equation: gl.FUNC_ADD });
         }
 
         //  Add

v3/src/renderer/webgl/shaders/GBufferShader.js

@@ -17,7 +17,7 @@ var GBufferShader = function ()
         '    vec4 spriteColor = texture2D(uMainTexture, v_tex_coord) * vec4(v_color, v_alpha);',
         '    vec3 spriteNormal = texture2D(uNormTexture, v_tex_coord).rgb;',
 
-        '    gl_FragData[0] = spriteColor;',
+        '    gl_FragData[0] = vec4(spriteColor.rgb * spriteColor.a, spriteColor.a);',
         '    gl_FragData[1] = vec4(spriteNormal, spriteColor.a);',
         '}'
     ];

v3/src/renderer/webgl/shaders/LightFragmentShader.js

@@ -43,7 +43,8 @@ var LightFragmentShader = function (maxLights)
         '        finalColor += attenuation * diffuse;',
         '    }',
 
-        '    gl_FragColor = vec4(uAmbientLightColor + finalColor, spriteColor.a);',
+        '    vec4 color_output = vec4(uAmbientLightColor + finalColor, spriteColor.a);',
+        '    gl_FragColor = vec4(color_output.rgb * color_output.a, color_output.a);',
         '}'
     ];
 

v3/src/renderer/webgl/shaders/MaskShader.js

@@ -18,8 +18,9 @@ module.exports = {
     '   vec2 uv = gl_FragCoord.xy / u_resolution;',
     '   vec4 main_color = texture2D(u_main_sampler, uv);',
     '   vec4 mask_color = texture2D(u_mask_sampler, uv);',
+    '   float alpha = mask_color.a * main_color.a;',
     '   // Just mask using alpha channel',
-    '   gl_FragColor = vec4(main_color.rgb, mask_color.a * main_color.a);',
+    '   gl_FragColor = vec4(main_color.rgb * alpha, alpha);',
     '}'
     ].join('\n')
 };

v3/src/renderer/webgl/shaders/ParticleShader.js

@@ -30,7 +30,8 @@ var ParticleShader = function ()
 
         'void main()',
         '{',
-        '    gl_FragColor = texture2D(u_main_sampler, v_tex_coord) * v_color;',
+        '    vec4 sample_color = texture2D(u_main_sampler, v_tex_coord) * v_color;',
+        '    gl_FragColor = vec4(sample_color.rgb * sample_color.a, sample_color.a);',
         '}'
     ];
 

v3/src/renderer/webgl/shaders/Phong2DShaderDeferred.js

@@ -49,7 +49,8 @@ var Phong2DShaderDeferred = function (maxLights)
         '        finalColor += attenuation * diffuse;',
         '    }',
 
-        '    gl_FragColor = vec4(uAmbientLightColor + finalColor, gbColor.a);',
+        '    vec4 color_output = vec4(uAmbientLightColor + finalColor, gbColor.a);',
+        '    gl_FragColor = vec4(color_output.rgb * color_output.a, color_output.a);',
         '}'
     ];
 

v3/src/renderer/webgl/shaders/TexturedAndAlphaShader.js

@@ -18,7 +18,8 @@ module.exports = {
         'varying vec2 v_tex_coord;',
         'varying float v_alpha;',
         'void main() {',
-        '   gl_FragColor = texture2D(u_sampler2D, v_tex_coord) * vec4(1.0, 1.0, 1.0, v_alpha);',
+        '   vec4 output_color = texture2D(u_sampler2D, v_tex_coord);',
+        '   gl_FragColor = vec4(output_color.rgb * output_color.a, v_alpha * output_color.a);',
         '}'
     ].join('\n')
 };

v3/src/renderer/webgl/shaders/TexturedAndNormalizedTintedShader.js

@@ -22,7 +22,8 @@ module.exports = {
         'varying vec3 v_color;',
         'varying float v_alpha;',
         'void main() {',
-        '   gl_FragColor = texture2D(u_sampler2D, v_tex_coord) * vec4(v_color, v_alpha);',
+        '   vec4 sample_color = texture2D(u_sampler2D, v_tex_coord);',
+        '   gl_FragColor = vec4((sample_color.rgb * v_color.rgb) * sample_color.a, sample_color.a * v_alpha);',
         '}'
     ].join('\n')
 };

v3/src/renderer/webgl/shaders/TexturedShader.js

@@ -14,7 +14,8 @@ module.exports = {
         'uniform sampler2D u_sampler;',
         'varying vec2 v_tex_coord;',
         'void main(void) {',
-        '   gl_FragColor = texture2D(u_sampler, v_tex_coord);',
+        '   vec4 output_color = texture2D(u_sampler, v_tex_coord);',
+        '   gl_FragColor = vec4(output_color.rgb * output_color.a, output_color.a);',
         '}'
     ].join('\n')
 };