added alpha to blitter batch

Author: bitnenfer

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

@@ -82,7 +82,8 @@ BlitterBatch.prototype = {
 
         var attribArray = [
             CreateAttribDesc(gl, program, 'a_position', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 0),
-            CreateAttribDesc(gl, program, 'a_tex_coord', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 8)
+            CreateAttribDesc(gl, program, 'a_tex_coord', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 8),
+            CreateAttribDesc(gl, program, 'a_color', 1, gl.FLOAT, false, CONST.VERTEX_SIZE, 16)
         ];
 
         var vertexArray = new VertexArray(CreateBuffer(gl, gl.ARRAY_BUFFER, gl.STREAM_DRAW, null, vertexDataBuffer.getByteCapacity()), attribArray);
@@ -131,7 +132,7 @@ BlitterBatch.prototype = {
         return (this.vertexDataBuffer.getByteLength() >= this.vertexDataBuffer.getByteCapacity());
     },
 
-    add: function (x, y, frame)
+    add: function (x, y, frame, alpha)
     {
         this.manager.setBatch(this, frame.texture.source[0].glTexture);
 
@@ -148,21 +149,25 @@ BlitterBatch.prototype = {
         vertexBuffer[vertexOffset++] = y;
         vertexBuffer[vertexOffset++] = uvs.x0;
         vertexBuffer[vertexOffset++] = uvs.y0;
-        
+        vertexBuffer[vertexOffset++] = alpha;
+
         vertexBuffer[vertexOffset++] = x;
         vertexBuffer[vertexOffset++] = y + height;
         vertexBuffer[vertexOffset++] = uvs.x1;
         vertexBuffer[vertexOffset++] = uvs.y1;
+        vertexBuffer[vertexOffset++] = alpha;
 
         vertexBuffer[vertexOffset++] = x + width;
         vertexBuffer[vertexOffset++] = y + height;
         vertexBuffer[vertexOffset++] = uvs.x2;
         vertexBuffer[vertexOffset++] = uvs.y2;
+        vertexBuffer[vertexOffset++] = alpha;
 
         vertexBuffer[vertexOffset++] = x + width;
         vertexBuffer[vertexOffset++] = y;
         vertexBuffer[vertexOffset++] = uvs.x3;
         vertexBuffer[vertexOffset++] = uvs.y3;
+        vertexBuffer[vertexOffset++] = alpha;
 
         this.elementCount += CONST.PARTICLE_INDEX_COUNT;
     },

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

@@ -2,7 +2,8 @@ module.exports = [
     'precision lowp float;',
     'uniform sampler2D u_sampler2D;',
     'varying vec2 v_tex_coord;',
+    'varying float v_alpha;',
     'void main() {',
-    '   gl_FragColor = texture2D(u_sampler2D, v_tex_coord);',
+    '   gl_FragColor = texture2D(u_sampler2D, v_tex_coord) * vec4(1.0, 1.0, 1.0, v_alpha);',
     '}'
 ].join('\n');

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

@@ -2,9 +2,12 @@ module.exports = [
     'uniform mat4 u_view_matrix;',
     'attribute vec2 a_position;',
     'attribute vec2 a_tex_coord;',
+    'attribute float a_alpha;',
     'varying vec2 v_tex_coord;',
+    'varying float v_alpha;',
     'void main () {',
     '   gl_Position = u_view_matrix * vec4(a_position, 1.0, 1.0);',
     '   v_tex_coord = a_tex_coord;',
+    '	v_alpha = a_alpha;',
     '}'
 ].join('\n');

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

@@ -3,14 +3,14 @@ var VertexShader = require('./VertexShader');
 
 var CONST = {
 
-    // VERTEX_SIZE = sizeof(vec2) + sizeof(vec2)
-    VERTEX_SIZE: 16,
+    // VERTEX_SIZE = sizeof(vec2) + sizeof(vec2) + sizeof(float)
+    VERTEX_SIZE: 20,
     INDEX_SIZE: 2,
     PARTICLE_VERTEX_COUNT: 4,
     PARTICLE_INDEX_COUNT: 6,
 
     // How many 32-bit components does the vertex have.
-    PARTICLE_VERTEX_COMPONENT_COUNT: 4,
+    PARTICLE_VERTEX_COMPONENT_COUNT: 5,
 
     // Can't be bigger since index are 16-bit
     MAX_PARTICLES: 10000,