Add Shape rendering, using the Graphics render nodes.

src/gameobjects/graphics/Graphics.js

@@ -53,6 +53,11 @@ var Render = require('./GraphicsRender');
  * updates frequently then you should avoid doing this, as it will constantly generate new textures, which will consume
  * memory.
  *
+ * Under WebGL, Graphics uses its own shader which will batch drawing operations.
+ * Try to keep Graphics objects grouped together so they can be batched together.
+ * Avoid mixing object types where possible, as each batch will be flushed,
+ * costing performance.
+ *
  * As you can tell, Graphics objects are a bit of a trade-off. While they are extremely useful, you need to be careful
  * in their complexity and quantity of them in your game.
  *

src/gameobjects/shape/FillPathWebGL.js

@@ -13,44 +13,53 @@ var Utils = require('../../renderer/webgl/Utils');
  * @since 3.13.0
  * @private
  *
- * @param {Phaser.Renderer.WebGL.WebGLPipeline} pipeline - The WebGL Pipeline used to render this Shape.
+ * @param {Phaser.Renderer.WebGL.DrawingContext} drawingContext - The current drawing context.
+ * @param {Phaser.Renderer.WebGL.RenderNodes.SubmitterGraphics} submitter - The Submitter node to use.
  * @param {Phaser.GameObjects.Components.TransformMatrix} calcMatrix - The transform matrix used to get the position values.
  * @param {Phaser.GameObjects.Shape} src - The Game Object shape being rendered in this call.
  * @param {number} alpha - The base alpha value.
  * @param {number} dx - The source displayOriginX.
  * @param {number} dy - The source displayOriginY.
  */
-var FillPathWebGL = function (pipeline, calcMatrix, src, alpha, dx, dy)
+var FillPathWebGL = function (drawingContext, submitter, calcMatrix, src, alpha, dx, dy)
 {
+    // This is very similar to the FillPath RenderNode, but it already
+    // has access to the Earcut indexes, so it doesn't need to calculate them.
+
     var fillTintColor = Utils.getTintAppendFloatAlpha(src.fillColor, src.fillAlpha * alpha);
 
     var path = src.pathData;
     var pathIndexes = src.pathIndexes;
 
-    for (var i = 0; i < pathIndexes.length; i += 3)
+    var length = path.length;
+    var pathIndex, pointX, pointY, x, y;
+
+    var vertices = Array(length * 2);
+    var colors = Array(length);
+
+    var verticesIndex = 0;
+    var colorsIndex = 0;
+
+    for (pathIndex = 0; pathIndex < length; pathIndex += 2)
     {
-        var p0 = pathIndexes[i] * 2;
+        pointX = path[pathIndex] - dx;
-        var p1 = pathIndexes[i + 1] * 2;
+        pointY = path[pathIndex + 1] - dy;
-        var p2 = pathIndexes[i + 2] * 2;
 
-        var x0 = path[p0 + 0] - dx;
+        // Transform the point.
-        var y0 = path[p0 + 1] - dy;
+        x = calcMatrix.getX(pointX, pointY);
-        var x1 = path[p1 + 0] - dx;
+        y = calcMatrix.getY(pointX, pointY);
-        var y1 = path[p1 + 1] - dy;
-        var x2 = path[p2 + 0] - dx;
-        var y2 = path[p2 + 1] - dy;
 
-        var tx0 = calcMatrix.getX(x0, y0);
+        vertices[verticesIndex++] = x;
-        var ty0 = calcMatrix.getY(x0, y0);
+        vertices[verticesIndex++] = y;
-
+        colors[colorsIndex++] = fillTintColor;
-        var tx1 = calcMatrix.getX(x1, y1);
-        var ty1 = calcMatrix.getY(x1, y1);
-
-        var tx2 = calcMatrix.getX(x2, y2);
-        var ty2 = calcMatrix.getY(x2, y2);
-
-        pipeline.batchTri(src, tx0, ty0, tx1, ty1, tx2, ty2, 0, 0, 1, 1, fillTintColor, fillTintColor, fillTintColor, 2);
     }
+
+    submitter.batch(
+        drawingContext,
+        pathIndexes,
+        vertices,
+        colors
+    );
 };
 
 module.exports = FillPathWebGL;

src/gameobjects/shape/Shape.js

@@ -14,6 +14,10 @@ var Line = require('../../geom/line/Line');
  * The Shape Game Object is a base class for the various different shapes, such as the Arc, Star or Polygon.
  * You cannot add a Shape directly to your Scene, it is meant as a base for your own custom Shape classes.
  *
+ * Shape objects use the same batch as the Graphics Game Object to render in WebGL.
+ * They do not support gradients, path detail threshold, or other advanced Graphics features.
+ * In return, they have precomputed internal data for quick rendering of the geometry.
+ *
  * @class Shape
  * @extends Phaser.GameObjects.GameObject
  * @memberof Phaser.GameObjects
@@ -26,8 +30,8 @@ var Line = require('../../geom/line/Line');
  * @extends Phaser.GameObjects.Components.GetBounds
  * @extends Phaser.GameObjects.Components.Mask
  * @extends Phaser.GameObjects.Components.Origin
- * @extends Phaser.GameObjects.Components.Pipeline
  * @extends Phaser.GameObjects.Components.PostPipeline
+ * @extends Phaser.GameObjects.Components.RenderNode
  * @extends Phaser.GameObjects.Components.ScrollFactor
  * @extends Phaser.GameObjects.Components.Transform
  * @extends Phaser.GameObjects.Components.Visible
@@ -45,10 +49,11 @@ var Shape = new Class({
         Components.BlendMode,
         Components.Depth,
         Components.GetBounds,
+        Components.Lighting,
         Components.Mask,
         Components.Origin,
-        Components.Pipeline,
         Components.PostPipeline,
+        Components.RenderNode,
         Components.ScrollFactor,
         Components.Transform,
         Components.Visible
@@ -205,7 +210,7 @@ var Shape = new Class({
          */
         this.height = 0;
 
-        this.initPipeline();
+        this.initRenderNodes('Graphics');
         this.initPostPipeline();
     },
 

src/gameobjects/shape/StrokePathWebGL.js

@@ -13,55 +13,61 @@ var Utils = require('../../renderer/webgl/Utils');
  * @since 3.13.0
  * @private
  *
- * @param {Phaser.Renderer.WebGL.WebGLPipeline} pipeline - The WebGL Pipeline used to render this Shape.
+ * @param {Phaser.Renderer.WebGL.DrawingContext} drawingContext - The current drawing context.
+ * @param {Phaser.Renderer.WebGL.RenderNodes.SubmitterGraphics} submitter - The Submitter node to use.
+ * @param {Phaser.GameObjects.Components.TransformMatrix} matrix - The current transform matrix.
  * @param {Phaser.GameObjects.Shape} src - The Game Object shape being rendered in this call.
  * @param {number} alpha - The base alpha value.
  * @param {number} dx - The source displayOriginX.
  * @param {number} dy - The source displayOriginY.
  */
-var StrokePathWebGL = function (pipeline, src, alpha, dx, dy)
+var StrokePathWebGL = function (drawingContext, submitter, matrix, src, alpha, dx, dy)
 {
-    var strokeTint = pipeline.strokeTint;
     var strokeTintColor = Utils.getTintAppendFloatAlpha(src.strokeColor, src.strokeAlpha * alpha);
 
-    strokeTint.TL = strokeTintColor;
-    strokeTint.TR = strokeTintColor;
-    strokeTint.BL = strokeTintColor;
-    strokeTint.BR = strokeTintColor;
-
     var path = src.pathData;
     var pathLength = path.length - 1;
     var lineWidth = src.lineWidth;
-    var halfLineWidth = lineWidth / 2;
+    var openPath = !src.closePath;
 
-    var px1 = path[0] - dx;
+    var strokePath = src.customRenderNodes.StrokePath || src.defaultRenderNodes.StrokePath;
-    var py1 = path[1] - dy;
 
-    if (!src.closePath)
+    var pointPath = [];
+
+    // Don't add the last point to open paths.
+    if (openPath)
     {
         pathLength -= 2;
     }
 
-    for (var i = 2; i < pathLength; i += 2)
+    for (var i = 0; i < pathLength; i += 2)
     {
-        var px2 = path[i] - dx;
+        var x = path[i] - dx;
-        var py2 = path[i + 1] - dy;
+        var y = path[i + 1] - dy;
-
+        if (i > 0)
-        pipeline.batchLine(
+        {
-            px1,
+            if (x === path[i - 2] && y === path[i - 1])
-            py1,
+            {
-            px2,
+                // Duplicate point, skip it
-            py2,
+                continue;
-            halfLineWidth,
+            }
-            halfLineWidth,
+        }
-            lineWidth,
+        pointPath.push({
-            i - 2,
+            x: x,
-            (src.closePath) ? (i === pathLength - 1) : false
+            y: y,
-        );
+            width: lineWidth
-
+        });
-        px1 = px2;
-        py1 = py2;
     }
+
+    strokePath.run(
+        drawingContext,
+        submitter,
+        pointPath,
+        lineWidth,
+        openPath,
+        matrix,
+        strokeTintColor, strokeTintColor, strokeTintColor, strokeTintColor
+    );
 };
 
 module.exports = StrokePathWebGL;

src/gameobjects/shape/arc/ArcWebGLRenderer.js

@@ -19,37 +19,32 @@ var StrokePathWebGL = require('../StrokePathWebGL');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.Arc} src - The Game Object being rendered in this call.
- * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.Renderer.WebGL.DrawingContext} drawingContext - The current drawing context.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var ArcWebGLRenderer = function (renderer, src, camera, parentMatrix)
+var ArcWebGLRenderer = function (renderer, src, drawingContext, parentMatrix)
 {
+    var camera = drawingContext.camera;
     camera.addToRenderList(src);
 
-    var pipeline = renderer.pipelines.set(src.pipeline);
+    var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
-
-    var result = GetCalcMatrix(src, camera, parentMatrix);
-
-    var calcMatrix = pipeline.calcMatrix.copyFrom(result.calc);
 
     var dx = src._displayOriginX;
     var dy = src._displayOriginY;
 
     var alpha = camera.alpha * src.alpha;
 
-    renderer.pipelines.preBatch(src);
+    var submitter = src.customRenderNodes.Submitter || src.defaultRenderNodes.Submitter;
 
     if (src.isFilled)
     {
-        FillPathWebGL(pipeline, calcMatrix, src, alpha, dx, dy);
+        FillPathWebGL(drawingContext, submitter, calcMatrix, src, alpha, dx, dy);
     }
 
     if (src.isStroked)
     {
-        StrokePathWebGL(pipeline, src, alpha, dx, dy);
+        StrokePathWebGL(drawingContext, submitter, calcMatrix, src, alpha, dx, dy);
     }
-
-    renderer.pipelines.postBatch(src);
 };
 
 module.exports = ArcWebGLRenderer;

src/gameobjects/shape/curve/CurveWebGLRenderer.js

@@ -19,37 +19,33 @@ var StrokePathWebGL = require('../StrokePathWebGL');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.Curve} src - The Game Object being rendered in this call.
- * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.Renderer.WebGL.DrawingContext} drawingContext - The current drawing context.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var CurveWebGLRenderer = function (renderer, src, camera, parentMatrix)
+var CurveWebGLRenderer = function (renderer, src, drawingContext, parentMatrix)
 {
+    var camera = drawingContext.camera;
     camera.addToRenderList(src);
 
-    var pipeline = renderer.pipelines.set(src.pipeline);
+    var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
-
-    var result = GetCalcMatrix(src, camera, parentMatrix);
-
-    var calcMatrix = pipeline.calcMatrix.copyFrom(result.calc);
 
+    // Note use of _curveBounds, unlike other path-based Shape objects.
     var dx = src._displayOriginX + src._curveBounds.x;
     var dy = src._displayOriginY + src._curveBounds.y;
 
     var alpha = camera.alpha * src.alpha;
 
-    renderer.pipelines.preBatch(src);
+    var submitter = src.customRenderNodes.Submitter || src.defaultRenderNodes.Submitter;
 
     if (src.isFilled)
     {
-        FillPathWebGL(pipeline, calcMatrix, src, alpha, dx, dy);
+        FillPathWebGL(drawingContext, submitter, calcMatrix, src, alpha, dx, dy);
     }
 
     if (src.isStroked)
     {
-        StrokePathWebGL(pipeline, src, alpha, dx, dy);
+        StrokePathWebGL(drawingContext, submitter, calcMatrix, src, alpha, dx, dy);
     }
-
-    renderer.pipelines.postBatch(src);
 };
 
 module.exports = CurveWebGLRenderer;

src/gameobjects/shape/ellipse/EllipseWebGLRenderer.js

@@ -19,37 +19,32 @@ var StrokePathWebGL = require('../StrokePathWebGL');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.Ellipse} src - The Game Object being rendered in this call.
- * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.Renderer.WebGL.DrawingContext} drawingContext - The current drawing context.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var EllipseWebGLRenderer = function (renderer, src, camera, parentMatrix)
+var EllipseWebGLRenderer = function (renderer, src, drawingContext, parentMatrix)
 {
+    var camera = drawingContext.camera;
     camera.addToRenderList(src);
 
-    var pipeline = renderer.pipelines.set(src.pipeline);
+    var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
-
-    var result = GetCalcMatrix(src, camera, parentMatrix);
-
-    var calcMatrix = pipeline.calcMatrix.copyFrom(result.calc);
 
     var dx = src._displayOriginX;
     var dy = src._displayOriginY;
 
     var alpha = camera.alpha * src.alpha;
 
-    renderer.pipelines.preBatch(src);
+    var submitter = src.customRenderNodes.Submitter || src.defaultRenderNodes.Submitter;
 
     if (src.isFilled)
     {
-        FillPathWebGL(pipeline, calcMatrix, src, alpha, dx, dy);
+        FillPathWebGL(drawingContext, submitter, calcMatrix, src, alpha, dx, dy);
     }
 
     if (src.isStroked)
     {
-        StrokePathWebGL(pipeline, src, alpha, dx, dy);
+        StrokePathWebGL(drawingContext, submitter, calcMatrix, src, alpha, dx, dy);
     }
-
-    renderer.pipelines.postBatch(src);
 };
 
 module.exports = EllipseWebGLRenderer;

src/gameobjects/shape/grid/GridWebGLRenderer.js

@@ -18,18 +18,18 @@ var Utils = require('../../../renderer/webgl/Utils');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.Grid} src - The Game Object being rendered in this call.
- * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.Renderer.WebGL.DrawingContext} drawingContext - The current drawing context.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var GridWebGLRenderer = function (renderer, src, camera, parentMatrix)
+var GridWebGLRenderer = function (renderer, src, drawingContext, parentMatrix)
 {
+    var camera = drawingContext.camera;
     camera.addToRenderList(src);
 
-    var pipeline = renderer.pipelines.set(src.pipeline);
+    var fillRectNode = src.customRenderNodes.FillRect || src.defaultRenderNodes.FillRect;
+    var submitterNode = src.customRenderNodes.Submitter || src.defaultRenderNodes.Submitter;
 
-    var result = GetCalcMatrix(src, camera, parentMatrix);
+    var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
-
-    var calcMatrix = pipeline.calcMatrix.copyFrom(result.calc);
 
     calcMatrix.translate(-src._displayOriginX, -src._displayOriginY);
 
@@ -52,7 +52,6 @@ var GridWebGLRenderer = function (renderer, src, camera, parentMatrix)
     var cellWidthB = cellWidth - ((gridWidth * cellWidth) - width);
     var cellHeightB = cellHeight - ((gridHeight * cellHeight) - height);
 
-    var fillTint;
     var fillTintColor;
 
     var showCells = src.showCells;
@@ -82,18 +81,10 @@ var GridWebGLRenderer = function (renderer, src, camera, parentMatrix)
         }
     }
 
-    renderer.pipelines.preBatch(src);
-
     if (showCells && src.fillAlpha > 0)
     {
-        fillTint = pipeline.fillTint;
         fillTintColor = Utils.getTintAppendFloatAlpha(src.fillColor, src.fillAlpha * alpha);
 
-        fillTint.TL = fillTintColor;
-        fillTint.TR = fillTintColor;
-        fillTint.BL = fillTintColor;
-        fillTint.BR = fillTintColor;
-
         for (y = 0; y < gridHeight; y++)
         {
             if (showAltCells)
@@ -114,11 +105,13 @@ var GridWebGLRenderer = function (renderer, src, camera, parentMatrix)
                 cw = (x < gridWidth - 1) ? cellWidthA : cellWidthB;
                 ch = (y < gridHeight - 1) ? cellHeightA : cellHeightB;
 
-                pipeline.batchFillRect(
+                fillRectNode.run(
-                    x * cellWidth,
+                    drawingContext,
-                    y * cellHeight,
+                    calcMatrix,
-                    cw,
+                    submitterNode,
-                    ch
+                    x * cellWidth, y * cellHeight,
+                    cw, ch,
+                    fillTintColor, fillTintColor, fillTintColor, fillTintColor
                 );
             }
         }
@@ -126,14 +119,8 @@ var GridWebGLRenderer = function (renderer, src, camera, parentMatrix)
 
     if (showAltCells && src.altFillAlpha > 0)
     {
-        fillTint = pipeline.fillTint;
         fillTintColor = Utils.getTintAppendFloatAlpha(src.altFillColor, src.altFillAlpha * alpha);
 
-        fillTint.TL = fillTintColor;
-        fillTint.TR = fillTintColor;
-        fillTint.BL = fillTintColor;
-        fillTint.BR = fillTintColor;
-
         for (y = 0; y < gridHeight; y++)
         {
             if (showAltCells)
@@ -154,11 +141,13 @@ var GridWebGLRenderer = function (renderer, src, camera, parentMatrix)
                 cw = (x < gridWidth - 1) ? cellWidthA : cellWidthB;
                 ch = (y < gridHeight - 1) ? cellHeightA : cellHeightB;
 
-                pipeline.batchFillRect(
+                fillRectNode.run(
-                    x * cellWidth,
+                    drawingContext,
-                    y * cellHeight,
+                    calcMatrix,
-                    cw,
+                    submitterNode,
-                    ch
+                    x * cellWidth, y * cellHeight,
+                    cw, ch,
+                    fillTintColor, fillTintColor, fillTintColor, fillTintColor
                 );
             }
         }
@@ -166,30 +155,36 @@ var GridWebGLRenderer = function (renderer, src, camera, parentMatrix)
 
     if (showOutline && src.outlineFillAlpha > 0)
     {
-        var strokeTint = pipeline.strokeTint;
         var color = Utils.getTintAppendFloatAlpha(src.outlineFillColor, src.outlineFillAlpha * alpha);
 
-        strokeTint.TL = color;
-        strokeTint.TR = color;
-        strokeTint.BL = color;
-        strokeTint.BR = color;
-
         for (x = 1; x < gridWidth; x++)
         {
-            var x1 = x * cellWidth;
+            var x1 = x * cellWidth - 1;
 
-            pipeline.batchLine(x1, 0, x1, height, 1, 1, 1, 0, false);
+            fillRectNode.run(
+                drawingContext,
+                calcMatrix,
+                submitterNode,
+                x1, 0,
+                2, height,
+                color, color, color, color
+            );
         }
 
         for (y = 1; y < gridHeight; y++)
         {
-            var y1 = y * cellHeight;
+            var y1 = y * cellHeight - 1;
 
-            pipeline.batchLine(0, y1, width, y1, 1, 1, 1, 0, false);
+            fillRectNode.run(
+                drawingContext,
+                calcMatrix,
+                submitterNode,
+                0, y1,
+                width, 2,
+                color, color, color, color
+            );
         }
     }
-
-    renderer.pipelines.postBatch(src);
 };
 
 module.exports = GridWebGLRenderer;

src/gameobjects/shape/isobox/IsoBoxWebGLRenderer.js

@@ -18,18 +18,23 @@ var Utils = require('../../../renderer/webgl/Utils');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.IsoBox} src - The Game Object being rendered in this call.
- * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.Renderer.WebGL.DrawingContext} drawingContext - The current drawing context.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var IsoBoxWebGLRenderer = function (renderer, src, camera, parentMatrix)
+var IsoBoxWebGLRenderer = function (renderer, src, drawingContext, parentMatrix)
 {
+    if (!src.isFilled)
+    {
+        return;
+    }
+
+    var camera = drawingContext.camera;
     camera.addToRenderList(src);
 
-    var pipeline = renderer.pipelines.set(src.pipeline);
+    var fillTriNode = src.customRenderNodes.FillTri || src.defaultRenderNodes.FillTri;
+    var submitterNode = src.customRenderNodes.Submitter || src.defaultRenderNodes.Submitter;
 
-    var result = GetCalcMatrix(src, camera, parentMatrix);
+    var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
-
-    var calcMatrix = pipeline.calcMatrix.copyFrom(result.calc);
 
     var size = src.width;
     var height = src.height;
@@ -39,11 +44,6 @@ var IsoBoxWebGLRenderer = function (renderer, src, camera, parentMatrix)
 
     var alpha = camera.alpha * src.alpha;
 
-    if (!src.isFilled)
-    {
-        return;
-    }
-
     var tint;
 
     var x0;
@@ -58,28 +58,26 @@ var IsoBoxWebGLRenderer = function (renderer, src, camera, parentMatrix)
     var x3;
     var y3;
 
-
-    renderer.pipelines.preBatch(src);
-
     //  Top Face
 
     if (src.showTop)
     {
         tint = Utils.getTintAppendFloatAlpha(src.fillTop, alpha);
 
-        x0 = calcMatrix.getX(-sizeA, -height);
+        x0 = -sizeA;
-        y0 = calcMatrix.getY(-sizeA, -height);
+        y0 = -height;
 
-        x1 = calcMatrix.getX(0, -sizeB - height);
+        x1 = 0;
-        y1 = calcMatrix.getY(0, -sizeB - height);
+        y1 = -sizeB - height;
 
-        x2 = calcMatrix.getX(sizeA, -height);
+        x2 = sizeA;
-        y2 = calcMatrix.getY(sizeA, -height);
+        y2 = -height;
 
-        x3 = calcMatrix.getX(0, sizeB - height);
+        x3 = 0;
-        y3 = calcMatrix.getY(0, sizeB - height);
+        y3 = sizeB - height;
 
-        pipeline.batchQuad(src, x0, y0, x1, y1, x2, y2, x3, y3, 0, 0, 1, 1, tint, tint, tint, tint, 2);
+        fillTriNode.run(drawingContext, calcMatrix, submitterNode, x0, y0, x1, y1, x2, y2, tint, tint, tint);
+        fillTriNode.run(drawingContext, calcMatrix, submitterNode, x2, y2, x3, y3, x0, y0, tint, tint, tint);
     }
 
     //  Left Face
@@ -88,19 +86,20 @@ var IsoBoxWebGLRenderer = function (renderer, src, camera, parentMatrix)
     {
         tint = Utils.getTintAppendFloatAlpha(src.fillLeft, alpha);
 
-        x0 = calcMatrix.getX(-sizeA, 0);
+        x0 = -sizeA;
-        y0 = calcMatrix.getY(-sizeA, 0);
+        y0 = 0;
 
-        x1 = calcMatrix.getX(0, sizeB);
+        x1 = 0;
-        y1 = calcMatrix.getY(0, sizeB);
+        y1 = sizeB;
 
-        x2 = calcMatrix.getX(0, sizeB - height);
+        x2 = 0;
-        y2 = calcMatrix.getY(0, sizeB - height);
+        y2 = sizeB - height;
 
-        x3 = calcMatrix.getX(-sizeA, -height);
+        x3 = -sizeA;
-        y3 = calcMatrix.getY(-sizeA, -height);
+        y3 = -height;
 
-        pipeline.batchQuad(src, x0, y0, x1, y1, x2, y2, x3, y3, 0, 0, 1, 1, tint, tint, tint, tint, 2);
+        fillTriNode.run(drawingContext, calcMatrix, submitterNode, x0, y0, x1, y1, x2, y2, tint, tint, tint);
+        fillTriNode.run(drawingContext, calcMatrix, submitterNode, x2, y2, x3, y3, x0, y0, tint, tint, tint);
     }
 
     //  Right Face
@@ -109,22 +108,21 @@ var IsoBoxWebGLRenderer = function (renderer, src, camera, parentMatrix)
     {
         tint = Utils.getTintAppendFloatAlpha(src.fillRight, alpha);
 
-        x0 = calcMatrix.getX(sizeA, 0);
+        x0 = sizeA;
-        y0 = calcMatrix.getY(sizeA, 0);
+        y0 = 0;
 
-        x1 = calcMatrix.getX(0, sizeB);
+        x1 = 0;
-        y1 = calcMatrix.getY(0, sizeB);
+        y1 = sizeB;
 
-        x2 = calcMatrix.getX(0, sizeB - height);
+        x2 = 0;
-        y2 = calcMatrix.getY(0, sizeB - height);
+        y2 = sizeB - height;
 
-        x3 = calcMatrix.getX(sizeA, -height);
+        x3 = sizeA;
-        y3 = calcMatrix.getY(sizeA, -height);
+        y3 = -height;
 
-        pipeline.batchQuad(src, x0, y0, x1, y1, x2, y2, x3, y3, 0, 0, 1, 1, tint, tint, tint, tint, 2);
+        fillTriNode.run(drawingContext, calcMatrix, submitterNode, x0, y0, x1, y1, x2, y2, tint, tint, tint);
+        fillTriNode.run(drawingContext, calcMatrix, submitterNode, x2, y2, x3, y3, x0, y0, tint, tint, tint);
     }
-
-    renderer.pipelines.postBatch(src);
 };
 
 module.exports = IsoBoxWebGLRenderer;

src/gameobjects/shape/isotriangle/IsoTriangleWebGLRenderer.js

@@ -18,18 +18,23 @@ var Utils = require('../../../renderer/webgl/Utils');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.IsoTriangle} src - The Game Object being rendered in this call.
- * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.Renderer.WebGL.DrawingContext} drawingContext - The current drawing context.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var IsoTriangleWebGLRenderer = function (renderer, src, camera, parentMatrix)
+var IsoTriangleWebGLRenderer = function (renderer, src, drawingContext, parentMatrix)
 {
+    if (!src.isFilled)
+    {
+        return;
+    }
+
+    var camera = drawingContext.camera;
     camera.addToRenderList(src);
 
-    var pipeline = renderer.pipelines.set(src.pipeline);
+    var fillTriNode = src.customRenderNodes.FillTri || src.defaultRenderNodes.FillTri;
+    var submitterNode = src.customRenderNodes.Submitter || src.defaultRenderNodes.Submitter;
 
-    var result = GetCalcMatrix(src, camera, parentMatrix);
+    var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
-
-    var calcMatrix = pipeline.calcMatrix.copyFrom(result.calc);
 
     var size = src.width;
     var height = src.height;
@@ -41,13 +46,6 @@ var IsoTriangleWebGLRenderer = function (renderer, src, camera, parentMatrix)
 
     var alpha = camera.alpha * src.alpha;
 
-    if (!src.isFilled)
-    {
-        return;
-    }
-
-    renderer.pipelines.preBatch(src);
-
     var tint;
 
     var x0;
@@ -65,19 +63,20 @@ var IsoTriangleWebGLRenderer = function (renderer, src, camera, parentMatrix)
     {
         tint = Utils.getTintAppendFloatAlpha(src.fillTop, alpha);
 
-        x0 = calcMatrix.getX(-sizeA, -height);
+        x0 = -sizeA;
-        y0 = calcMatrix.getY(-sizeA, -height);
+        y0 = -height;
 
-        x1 = calcMatrix.getX(0, -sizeB - height);
+        x1 = 0;
-        y1 = calcMatrix.getY(0, -sizeB - height);
+        y1 = -sizeB - height;
 
-        x2 = calcMatrix.getX(sizeA, -height);
+        x2 = sizeA;
-        y2 = calcMatrix.getY(sizeA, -height);
+        y2 = -height;
 
-        var x3 = calcMatrix.getX(0, sizeB - height);
+        var x3 = 0;
-        var y3 = calcMatrix.getY(0, sizeB - height);
+        var y3 = sizeB - height;
 
-        pipeline.batchQuad(src, x0, y0, x1, y1, x2, y2, x3, y3, 0, 0, 1, 1, tint, tint, tint, tint, 2);
+        fillTriNode.run(drawingContext, calcMatrix, submitterNode, x0, y0, x1, y1, x2, y2, tint, tint, tint);
+        fillTriNode.run(drawingContext, calcMatrix, submitterNode, x2, y2, x3, y3, x0, y0, tint, tint, tint);
     }
 
     //  Left Face
@@ -88,28 +87,28 @@ var IsoTriangleWebGLRenderer = function (renderer, src, camera, parentMatrix)
 
         if (reversed)
         {
-            x0 = calcMatrix.getX(-sizeA, -height);
+            x0 = -sizeA;
-            y0 = calcMatrix.getY(-sizeA, -height);
+            y0 = -height;
 
-            x1 = calcMatrix.getX(0, sizeB);
+            x1 = 0;
-            y1 = calcMatrix.getY(0, sizeB);
+            y1 = sizeB;
 
-            x2 = calcMatrix.getX(0, sizeB - height);
+            x2 = 0;
-            y2 = calcMatrix.getY(0, sizeB - height);
+            y2 = sizeB - height;
         }
         else
         {
-            x0 = calcMatrix.getX(-sizeA, 0);
+            x0 = -sizeA;
-            y0 = calcMatrix.getY(-sizeA, 0);
+            y0 = 0;
 
-            x1 = calcMatrix.getX(0, sizeB);
+            x1 = 0;
-            y1 = calcMatrix.getY(0, sizeB);
+            y1 = sizeB;
 
-            x2 = calcMatrix.getX(0, sizeB - height);
+            x2 = 0;
-            y2 = calcMatrix.getY(0, sizeB - height);
+            y2 = sizeB - height;
         }
 
-        pipeline.batchTri(src, x0, y0, x1, y1, x2, y2, 0, 0, 1, 1, tint, tint, tint, 2);
+        fillTriNode.run(drawingContext, calcMatrix, submitterNode, x0, y0, x1, y1, x2, y2, tint, tint, tint);
     }
 
     //  Right Face
@@ -120,31 +119,29 @@ var IsoTriangleWebGLRenderer = function (renderer, src, camera, parentMatrix)
 
         if (reversed)
         {
-            x0 = calcMatrix.getX(sizeA, -height);
+            x0 = sizeA;
-            y0 = calcMatrix.getY(sizeA, -height);
+            y0 = -height;
 
-            x1 = calcMatrix.getX(0, sizeB);
+            x1 = 0;
-            y1 = calcMatrix.getY(0, sizeB);
+            y1 = sizeB;
 
-            x2 = calcMatrix.getX(0, sizeB - height);
+            x2 = 0;
-            y2 = calcMatrix.getY(0, sizeB - height);
+            y2 = sizeB - height;
         }
         else
         {
-            x0 = calcMatrix.getX(sizeA, 0);
+            x0 = sizeA;
-            y0 = calcMatrix.getY(sizeA, 0);
+            y0 = 0;
 
-            x1 = calcMatrix.getX(0, sizeB);
+            x1 = 0;
-            y1 = calcMatrix.getY(0, sizeB);
+            y1 = sizeB;
 
-            x2 = calcMatrix.getX(0, sizeB - height);
+            x2 = 0;
-            y2 = calcMatrix.getY(0, sizeB - height);
+            y2 = sizeB - height;
         }
 
-        pipeline.batchTri(src, x0, y0, x1, y1, x2, y2, 0, 0, 1, 1, tint, tint, tint, 2);
+        fillTriNode.run(drawingContext, calcMatrix, submitterNode, x0, y0, x1, y1, x2, y2, tint, tint, tint);
     }
-
-    renderer.pipelines.postBatch(src);
 };
 
 module.exports = IsoTriangleWebGLRenderer;

src/gameobjects/shape/line/LineWebGLRenderer.js

@@ -7,6 +7,15 @@
 var GetCalcMatrix = require('../../GetCalcMatrix');
 var Utils = require('../../../renderer/webgl/Utils');
 
+var tempPath = [
+    {
+        x: 0, y: 0, width: 0
+    },
+    {
+        x: 0, y: 0, width: 0
+    }
+];
+
 /**
  * Renders this Game Object with the WebGL Renderer to the given Camera.
  * The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
@@ -18,51 +27,42 @@ var Utils = require('../../../renderer/webgl/Utils');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.Line} src - The Game Object being rendered in this call.
- * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.Renderer.WebGL.DrawingContext} drawingContext - The current drawing context.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var LineWebGLRenderer = function (renderer, src, camera, parentMatrix)
+var LineWebGLRenderer = function (renderer, src, drawingContext, parentMatrix)
 {
+    var camera = drawingContext.camera;
     camera.addToRenderList(src);
 
-    var pipeline = renderer.pipelines.set(src.pipeline);
+    var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
-
-    var result = GetCalcMatrix(src, camera, parentMatrix);
-
-    pipeline.calcMatrix.copyFrom(result.calc);
 
     var dx = src._displayOriginX;
     var dy = src._displayOriginY;
     var alpha = camera.alpha * src.alpha;
 
-    renderer.pipelines.preBatch(src);
-
     if (src.isStroked)
     {
-        var strokeTint = pipeline.strokeTint;
         var color = Utils.getTintAppendFloatAlpha(src.strokeColor, src.strokeAlpha * alpha);
 
-        strokeTint.TL = color;
+        tempPath[0].x = src.geom.x1 - dx;
-        strokeTint.TR = color;
+        tempPath[0].y = src.geom.y1 - dy;
-        strokeTint.BL = color;
+        tempPath[0].width = src._startWidth;
-        strokeTint.BR = color;
 
-        pipeline.batchLine(
+        tempPath[1].x = src.geom.x2 - dx;
-            src.geom.x1 - dx,
+        tempPath[1].y = src.geom.y2 - dy;
-            src.geom.y1 - dy,
+        tempPath[1].width = src._endWidth;
-            src.geom.x2 - dx,
+
-            src.geom.y2 - dy,
+        (src.customRenderNodes.StrokePath || src.defaultRenderNodes.StrokePath).run(
-            src._startWidth / 2,
+            drawingContext,
-            src._endWidth / 2,
+            src.customRenderNodes.Submitter || src.defaultRenderNodes.Submitter,
+            tempPath,
             1,
-            0,
+            true,
-            false,
+            calcMatrix,
-            result.sprite,
+            color, color, color, color
-            result.camera
         );
     }
-
-    renderer.pipelines.postBatch(src);
 };
 
 module.exports = LineWebGLRenderer;

src/gameobjects/shape/polygon/PolygonWebGLRenderer.js

@@ -22,34 +22,29 @@ var StrokePathWebGL = require('../StrokePathWebGL');
  * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var PolygonWebGLRenderer = function (renderer, src, camera, parentMatrix)
+var PolygonWebGLRenderer = function (renderer, src, drawingContext, parentMatrix)
 {
+    var camera = drawingContext.camera;
     camera.addToRenderList(src);
 
-    var pipeline = renderer.pipelines.set(src.pipeline);
+    var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
-
-    var result = GetCalcMatrix(src, camera, parentMatrix);
-
-    var calcMatrix = pipeline.calcMatrix.copyFrom(result.calc);
 
     var dx = src._displayOriginX;
     var dy = src._displayOriginY;
 
     var alpha = camera.alpha * src.alpha;
 
-    renderer.pipelines.preBatch(src);
+    var submitter = src.customRenderNodes.Submitter || src.defaultRenderNodes.Submitter;
 
     if (src.isFilled)
     {
-        FillPathWebGL(pipeline, calcMatrix, src, alpha, dx, dy);
+        FillPathWebGL(drawingContext, submitter, calcMatrix, src, alpha, dx, dy);
     }
 
     if (src.isStroked)
     {
-        StrokePathWebGL(pipeline, src, alpha, dx, dy);
+        StrokePathWebGL(drawingContext, submitter, calcMatrix, src, alpha, dx, dy);
     }
-
-    renderer.pipelines.postBatch(src);
 };
 
 module.exports = PolygonWebGLRenderer;

src/gameobjects/shape/rectangle/RectangleWebGLRenderer.js

@@ -19,49 +19,45 @@ var Utils = require('../../../renderer/webgl/Utils');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.Rectangle} src - The Game Object being rendered in this call.
- * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.Renderer.WebGL.DrawingContext} drawingContext - The current drawing context.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var RectangleWebGLRenderer = function (renderer, src, camera, parentMatrix)
+var RectangleWebGLRenderer = function (renderer, src, drawingContext, parentMatrix)
 {
+    var camera = drawingContext.camera;
     camera.addToRenderList(src);
 
-    var pipeline = renderer.pipelines.set(src.pipeline);
+    var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
-
-    var result = GetCalcMatrix(src, camera, parentMatrix);
-
-    pipeline.calcMatrix.copyFrom(result.calc);
 
     var dx = src._displayOriginX;
     var dy = src._displayOriginY;
     var alpha = camera.alpha * src.alpha;
 
-    renderer.pipelines.preBatch(src);
+    var customRenderNodes = this.customRenderNodes;
+    var defaultRenderNodes = this.defaultRenderNodes;
+    var submitter = customRenderNodes.Submitter || defaultRenderNodes.Submitter;
 
     if (src.isFilled)
     {
-        var fillTint = pipeline.fillTint;
         var fillTintColor = Utils.getTintAppendFloatAlpha(src.fillColor, src.fillAlpha * alpha);
 
-        fillTint.TL = fillTintColor;
+        (customRenderNodes.FillRect || defaultRenderNodes.FillRect).run(
-        fillTint.TR = fillTintColor;
+            drawingContext,
-        fillTint.BL = fillTintColor;
+            calcMatrix,
-        fillTint.BR = fillTintColor;
+            submitter,
-
+            -dx, -dy,
-        pipeline.batchFillRect(
+            src.width, src.height,
-            -dx,
+            fillTintColor,
-            -dy,
+            fillTintColor,
-            src.width,
+            fillTintColor,
-            src.height
+            fillTintColor
         );
     }
 
     if (src.isStroked)
     {
-        StrokePathWebGL(pipeline, src, alpha, dx, dy);
+        StrokePathWebGL(drawingContext, submitter, calcMatrix, src, alpha, dx, dy);
     }
-
-    renderer.pipelines.postBatch(src);
 };
 
 module.exports = RectangleWebGLRenderer;

src/gameobjects/shape/star/StarWebGLRenderer.js

@@ -19,37 +19,32 @@ var StrokePathWebGL = require('../StrokePathWebGL');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.Star} src - The Game Object being rendered in this call.
- * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.Renderer.WebGL.DrawingContext} drawingContext - The current drawing context.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var StarWebGLRenderer = function (renderer, src, camera, parentMatrix)
+var StarWebGLRenderer = function (renderer, src, drawingContext, parentMatrix)
 {
+    var camera = drawingContext.camera;
     camera.addToRenderList(src);
 
-    var pipeline = renderer.pipelines.set(src.pipeline);
+    var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
-
-    var result = GetCalcMatrix(src, camera, parentMatrix);
-
-    var calcMatrix = pipeline.calcMatrix.copyFrom(result.calc);
 
     var dx = src._displayOriginX;
     var dy = src._displayOriginY;
 
     var alpha = camera.alpha * src.alpha;
 
-    renderer.pipelines.preBatch(src);
+    var submitter = src.customRenderNodes.Submitter || src.defaultRenderNodes.Submitter;
 
     if (src.isFilled)
     {
-        FillPathWebGL(pipeline, calcMatrix, src, alpha, dx, dy);
+        FillPathWebGL(drawingContext, submitter, calcMatrix, src, alpha, dx, dy);
     }
 
     if (src.isStroked)
     {
-        StrokePathWebGL(pipeline, src, alpha, dx, dy);
+        StrokePathWebGL(drawingContext, submitter, calcMatrix, src, alpha, dx, dy);
     }
-
-    renderer.pipelines.postBatch(src);
 };
 
 module.exports = StarWebGLRenderer;

src/gameobjects/shape/triangle/TriangleWebGLRenderer.js

@@ -19,35 +19,28 @@ var Utils = require('../../../renderer/webgl/Utils');
  *
  * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
  * @param {Phaser.GameObjects.Triangle} src - The Game Object being rendered in this call.
- * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.Renderer.WebGL.DrawingContext} drawingContext - The current drawing context.
  * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
  */
-var TriangleWebGLRenderer = function (renderer, src, camera, parentMatrix)
+var TriangleWebGLRenderer = function (renderer, src, drawingContext, parentMatrix)
 {
+    var camera = drawingContext.camera;
     camera.addToRenderList(src);
 
-    var pipeline = renderer.pipelines.set(src.pipeline);
+    var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
-
-    var result = GetCalcMatrix(src, camera, parentMatrix);
-
-    pipeline.calcMatrix.copyFrom(result.calc);
 
     var dx = src._displayOriginX;
     var dy = src._displayOriginY;
     var alpha = camera.alpha * src.alpha;
 
-    renderer.pipelines.preBatch(src);
+    var customRenderNodes = this.customRenderNodes;
+    var defaultRenderNodes = this.defaultRenderNodes;
+    var submitter = customRenderNodes.Submitter || defaultRenderNodes.Submitter;
 
     if (src.isFilled)
     {
-        var fillTint = pipeline.fillTint;
         var fillTintColor = Utils.getTintAppendFloatAlpha(src.fillColor, src.fillAlpha * alpha);
 
-        fillTint.TL = fillTintColor;
-        fillTint.TR = fillTintColor;
-        fillTint.BL = fillTintColor;
-        fillTint.BR = fillTintColor;
-
         var x1 = src.geom.x1 - dx;
         var y1 = src.geom.y1 - dy;
         var x2 = src.geom.x2 - dx;
@@ -55,24 +48,26 @@ var TriangleWebGLRenderer = function (renderer, src, camera, parentMatrix)
         var x3 = src.geom.x3 - dx;
         var y3 = src.geom.y3 - dy;
 
-        pipeline.batchFillTriangle(
+        (customRenderNodes.FillTri || defaultRenderNodes.FillTri).run(
+            drawingContext,
+            calcMatrix,
+            submitter,
             x1,
             y1,
             x2,
             y2,
             x3,
             y3,
-            result.sprite,
+            fillTintColor,
-            result.camera
+            fillTintColor,
+            fillTintColor
         );
     }
 
     if (src.isStroked)
     {
-        StrokePathWebGL(pipeline, src, alpha, dx, dy);
+        StrokePathWebGL(drawingContext, submitter, calcMatrix, src, alpha, dx, dy);
     }
-
-    renderer.pipelines.postBatch(src);
 };
 
 module.exports = TriangleWebGLRenderer;