Fixed alpha blending issue with textured renderer

Author: bitnenfer

v3/src/renderer/webgl/WebGLRenderer.js

@@ -80,9 +80,9 @@ var WebGLRenderer = new Class({
             preserveDrawingBuffer: false,
 
             WebGLContextOptions: {
-                alpha: false,
+                alpha: true,
                 antialias: true,
-                premultipliedAlpha: false,
+                premultipliedAlpha: true,
                 stencil: true,
                 preserveDrawingBuffer: false
             }
@@ -143,9 +143,8 @@ var WebGLRenderer = new Class({
         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++)
@@ -154,13 +153,13 @@ var WebGLRenderer = new Class({
         }
 
         //  Add
-        this.blendModes[1].func = [ gl.SRC_ALPHA, gl.DST_ALPHA ];
+        this.blendModes[1].func = [ gl.ONE, gl.DST_ALPHA ];
 
         //  Multiply
         this.blendModes[2].func = [ gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA ];
 
         //  Screen
-        this.blendModes[3].func = [ gl.SRC_ALPHA, gl.ONE ];
+        this.blendModes[3].func = [ gl.ONE, gl.ONE_MINUS_SRC_COLOR ];
 
         this.blendMode = -1;
         this.extensions = gl.getSupportedExtensions();
@@ -550,12 +549,22 @@ var WebGLRenderer = new Class({
 
     setBlendMode: function (newBlendMode)
     {
+        var gl = this.gl;
+
         if (newBlendMode === BlendModes.SKIP_CHECK)
         {
             return;
         }
 
-        var gl = this.gl;
+        if (newBlendMode === BlendModes.NORMAL)
+        {
+            gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+        }
+        else
+        {
+            gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+        }
+
         var renderer = this.currentRenderer;
 
         if (this.blendMode !== newBlendMode)

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

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

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

@@ -23,7 +23,7 @@ module.exports = {
         'varying float v_alpha;',
         'void main() {',
         '   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);',
+        '   gl_FragColor = vec4(sample_color.rgb * v_alpha * sample_color.a, v_alpha * sample_color.a);',
         '}'
     ].join('\n')
 };