Fill canvas rendering on WebGL for Graphics GO

v3/src/gameobjects/graphics/Commands.js

@@ -10,5 +10,6 @@ module.exports = {
     STROKE_CIRCLE: 8,
     STROKE_RECT: 9,
     FILL_PATH: 10,
-    STROKE_PATH: 11
+    STROKE_PATH: 11,
+    FILL_STYLE: 12
 };

v3/src/gameobjects/graphics/Graphics.js

@@ -3,6 +3,7 @@ var GameObject = require('../GameObject');
 var Components = require('../../components');
 var Render = require('./GraphicsRender');
 var Commands = require('./Commands');
+var PI2 = 2 * Math.PI;
 
 var Graphics = new Class({
 
@@ -78,32 +79,32 @@ var Graphics = new Class({
 
     fillCircle: function (x, y, radius) 
     {
-        this.commandBuffer.push(
+        this.beginPath();
-            Commands.DRAW_CIRCLE,
+        this.arc(x, y, radius, 0, PI2);
-            x, y, radius
+        this.fillPath();
-        );
+        this.closePath();
     },
 
     fillRect: function (x, y, width, height) 
     {
         this.commandBuffer.push(
-            Commands.DRAW_RECT,
+            Commands.FILL_RECT,
             x, y, width, height
         );
     },
 
     strokeCircle: function (x, y, radius) 
     {
-        this.commandBuffer.push(
+        this.beginPath();
-            Commands.DRAW_CIRCLE,
+        this.arc(x, y, radius, 0, PI2);
-            x, y, radius
+        this.strokePath();
-        );
+        this.closePath();
     },
 
     strokeRect: function (x, y, width, height) 
     {
         this.commandBuffer.push(
-            Commands.DRAW_RECT,
+            Commands.STROKE_RECT,
             x, y, width, height
         );
     },

v3/src/gameobjects/graphics/GraphicsCanvasRenderer.js

@@ -103,19 +103,6 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
                 ctx.lineWidth = lineWidth;
                 ctx.stroke();
                 break;
-            case Commands.FILL_CIRCLE:
-                ctx.beginPath();
-                ctx.arc(
-                    commandBuffer[index + 1], 
-                    commandBuffer[index + 2], 
-                    commandBuffer[index + 3],
-                    0,
-                    PI2
-                );
-                ctx.fill();
-                ctx.closePath();
-                index += 3;
-                break;
             case Commands.FILL_RECT:
                 ctx.fillRect(
                     commandBuffer[index + 1],

v3/src/gameobjects/graphics/GraphicsWebGLRenderer.js

@@ -1,9 +1,297 @@
+var Commands = require('./Commands');
+var Earcut = require('./earcut');
+var pathArray = [];
+var cos = Math.cos;
+var sin = Math.sin;
+
+
+var Point = function (x, y) 
+{
+    this.x = x;
+    this.y = y;
+};
+
+var Path = function (x, y) 
+{
+    this.points = [];
+    this.points.push(new Point(x, y));
+};
+
+var lerp = function (norm, min, max) 
+{
+    return (max - min) * norm + min;
+};
+
 var GraphicsWebGLRenderer = function (renderer, src, interpolationPercentage, camera)
 {
     if (this.renderMask !== this.renderFlags)
     {
         return;
     }
+    var shapeBatch = renderer.shapeBatch;
+    var vertexDataBuffer = shapeBatch.vertexDataBuffer;
+    var vertexBufferF32 = vertexDataBuffer.floatView;
+    var vertexBufferU32 = vertexDataBuffer.uintView;
+    var vertexOffset = 0;
+    var cameraScrollX = camera.scrollX;
+    var cameraScrollY = camera.scrollY;
+    var srcX = src.x; 
+    var srcY = src.y;
+    var srcScaleX = src.scaleX;
+    var srcScaleY = src.scaleY;
+    var srcRotation = src.rotation;
+    var commandBuffer = src.commandBuffer;
+    var value;
+    var lineAlpha = 1.0;
+    var fillAlpha = 1.0;
+    var lineColor = 0;
+    var fillColor = 0;
+    var lineWidth = 1.0;
+    var cameraMatrix = camera.matrix.matrix;
+    var a = cameraMatrix[0];
+    var b = cameraMatrix[1];
+    var c = cameraMatrix[2];
+    var d = cameraMatrix[3];
+    var e = cameraMatrix[4];
+    var f = cameraMatrix[5];
+    var lastPath = null;
+    var iteration = 0;
+    var iterStep = 0.01;
+    var tx = 0;
+    var ty = 0;
+    var ta = 0;
+    var x, y, radius, startAngle, endAngle, anticlockwise;
+    var width, height, txw, tyh;
+    var vertexCount = shapeBatch.vertexCount;
+    var polygon = [];
+    var x0, y0, x1, y1, x2, y2;
+    var tx0, ty0, tx1, ty1, tx2, ty2;
+    var v0, v1, v2;
+    var polygonIndex;
+    var path;
+    var pathLength;
+    var point;
+
+    renderer.setBatch(shapeBatch, null);
+
+    for (var cmdIndex = 0, cmdLength = commandBuffer.length; cmdIndex < cmdLength; ++cmdIndex)
+    {
+        var cmd = commandBuffer[cmdIndex];
+
+        switch(cmd)
+        {
+            case Commands.ARC:
+                x = commandBuffer[cmdIndex + 1];
+                y = commandBuffer[cmdIndex + 2];
+                radius = commandBuffer[cmdIndex + 3];
+                startAngle = commandBuffer[cmdIndex + 4];
+                endAngle = commandBuffer[cmdIndex + 5];
+                anticlockwise = commandBuffer[cmdIndex + 6];
+                
+                while (iteration < 1) {
+                    ta = lerp(iteration, startAngle, endAngle);
+                    tx = x + cos(ta) * radius;
+                    ty = y + sin(ta) * radius;
+                    if (iteration === 0) {
+                        lastPath = new Path(tx, ty);
+                        pathArray.push(lastPath);
+                    } else {
+                        lastPath.points.push(new Point(tx, ty));
+                    }
+                    iteration += iterStep;
+                }
+
+                cmdIndex += 6;
+                break;
+            case Commands.LINE_STYLE:
+                lineWidth = commandBuffer[cmdIndex + 1];
+                lineColor = commandBuffer[cmdIndex + 2]
+                lineAlpha = commandBuffer[cmdIndex + 3];
+                cmdIndex += 3;
+                break;
+            case Commands.FILL_STYLE:
+                fillColor = commandBuffer[cmdIndex + 1];
+                fillAlpha = commandBuffer[cmdIndex + 2];
+                cmdIndex += 2;
+                break;
+            case Commands.BEGIN_PATH:
+                pathArray.length = 0;
+                break;
+            case Commands.CLOSE_PATH:
+                if (lastPath !== null && lastPath.points.length > 0) {
+                    var firstPoint = lastPath.points[0];
+                    var lastPoint = lastPath.points[lastPath.points.length - 1];
+                    lastPath.points.push(firstPoint);
+                    lastPath = new Path(x, y);
+                    pathArray.push(lastPath);
+                }
+                break;
+            case Commands.FILL_PATH:
+                for (var pathArrayIndex = 0, pathArrayLength = pathArray.length; pathArrayIndex < pathArrayLength; ++pathArrayIndex) 
+                {
+                    path = pathArray[pathArrayIndex].points;
+                    pathLength = path.length;
+                    for (var pathIndex = 0; pathIndex < pathLength; ++pathIndex)
+                    {
+                        point = path[pathIndex];
+                        polygon.push(point.x, point.y);
+                    }
+                    polygonIndex = Earcut(polygon);
+                    for (var index = 0, length = polygonIndex.length; index < length; index += 3) 
+                    {
+                        v0 = polygonIndex[index + 0] * 2;
+                        v1 = polygonIndex[index + 1] * 2;
+                        v2 = polygonIndex[index + 2] * 2;
+                        vertexOffset = vertexDataBuffer.allocate(9 * 3);
+                        vertexCount += 3;
+
+                        x0 = polygon[v0 + 0] - cameraScrollX;
+                        y0 = polygon[v0 + 1] - cameraScrollY;
+                        x1 = polygon[v1 + 0] - cameraScrollX;
+                        y1 = polygon[v1 + 1] - cameraScrollY;
+                        x2 = polygon[v2 + 0] - cameraScrollX;
+                        y2 = polygon[v2 + 1] - cameraScrollY;
+
+                        tx0 = x0 * a + y0 * c + e;
+                        ty0 = x0 * b + y0 * d + f;
+                        tx1 = x1 * a + y1 * c + e;
+                        ty1 = x1 * b + y1 * d + f;
+                        tx2 = x2 * a + y2 * c + e;
+                        ty2 = x2 * b + y2 * d + f;
+
+                        vertexBufferF32[vertexOffset++] = tx0;
+                        vertexBufferF32[vertexOffset++] = ty0;
+                        vertexBufferU32[vertexOffset++] = fillColor;
+                        vertexBufferF32[vertexOffset++] = fillAlpha;
+                        vertexBufferF32[vertexOffset++] = srcX;
+                        vertexBufferF32[vertexOffset++] = srcY;
+                        vertexBufferF32[vertexOffset++] = srcScaleX;
+                        vertexBufferF32[vertexOffset++] = srcScaleY;
+                        vertexBufferF32[vertexOffset++] = srcRotation;
+                        
+                        vertexBufferF32[vertexOffset++] = tx1;
+                        vertexBufferF32[vertexOffset++] = ty1;
+                        vertexBufferU32[vertexOffset++] = fillColor;
+                        vertexBufferF32[vertexOffset++] = fillAlpha;
+                        vertexBufferF32[vertexOffset++] = srcX;
+                        vertexBufferF32[vertexOffset++] = srcY;
+                        vertexBufferF32[vertexOffset++] = srcScaleX;
+                        vertexBufferF32[vertexOffset++] = srcScaleY;
+                        vertexBufferF32[vertexOffset++] = srcRotation;
+
+                        vertexBufferF32[vertexOffset++] = tx2;
+                        vertexBufferF32[vertexOffset++] = ty2;
+                        vertexBufferU32[vertexOffset++] = fillColor;
+                        vertexBufferF32[vertexOffset++] = fillAlpha;
+                        vertexBufferF32[vertexOffset++] = srcX;
+                        vertexBufferF32[vertexOffset++] = srcY;
+                        vertexBufferF32[vertexOffset++] = srcScaleX;
+                        vertexBufferF32[vertexOffset++] = srcScaleY;
+                        vertexBufferF32[vertexOffset++] = srcRotation;
+
+                    }
+                    polygon.length = 0;
+                }
+                break;
+            case Commands.STROKE_PATH:
+                break;
+            case Commands.FILL_RECT:
+                vertexOffset = vertexDataBuffer.allocate(9 * 6);
+                vertexCount += 6;
+
+                x = commandBuffer[cmdIndex + 1] - cameraScrollX;
+                y = commandBuffer[cmdIndex + 2] - cameraScrollY;
+                xw = x + commandBuffer[cmdIndex + 3];
+                yh = y + commandBuffer[cmdIndex + 4];
+                tx = x * a + y * c + e;
+                ty = x * b + y * d + f;
+                txw = xw * a + yh * c + e;
+                tyh = xw * b + yh * d + f;
+
+                vertexBufferF32[vertexOffset++] = tx;
+                vertexBufferF32[vertexOffset++] = ty;
+                vertexBufferU32[vertexOffset++] = fillColor;
+                vertexBufferF32[vertexOffset++] = fillAlpha;
+                vertexBufferF32[vertexOffset++] = srcX;
+                vertexBufferF32[vertexOffset++] = srcY;
+                vertexBufferF32[vertexOffset++] = srcScaleX;
+                vertexBufferF32[vertexOffset++] = srcScaleY;
+                vertexBufferF32[vertexOffset++] = srcRotation;
+                vertexBufferF32[vertexOffset++] = tx;
+                vertexBufferF32[vertexOffset++] = tyh;
+                vertexBufferU32[vertexOffset++] = fillColor;
+                vertexBufferF32[vertexOffset++] = fillAlpha;
+                vertexBufferF32[vertexOffset++] = srcX;
+                vertexBufferF32[vertexOffset++] = srcY;
+                vertexBufferF32[vertexOffset++] = srcScaleX;
+                vertexBufferF32[vertexOffset++] = srcScaleY;
+                vertexBufferF32[vertexOffset++] = srcRotation;
+                vertexBufferF32[vertexOffset++] = txw;
+                vertexBufferF32[vertexOffset++] = tyh;
+                vertexBufferU32[vertexOffset++] = fillColor;
+                vertexBufferF32[vertexOffset++] = fillAlpha;
+                vertexBufferF32[vertexOffset++] = srcX;
+                vertexBufferF32[vertexOffset++] = srcY;
+                vertexBufferF32[vertexOffset++] = srcScaleX;
+                vertexBufferF32[vertexOffset++] = srcScaleY;
+                vertexBufferF32[vertexOffset++] = srcRotation;
+                vertexBufferF32[vertexOffset++] = tx;
+                vertexBufferF32[vertexOffset++] = ty;
+                vertexBufferU32[vertexOffset++] = fillColor;
+                vertexBufferF32[vertexOffset++] = fillAlpha;
+                vertexBufferF32[vertexOffset++] = srcX;
+                vertexBufferF32[vertexOffset++] = srcY;
+                vertexBufferF32[vertexOffset++] = srcScaleX;
+                vertexBufferF32[vertexOffset++] = srcScaleY;
+                vertexBufferF32[vertexOffset++] = srcRotation;
+                vertexBufferF32[vertexOffset++] = txw;
+                vertexBufferF32[vertexOffset++] = tyh;
+                vertexBufferU32[vertexOffset++] = fillColor;
+                vertexBufferF32[vertexOffset++] = fillAlpha;
+                vertexBufferF32[vertexOffset++] = srcX;
+                vertexBufferF32[vertexOffset++] = srcY;
+                vertexBufferF32[vertexOffset++] = srcScaleX;
+                vertexBufferF32[vertexOffset++] = srcScaleY;
+                vertexBufferF32[vertexOffset++] = srcRotation;
+                vertexBufferF32[vertexOffset++] = txw;
+                vertexBufferF32[vertexOffset++] = ty;
+                vertexBufferU32[vertexOffset++] = fillColor;
+                vertexBufferF32[vertexOffset++] = fillAlpha;
+                vertexBufferF32[vertexOffset++] = srcX;
+                vertexBufferF32[vertexOffset++] = srcY;
+                vertexBufferF32[vertexOffset++] = srcScaleX;
+                vertexBufferF32[vertexOffset++] = srcScaleY;
+                vertexBufferF32[vertexOffset++] = srcRotation;
+
+                cmdIndex += 4;
+                break;
+            case Commands.STROKE_CIRCLE:
+                cmdIndex += 3;
+                break;
+            case Commands.STROKE_RECT:
+                cmdIndex += 4;
+                break;
+            case Commands.LINE_TO:
+                if (lastPath !== null) {
+                    lastPath.points.push(new Point(commandBuffer[cmdIndex + 1], commandBuffer[cmdIndex + 2]));
+                } else {
+                    lastPath = new Path(commandBuffer[cmdIndex + 1], commandBuffer[cmdIndex + 2]);
+                    pathArray.push(lastPath);
+                }
+                cmdIndex += 2;
+                break;
+            case Commands.MOVE_TO:
+                lastPath = new Path(commandBuffer[cmdIndex + 1], commandBuffer[cmdIndex + 2]);
+                pathArray.push(lastPath);
+                cmdIndex += 2;
+                break;
+            default:
+                console.error('Phaser: Invalid Graphics Command ID ' + cmd);
+                break;
+        }
+    }
+    shapeBatch.vertexCount = vertexCount;
+    pathArray.length = 0;
 }
 
 module.exports = GraphicsWebGLRenderer;

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

@@ -1,7 +1,8 @@
 module.exports = [
     'precision mediump float;',
     'varying vec4 v_color;',
+    'varying float v_alpha;',
     'void main() {',
-    '   gl_FragColor = v_color;',
+    '   gl_FragColor = vec4(v_color.bgr, v_alpha);',
     '}'
 ].join('\n');

v3/src/renderer/webgl/batches/shape/ShapeBatch.js

@@ -62,7 +62,11 @@ ShapeBatch.prototype = {
         var program = CreateProgram(gl, vertShader, fragShader);
         var attribArray = [
             CreateAttribDesc(gl, program, 'a_position', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 0),
-            CreateAttribDesc(gl, program, 'a_color', 4, gl.FLOAT, true, CONST.VERTEX_SIZE, 8),
+            CreateAttribDesc(gl, program, 'a_color', 4, gl.UNSIGNED_BYTE, true, CONST.VERTEX_SIZE, 8),
+            CreateAttribDesc(gl, program, 'a_alpha', 1, gl.FLOAT, false, CONST.VERTEX_SIZE, 12),
+            CreateAttribDesc(gl, program, 'a_translate', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 16),
+            CreateAttribDesc(gl, program, 'a_scale', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 24),
+            CreateAttribDesc(gl, program, 'a_rotation', 1, gl.FLOAT, false, CONST.VERTEX_SIZE, 32),
         ];
         var vertexArray = new VertexArray(CreateBuffer(gl, gl.ARRAY_BUFFER, gl.STREAM_DRAW, null, vertexDataBuffer.getByteCapacity()), attribArray);
         var viewMatrixLocation = gl.getUniformLocation(program, 'u_view_matrix');
@@ -108,11 +112,13 @@ ShapeBatch.prototype = {
         var gl = this.glContext;
         var vertexDataBuffer = this.vertexDataBuffer;
 
-        gl.bufferSubData(gl.ARRAY_BUFFER, 0, vertexDataBuffer.getUsedBufferAsFloat());
+        if (this.vertexCount > 0)
-        gl.drawArrays(gl.TRIANGLES, 0, this.vertexCount);
+        {
-        vertexDataBuffer.clear();
+            gl.bufferSubData(gl.ARRAY_BUFFER, 0, vertexDataBuffer.getUsedBufferAsFloat());
-
+            gl.drawArrays(gl.TRIANGLES, 0, this.vertexCount);
-        this.vertexCount = 0;
+            vertexDataBuffer.clear();
+            this.vertexCount = 0;
+        }
     },
 
     resize: function (width, height, resolution)

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

@@ -2,9 +2,18 @@ module.exports = [
     'uniform mat4 u_view_matrix;',
     'attribute vec2 a_position;',
     'attribute vec4 a_color;',
+    'attribute float a_alpha;',
+    'attribute vec2 a_translate;',
+    'attribute vec2 a_scale;',
+    'attribute float a_rotation;',
     'varying vec4 v_color;',
+    'varying float v_alpha;',
     'void main () {',
-    '   gl_Position = u_view_matrix * vec4(a_position, 1.0, 1.0);',
+    '   float c = cos(a_rotation);',
+    '   float s = sin(a_rotation);',
+    '   vec2 t_position = vec2(a_position.x * c - a_position.y * s, a_position.x * s + a_position.y * c);',
+    '   gl_Position = u_view_matrix * vec4(t_position * a_scale + a_translate, 1.0, 1.0);',
     '   v_color = a_color;',
+    '   v_alpha = a_alpha;',
     '}'
 ].join('\n');

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

@@ -3,14 +3,13 @@ var VertexShader = require('./VertexShader');
 
 var CONST = {
 
-    // VERTEX_SIZE = sizeof(vec2) + sizeof(uint32)
+    VERTEX_SIZE: 36,
-    VERTEX_SIZE: 12,
 
     // How many 32-bit components does the vertex have.
-    SHAPE_VERTEX_COMPONENT_COUNT: 5,
+    SHAPE_VERTEX_COMPONENT_COUNT: 9,
 
     // Can't be bigger than 10,000 since index are 16-bit
-    MAX_VERTICES: 10000,
+    MAX_VERTICES: 1000000,
 
     VERTEX_SHADER_SOURCE: VertexShader,
     FRAGMENT_SHADER_SOURCE: FragmentShader