phaser/wip/gameobjects/graphics/GraphicsWebGLRenderer.js

//  Graphics

Phaser.Renderer.WebGL.GameObjects.Graphics = {

    TYPES: [
        Phaser.GameObject.Graphics.prototype
    ],

    circleSegments: 40,

    graphicsDataPool: [],

    render: function (renderer, src)
    {
        if (src.visible === false || src.alpha === 0 || src.isMask === true)
        {
            return;
        }

        if (src._cacheAsBitmap)
        {
            if (src.dirty || src.cachedSpriteDirty)
            {
                src._generateCachedSprite();
       
                // we will also need to update the texture on the gpu too!
                src.updateCachedSpriteTexture();

                src.cachedSpriteDirty = false;
                src.dirty = false;
            }

            src._cachedSprite.worldAlpha = src.worldAlpha;

            // PIXI.Sprite.prototype._renderWebGL.call(this._cachedSprite, renderSession);

            return;
        }

        renderer.spriteBatch.stop();
        renderer.setBlendMode(src.blendMode);

        if (src._mask)
        {
            renderer.pushMask(src._mask);
        }

        if (src._filters)
        {
            renderer.filterManager.pushFilter(src._filterBlock);
        }
      
        // check blend mode
        if (src.blendMode !== renderer.spriteBatch.currentBlendMode)
        {
            renderer.spriteBatch.currentBlendMode = src.blendMode;

            var blendModeWebGL = renderer.blendModes[renderer.spriteBatch.currentBlendMode];

            renderer.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]);
        }
        
        // check if the webgl graphic needs to be updated
        if (src.webGLDirty)
        {
            src.dirty = true;
            src.webGLDirty = false;
        }
        
        var gl = renderer.gl;
        var offset = renderer.offset;
        var projection = renderer.projection;
        var shader = renderer.shaderManager.primitiveShader;
        var webGLData;

        if (src.dirty)
        {
            Phaser.Renderer.WebGL.GameObjects.Graphics.updateGraphics(renderer, src);
        }

        for (var i = 0; i < src._webGL.data.length; i++)
        {
            webGLData = src._webGL.data[i];

            if (webGLData.mode === 1)
            {
                renderer.stencilManager.pushStencil(src, webGLData);

                gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, (webGLData.indices.length - 4) * 2);
                
                renderer.stencilManager.popStencil(src, webGLData);
            }
            else
            {
                renderer.shaderManager.setShader(shader);

                // shader = renderSession.shaderManager.primitiveShader;

                gl.uniformMatrix3fv(shader.translationMatrix, false, src.worldTransform.toArray(true));
                
                gl.uniform1f(shader.flipY, 1);
                
                gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
                gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);

                gl.uniform3fv(shader.tintColor, Phaser.Color.hexToRGBArray(src.tint));

                gl.uniform1f(shader.alpha, src.worldAlpha);

                gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer);

                gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0);

                gl.vertexAttribPointer(shader.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4);

                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer);

                gl.drawElements(gl.TRIANGLE_STRIP, webGLData.indices.length, gl.UNSIGNED_SHORT, 0);
            }
        }
        
        //  Only render if it has children!
        if (src.children.length)
        {
            renderer.spriteBatch.start();

            for (var i = 0; i < src.children.length; i++)
            {
                var child = src.children[i];
                child.render(renderer, child);
            }

            renderer.spriteBatch.stop();
        }

        if (src._filters)
        {
            renderer.filterManager.popFilter();
        }

        if (src._mask)
        {
            renderer.popMask(src.mask);
        }
          
        renderer.drawCount++;

        renderer.spriteBatch.start();
    },

    /**
     * Updates the graphics object
     *
     * @static
     * @private
     * @method updateGraphics
     * @param graphicsData {Graphics} The graphics object to update
     * @param gl {WebGLContext} the current WebGL drawing context
     */
    updateGraphics: function (renderer, graphics)
    {
        var gl = renderer.gl;
        var webGL = graphics._webGL;

        //  If the graphics object does not exist in the webGL context time to create it!
        if (!webGL)
        {
            webGL = graphics._webGL = { lastIndex: 0, data: [], gl: gl };
        }

        //  Flag the graphics as not dirty as we are about to update it
        graphics.dirty = false;

        var i;

        //  If the user cleared the graphics object we will need to clear every object
        if (graphics.clearDirty)
        {
            graphics.clearDirty = false;

            // loop through and return all the webGLDatas to the object pool so than can be reused later on
            for (i = 0; i < webGL.data.length; i++)
            {
                var graphicsData = webGL.data[i];

                graphicsData.reset();

                Phaser.Renderer.WebGL.GameObjects.Graphics.graphicsDataPool.push(graphicsData);
            }

            //  Clear the array and reset the index
            webGL.data = [];
            webGL.lastIndex = 0;
        }
        
        var webGLData;
        
        //  Loop through the Graphics data.
        //  If the object is complex, use the Stencil Buffer.
        //  Otherwise add the object into the batch.

        for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++)
        {
            var data = graphics.graphicsData[i];

            switch (data.type)
            {
                case Phaser.RECTANGLE:

                    webGLData = Phaser.Renderer.WebGL.GameObjects.Graphics.switchMode(webGL, 0);
                    Phaser.Renderer.WebGL.GameObjects.Graphics.buildRectangle(data, webGLData);

                    break;

                case Phaser.CIRCLE:
                case Phaser.ELLIPSE:

                    webGLData = Phaser.Renderer.WebGL.GameObjects.Graphics.switchMode(webGL, 0);
                    Phaser.Renderer.WebGL.GameObjects.Graphics.buildCircle(data, webGLData);

                    break;

                case Phaser.ROUNDEDRECTANGLE:

                    webGLData = Phaser.Renderer.WebGL.GameObjects.Graphics.switchMode(webGL, 0);
                    Phaser.Renderer.WebGL.GameObjects.Graphics.buildRoundedRectangle(data, webGLData);

                    break;

                case Phaser.POLYGON:

                    //  Need to add the points the the graphics object
                    data.points = data.shape.points.slice();

                    if (data.shape.closed)
                    {
                        //  Close the poly if the value is true!
                        if (data.points[0] !== data.points[data.points.length - 2] || data.points[1] !== data.points[data.points.length - 1])
                        {
                            data.points.push(data.points[0], data.points[1]);
                        }
                    }

                    //  Check the type
                    if (data.fill)
                    {
                        if (data.points.length >= renderer.stencilBufferLimit)
                        {
                            if (data.points.length < renderer.stencilBufferLimit * 2)
                            {
                                webGLData = Phaser.Renderer.WebGL.GameObjects.Graphics.switchMode(webGL, 0);
                                
                                var canDrawUsingSimple = Phaser.Renderer.WebGL.GameObjects.Graphics.buildPoly(data, webGLData);

                                if (!canDrawUsingSimple)
                                {
                                    webGLData = Phaser.Renderer.WebGL.GameObjects.Graphics.switchMode(webGL, 1);
                                    Phaser.Renderer.WebGL.GameObjects.Graphics.buildComplexPoly(data, webGLData);
                                }
                            }
                            else
                            {
                                webGLData = Phaser.Renderer.WebGL.GameObjects.Graphics.switchMode(webGL, 1);
                                Phaser.Renderer.WebGL.GameObjects.Graphics.buildComplexPoly(data, webGLData);
                            }
                        }
                    }

                    if (data.lineWidth > 0)
                    {
                        webGLData = Phaser.Renderer.WebGL.GameObjects.Graphics.switchMode(webGL, 0);
                        Phaser.Renderer.WebGL.GameObjects.Graphics.buildLine(data, webGLData);
                    }

                    break;
            }

            webGL.lastIndex++;
        }

        //  Upload all the dirty data
        for (i = 0; i < webGL.data.length; i++)
        {
            webGLData = webGL.data[i];

            if (webGLData.dirty)
            {
                webGLData.upload();
            }
        }
    },

    switchMode: function (webGL, type)
    {
        var webGLData;

        if (!webGL.data.length)
        {
            webGLData = Phaser.Renderer.WebGL.GameObjects.Graphics.graphicsDataPool.pop() || new Phaser.Renderer.WebGL.GameObjects.GraphicsData(webGL.gl);
            webGLData.mode = type;
            webGL.data.push(webGLData);
        }
        else
        {
            webGLData = webGL.data[webGL.data.length - 1];

            if (webGLData.mode !== type || type === 1)
            {
                webGLData = Phaser.Renderer.WebGL.GameObjects.Graphics.graphicsDataPool.pop() || new Phaser.Renderer.WebGL.GameObjects.GraphicsData(webGL.gl);
                webGLData.mode = type;
                webGL.data.push(webGLData);
            }
        }

        webGLData.dirty = true;

        return webGLData;
    },

    buildRectangle: function (graphicsData, webGLData)
    {
        var rectData = graphicsData.shape;
        var x = rectData.x;
        var y = rectData.y;
        var width = rectData.width;
        var height = rectData.height;

        if (graphicsData.fill)
        {
            var color = Phaser.Color.hexToRGBArray(graphicsData.fillColor);
            var alpha = graphicsData.fillAlpha;

            var r = color[0] * alpha;
            var g = color[1] * alpha;
            var b = color[2] * alpha;

            var verts = webGLData.points;
            var indices = webGLData.indices;

            var vertPos = verts.length / 6;

            // start
            verts.push(x, y);
            verts.push(r, g, b, alpha);

            verts.push(x + width, y);
            verts.push(r, g, b, alpha);

            verts.push(x , y + height);
            verts.push(r, g, b, alpha);

            verts.push(x + width, y + height);
            verts.push(r, g, b, alpha);

            // insert 2 dead triangles..
            indices.push(vertPos, vertPos, vertPos + 1, vertPos + 2, vertPos + 3, vertPos + 3);
        }

        if (graphicsData.lineWidth)
        {
            var tempPoints = graphicsData.points;

            graphicsData.points = [
                x, y,
                x + width, y,
                x + width, y + height,
                x, y + height,
                x, y
            ];

            Phaser.Renderer.WebGL.GameObjects.Graphics.buildLine(graphicsData, webGLData);

            graphicsData.points = tempPoints;
        }
    },

    buildRoundedRectangle: function (graphicsData, webGLData)
    {
        var rrectData = graphicsData.shape;
        var x = rrectData.x;
        var y = rrectData.y;
        var width = rrectData.width;
        var height = rrectData.height;

        var radius = rrectData.radius;

        var recPoints = [];

        recPoints.push(x, y + radius);

        recPoints = recPoints.concat(Phaser.Renderer.WebGL.GameObjects.Graphics.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height));
        recPoints = recPoints.concat(Phaser.Renderer.WebGL.GameObjects.Graphics.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius));
        recPoints = recPoints.concat(Phaser.Renderer.WebGL.GameObjects.Graphics.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y));
        recPoints = recPoints.concat(Phaser.Renderer.WebGL.GameObjects.Graphics.quadraticBezierCurve(x + radius, y, x, y, x, y + radius));

        if (graphicsData.fill)
        {
            var color = Phaser.Color.hexToRGBArray(graphicsData.fillColor);
            var alpha = graphicsData.fillAlpha;

            var r = color[0] * alpha;
            var g = color[1] * alpha;
            var b = color[2] * alpha;

            var verts = webGLData.points;
            var indices = webGLData.indices;

            var vecPos = verts.length / 6;

            var triangles = Phaser.EarCut.Triangulate(recPoints, null, 2);

            var i = 0;

            for (i = 0; i < triangles.length; i += 3)
            {
                indices.push(triangles[i] + vecPos);
                indices.push(triangles[i] + vecPos);
                indices.push(triangles[i + 1] + vecPos);
                indices.push(triangles[i + 2] + vecPos);
                indices.push(triangles[i + 2] + vecPos);
            }

            for (i = 0; i < recPoints.length; i++)
            {
                verts.push(recPoints[i], recPoints[++i], r, g, b, alpha);
            }
        }

        if (graphicsData.lineWidth)
        {
            var tempPoints = graphicsData.points;

            graphicsData.points = recPoints;

            Phaser.Renderer.WebGL.GameObjects.Graphics.buildLine(graphicsData, webGLData);

            graphicsData.points = tempPoints;
        }
    },

    quadraticBezierCurve: function (fromX, fromY, cpX, cpY, toX, toY)
    {
        var xa;
        var ya;
        var xb;
        var yb;
        var x;
        var y;
        var n = 20;
        var points = [];

        function getPt (n1, n2, perc)
        {
            var diff = n2 - n1;

            return n1 + (diff * perc);
        };

        var j = 0;

        for (var i = 0; i <= n; i++)
        {
            j = i / n;

            // The Green Line
            xa = getPt(fromX, cpX, j);
            ya = getPt(fromY, cpY, j);
            xb = getPt(cpX, toX, j);
            yb = getPt(cpY, toY, j);

            // The Black Dot
            x = getPt(xa, xb, j);
            y = getPt(ya, yb, j);

            points.push(x, y);
        }

        return points;
    },

    buildCircle: function (graphicsData, webGLData)
    {
        //  Need to convert points to a nice regular data
        var circleData = graphicsData.shape;
        var x = circleData.x;
        var y = circleData.y;
        var width;
        var height;
        
        if (graphicsData.type === Phaser.CIRCLE)
        {
            width = circleData.radius;
            height = circleData.radius;
        }
        else
        {
            width = circleData.width;
            height = circleData.height;
        }

        var totalSegs = Phaser.Renderer.WebGL.GameObjects.Graphics.circleSegments;
        var seg = (Math.PI * 2) / totalSegs;

        var i = 0;

        if (graphicsData.fill)
        {
            var color = Phaser.Color.hexToRGBArray(graphicsData.fillColor);
            var alpha = graphicsData.fillAlpha;

            var r = color[0] * alpha;
            var g = color[1] * alpha;
            var b = color[2] * alpha;

            var verts = webGLData.points;
            var indices = webGLData.indices;

            var vecPos = verts.length / 6;

            indices.push(vecPos);

            for (i = 0; i < totalSegs + 1 ; i++)
            {
                verts.push(x, y, r, g, b, alpha);

                verts.push(
                    x + Math.sin(seg * i) * width,
                    y + Math.cos(seg * i) * height,
                    r, g, b, alpha
                );

                indices.push(vecPos++, vecPos++);
            }

            indices.push(vecPos - 1);
        }

        if (graphicsData.lineWidth)
        {
            var tempPoints = graphicsData.points;

            graphicsData.points = [];

            for (i = 0; i < totalSegs + 1; i++)
            {
                graphicsData.points.push(
                    x + Math.sin(seg * i) * width,
                    y + Math.cos(seg * i) * height
                );
            }

            Phaser.Renderer.WebGL.GameObjects.Graphics.buildLine(graphicsData, webGLData);

            graphicsData.points = tempPoints;
        }
    },

    buildLine: function (graphicsData, webGLData)
    {
        var i = 0;
        var points = graphicsData.points;

        if (points.length === 0)
        {
            return;
        }

        //  If the line width is an odd number add 0.5 to align to a whole pixel
        if (graphicsData.lineWidth % 2)
        {
            for (i = 0; i < points.length; i++)
            {
                points[i] += 0.5;
            }
        }

        //  Get first and last point. Figure out the middle!
        var firstPoint = new Phaser.Point(points[0], points[1]);
        var lastPoint = new Phaser.Point(points[points.length - 2], points[points.length - 1]);

        //  If the first point is the last point we're gonna have issues :)
        if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y)
        {
            //  Need to clone as we are going to slightly modify the shape
            points = points.slice();

            points.pop();
            points.pop();

            lastPoint = new Phaser.Point(points[points.length - 2], points[points.length - 1]);

            var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) * 0.5;
            var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) * 0.5;

            points.unshift(midPointX, midPointY);
            points.push(midPointX, midPointY);
        }

        var verts = webGLData.points;
        var indices = webGLData.indices;
        var length = points.length / 2;
        var indexCount = points.length;
        var indexStart = verts.length / 6;

        //  Draw the Line
        var width = graphicsData.lineWidth / 2;

        //  Sort the color
        var color = Phaser.Color.hexToRGBArray(graphicsData.lineColor);
        var alpha = graphicsData.lineAlpha;
        var r = color[0] * alpha;
        var g = color[1] * alpha;
        var b = color[2] * alpha;

        var px, py, p1x, p1y, p2x, p2y, p3x, p3y;
        var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
        var a1, b1, c1, a2, b2, c2;
        var denom, pdist, dist;

        p1x = points[0];
        p1y = points[1];

        p2x = points[2];
        p2y = points[3];

        perpx = -(p1y - p2y);
        perpy = p1x - p2x;

        dist = Math.sqrt(perpx * perpx + perpy * perpy);

        perpx /= dist;
        perpy /= dist;
        perpx *= width;
        perpy *= width;

        //  Start
        verts.push(p1x - perpx , p1y - perpy, r, g, b, alpha);

        verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha);

        for (i = 1; i < length - 1; i++)
        {
            p1x = points[(i - 1) * 2];
            p1y = points[(i - 1) * 2 + 1];

            p2x = points[(i) * 2];
            p2y = points[(i) * 2 + 1];

            p3x = points[(i + 1) * 2];
            p3y = points[(i + 1) * 2 + 1];

            perpx = -(p1y - p2y);
            perpy = p1x - p2x;

            dist = Math.sqrt(perpx * perpx + perpy * perpy);

            perpx /= dist;
            perpy /= dist;
            perpx *= width;
            perpy *= width;

            perp2x = -(p2y - p3y);
            perp2y = p2x - p3x;

            dist = Math.sqrt(perp2x * perp2x + perp2y * perp2y);

            perp2x /= dist;
            perp2y /= dist;
            perp2x *= width;
            perp2y *= width;

            a1 = (-perpy + p1y) - (-perpy + p2y);
            b1 = (-perpx + p2x) - (-perpx + p1x);
            c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
            a2 = (-perp2y + p3y) - (-perp2y + p2y);
            b2 = (-perp2x + p2x) - (-perp2x + p3x);
            c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);

            denom = a1 * b2 - a2 * b1;

            if (Math.abs(denom) < 0.1)
            {
                denom += 10.1;
                verts.push(p2x - perpx, p2y - perpy, r, g, b, alpha);
                verts.push(p2x + perpx, p2y + perpy, r, g, b, alpha);
                continue;
            }

            px = (b1 * c2 - b2 * c1) / denom;
            py = (a2 * c1 - a1 * c2) / denom;

            pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);

            if (pdist > 140 * 140)
            {
                perp3x = perpx - perp2x;
                perp3y = perpy - perp2y;

                dist = Math.sqrt(perp3x * perp3x + perp3y * perp3y);

                perp3x /= dist;
                perp3y /= dist;
                perp3x *= width;
                perp3y *= width;

                verts.push(p2x - perp3x, p2y -perp3y, r, g, b, alpha);
                verts.push(p2x + perp3x, p2y +perp3y, r, g, b, alpha);
                verts.push(p2x - perp3x, p2y -perp3y, r, g, b, alpha);

                indexCount++;
            }
            else
            {
                verts.push(px, py, r, g, b, alpha);
                verts.push(p2x - (px-p2x), p2y - (py - p2y), r, g, b, alpha);
            }
        }

        p1x = points[(length - 2) * 2];
        p1y = points[(length - 2) * 2 + 1];

        p2x = points[(length - 1) * 2];
        p2y = points[(length - 1) * 2 + 1];

        perpx = -(p1y - p2y);
        perpy = p1x - p2x;

        dist = Math.sqrt(perpx * perpx + perpy * perpy);

        perpx /= dist;
        perpy /= dist;
        perpx *= width;
        perpy *= width;

        verts.push(p2x - perpx , p2y - perpy, r, g, b, alpha);
        verts.push(p2x + perpx , p2y + perpy, r, g, b, alpha);

        indices.push(indexStart);

        for (i = 0; i < indexCount; i++)
        {
            indices.push(indexStart++);
        }

        indices.push(indexStart - 1);
    },

    buildComplexPoly: function(graphicsData, webGLData)
    {
        var points = graphicsData.points.slice();

        if (points.length < 6)
        {
            return;
        }

        //  Get first and last point.. figure out the middle!
        var indices = webGLData.indices;
        webGLData.points = points;
        webGLData.alpha = graphicsData.fillAlpha;
        webGLData.color = Phaser.Color.hexToRGBArray(graphicsData.fillColor);

        //  Calculate the bounds
        var minX = Infinity;
        var maxX = -Infinity;

        var minY = Infinity;
        var maxY = -Infinity;

        var x;
        var y;

        //  Get the size
        for (var i = 0; i < points.length; i += 2)
        {
            x = points[i];
            y = points[i + 1];

            minX = (x < minX) ? x : minX;
            maxX = (x > maxX) ? x : maxX;

            minY = (y < minY) ? y : minY;
            maxY = (y > maxY) ? y : maxY;
        }

        //  Add a quad to the end because there is no point making another buffer!
        points.push(
            minX, minY,
            maxX, minY,
            maxX, maxY,
            minX, maxY
        );

        //  TODO: Is this even needed?
        var length = points.length / 2;

        for (i = 0; i < length; i++)
        {
            indices.push(i);
        }
    },

    buildPoly: function (graphicsData, webGLData)
    {
        var points = graphicsData.points;

        if (points.length < 6)
        {
            return;
        }

        //  Get first and last point.. figure out the middle!
        var verts = webGLData.points;
        var indices = webGLData.indices;

        var length = points.length / 2;

        //  Sort the color
        var color = Phaser.Color.hexToRGBArray(graphicsData.fillColor);
        var alpha = graphicsData.fillAlpha;
        var r = color[0] * alpha;
        var g = color[1] * alpha;
        var b = color[2] * alpha;

        var triangles = Phaser.EarCut.Triangulate(points, null, 2);

        if (!triangles)
        {
            return false;
        }

        var vertPos = verts.length / 6;

        var i = 0;

        for (i = 0; i < triangles.length; i += 3)
        {
            indices.push(triangles[i] + vertPos);
            indices.push(triangles[i] + vertPos);
            indices.push(triangles[i + 1] + vertPos);
            indices.push(triangles[i + 2] +vertPos);
            indices.push(triangles[i + 2] + vertPos);
        }

        for (i = 0; i < length; i++)
        {
            verts.push(
                points[i * 2],
                points[i * 2 + 1],
                r, g, b, alpha
            );
        }

        return true;
    }

};