From 227e5f520857baffdf8c27aaa530b0b132e3d0db Mon Sep 17 00:00:00 2001 From: Ben Richards Date: Wed, 26 Jun 2024 15:34:11 +1200 Subject: [PATCH] Add Shape rendering, using the Graphics render nodes. --- src/gameobjects/graphics/Graphics.js | 5 + src/gameobjects/shape/FillPathWebGL.js | 53 +++++----- src/gameobjects/shape/Shape.js | 11 ++- src/gameobjects/shape/StrokePathWebGL.js | 66 +++++++------ src/gameobjects/shape/arc/ArcWebGLRenderer.js | 19 ++-- .../shape/curve/CurveWebGLRenderer.js | 20 ++-- .../shape/ellipse/EllipseWebGLRenderer.js | 19 ++-- .../shape/grid/GridWebGLRenderer.js | 81 ++++++++-------- .../shape/isobox/IsoBoxWebGLRenderer.js | 84 ++++++++-------- .../isotriangle/IsoTriangleWebGLRenderer.js | 97 +++++++++---------- .../shape/line/LineWebGLRenderer.js | 54 +++++------ .../shape/polygon/PolygonWebGLRenderer.js | 17 ++-- .../shape/rectangle/RectangleWebGLRenderer.js | 40 ++++---- .../shape/star/StarWebGLRenderer.js | 19 ++-- .../shape/triangle/TriangleWebGLRenderer.js | 35 +++---- 15 files changed, 301 insertions(+), 319 deletions(-) diff --git a/src/gameobjects/graphics/Graphics.js b/src/gameobjects/graphics/Graphics.js index a2e858178..0eb82b096 100644 --- a/src/gameobjects/graphics/Graphics.js +++ b/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. * diff --git a/src/gameobjects/shape/FillPathWebGL.js b/src/gameobjects/shape/FillPathWebGL.js index 2ce2356f7..55ff55a34 100644 --- a/src/gameobjects/shape/FillPathWebGL.js +++ b/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; - var p1 = pathIndexes[i + 1] * 2; - var p2 = pathIndexes[i + 2] * 2; + pointX = path[pathIndex] - dx; + pointY = path[pathIndex + 1] - dy; - var x0 = path[p0 + 0] - dx; - var y0 = path[p0 + 1] - dy; - var x1 = path[p1 + 0] - dx; - var y1 = path[p1 + 1] - dy; - var x2 = path[p2 + 0] - dx; - var y2 = path[p2 + 1] - dy; + // Transform the point. + x = calcMatrix.getX(pointX, pointY); + y = calcMatrix.getY(pointX, pointY); - var tx0 = calcMatrix.getX(x0, y0); - var ty0 = calcMatrix.getY(x0, y0); - - 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); + vertices[verticesIndex++] = x; + vertices[verticesIndex++] = y; + colors[colorsIndex++] = fillTintColor; } + + submitter.batch( + drawingContext, + pathIndexes, + vertices, + colors + ); }; module.exports = FillPathWebGL; diff --git a/src/gameobjects/shape/Shape.js b/src/gameobjects/shape/Shape.js index c90ff70ca..8d512ff44 100644 --- a/src/gameobjects/shape/Shape.js +++ b/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(); }, diff --git a/src/gameobjects/shape/StrokePathWebGL.js b/src/gameobjects/shape/StrokePathWebGL.js index 6b13aa762..f9a56bfbc 100644 --- a/src/gameobjects/shape/StrokePathWebGL.js +++ b/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 py1 = path[1] - dy; + var strokePath = src.customRenderNodes.StrokePath || src.defaultRenderNodes.StrokePath; - 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 py2 = path[i + 1] - dy; - - pipeline.batchLine( - px1, - py1, - px2, - py2, - halfLineWidth, - halfLineWidth, - lineWidth, - i - 2, - (src.closePath) ? (i === pathLength - 1) : false - ); - - px1 = px2; - py1 = py2; + var x = path[i] - dx; + var y = path[i + 1] - dy; + if (i > 0) + { + if (x === path[i - 2] && y === path[i - 1]) + { + // Duplicate point, skip it + continue; + } + } + pointPath.push({ + x: x, + y: y, + width: lineWidth + }); } + + strokePath.run( + drawingContext, + submitter, + pointPath, + lineWidth, + openPath, + matrix, + strokeTintColor, strokeTintColor, strokeTintColor, strokeTintColor + ); }; module.exports = StrokePathWebGL; diff --git a/src/gameobjects/shape/arc/ArcWebGLRenderer.js b/src/gameobjects/shape/arc/ArcWebGLRenderer.js index d56bba96a..b8a57db18 100644 --- a/src/gameobjects/shape/arc/ArcWebGLRenderer.js +++ b/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 result = GetCalcMatrix(src, camera, parentMatrix); - - var calcMatrix = pipeline.calcMatrix.copyFrom(result.calc); + var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).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; diff --git a/src/gameobjects/shape/curve/CurveWebGLRenderer.js b/src/gameobjects/shape/curve/CurveWebGLRenderer.js index 7594de4a4..46d48c0f0 100644 --- a/src/gameobjects/shape/curve/CurveWebGLRenderer.js +++ b/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 result = GetCalcMatrix(src, camera, parentMatrix); - - var calcMatrix = pipeline.calcMatrix.copyFrom(result.calc); + var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).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; diff --git a/src/gameobjects/shape/ellipse/EllipseWebGLRenderer.js b/src/gameobjects/shape/ellipse/EllipseWebGLRenderer.js index 1b8259cf3..bc19d4068 100644 --- a/src/gameobjects/shape/ellipse/EllipseWebGLRenderer.js +++ b/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 result = GetCalcMatrix(src, camera, parentMatrix); - - var calcMatrix = pipeline.calcMatrix.copyFrom(result.calc); + var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).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; diff --git a/src/gameobjects/shape/grid/GridWebGLRenderer.js b/src/gameobjects/shape/grid/GridWebGLRenderer.js index a8b120001..f06fd3047 100644 --- a/src/gameobjects/shape/grid/GridWebGLRenderer.js +++ b/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 = pipeline.calcMatrix.copyFrom(result.calc); + var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).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( - x * cellWidth, - y * cellHeight, - cw, - ch + fillRectNode.run( + drawingContext, + calcMatrix, + submitterNode, + 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( - x * cellWidth, - y * cellHeight, - cw, - ch + fillRectNode.run( + drawingContext, + calcMatrix, + submitterNode, + 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; diff --git a/src/gameobjects/shape/isobox/IsoBoxWebGLRenderer.js b/src/gameobjects/shape/isobox/IsoBoxWebGLRenderer.js index 42bd91cd6..b7010d5f8 100644 --- a/src/gameobjects/shape/isobox/IsoBoxWebGLRenderer.js +++ b/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 = pipeline.calcMatrix.copyFrom(result.calc); + var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).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); - y0 = calcMatrix.getY(-sizeA, -height); + x0 = -sizeA; + y0 = -height; - x1 = calcMatrix.getX(0, -sizeB - height); - y1 = calcMatrix.getY(0, -sizeB - height); + x1 = 0; + y1 = -sizeB - height; - x2 = calcMatrix.getX(sizeA, -height); - y2 = calcMatrix.getY(sizeA, -height); + x2 = sizeA; + y2 = -height; - x3 = calcMatrix.getX(0, sizeB - height); - y3 = calcMatrix.getY(0, sizeB - height); + x3 = 0; + 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); - y0 = calcMatrix.getY(-sizeA, 0); + x0 = -sizeA; + y0 = 0; - x1 = calcMatrix.getX(0, sizeB); - y1 = calcMatrix.getY(0, sizeB); + x1 = 0; + y1 = sizeB; - x2 = calcMatrix.getX(0, sizeB - height); - y2 = calcMatrix.getY(0, sizeB - height); + x2 = 0; + y2 = sizeB - height; - x3 = calcMatrix.getX(-sizeA, -height); - y3 = calcMatrix.getY(-sizeA, -height); + x3 = -sizeA; + 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); - y0 = calcMatrix.getY(sizeA, 0); + x0 = sizeA; + y0 = 0; - x1 = calcMatrix.getX(0, sizeB); - y1 = calcMatrix.getY(0, sizeB); + x1 = 0; + y1 = sizeB; - x2 = calcMatrix.getX(0, sizeB - height); - y2 = calcMatrix.getY(0, sizeB - height); + x2 = 0; + y2 = sizeB - height; - x3 = calcMatrix.getX(sizeA, -height); - y3 = calcMatrix.getY(sizeA, -height); + x3 = sizeA; + 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; diff --git a/src/gameobjects/shape/isotriangle/IsoTriangleWebGLRenderer.js b/src/gameobjects/shape/isotriangle/IsoTriangleWebGLRenderer.js index 75456f89f..7a793116b 100644 --- a/src/gameobjects/shape/isotriangle/IsoTriangleWebGLRenderer.js +++ b/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 = pipeline.calcMatrix.copyFrom(result.calc); + var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).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); - y0 = calcMatrix.getY(-sizeA, -height); + x0 = -sizeA; + y0 = -height; - x1 = calcMatrix.getX(0, -sizeB - height); - y1 = calcMatrix.getY(0, -sizeB - height); + x1 = 0; + y1 = -sizeB - height; - x2 = calcMatrix.getX(sizeA, -height); - y2 = calcMatrix.getY(sizeA, -height); + x2 = sizeA; + y2 = -height; - var x3 = calcMatrix.getX(0, sizeB - height); - var y3 = calcMatrix.getY(0, sizeB - height); + var x3 = 0; + 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); - y0 = calcMatrix.getY(-sizeA, -height); + x0 = -sizeA; + y0 = -height; - x1 = calcMatrix.getX(0, sizeB); - y1 = calcMatrix.getY(0, sizeB); + x1 = 0; + y1 = sizeB; - x2 = calcMatrix.getX(0, sizeB - height); - y2 = calcMatrix.getY(0, sizeB - height); + x2 = 0; + y2 = sizeB - height; } else { - x0 = calcMatrix.getX(-sizeA, 0); - y0 = calcMatrix.getY(-sizeA, 0); + x0 = -sizeA; + y0 = 0; - x1 = calcMatrix.getX(0, sizeB); - y1 = calcMatrix.getY(0, sizeB); + x1 = 0; + y1 = sizeB; - x2 = calcMatrix.getX(0, sizeB - height); - y2 = calcMatrix.getY(0, sizeB - height); + x2 = 0; + 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); - y0 = calcMatrix.getY(sizeA, -height); + x0 = sizeA; + y0 = -height; - x1 = calcMatrix.getX(0, sizeB); - y1 = calcMatrix.getY(0, sizeB); + x1 = 0; + y1 = sizeB; - x2 = calcMatrix.getX(0, sizeB - height); - y2 = calcMatrix.getY(0, sizeB - height); + x2 = 0; + y2 = sizeB - height; } else { - x0 = calcMatrix.getX(sizeA, 0); - y0 = calcMatrix.getY(sizeA, 0); + x0 = sizeA; + y0 = 0; - x1 = calcMatrix.getX(0, sizeB); - y1 = calcMatrix.getY(0, sizeB); + x1 = 0; + y1 = sizeB; - x2 = calcMatrix.getX(0, sizeB - height); - y2 = calcMatrix.getY(0, sizeB - height); + x2 = 0; + 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; diff --git a/src/gameobjects/shape/line/LineWebGLRenderer.js b/src/gameobjects/shape/line/LineWebGLRenderer.js index a53ef9795..345e39faa 100644 --- a/src/gameobjects/shape/line/LineWebGLRenderer.js +++ b/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 result = GetCalcMatrix(src, camera, parentMatrix); - - pipeline.calcMatrix.copyFrom(result.calc); + var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).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; - strokeTint.TR = color; - strokeTint.BL = color; - strokeTint.BR = color; + tempPath[0].x = src.geom.x1 - dx; + tempPath[0].y = src.geom.y1 - dy; + tempPath[0].width = src._startWidth; - pipeline.batchLine( - src.geom.x1 - dx, - src.geom.y1 - dy, - src.geom.x2 - dx, - src.geom.y2 - dy, - src._startWidth / 2, - src._endWidth / 2, + tempPath[1].x = src.geom.x2 - dx; + tempPath[1].y = src.geom.y2 - dy; + tempPath[1].width = src._endWidth; + + (src.customRenderNodes.StrokePath || src.defaultRenderNodes.StrokePath).run( + drawingContext, + src.customRenderNodes.Submitter || src.defaultRenderNodes.Submitter, + tempPath, 1, - 0, - false, - result.sprite, - result.camera + true, + calcMatrix, + color, color, color, color ); } - - renderer.pipelines.postBatch(src); }; module.exports = LineWebGLRenderer; diff --git a/src/gameobjects/shape/polygon/PolygonWebGLRenderer.js b/src/gameobjects/shape/polygon/PolygonWebGLRenderer.js index 0a4589342..58e81c8e2 100644 --- a/src/gameobjects/shape/polygon/PolygonWebGLRenderer.js +++ b/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 result = GetCalcMatrix(src, camera, parentMatrix); - - var calcMatrix = pipeline.calcMatrix.copyFrom(result.calc); + var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).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; diff --git a/src/gameobjects/shape/rectangle/RectangleWebGLRenderer.js b/src/gameobjects/shape/rectangle/RectangleWebGLRenderer.js index a44e28dc8..fd7e063aa 100644 --- a/src/gameobjects/shape/rectangle/RectangleWebGLRenderer.js +++ b/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 result = GetCalcMatrix(src, camera, parentMatrix); - - pipeline.calcMatrix.copyFrom(result.calc); + var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).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; - - pipeline.batchFillRect( - -dx, - -dy, - src.width, - src.height + (customRenderNodes.FillRect || defaultRenderNodes.FillRect).run( + drawingContext, + calcMatrix, + submitter, + -dx, -dy, + src.width, src.height, + fillTintColor, + fillTintColor, + 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 = RectangleWebGLRenderer; diff --git a/src/gameobjects/shape/star/StarWebGLRenderer.js b/src/gameobjects/shape/star/StarWebGLRenderer.js index ae5329067..c38bc67a4 100644 --- a/src/gameobjects/shape/star/StarWebGLRenderer.js +++ b/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 result = GetCalcMatrix(src, camera, parentMatrix); - - var calcMatrix = pipeline.calcMatrix.copyFrom(result.calc); + var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).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; diff --git a/src/gameobjects/shape/triangle/TriangleWebGLRenderer.js b/src/gameobjects/shape/triangle/TriangleWebGLRenderer.js index 69161d6a9..e476b1287 100644 --- a/src/gameobjects/shape/triangle/TriangleWebGLRenderer.js +++ b/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 result = GetCalcMatrix(src, camera, parentMatrix); - - pipeline.calcMatrix.copyFrom(result.calc); + var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).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, - result.camera + fillTintColor, + 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;