Revamped how blend modes are handled. Added ability to swap between blendFunc and blendFunSeparate.

Author: photonstorm

v3/src/checksum.js

@@ -1,4 +1,4 @@
 var CHECKSUM = {
-build: '67f18150-77a1-11e7-b88a-2bfabd5dc987'
+build: '49cc5c90-77e7-11e7-8cb3-6774896fb46c'
 };
 module.exports = CHECKSUM;

v3/src/gameobjects/components/BlendMode.js

@@ -17,7 +17,7 @@ var BlendMode = {
         {
             value | 0;
 
-            if (value >= 0 && value <= 16)
+            if (value >= 0)
             {
                 this._blendMode = value;
             }

v3/src/renderer/webgl/WebGLRenderer.js

@@ -103,17 +103,21 @@ var WebGLRenderer = new Class({
 
         //  Map Blend Modes
 
-        var add = [ gl.SRC_ALPHA, gl.DST_ALPHA ];
-        var normal = [ gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA ];
-        var multiply = [ gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA ];
-        var screen = [ gl.SRC_ALPHA, gl.ONE ];
-
-        this.blendModes = [
-            normal, add, multiply, screen, normal,
-            normal, normal, normal, normal,
-            normal, normal, normal, normal,
-            normal, normal, normal, normal
-        ];
+        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 });
+        }
+
+        //  Add
+        this.blendModes[1].func = [ gl.SRC_ALPHA, 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.blendMode = -1;
         this.extensions = gl.getSupportedExtensions();
@@ -129,6 +133,43 @@ var WebGLRenderer = new Class({
         this.resize(this.width, this.height);
     },
 
+    // https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendFunc
+    // https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendFuncSeparate
+    // https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendEquation
+    // https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendEquationSeparate
+    // https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendColor
+    addBlendMode: function (func, equation)
+    {
+        var index = this.blendModes.push({ func: func, equation: equation });
+
+        return index - 1;
+    },
+
+    updateBlendMode: function (index, func, equation)
+    {
+        if (this.blendModes[index])
+        {
+            this.blendModes[index].func = func;
+
+            if (equation)
+            {
+                this.blendModes[index].equation = equation;
+            }
+        }
+
+        return this;
+    },
+
+    removeBlendMode: function (index)
+    {
+        if (index > 16 && this.blendModes[index])
+        {
+            this.blendModes.splice(index, 1);
+        }
+
+        return this;
+    },
+
     createTexture: function (source, width, height)
     {
         width = source ? source.width : width;
@@ -358,9 +399,10 @@ var WebGLRenderer = new Class({
                     renderer.flush();
                 }
 
-                var blend = this.blendModes[newBlendMode];
+                var blend = this.blendModes[newBlendMode].func;
 
                 gl.enable(gl.BLEND);
+                gl.blendEquation(this.blendModes[newBlendMode].equation);
 
                 if (blend.length > 2)
                 {
@@ -449,7 +491,6 @@ var WebGLRenderer = new Class({
     {
         var gl = this.gl;
         var renderer = this.currentRenderer;
-        var blend = null;
 
         if (this.blendMode !== newBlendMode)
         {
@@ -458,9 +499,10 @@ var WebGLRenderer = new Class({
                 renderer.flush();
             }
 
-            blend = this.blendModes[newBlendMode];
+            var blend = this.blendModes[newBlendMode].func;
 
             gl.enable(gl.BLEND);
+            gl.blendEquation(this.blendModes[newBlendMode].equation);
 
             if (blend.length > 2)
             {