Fixed overflowing buffer on Graphics webgl renderer

Author: bitnenfer

v3/src/gameobjects/graphics/Commands.js

@@ -2,14 +2,11 @@ module.exports = {
     ARC: 0,
     BEGIN_PATH: 1,
     CLOSE_PATH: 2,
-    FILL_CIRCLE: 3,
-    FILL_RECT: 4,
-    LINE_TO: 5,
-    MOVE_TO: 6,
-    LINE_STYLE: 7,
-    STROKE_CIRCLE: 8,
-    STROKE_RECT: 9,
-    FILL_PATH: 10,
-    STROKE_PATH: 11,
-    FILL_STYLE: 12
+    FILL_RECT: 3,
+    LINE_TO: 4,
+    MOVE_TO: 5,
+    LINE_STYLE: 6,
+    FILL_STYLE: 7,
+    FILL_PATH: 8,
+    STROKE_PATH: 9,
 };

v3/src/gameobjects/graphics/Graphics.js

@@ -103,10 +103,13 @@ var Graphics = new Class({
 
     strokeRect: function (x, y, width, height) 
     {
-        this.commandBuffer.push(
-            Commands.STROKE_RECT,
-            x, y, width, height
-        );
+        this.beginPath();
+        this.moveTo(x, y);
+        this.lineTo(x + width, y);
+        this.lineTo(x + width, y + height);
+        this.lineTo(x, y + height);
+        this.lineTo(x, y);
+        this.closePath();
     },
 
     lineTo: function (x, y) 

v3/src/gameobjects/graphics/GraphicsCanvasRenderer.js

@@ -112,31 +112,6 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
                 );
                 index += 4;
                 break;
-            case Commands.STROKE_CIRCLE:
-                ctx.beginPath();
-                ctx.arc(
-                    commandBuffer[index + 1], 
-                    commandBuffer[index + 2], 
-                    commandBuffer[index + 3],
-                    0,
-                    PI2
-                );
-                ctx.stroke();
-                ctx.closePath();
-                index += 3;
-                break;
-            case Commands.STROKE_RECT:
-                ctx.beginPath();
-                ctx.rect(
-                    commandBuffer[index + 1],
-                    commandBuffer[index + 2],
-                    commandBuffer[index + 3],
-                    commandBuffer[index + 4]
-                );
-                ctx.stroke();
-                ctx.closePath();
-                index += 4;
-                break;
             case Commands.LINE_TO:
                 ctx.lineTo(
                     commandBuffer[index + 1],

v3/src/gameobjects/graphics/GraphicsWebGLRenderer.js

@@ -4,7 +4,6 @@ var pathArray = [];
 var cos = Math.cos;
 var sin = Math.sin;
 
-
 var Point = function (x, y) 
 {
     this.x = x;
@@ -14,7 +13,8 @@ var Point = function (x, y)
 var Path = function (x, y) 
 {
     this.points = [];
-    this.points.push(new Point(x, y));
+    this.pointsLength = 1;
+    this.points[0] = new Point(x, y);
 };
 
 var lerp = function (norm, min, max) 
@@ -71,6 +71,7 @@ var GraphicsWebGLRenderer = function (renderer, src, interpolationPercentage, ca
     var path;
     var pathLength;
     var point;
+    var maxVertices = shapeBatch.maxVertices;
 
     renderer.setBatch(shapeBatch, null);
 
@@ -127,11 +128,15 @@ var GraphicsWebGLRenderer = function (renderer, src, interpolationPercentage, ca
                 }
                 break;
             case Commands.FILL_PATH:
-                for (var pathArrayIndex = 0, pathArrayLength = pathArray.length; pathArrayIndex < pathArrayLength; ++pathArrayIndex) 
+                for (var pathArrayIndex = 0, pathArrayLength = pathArray.length; 
+                    pathArrayIndex < pathArrayLength; 
+                    ++pathArrayIndex) 
                 {
                     path = pathArray[pathArrayIndex].points;
                     pathLength = path.length;
-                    for (var pathIndex = 0; pathIndex < pathLength; ++pathIndex)
+                    for (var pathIndex = 0; 
+                        pathIndex < pathLength; 
+                        ++pathIndex)
                     {
                         point = path[pathIndex];
                         polygon.push(point.x, point.y);
@@ -142,6 +147,11 @@ var GraphicsWebGLRenderer = function (renderer, src, interpolationPercentage, ca
                         v0 = polygonIndex[index + 0] * 2;
                         v1 = polygonIndex[index + 1] * 2;
                         v2 = polygonIndex[index + 2] * 2;
+                        if (vertexCount + 3 > maxVertices)
+                        {
+                            shapeBatch.flush();
+                            vertexCount = 0;
+                        }
                         vertexOffset = vertexDataBuffer.allocate(9 * 3);
                         vertexCount += 3;
 
@@ -188,14 +198,18 @@ var GraphicsWebGLRenderer = function (renderer, src, interpolationPercentage, ca
                         vertexBufferF32[vertexOffset++] = srcScaleX;
                         vertexBufferF32[vertexOffset++] = srcScaleY;
                         vertexBufferF32[vertexOffset++] = srcRotation;
-
                     }
                     polygon.length = 0;
                 }
                 break;
             case Commands.STROKE_PATH:
                 break;
             case Commands.FILL_RECT:
+                if (vertexCount + 6 > maxVertices)
+                {
+                    shapeBatch.flush();
+                    vertexCount = 0;
+                }
                 vertexOffset = vertexDataBuffer.allocate(9 * 6);
                 vertexCount += 6;
 
@@ -262,13 +276,6 @@ var GraphicsWebGLRenderer = function (renderer, src, interpolationPercentage, ca
                 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:

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

@@ -45,8 +45,9 @@ var ShapeBatch = function (game, gl, manager)
 
     this.manager = manager;
     this.dirty = false;
-
+    this.context = null;
     this.init(this.glContext);
+
 };
 
 ShapeBatch.prototype.constructor = ShapeBatch;
@@ -55,7 +56,6 @@ ShapeBatch.prototype = {
 
     init: function (gl)
     {
-
         var vertexDataBuffer = new Buffer32(CONST.VERTEX_SIZE * CONST.MAX_VERTICES);
         var vertShader = CreateShader(gl, CONST.VERTEX_SHADER_SOURCE, gl.VERTEX_SHADER);
         var fragShader = CreateShader(gl, CONST.FRAGMENT_SHADER_SOURCE, gl.FRAGMENT_SHADER);

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

@@ -9,7 +9,7 @@ var CONST = {
     SHAPE_VERTEX_COMPONENT_COUNT: 9,
 
     // Can't be bigger than 10,000 since index are 16-bit
-    MAX_VERTICES: 1000000,
+    MAX_VERTICES: 10000,
 
     VERTEX_SHADER_SOURCE: VertexShader,
     FRAGMENT_SHADER_SOURCE: FragmentShader