Blend Mode added to WebGLRenderer

Author: bitnenfer

v3/src/gameobjects/image/ImageWebGLRenderer.js

@@ -18,7 +18,7 @@ var ImageWebGLRenderer = function (renderer, src, interpolationPercentage)
     // renderer.batch.add(frame.source, src.blendMode, verts, frame.uvs, index, alpha, tint, bg);
 
     var transform = src.transform;
-
+    renderer.setBlendMode(src.color._blendMode);
     renderer.spriteBatch.add(
         frame,
         transform._anchorX, transform._anchorY,

v3/src/renderer/webgl/WebGLRenderer.js

@@ -11,6 +11,7 @@ var CreateTexture2DImage = require('./utils/texture/CreateTexture2DImage');
 var BlitterBatch = require('./batches/blitter/BlitterBatch');
 var SpriteBatch = require('./batches/sprite/SpriteBatch');
 var SpriteBatch32 = require('./batches/sprite/SpriteBatch32');
+var BlendModes = require('../BlendModes');
 
 var WebGLRenderer = function (game)
 {
@@ -145,6 +146,8 @@ WebGLRenderer.prototype = {
             normal, normal, normal, normal,
             normal, normal, normal, normal
         ];
+
+        this.blendMode = -1;
     },
 
     createTexture2D: function (source)
@@ -256,9 +259,7 @@ WebGLRenderer.prototype = {
         //  clear is needed for the FBO, otherwise corruption ...
         gl.clear(gl.COLOR_BUFFER_BIT);
 
-        //this.setBlendMode(CONST.blendModes.NORMAL);
-
-        //this.batch.start();
+        this.setBlendMode(BlendModes.NORMAL);
 
         //  Could move to the State Systems or MainLoop
         for (var c = 0; c < state.sys.children.list.length; c++)
@@ -296,7 +297,25 @@ WebGLRenderer.prototype = {
     {
         this.gl = null;
     },
-    createFBO: function () {}
+
+    createFBO: function () {},
+
+    setBlendMode: function (newBlendMode)
+    {
+        var gl = this.gl;
+        var batch = this.batch;
+        var blend = null;
+
+        if (this.blendMode !== newBlendMode)
+        {
+            if (batch)
+                batch.flush();
+            blend = this.blendModes[newBlendMode];
+            gl.enable(gl.BLEND);
+            gl.blendFunc(blend[0], blend[1]);        
+            this.blendMode = newBlendMode;
+        }
+    }
 };
 
 module.exports = WebGLRenderer;

v3/src/renderer/webgl/batches/blitter/BlitterBatch.js

@@ -175,9 +175,6 @@ BlitterBatch.prototype = {
 
         gl.clearColor(0, 0, 0, 1);
 
-        gl.enable(gl.BLEND);
-        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBufferObject);
 
         BindVertexArray(gl, this.vertexArray);
@@ -189,8 +186,6 @@ BlitterBatch.prototype = {
 
         gl.useProgram(null);
 
-        gl.disable(gl.BLEND);
-
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
         gl.bindBuffer(gl.ARRAY_BUFFER, null);
     },

v3/src/renderer/webgl/batches/sprite/SpriteBatch.js

@@ -204,9 +204,6 @@ SpriteBatch.prototype = {
 
         gl.clearColor(0, 0, 0, 1);
 
-        gl.enable(gl.BLEND);
-        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBufferObject);
 
         BindVertexArray(gl, this.vertexArray);
@@ -218,8 +215,6 @@ SpriteBatch.prototype = {
 
         gl.useProgram(null);
 
-        gl.disable(gl.BLEND);
-
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
         gl.bindBuffer(gl.ARRAY_BUFFER, null);
     },

v3/src/renderer/webgl/batches/sprite/SpriteBatch32.js

@@ -208,9 +208,6 @@ SpriteBatch32.prototype = {
 
         gl.clearColor(0, 0, 0, 1);
 
-        gl.enable(gl.BLEND);
-        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBufferObject);
 
         BindVertexArray(gl, this.vertexArray);
@@ -222,8 +219,6 @@ SpriteBatch32.prototype = {
 
         gl.useProgram(null);
 
-        gl.disable(gl.BLEND);
-
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
         gl.bindBuffer(gl.ARRAY_BUFFER, null);
     },