diff --git a/src/core/index.js b/src/core/index.js index 6f744e9..7877f3f 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -23,7 +23,7 @@ Sprite: require('./sprites/Sprite'), SpriteBatch: require('./sprites/SpriteBatch'), - SpriteRenderer: require('./sprites/SpriteRenderer'), + SpriteRenderer: require('./sprites/SpriteRenderer'), // primitives Graphics: require('./primitives/Graphics'), @@ -45,7 +45,7 @@ WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), // WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), - + /** * This helper function will automatically detect which renderer you should be using. @@ -103,7 +103,3 @@ return core.autoDetectRenderer(width, height, options, isAndroid); } }; - -// Adding here for now.. sure there is a better place! -core.WebGLRenderer.registerObjectRenderer('sprite', core.SpriteRenderer); -core.WebGLRenderer.registerObjectRenderer('graphics', core.GraphicsRenderer); diff --git a/src/core/index.js b/src/core/index.js index 6f744e9..7877f3f 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -23,7 +23,7 @@ Sprite: require('./sprites/Sprite'), SpriteBatch: require('./sprites/SpriteBatch'), - SpriteRenderer: require('./sprites/SpriteRenderer'), + SpriteRenderer: require('./sprites/SpriteRenderer'), // primitives Graphics: require('./primitives/Graphics'), @@ -45,7 +45,7 @@ WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), // WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), - + /** * This helper function will automatically detect which renderer you should be using. @@ -103,7 +103,3 @@ return core.autoDetectRenderer(width, height, options, isAndroid); } }; - -// Adding here for now.. sure there is a better place! -core.WebGLRenderer.registerObjectRenderer('sprite', core.SpriteRenderer); -core.WebGLRenderer.registerObjectRenderer('graphics', core.GraphicsRenderer); diff --git a/src/core/primitives/GraphicsRenderer.js b/src/core/primitives/GraphicsRenderer.js deleted file mode 100644 index 1a508f9..0000000 --- a/src/core/primitives/GraphicsRenderer.js +++ /dev/null @@ -1,874 +0,0 @@ -var utils = require('../utils'), - math = require('../math'), - CONST = require('../const'), - ObjectRenderer = require('../renderers/webgl/utils/ObjectRenderer'), - WebGLRenderer = require('../renderers/webgl/WebGLRenderer'), - WebGLGraphicsData = require('./WebGLGraphicsData'); - -/** - * Renders the graphics object. - * - * @class - * @private - * @namespace PIXI - * @param renderer {WebGLRenderer} The renderer this object renderer works for. - */ -function GraphicsRenderer(renderer) -{ - ObjectRenderer.call(this, renderer); - - this.graphicsDataPool = []; -} - -GraphicsRenderer.prototype = Object.create(ObjectRenderer.prototype); -GraphicsRenderer.prototype.constructor = GraphicsRenderer; -module.exports = GraphicsRenderer; - -/** - * Destroys this renderer. - * - */ -GraphicsRenderer.prototype.destroy = function () { - ObjectRenderer.prototype.destroy.call(this); - - this.graphicsDataPool = null; -}; - -/** - * Renders a graphics object. - * - * @param graphics {Graphics} The graphics object to render. - */ -GraphicsRenderer.prototype.render = function(graphics) -{ - var renderer = this.renderer; - var gl = renderer.gl; - - var projection = renderer.projection, - offset = renderer.offset, - shader = renderer.shaderManager.primitiveShader, - webGLData; - - if (graphics.dirty) - { - this.updateGraphics(graphics, gl); - } - - var webGL = graphics._webGL[gl.id]; - - // This could be speeded up for sure! - - renderer.blendModeManager.setBlendMode( graphics.blendMode ); - -// var matrix = graphics.worldTransform.clone(); -// var matrix = renderer.currentRenderTarget.projectionMatrix.clone(); -// matrix.append(graphics.worldTransform); - - for (var i = 0; i < webGL.data.length; i++) - { - if (webGL.data[i].mode === 1) - { - webGLData = webGL.data[i]; - - renderer.maskManager.pushStencil(graphics, webGLData, renderer); - - // render quad.. - gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 ); - - renderer.maskManager.popStencil(graphics, webGLData, renderer); - } - else - { - webGLData = webGL.data[i]; - - - renderer.shaderManager.setShader( shader );//activatePrimitiveShader(); - shader = renderer.shaderManager.primitiveShader; - - gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - - gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true)); - - gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); - - gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha); - - - gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer); - - gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); - gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false,4 * 6, 2 * 4); - - // set the index buffer! - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer); - gl.drawElements(gl.TRIANGLE_STRIP, webGLData.indices.length, gl.UNSIGNED_SHORT, 0 ); - } - } -}; - -/** - * Updates the graphics object - * - * @private - * @param graphicsData {Graphics} The graphics object to update - * @param gl {WebGLContext} the current WebGL drawing context - */ -GraphicsRenderer.prototype.updateGraphics = function(graphics) -{ - var gl = this.renderer.gl; - - // get the contexts graphics object - var webGL = graphics._webGL[gl.id]; - - // if the graphics object does not exist in the webGL context time to create it! - if (!webGL) - { - webGL = graphics._webGL[gl.id] = {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; - - // lop 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(); - this.graphicsDataPool.push( graphicsData ); - } - - // clear the array and reset the index.. - webGL.data = []; - webGL.lastIndex = 0; - } - - var webGLData; - - // loop through the graphics datas and construct each one.. - // if the object is a complex fill then the new stencil buffer technique will be used - // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) - { - var data = graphics.graphicsData[i]; - - if (data.type === CONST.SHAPES.POLY) - { - // 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]); - } - } - - // MAKE SURE WE HAVE THE CORRECT TYPE.. - if (data.fill) - { - if (data.points.length >= 6) - { - if (data.points.length < 6 * 2) - { - webGLData = this.switchMode(webGL, 0); - - var canDrawUsingSimple = this.buildPoly(data, webGLData); - // console.log(canDrawUsingSimple); - - if (!canDrawUsingSimple) - { - // console.log("<>>>") - webGLData = this.switchMode(webGL, 1); - this.buildComplexPoly(data, webGLData); - } - - } - else - { - webGLData = this.switchMode(webGL, 1); - this.buildComplexPoly(data, webGLData); - } - } - } - - if (data.lineWidth > 0) - { - webGLData = this.switchMode(webGL, 0); - this.buildLine(data, webGLData); - } - } - else - { - webGLData = this.switchMode(webGL, 0); - - if (data.type === CONST.SHAPES.RECT) - { - this.buildRectangle(data, webGLData); - } - else if (data.type === CONST.SHAPES.CIRC || data.type === CONST.SHAPES.ELIP) - { - this.buildCircle(data, webGLData); - } - else if (data.type === CONST.SHAPES.RREC) - { - this.buildRoundedRectangle(data, webGLData); - } - } - - webGL.lastIndex++; - } - - // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) - { - webGLData = webGL.data[i]; - - if (webGLData.dirty) - { - webGLData.upload(); - } - } -}; - -/** - * - * - * @private - * @param webGL {WebGLContext} - * @param type {number} - */ -GraphicsRenderer.prototype.switchMode = function (webGL, type) -{ - var webGLData; - - if (!webGL.data.length) - { - webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl); - webGLData.mode = type; - webGL.data.push(webGLData); - } - else - { - webGLData = webGL.data[webGL.data.length-1]; - - if (webGLData.mode !== type || type === 1) - { - webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl); - webGLData.mode = type; - webGL.data.push(webGLData); - } - } - - webGLData.dirty = true; - - return webGLData; -}; - -/** - * Builds a rectangle to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.buildRectangle = function (graphicsData, webGLData) -{ - // --- // - // need to convert points to a nice regular data - // - 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 = utils.hex2rgb(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]; - - - this.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Builds a rounded rectangle to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.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(this.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height)); - recPoints = recPoints.concat(this.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius)); - recPoints = recPoints.concat(this.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y)); - recPoints = recPoints.concat(this.quadraticBezierCurve(x + radius, y, x, y, x, y + radius)); - - if (graphicsData.fill) - { - var color = utils.hex2rgb(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 = utils.PolyK.Triangulate(recPoints); - - // - - 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; - - this.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Calculate the points for a quadratic bezier curve. (helper function..) - * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c - * - * @private - * @param fromX {number} Origin point x - * @param fromY {number} Origin point x - * @param cpX {number} Control point x - * @param cpY {number} Control point y - * @param toX {number} Destination point x - * @param toY {number} Destination point y - * @return {number[]} - */ -GraphicsRenderer.prototype.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY) -{ - - var xa, - ya, - xb, - yb, - x, - y, - n = 20, - 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; -}; - -/** - * Builds a circle to draw - * - * @private - * @param graphicsData {Graphics} The graphics object to draw - * @param webGLData {object} - */ -GraphicsRenderer.prototype.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; - - // TODO - bit hacky?? - if (graphicsData.type === CONST.SHAPES.CIRC) - { - width = circleData.radius; - height = circleData.radius; - } - else - { - width = circleData.width; - height = circleData.height; - } - - var totalSegs = 40; - var seg = (Math.PI * 2) / totalSegs ; - - var i = 0; - - if (graphicsData.fill) - { - var color = utils.hex2rgb(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); - } - - this.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Builds a line to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.buildLine = function (graphicsData, webGLData) -{ - // TODO OPTIMISE! - 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 math.Point(points[0], points[1]); - var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - - // if the first point is the last point - 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 math.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 color - var color = utils.hex2rgb(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); - verts.push(r, g, b, alpha); - - verts.push(p2x + perp3x, p2y +perp3y); - verts.push(r, g, b, alpha); - - verts.push(p2x - perp3x, p2y -perp3y); - verts.push(r, g, b, alpha); - - indexCount++; - } - else - { - - verts.push(px , py); - verts.push(r, g, b, alpha); - - verts.push(p2x - (px-p2x), p2y - (py - p2y)); - verts.push(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); - verts.push(r, g, b, alpha); - - verts.push(p2x + perpx , p2y + perpy); - verts.push(r, g, b, alpha); - - indices.push(indexStart); - - for (i = 0; i < indexCount; i++) - { - indices.push(indexStart++); - } - - indices.push(indexStart-1); -}; - -/** - * Builds a complex polygon to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.buildComplexPoly = function (graphicsData, webGLData) -{ - //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - 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 = utils.hex2rgb(graphicsData.fillColor); - - // calclate the bounds.. - var minX = Infinity; - var maxX = -Infinity; - - var minY = Infinity; - var maxY = -Infinity; - - var x,y; - - // get 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 cos there is no point making another buffer! - points.push(minX, minY, - maxX, minY, - maxX, maxY, - minX, maxY); - - // push a quad onto the end.. - - //TODO - this aint needed! - var length = points.length / 2; - for (i = 0; i < length; i++) - { - indices.push( i ); - } - -}; - -/** - * Builds a polygon to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.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 color - var color = utils.hex2rgb(graphicsData.fillColor); - var alpha = graphicsData.fillAlpha; - var r = color[0] * alpha; - var g = color[1] * alpha; - var b = color[2] * alpha; - - var triangles = utils.PolyK.Triangulate(points); - - 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; -}; diff --git a/src/core/index.js b/src/core/index.js index 6f744e9..7877f3f 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -23,7 +23,7 @@ Sprite: require('./sprites/Sprite'), SpriteBatch: require('./sprites/SpriteBatch'), - SpriteRenderer: require('./sprites/SpriteRenderer'), + SpriteRenderer: require('./sprites/SpriteRenderer'), // primitives Graphics: require('./primitives/Graphics'), @@ -45,7 +45,7 @@ WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), // WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), - + /** * This helper function will automatically detect which renderer you should be using. @@ -103,7 +103,3 @@ return core.autoDetectRenderer(width, height, options, isAndroid); } }; - -// Adding here for now.. sure there is a better place! -core.WebGLRenderer.registerObjectRenderer('sprite', core.SpriteRenderer); -core.WebGLRenderer.registerObjectRenderer('graphics', core.GraphicsRenderer); diff --git a/src/core/primitives/GraphicsRenderer.js b/src/core/primitives/GraphicsRenderer.js deleted file mode 100644 index 1a508f9..0000000 --- a/src/core/primitives/GraphicsRenderer.js +++ /dev/null @@ -1,874 +0,0 @@ -var utils = require('../utils'), - math = require('../math'), - CONST = require('../const'), - ObjectRenderer = require('../renderers/webgl/utils/ObjectRenderer'), - WebGLRenderer = require('../renderers/webgl/WebGLRenderer'), - WebGLGraphicsData = require('./WebGLGraphicsData'); - -/** - * Renders the graphics object. - * - * @class - * @private - * @namespace PIXI - * @param renderer {WebGLRenderer} The renderer this object renderer works for. - */ -function GraphicsRenderer(renderer) -{ - ObjectRenderer.call(this, renderer); - - this.graphicsDataPool = []; -} - -GraphicsRenderer.prototype = Object.create(ObjectRenderer.prototype); -GraphicsRenderer.prototype.constructor = GraphicsRenderer; -module.exports = GraphicsRenderer; - -/** - * Destroys this renderer. - * - */ -GraphicsRenderer.prototype.destroy = function () { - ObjectRenderer.prototype.destroy.call(this); - - this.graphicsDataPool = null; -}; - -/** - * Renders a graphics object. - * - * @param graphics {Graphics} The graphics object to render. - */ -GraphicsRenderer.prototype.render = function(graphics) -{ - var renderer = this.renderer; - var gl = renderer.gl; - - var projection = renderer.projection, - offset = renderer.offset, - shader = renderer.shaderManager.primitiveShader, - webGLData; - - if (graphics.dirty) - { - this.updateGraphics(graphics, gl); - } - - var webGL = graphics._webGL[gl.id]; - - // This could be speeded up for sure! - - renderer.blendModeManager.setBlendMode( graphics.blendMode ); - -// var matrix = graphics.worldTransform.clone(); -// var matrix = renderer.currentRenderTarget.projectionMatrix.clone(); -// matrix.append(graphics.worldTransform); - - for (var i = 0; i < webGL.data.length; i++) - { - if (webGL.data[i].mode === 1) - { - webGLData = webGL.data[i]; - - renderer.maskManager.pushStencil(graphics, webGLData, renderer); - - // render quad.. - gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 ); - - renderer.maskManager.popStencil(graphics, webGLData, renderer); - } - else - { - webGLData = webGL.data[i]; - - - renderer.shaderManager.setShader( shader );//activatePrimitiveShader(); - shader = renderer.shaderManager.primitiveShader; - - gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - - gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true)); - - gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); - - gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha); - - - gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer); - - gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); - gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false,4 * 6, 2 * 4); - - // set the index buffer! - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer); - gl.drawElements(gl.TRIANGLE_STRIP, webGLData.indices.length, gl.UNSIGNED_SHORT, 0 ); - } - } -}; - -/** - * Updates the graphics object - * - * @private - * @param graphicsData {Graphics} The graphics object to update - * @param gl {WebGLContext} the current WebGL drawing context - */ -GraphicsRenderer.prototype.updateGraphics = function(graphics) -{ - var gl = this.renderer.gl; - - // get the contexts graphics object - var webGL = graphics._webGL[gl.id]; - - // if the graphics object does not exist in the webGL context time to create it! - if (!webGL) - { - webGL = graphics._webGL[gl.id] = {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; - - // lop 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(); - this.graphicsDataPool.push( graphicsData ); - } - - // clear the array and reset the index.. - webGL.data = []; - webGL.lastIndex = 0; - } - - var webGLData; - - // loop through the graphics datas and construct each one.. - // if the object is a complex fill then the new stencil buffer technique will be used - // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) - { - var data = graphics.graphicsData[i]; - - if (data.type === CONST.SHAPES.POLY) - { - // 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]); - } - } - - // MAKE SURE WE HAVE THE CORRECT TYPE.. - if (data.fill) - { - if (data.points.length >= 6) - { - if (data.points.length < 6 * 2) - { - webGLData = this.switchMode(webGL, 0); - - var canDrawUsingSimple = this.buildPoly(data, webGLData); - // console.log(canDrawUsingSimple); - - if (!canDrawUsingSimple) - { - // console.log("<>>>") - webGLData = this.switchMode(webGL, 1); - this.buildComplexPoly(data, webGLData); - } - - } - else - { - webGLData = this.switchMode(webGL, 1); - this.buildComplexPoly(data, webGLData); - } - } - } - - if (data.lineWidth > 0) - { - webGLData = this.switchMode(webGL, 0); - this.buildLine(data, webGLData); - } - } - else - { - webGLData = this.switchMode(webGL, 0); - - if (data.type === CONST.SHAPES.RECT) - { - this.buildRectangle(data, webGLData); - } - else if (data.type === CONST.SHAPES.CIRC || data.type === CONST.SHAPES.ELIP) - { - this.buildCircle(data, webGLData); - } - else if (data.type === CONST.SHAPES.RREC) - { - this.buildRoundedRectangle(data, webGLData); - } - } - - webGL.lastIndex++; - } - - // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) - { - webGLData = webGL.data[i]; - - if (webGLData.dirty) - { - webGLData.upload(); - } - } -}; - -/** - * - * - * @private - * @param webGL {WebGLContext} - * @param type {number} - */ -GraphicsRenderer.prototype.switchMode = function (webGL, type) -{ - var webGLData; - - if (!webGL.data.length) - { - webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl); - webGLData.mode = type; - webGL.data.push(webGLData); - } - else - { - webGLData = webGL.data[webGL.data.length-1]; - - if (webGLData.mode !== type || type === 1) - { - webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl); - webGLData.mode = type; - webGL.data.push(webGLData); - } - } - - webGLData.dirty = true; - - return webGLData; -}; - -/** - * Builds a rectangle to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.buildRectangle = function (graphicsData, webGLData) -{ - // --- // - // need to convert points to a nice regular data - // - 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 = utils.hex2rgb(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]; - - - this.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Builds a rounded rectangle to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.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(this.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height)); - recPoints = recPoints.concat(this.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius)); - recPoints = recPoints.concat(this.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y)); - recPoints = recPoints.concat(this.quadraticBezierCurve(x + radius, y, x, y, x, y + radius)); - - if (graphicsData.fill) - { - var color = utils.hex2rgb(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 = utils.PolyK.Triangulate(recPoints); - - // - - 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; - - this.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Calculate the points for a quadratic bezier curve. (helper function..) - * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c - * - * @private - * @param fromX {number} Origin point x - * @param fromY {number} Origin point x - * @param cpX {number} Control point x - * @param cpY {number} Control point y - * @param toX {number} Destination point x - * @param toY {number} Destination point y - * @return {number[]} - */ -GraphicsRenderer.prototype.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY) -{ - - var xa, - ya, - xb, - yb, - x, - y, - n = 20, - 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; -}; - -/** - * Builds a circle to draw - * - * @private - * @param graphicsData {Graphics} The graphics object to draw - * @param webGLData {object} - */ -GraphicsRenderer.prototype.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; - - // TODO - bit hacky?? - if (graphicsData.type === CONST.SHAPES.CIRC) - { - width = circleData.radius; - height = circleData.radius; - } - else - { - width = circleData.width; - height = circleData.height; - } - - var totalSegs = 40; - var seg = (Math.PI * 2) / totalSegs ; - - var i = 0; - - if (graphicsData.fill) - { - var color = utils.hex2rgb(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); - } - - this.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Builds a line to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.buildLine = function (graphicsData, webGLData) -{ - // TODO OPTIMISE! - 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 math.Point(points[0], points[1]); - var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - - // if the first point is the last point - 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 math.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 color - var color = utils.hex2rgb(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); - verts.push(r, g, b, alpha); - - verts.push(p2x + perp3x, p2y +perp3y); - verts.push(r, g, b, alpha); - - verts.push(p2x - perp3x, p2y -perp3y); - verts.push(r, g, b, alpha); - - indexCount++; - } - else - { - - verts.push(px , py); - verts.push(r, g, b, alpha); - - verts.push(p2x - (px-p2x), p2y - (py - p2y)); - verts.push(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); - verts.push(r, g, b, alpha); - - verts.push(p2x + perpx , p2y + perpy); - verts.push(r, g, b, alpha); - - indices.push(indexStart); - - for (i = 0; i < indexCount; i++) - { - indices.push(indexStart++); - } - - indices.push(indexStart-1); -}; - -/** - * Builds a complex polygon to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.buildComplexPoly = function (graphicsData, webGLData) -{ - //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - 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 = utils.hex2rgb(graphicsData.fillColor); - - // calclate the bounds.. - var minX = Infinity; - var maxX = -Infinity; - - var minY = Infinity; - var maxY = -Infinity; - - var x,y; - - // get 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 cos there is no point making another buffer! - points.push(minX, minY, - maxX, minY, - maxX, maxY, - minX, maxY); - - // push a quad onto the end.. - - //TODO - this aint needed! - var length = points.length / 2; - for (i = 0; i < length; i++) - { - indices.push( i ); - } - -}; - -/** - * Builds a polygon to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.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 color - var color = utils.hex2rgb(graphicsData.fillColor); - var alpha = graphicsData.fillAlpha; - var r = color[0] * alpha; - var g = color[1] * alpha; - var b = color[2] * alpha; - - var triangles = utils.PolyK.Triangulate(points); - - 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; -}; diff --git a/src/core/primitives/WebGLGraphicsData.js b/src/core/primitives/WebGLGraphicsData.js deleted file mode 100755 index 41be102..0000000 --- a/src/core/primitives/WebGLGraphicsData.js +++ /dev/null @@ -1,48 +0,0 @@ -/** - * @class - * @private - */ -function WebGLGraphicsData(gl) { - this.gl = gl; - - //TODO does this need to be split before uploding?? - this.color = [0,0,0]; // color split! - this.points = []; - this.indices = []; - this.buffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - this.mode = 1; - this.alpha = 1; - this.dirty = true; -} - -WebGLGraphicsData.prototype.constructor = WebGLGraphicsData; -module.exports = WebGLGraphicsData; - -/** - * - */ -WebGLGraphicsData.prototype.reset = function () { - this.points = []; - this.indices = []; -}; - -/** - * - */ -WebGLGraphicsData.prototype.upload = function () { - var gl = this.gl; - -// this.lastIndex = graphics.graphicsData.length; - this.glPoints = new Float32Array(this.points); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); - gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); - - this.glIndicies = new Uint16Array(this.indices); - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); - - this.dirty = false; -}; diff --git a/src/core/index.js b/src/core/index.js index 6f744e9..7877f3f 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -23,7 +23,7 @@ Sprite: require('./sprites/Sprite'), SpriteBatch: require('./sprites/SpriteBatch'), - SpriteRenderer: require('./sprites/SpriteRenderer'), + SpriteRenderer: require('./sprites/SpriteRenderer'), // primitives Graphics: require('./primitives/Graphics'), @@ -45,7 +45,7 @@ WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), // WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), - + /** * This helper function will automatically detect which renderer you should be using. @@ -103,7 +103,3 @@ return core.autoDetectRenderer(width, height, options, isAndroid); } }; - -// Adding here for now.. sure there is a better place! -core.WebGLRenderer.registerObjectRenderer('sprite', core.SpriteRenderer); -core.WebGLRenderer.registerObjectRenderer('graphics', core.GraphicsRenderer); diff --git a/src/core/primitives/GraphicsRenderer.js b/src/core/primitives/GraphicsRenderer.js deleted file mode 100644 index 1a508f9..0000000 --- a/src/core/primitives/GraphicsRenderer.js +++ /dev/null @@ -1,874 +0,0 @@ -var utils = require('../utils'), - math = require('../math'), - CONST = require('../const'), - ObjectRenderer = require('../renderers/webgl/utils/ObjectRenderer'), - WebGLRenderer = require('../renderers/webgl/WebGLRenderer'), - WebGLGraphicsData = require('./WebGLGraphicsData'); - -/** - * Renders the graphics object. - * - * @class - * @private - * @namespace PIXI - * @param renderer {WebGLRenderer} The renderer this object renderer works for. - */ -function GraphicsRenderer(renderer) -{ - ObjectRenderer.call(this, renderer); - - this.graphicsDataPool = []; -} - -GraphicsRenderer.prototype = Object.create(ObjectRenderer.prototype); -GraphicsRenderer.prototype.constructor = GraphicsRenderer; -module.exports = GraphicsRenderer; - -/** - * Destroys this renderer. - * - */ -GraphicsRenderer.prototype.destroy = function () { - ObjectRenderer.prototype.destroy.call(this); - - this.graphicsDataPool = null; -}; - -/** - * Renders a graphics object. - * - * @param graphics {Graphics} The graphics object to render. - */ -GraphicsRenderer.prototype.render = function(graphics) -{ - var renderer = this.renderer; - var gl = renderer.gl; - - var projection = renderer.projection, - offset = renderer.offset, - shader = renderer.shaderManager.primitiveShader, - webGLData; - - if (graphics.dirty) - { - this.updateGraphics(graphics, gl); - } - - var webGL = graphics._webGL[gl.id]; - - // This could be speeded up for sure! - - renderer.blendModeManager.setBlendMode( graphics.blendMode ); - -// var matrix = graphics.worldTransform.clone(); -// var matrix = renderer.currentRenderTarget.projectionMatrix.clone(); -// matrix.append(graphics.worldTransform); - - for (var i = 0; i < webGL.data.length; i++) - { - if (webGL.data[i].mode === 1) - { - webGLData = webGL.data[i]; - - renderer.maskManager.pushStencil(graphics, webGLData, renderer); - - // render quad.. - gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 ); - - renderer.maskManager.popStencil(graphics, webGLData, renderer); - } - else - { - webGLData = webGL.data[i]; - - - renderer.shaderManager.setShader( shader );//activatePrimitiveShader(); - shader = renderer.shaderManager.primitiveShader; - - gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - - gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true)); - - gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); - - gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha); - - - gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer); - - gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); - gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false,4 * 6, 2 * 4); - - // set the index buffer! - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer); - gl.drawElements(gl.TRIANGLE_STRIP, webGLData.indices.length, gl.UNSIGNED_SHORT, 0 ); - } - } -}; - -/** - * Updates the graphics object - * - * @private - * @param graphicsData {Graphics} The graphics object to update - * @param gl {WebGLContext} the current WebGL drawing context - */ -GraphicsRenderer.prototype.updateGraphics = function(graphics) -{ - var gl = this.renderer.gl; - - // get the contexts graphics object - var webGL = graphics._webGL[gl.id]; - - // if the graphics object does not exist in the webGL context time to create it! - if (!webGL) - { - webGL = graphics._webGL[gl.id] = {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; - - // lop 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(); - this.graphicsDataPool.push( graphicsData ); - } - - // clear the array and reset the index.. - webGL.data = []; - webGL.lastIndex = 0; - } - - var webGLData; - - // loop through the graphics datas and construct each one.. - // if the object is a complex fill then the new stencil buffer technique will be used - // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) - { - var data = graphics.graphicsData[i]; - - if (data.type === CONST.SHAPES.POLY) - { - // 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]); - } - } - - // MAKE SURE WE HAVE THE CORRECT TYPE.. - if (data.fill) - { - if (data.points.length >= 6) - { - if (data.points.length < 6 * 2) - { - webGLData = this.switchMode(webGL, 0); - - var canDrawUsingSimple = this.buildPoly(data, webGLData); - // console.log(canDrawUsingSimple); - - if (!canDrawUsingSimple) - { - // console.log("<>>>") - webGLData = this.switchMode(webGL, 1); - this.buildComplexPoly(data, webGLData); - } - - } - else - { - webGLData = this.switchMode(webGL, 1); - this.buildComplexPoly(data, webGLData); - } - } - } - - if (data.lineWidth > 0) - { - webGLData = this.switchMode(webGL, 0); - this.buildLine(data, webGLData); - } - } - else - { - webGLData = this.switchMode(webGL, 0); - - if (data.type === CONST.SHAPES.RECT) - { - this.buildRectangle(data, webGLData); - } - else if (data.type === CONST.SHAPES.CIRC || data.type === CONST.SHAPES.ELIP) - { - this.buildCircle(data, webGLData); - } - else if (data.type === CONST.SHAPES.RREC) - { - this.buildRoundedRectangle(data, webGLData); - } - } - - webGL.lastIndex++; - } - - // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) - { - webGLData = webGL.data[i]; - - if (webGLData.dirty) - { - webGLData.upload(); - } - } -}; - -/** - * - * - * @private - * @param webGL {WebGLContext} - * @param type {number} - */ -GraphicsRenderer.prototype.switchMode = function (webGL, type) -{ - var webGLData; - - if (!webGL.data.length) - { - webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl); - webGLData.mode = type; - webGL.data.push(webGLData); - } - else - { - webGLData = webGL.data[webGL.data.length-1]; - - if (webGLData.mode !== type || type === 1) - { - webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl); - webGLData.mode = type; - webGL.data.push(webGLData); - } - } - - webGLData.dirty = true; - - return webGLData; -}; - -/** - * Builds a rectangle to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.buildRectangle = function (graphicsData, webGLData) -{ - // --- // - // need to convert points to a nice regular data - // - 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 = utils.hex2rgb(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]; - - - this.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Builds a rounded rectangle to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.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(this.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height)); - recPoints = recPoints.concat(this.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius)); - recPoints = recPoints.concat(this.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y)); - recPoints = recPoints.concat(this.quadraticBezierCurve(x + radius, y, x, y, x, y + radius)); - - if (graphicsData.fill) - { - var color = utils.hex2rgb(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 = utils.PolyK.Triangulate(recPoints); - - // - - 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; - - this.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Calculate the points for a quadratic bezier curve. (helper function..) - * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c - * - * @private - * @param fromX {number} Origin point x - * @param fromY {number} Origin point x - * @param cpX {number} Control point x - * @param cpY {number} Control point y - * @param toX {number} Destination point x - * @param toY {number} Destination point y - * @return {number[]} - */ -GraphicsRenderer.prototype.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY) -{ - - var xa, - ya, - xb, - yb, - x, - y, - n = 20, - 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; -}; - -/** - * Builds a circle to draw - * - * @private - * @param graphicsData {Graphics} The graphics object to draw - * @param webGLData {object} - */ -GraphicsRenderer.prototype.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; - - // TODO - bit hacky?? - if (graphicsData.type === CONST.SHAPES.CIRC) - { - width = circleData.radius; - height = circleData.radius; - } - else - { - width = circleData.width; - height = circleData.height; - } - - var totalSegs = 40; - var seg = (Math.PI * 2) / totalSegs ; - - var i = 0; - - if (graphicsData.fill) - { - var color = utils.hex2rgb(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); - } - - this.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Builds a line to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.buildLine = function (graphicsData, webGLData) -{ - // TODO OPTIMISE! - 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 math.Point(points[0], points[1]); - var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - - // if the first point is the last point - 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 math.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 color - var color = utils.hex2rgb(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); - verts.push(r, g, b, alpha); - - verts.push(p2x + perp3x, p2y +perp3y); - verts.push(r, g, b, alpha); - - verts.push(p2x - perp3x, p2y -perp3y); - verts.push(r, g, b, alpha); - - indexCount++; - } - else - { - - verts.push(px , py); - verts.push(r, g, b, alpha); - - verts.push(p2x - (px-p2x), p2y - (py - p2y)); - verts.push(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); - verts.push(r, g, b, alpha); - - verts.push(p2x + perpx , p2y + perpy); - verts.push(r, g, b, alpha); - - indices.push(indexStart); - - for (i = 0; i < indexCount; i++) - { - indices.push(indexStart++); - } - - indices.push(indexStart-1); -}; - -/** - * Builds a complex polygon to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.buildComplexPoly = function (graphicsData, webGLData) -{ - //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - 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 = utils.hex2rgb(graphicsData.fillColor); - - // calclate the bounds.. - var minX = Infinity; - var maxX = -Infinity; - - var minY = Infinity; - var maxY = -Infinity; - - var x,y; - - // get 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 cos there is no point making another buffer! - points.push(minX, minY, - maxX, minY, - maxX, maxY, - minX, maxY); - - // push a quad onto the end.. - - //TODO - this aint needed! - var length = points.length / 2; - for (i = 0; i < length; i++) - { - indices.push( i ); - } - -}; - -/** - * Builds a polygon to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.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 color - var color = utils.hex2rgb(graphicsData.fillColor); - var alpha = graphicsData.fillAlpha; - var r = color[0] * alpha; - var g = color[1] * alpha; - var b = color[2] * alpha; - - var triangles = utils.PolyK.Triangulate(points); - - 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; -}; diff --git a/src/core/primitives/WebGLGraphicsData.js b/src/core/primitives/WebGLGraphicsData.js deleted file mode 100755 index 41be102..0000000 --- a/src/core/primitives/WebGLGraphicsData.js +++ /dev/null @@ -1,48 +0,0 @@ -/** - * @class - * @private - */ -function WebGLGraphicsData(gl) { - this.gl = gl; - - //TODO does this need to be split before uploding?? - this.color = [0,0,0]; // color split! - this.points = []; - this.indices = []; - this.buffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - this.mode = 1; - this.alpha = 1; - this.dirty = true; -} - -WebGLGraphicsData.prototype.constructor = WebGLGraphicsData; -module.exports = WebGLGraphicsData; - -/** - * - */ -WebGLGraphicsData.prototype.reset = function () { - this.points = []; - this.indices = []; -}; - -/** - * - */ -WebGLGraphicsData.prototype.upload = function () { - var gl = this.gl; - -// this.lastIndex = graphics.graphicsData.length; - this.glPoints = new Float32Array(this.points); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); - gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); - - this.glIndicies = new Uint16Array(this.indices); - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); - - this.dirty = false; -}; diff --git a/src/core/primitives/webgl/GraphicsRenderer.js b/src/core/primitives/webgl/GraphicsRenderer.js new file mode 100644 index 0000000..b3010bd --- /dev/null +++ b/src/core/primitives/webgl/GraphicsRenderer.js @@ -0,0 +1,876 @@ +var utils = require('../utils'), + math = require('../math'), + CONST = require('../const'), + ObjectRenderer = require('../renderers/webgl/utils/ObjectRenderer'), + WebGLRenderer = require('../renderers/webgl/WebGLRenderer'), + WebGLGraphicsData = require('./WebGLGraphicsData'); + +/** + * Renders the graphics object. + * + * @class + * @private + * @namespace PIXI + * @param renderer {WebGLRenderer} The renderer this object renderer works for. + */ +function GraphicsRenderer(renderer) +{ + ObjectRenderer.call(this, renderer); + + this.graphicsDataPool = []; +} + +GraphicsRenderer.prototype = Object.create(ObjectRenderer.prototype); +GraphicsRenderer.prototype.constructor = GraphicsRenderer; +module.exports = GraphicsRenderer; + +WebGLRenderer.registerObjectRenderer('graphics', GraphicsRenderer); + +/** + * Destroys this renderer. + * + */ +GraphicsRenderer.prototype.destroy = function () { + ObjectRenderer.prototype.destroy.call(this); + + this.graphicsDataPool = null; +}; + +/** + * Renders a graphics object. + * + * @param graphics {Graphics} The graphics object to render. + */ +GraphicsRenderer.prototype.render = function(graphics) +{ + var renderer = this.renderer; + var gl = renderer.gl; + + var projection = renderer.projection, + offset = renderer.offset, + shader = renderer.shaderManager.primitiveShader, + webGLData; + + if (graphics.dirty) + { + this.updateGraphics(graphics, gl); + } + + var webGL = graphics._webGL[gl.id]; + + // This could be speeded up for sure! + + renderer.blendModeManager.setBlendMode( graphics.blendMode ); + +// var matrix = graphics.worldTransform.clone(); +// var matrix = renderer.currentRenderTarget.projectionMatrix.clone(); +// matrix.append(graphics.worldTransform); + + for (var i = 0; i < webGL.data.length; i++) + { + if (webGL.data[i].mode === 1) + { + webGLData = webGL.data[i]; + + renderer.maskManager.pushStencil(graphics, webGLData, renderer); + + // render quad.. + gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 ); + + renderer.maskManager.popStencil(graphics, webGLData, renderer); + } + else + { + webGLData = webGL.data[i]; + + + renderer.shaderManager.setShader( shader );//activatePrimitiveShader(); + shader = renderer.shaderManager.primitiveShader; + + gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); + + gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true)); + + gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); + + gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha); + + + gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer); + + gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); + gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false,4 * 6, 2 * 4); + + // set the index buffer! + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer); + gl.drawElements(gl.TRIANGLE_STRIP, webGLData.indices.length, gl.UNSIGNED_SHORT, 0 ); + } + } +}; + +/** + * Updates the graphics object + * + * @private + * @param graphicsData {Graphics} The graphics object to update + * @param gl {WebGLContext} the current WebGL drawing context + */ +GraphicsRenderer.prototype.updateGraphics = function(graphics) +{ + var gl = this.renderer.gl; + + // get the contexts graphics object + var webGL = graphics._webGL[gl.id]; + + // if the graphics object does not exist in the webGL context time to create it! + if (!webGL) + { + webGL = graphics._webGL[gl.id] = {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; + + // lop 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(); + this.graphicsDataPool.push( graphicsData ); + } + + // clear the array and reset the index.. + webGL.data = []; + webGL.lastIndex = 0; + } + + var webGLData; + + // loop through the graphics datas and construct each one.. + // if the object is a complex fill then the new stencil buffer technique will be used + // other wise graphics objects will be pushed into a batch.. + for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + { + var data = graphics.graphicsData[i]; + + if (data.type === CONST.SHAPES.POLY) + { + // 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]); + } + } + + // MAKE SURE WE HAVE THE CORRECT TYPE.. + if (data.fill) + { + if (data.points.length >= 6) + { + if (data.points.length < 6 * 2) + { + webGLData = this.switchMode(webGL, 0); + + var canDrawUsingSimple = this.buildPoly(data, webGLData); + // console.log(canDrawUsingSimple); + + if (!canDrawUsingSimple) + { + // console.log("<>>>") + webGLData = this.switchMode(webGL, 1); + this.buildComplexPoly(data, webGLData); + } + + } + else + { + webGLData = this.switchMode(webGL, 1); + this.buildComplexPoly(data, webGLData); + } + } + } + + if (data.lineWidth > 0) + { + webGLData = this.switchMode(webGL, 0); + this.buildLine(data, webGLData); + } + } + else + { + webGLData = this.switchMode(webGL, 0); + + if (data.type === CONST.SHAPES.RECT) + { + this.buildRectangle(data, webGLData); + } + else if (data.type === CONST.SHAPES.CIRC || data.type === CONST.SHAPES.ELIP) + { + this.buildCircle(data, webGLData); + } + else if (data.type === CONST.SHAPES.RREC) + { + this.buildRoundedRectangle(data, webGLData); + } + } + + webGL.lastIndex++; + } + + // upload all the dirty data... + for (i = 0; i < webGL.data.length; i++) + { + webGLData = webGL.data[i]; + + if (webGLData.dirty) + { + webGLData.upload(); + } + } +}; + +/** + * + * + * @private + * @param webGL {WebGLContext} + * @param type {number} + */ +GraphicsRenderer.prototype.switchMode = function (webGL, type) +{ + var webGLData; + + if (!webGL.data.length) + { + webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl); + webGLData.mode = type; + webGL.data.push(webGLData); + } + else + { + webGLData = webGL.data[webGL.data.length-1]; + + if (webGLData.mode !== type || type === 1) + { + webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl); + webGLData.mode = type; + webGL.data.push(webGLData); + } + } + + webGLData.dirty = true; + + return webGLData; +}; + +/** + * Builds a rectangle to draw + * + * @private + * @param graphicsData {Graphics} The graphics object containing all the necessary properties + * @param webGLData {object} + */ +GraphicsRenderer.prototype.buildRectangle = function (graphicsData, webGLData) +{ + // --- // + // need to convert points to a nice regular data + // + 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 = utils.hex2rgb(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]; + + + this.buildLine(graphicsData, webGLData); + + graphicsData.points = tempPoints; + } +}; + +/** + * Builds a rounded rectangle to draw + * + * @private + * @param graphicsData {Graphics} The graphics object containing all the necessary properties + * @param webGLData {object} + */ +GraphicsRenderer.prototype.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(this.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height)); + recPoints = recPoints.concat(this.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius)); + recPoints = recPoints.concat(this.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y)); + recPoints = recPoints.concat(this.quadraticBezierCurve(x + radius, y, x, y, x, y + radius)); + + if (graphicsData.fill) + { + var color = utils.hex2rgb(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 = utils.PolyK.Triangulate(recPoints); + + // + + 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; + + this.buildLine(graphicsData, webGLData); + + graphicsData.points = tempPoints; + } +}; + +/** + * Calculate the points for a quadratic bezier curve. (helper function..) + * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c + * + * @private + * @param fromX {number} Origin point x + * @param fromY {number} Origin point x + * @param cpX {number} Control point x + * @param cpY {number} Control point y + * @param toX {number} Destination point x + * @param toY {number} Destination point y + * @return {number[]} + */ +GraphicsRenderer.prototype.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY) +{ + + var xa, + ya, + xb, + yb, + x, + y, + n = 20, + 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; +}; + +/** + * Builds a circle to draw + * + * @private + * @param graphicsData {Graphics} The graphics object to draw + * @param webGLData {object} + */ +GraphicsRenderer.prototype.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; + + // TODO - bit hacky?? + if (graphicsData.type === CONST.SHAPES.CIRC) + { + width = circleData.radius; + height = circleData.radius; + } + else + { + width = circleData.width; + height = circleData.height; + } + + var totalSegs = 40; + var seg = (Math.PI * 2) / totalSegs ; + + var i = 0; + + if (graphicsData.fill) + { + var color = utils.hex2rgb(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); + } + + this.buildLine(graphicsData, webGLData); + + graphicsData.points = tempPoints; + } +}; + +/** + * Builds a line to draw + * + * @private + * @param graphicsData {Graphics} The graphics object containing all the necessary properties + * @param webGLData {object} + */ +GraphicsRenderer.prototype.buildLine = function (graphicsData, webGLData) +{ + // TODO OPTIMISE! + 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 math.Point(points[0], points[1]); + var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); + + // if the first point is the last point - 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 math.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 color + var color = utils.hex2rgb(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); + verts.push(r, g, b, alpha); + + verts.push(p2x + perp3x, p2y +perp3y); + verts.push(r, g, b, alpha); + + verts.push(p2x - perp3x, p2y -perp3y); + verts.push(r, g, b, alpha); + + indexCount++; + } + else + { + + verts.push(px , py); + verts.push(r, g, b, alpha); + + verts.push(p2x - (px-p2x), p2y - (py - p2y)); + verts.push(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); + verts.push(r, g, b, alpha); + + verts.push(p2x + perpx , p2y + perpy); + verts.push(r, g, b, alpha); + + indices.push(indexStart); + + for (i = 0; i < indexCount; i++) + { + indices.push(indexStart++); + } + + indices.push(indexStart-1); +}; + +/** + * Builds a complex polygon to draw + * + * @private + * @param graphicsData {Graphics} The graphics object containing all the necessary properties + * @param webGLData {object} + */ +GraphicsRenderer.prototype.buildComplexPoly = function (graphicsData, webGLData) +{ + //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. + 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 = utils.hex2rgb(graphicsData.fillColor); + + // calclate the bounds.. + var minX = Infinity; + var maxX = -Infinity; + + var minY = Infinity; + var maxY = -Infinity; + + var x,y; + + // get 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 cos there is no point making another buffer! + points.push(minX, minY, + maxX, minY, + maxX, maxY, + minX, maxY); + + // push a quad onto the end.. + + //TODO - this aint needed! + var length = points.length / 2; + for (i = 0; i < length; i++) + { + indices.push( i ); + } + +}; + +/** + * Builds a polygon to draw + * + * @private + * @param graphicsData {Graphics} The graphics object containing all the necessary properties + * @param webGLData {object} + */ +GraphicsRenderer.prototype.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 color + var color = utils.hex2rgb(graphicsData.fillColor); + var alpha = graphicsData.fillAlpha; + var r = color[0] * alpha; + var g = color[1] * alpha; + var b = color[2] * alpha; + + var triangles = utils.PolyK.Triangulate(points); + + 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; +}; diff --git a/src/core/index.js b/src/core/index.js index 6f744e9..7877f3f 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -23,7 +23,7 @@ Sprite: require('./sprites/Sprite'), SpriteBatch: require('./sprites/SpriteBatch'), - SpriteRenderer: require('./sprites/SpriteRenderer'), + SpriteRenderer: require('./sprites/SpriteRenderer'), // primitives Graphics: require('./primitives/Graphics'), @@ -45,7 +45,7 @@ WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), // WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), - + /** * This helper function will automatically detect which renderer you should be using. @@ -103,7 +103,3 @@ return core.autoDetectRenderer(width, height, options, isAndroid); } }; - -// Adding here for now.. sure there is a better place! -core.WebGLRenderer.registerObjectRenderer('sprite', core.SpriteRenderer); -core.WebGLRenderer.registerObjectRenderer('graphics', core.GraphicsRenderer); diff --git a/src/core/primitives/GraphicsRenderer.js b/src/core/primitives/GraphicsRenderer.js deleted file mode 100644 index 1a508f9..0000000 --- a/src/core/primitives/GraphicsRenderer.js +++ /dev/null @@ -1,874 +0,0 @@ -var utils = require('../utils'), - math = require('../math'), - CONST = require('../const'), - ObjectRenderer = require('../renderers/webgl/utils/ObjectRenderer'), - WebGLRenderer = require('../renderers/webgl/WebGLRenderer'), - WebGLGraphicsData = require('./WebGLGraphicsData'); - -/** - * Renders the graphics object. - * - * @class - * @private - * @namespace PIXI - * @param renderer {WebGLRenderer} The renderer this object renderer works for. - */ -function GraphicsRenderer(renderer) -{ - ObjectRenderer.call(this, renderer); - - this.graphicsDataPool = []; -} - -GraphicsRenderer.prototype = Object.create(ObjectRenderer.prototype); -GraphicsRenderer.prototype.constructor = GraphicsRenderer; -module.exports = GraphicsRenderer; - -/** - * Destroys this renderer. - * - */ -GraphicsRenderer.prototype.destroy = function () { - ObjectRenderer.prototype.destroy.call(this); - - this.graphicsDataPool = null; -}; - -/** - * Renders a graphics object. - * - * @param graphics {Graphics} The graphics object to render. - */ -GraphicsRenderer.prototype.render = function(graphics) -{ - var renderer = this.renderer; - var gl = renderer.gl; - - var projection = renderer.projection, - offset = renderer.offset, - shader = renderer.shaderManager.primitiveShader, - webGLData; - - if (graphics.dirty) - { - this.updateGraphics(graphics, gl); - } - - var webGL = graphics._webGL[gl.id]; - - // This could be speeded up for sure! - - renderer.blendModeManager.setBlendMode( graphics.blendMode ); - -// var matrix = graphics.worldTransform.clone(); -// var matrix = renderer.currentRenderTarget.projectionMatrix.clone(); -// matrix.append(graphics.worldTransform); - - for (var i = 0; i < webGL.data.length; i++) - { - if (webGL.data[i].mode === 1) - { - webGLData = webGL.data[i]; - - renderer.maskManager.pushStencil(graphics, webGLData, renderer); - - // render quad.. - gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 ); - - renderer.maskManager.popStencil(graphics, webGLData, renderer); - } - else - { - webGLData = webGL.data[i]; - - - renderer.shaderManager.setShader( shader );//activatePrimitiveShader(); - shader = renderer.shaderManager.primitiveShader; - - gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - - gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true)); - - gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); - - gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha); - - - gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer); - - gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); - gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false,4 * 6, 2 * 4); - - // set the index buffer! - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer); - gl.drawElements(gl.TRIANGLE_STRIP, webGLData.indices.length, gl.UNSIGNED_SHORT, 0 ); - } - } -}; - -/** - * Updates the graphics object - * - * @private - * @param graphicsData {Graphics} The graphics object to update - * @param gl {WebGLContext} the current WebGL drawing context - */ -GraphicsRenderer.prototype.updateGraphics = function(graphics) -{ - var gl = this.renderer.gl; - - // get the contexts graphics object - var webGL = graphics._webGL[gl.id]; - - // if the graphics object does not exist in the webGL context time to create it! - if (!webGL) - { - webGL = graphics._webGL[gl.id] = {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; - - // lop 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(); - this.graphicsDataPool.push( graphicsData ); - } - - // clear the array and reset the index.. - webGL.data = []; - webGL.lastIndex = 0; - } - - var webGLData; - - // loop through the graphics datas and construct each one.. - // if the object is a complex fill then the new stencil buffer technique will be used - // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) - { - var data = graphics.graphicsData[i]; - - if (data.type === CONST.SHAPES.POLY) - { - // 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]); - } - } - - // MAKE SURE WE HAVE THE CORRECT TYPE.. - if (data.fill) - { - if (data.points.length >= 6) - { - if (data.points.length < 6 * 2) - { - webGLData = this.switchMode(webGL, 0); - - var canDrawUsingSimple = this.buildPoly(data, webGLData); - // console.log(canDrawUsingSimple); - - if (!canDrawUsingSimple) - { - // console.log("<>>>") - webGLData = this.switchMode(webGL, 1); - this.buildComplexPoly(data, webGLData); - } - - } - else - { - webGLData = this.switchMode(webGL, 1); - this.buildComplexPoly(data, webGLData); - } - } - } - - if (data.lineWidth > 0) - { - webGLData = this.switchMode(webGL, 0); - this.buildLine(data, webGLData); - } - } - else - { - webGLData = this.switchMode(webGL, 0); - - if (data.type === CONST.SHAPES.RECT) - { - this.buildRectangle(data, webGLData); - } - else if (data.type === CONST.SHAPES.CIRC || data.type === CONST.SHAPES.ELIP) - { - this.buildCircle(data, webGLData); - } - else if (data.type === CONST.SHAPES.RREC) - { - this.buildRoundedRectangle(data, webGLData); - } - } - - webGL.lastIndex++; - } - - // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) - { - webGLData = webGL.data[i]; - - if (webGLData.dirty) - { - webGLData.upload(); - } - } -}; - -/** - * - * - * @private - * @param webGL {WebGLContext} - * @param type {number} - */ -GraphicsRenderer.prototype.switchMode = function (webGL, type) -{ - var webGLData; - - if (!webGL.data.length) - { - webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl); - webGLData.mode = type; - webGL.data.push(webGLData); - } - else - { - webGLData = webGL.data[webGL.data.length-1]; - - if (webGLData.mode !== type || type === 1) - { - webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl); - webGLData.mode = type; - webGL.data.push(webGLData); - } - } - - webGLData.dirty = true; - - return webGLData; -}; - -/** - * Builds a rectangle to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.buildRectangle = function (graphicsData, webGLData) -{ - // --- // - // need to convert points to a nice regular data - // - 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 = utils.hex2rgb(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]; - - - this.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Builds a rounded rectangle to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.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(this.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height)); - recPoints = recPoints.concat(this.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius)); - recPoints = recPoints.concat(this.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y)); - recPoints = recPoints.concat(this.quadraticBezierCurve(x + radius, y, x, y, x, y + radius)); - - if (graphicsData.fill) - { - var color = utils.hex2rgb(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 = utils.PolyK.Triangulate(recPoints); - - // - - 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; - - this.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Calculate the points for a quadratic bezier curve. (helper function..) - * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c - * - * @private - * @param fromX {number} Origin point x - * @param fromY {number} Origin point x - * @param cpX {number} Control point x - * @param cpY {number} Control point y - * @param toX {number} Destination point x - * @param toY {number} Destination point y - * @return {number[]} - */ -GraphicsRenderer.prototype.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY) -{ - - var xa, - ya, - xb, - yb, - x, - y, - n = 20, - 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; -}; - -/** - * Builds a circle to draw - * - * @private - * @param graphicsData {Graphics} The graphics object to draw - * @param webGLData {object} - */ -GraphicsRenderer.prototype.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; - - // TODO - bit hacky?? - if (graphicsData.type === CONST.SHAPES.CIRC) - { - width = circleData.radius; - height = circleData.radius; - } - else - { - width = circleData.width; - height = circleData.height; - } - - var totalSegs = 40; - var seg = (Math.PI * 2) / totalSegs ; - - var i = 0; - - if (graphicsData.fill) - { - var color = utils.hex2rgb(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); - } - - this.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Builds a line to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.buildLine = function (graphicsData, webGLData) -{ - // TODO OPTIMISE! - 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 math.Point(points[0], points[1]); - var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - - // if the first point is the last point - 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 math.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 color - var color = utils.hex2rgb(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); - verts.push(r, g, b, alpha); - - verts.push(p2x + perp3x, p2y +perp3y); - verts.push(r, g, b, alpha); - - verts.push(p2x - perp3x, p2y -perp3y); - verts.push(r, g, b, alpha); - - indexCount++; - } - else - { - - verts.push(px , py); - verts.push(r, g, b, alpha); - - verts.push(p2x - (px-p2x), p2y - (py - p2y)); - verts.push(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); - verts.push(r, g, b, alpha); - - verts.push(p2x + perpx , p2y + perpy); - verts.push(r, g, b, alpha); - - indices.push(indexStart); - - for (i = 0; i < indexCount; i++) - { - indices.push(indexStart++); - } - - indices.push(indexStart-1); -}; - -/** - * Builds a complex polygon to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.buildComplexPoly = function (graphicsData, webGLData) -{ - //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - 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 = utils.hex2rgb(graphicsData.fillColor); - - // calclate the bounds.. - var minX = Infinity; - var maxX = -Infinity; - - var minY = Infinity; - var maxY = -Infinity; - - var x,y; - - // get 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 cos there is no point making another buffer! - points.push(minX, minY, - maxX, minY, - maxX, maxY, - minX, maxY); - - // push a quad onto the end.. - - //TODO - this aint needed! - var length = points.length / 2; - for (i = 0; i < length; i++) - { - indices.push( i ); - } - -}; - -/** - * Builds a polygon to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.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 color - var color = utils.hex2rgb(graphicsData.fillColor); - var alpha = graphicsData.fillAlpha; - var r = color[0] * alpha; - var g = color[1] * alpha; - var b = color[2] * alpha; - - var triangles = utils.PolyK.Triangulate(points); - - 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; -}; diff --git a/src/core/primitives/WebGLGraphicsData.js b/src/core/primitives/WebGLGraphicsData.js deleted file mode 100755 index 41be102..0000000 --- a/src/core/primitives/WebGLGraphicsData.js +++ /dev/null @@ -1,48 +0,0 @@ -/** - * @class - * @private - */ -function WebGLGraphicsData(gl) { - this.gl = gl; - - //TODO does this need to be split before uploding?? - this.color = [0,0,0]; // color split! - this.points = []; - this.indices = []; - this.buffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - this.mode = 1; - this.alpha = 1; - this.dirty = true; -} - -WebGLGraphicsData.prototype.constructor = WebGLGraphicsData; -module.exports = WebGLGraphicsData; - -/** - * - */ -WebGLGraphicsData.prototype.reset = function () { - this.points = []; - this.indices = []; -}; - -/** - * - */ -WebGLGraphicsData.prototype.upload = function () { - var gl = this.gl; - -// this.lastIndex = graphics.graphicsData.length; - this.glPoints = new Float32Array(this.points); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); - gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); - - this.glIndicies = new Uint16Array(this.indices); - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); - - this.dirty = false; -}; diff --git a/src/core/primitives/webgl/GraphicsRenderer.js b/src/core/primitives/webgl/GraphicsRenderer.js new file mode 100644 index 0000000..b3010bd --- /dev/null +++ b/src/core/primitives/webgl/GraphicsRenderer.js @@ -0,0 +1,876 @@ +var utils = require('../utils'), + math = require('../math'), + CONST = require('../const'), + ObjectRenderer = require('../renderers/webgl/utils/ObjectRenderer'), + WebGLRenderer = require('../renderers/webgl/WebGLRenderer'), + WebGLGraphicsData = require('./WebGLGraphicsData'); + +/** + * Renders the graphics object. + * + * @class + * @private + * @namespace PIXI + * @param renderer {WebGLRenderer} The renderer this object renderer works for. + */ +function GraphicsRenderer(renderer) +{ + ObjectRenderer.call(this, renderer); + + this.graphicsDataPool = []; +} + +GraphicsRenderer.prototype = Object.create(ObjectRenderer.prototype); +GraphicsRenderer.prototype.constructor = GraphicsRenderer; +module.exports = GraphicsRenderer; + +WebGLRenderer.registerObjectRenderer('graphics', GraphicsRenderer); + +/** + * Destroys this renderer. + * + */ +GraphicsRenderer.prototype.destroy = function () { + ObjectRenderer.prototype.destroy.call(this); + + this.graphicsDataPool = null; +}; + +/** + * Renders a graphics object. + * + * @param graphics {Graphics} The graphics object to render. + */ +GraphicsRenderer.prototype.render = function(graphics) +{ + var renderer = this.renderer; + var gl = renderer.gl; + + var projection = renderer.projection, + offset = renderer.offset, + shader = renderer.shaderManager.primitiveShader, + webGLData; + + if (graphics.dirty) + { + this.updateGraphics(graphics, gl); + } + + var webGL = graphics._webGL[gl.id]; + + // This could be speeded up for sure! + + renderer.blendModeManager.setBlendMode( graphics.blendMode ); + +// var matrix = graphics.worldTransform.clone(); +// var matrix = renderer.currentRenderTarget.projectionMatrix.clone(); +// matrix.append(graphics.worldTransform); + + for (var i = 0; i < webGL.data.length; i++) + { + if (webGL.data[i].mode === 1) + { + webGLData = webGL.data[i]; + + renderer.maskManager.pushStencil(graphics, webGLData, renderer); + + // render quad.. + gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 ); + + renderer.maskManager.popStencil(graphics, webGLData, renderer); + } + else + { + webGLData = webGL.data[i]; + + + renderer.shaderManager.setShader( shader );//activatePrimitiveShader(); + shader = renderer.shaderManager.primitiveShader; + + gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); + + gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true)); + + gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); + + gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha); + + + gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer); + + gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); + gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false,4 * 6, 2 * 4); + + // set the index buffer! + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer); + gl.drawElements(gl.TRIANGLE_STRIP, webGLData.indices.length, gl.UNSIGNED_SHORT, 0 ); + } + } +}; + +/** + * Updates the graphics object + * + * @private + * @param graphicsData {Graphics} The graphics object to update + * @param gl {WebGLContext} the current WebGL drawing context + */ +GraphicsRenderer.prototype.updateGraphics = function(graphics) +{ + var gl = this.renderer.gl; + + // get the contexts graphics object + var webGL = graphics._webGL[gl.id]; + + // if the graphics object does not exist in the webGL context time to create it! + if (!webGL) + { + webGL = graphics._webGL[gl.id] = {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; + + // lop 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(); + this.graphicsDataPool.push( graphicsData ); + } + + // clear the array and reset the index.. + webGL.data = []; + webGL.lastIndex = 0; + } + + var webGLData; + + // loop through the graphics datas and construct each one.. + // if the object is a complex fill then the new stencil buffer technique will be used + // other wise graphics objects will be pushed into a batch.. + for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + { + var data = graphics.graphicsData[i]; + + if (data.type === CONST.SHAPES.POLY) + { + // 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]); + } + } + + // MAKE SURE WE HAVE THE CORRECT TYPE.. + if (data.fill) + { + if (data.points.length >= 6) + { + if (data.points.length < 6 * 2) + { + webGLData = this.switchMode(webGL, 0); + + var canDrawUsingSimple = this.buildPoly(data, webGLData); + // console.log(canDrawUsingSimple); + + if (!canDrawUsingSimple) + { + // console.log("<>>>") + webGLData = this.switchMode(webGL, 1); + this.buildComplexPoly(data, webGLData); + } + + } + else + { + webGLData = this.switchMode(webGL, 1); + this.buildComplexPoly(data, webGLData); + } + } + } + + if (data.lineWidth > 0) + { + webGLData = this.switchMode(webGL, 0); + this.buildLine(data, webGLData); + } + } + else + { + webGLData = this.switchMode(webGL, 0); + + if (data.type === CONST.SHAPES.RECT) + { + this.buildRectangle(data, webGLData); + } + else if (data.type === CONST.SHAPES.CIRC || data.type === CONST.SHAPES.ELIP) + { + this.buildCircle(data, webGLData); + } + else if (data.type === CONST.SHAPES.RREC) + { + this.buildRoundedRectangle(data, webGLData); + } + } + + webGL.lastIndex++; + } + + // upload all the dirty data... + for (i = 0; i < webGL.data.length; i++) + { + webGLData = webGL.data[i]; + + if (webGLData.dirty) + { + webGLData.upload(); + } + } +}; + +/** + * + * + * @private + * @param webGL {WebGLContext} + * @param type {number} + */ +GraphicsRenderer.prototype.switchMode = function (webGL, type) +{ + var webGLData; + + if (!webGL.data.length) + { + webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl); + webGLData.mode = type; + webGL.data.push(webGLData); + } + else + { + webGLData = webGL.data[webGL.data.length-1]; + + if (webGLData.mode !== type || type === 1) + { + webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl); + webGLData.mode = type; + webGL.data.push(webGLData); + } + } + + webGLData.dirty = true; + + return webGLData; +}; + +/** + * Builds a rectangle to draw + * + * @private + * @param graphicsData {Graphics} The graphics object containing all the necessary properties + * @param webGLData {object} + */ +GraphicsRenderer.prototype.buildRectangle = function (graphicsData, webGLData) +{ + // --- // + // need to convert points to a nice regular data + // + 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 = utils.hex2rgb(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]; + + + this.buildLine(graphicsData, webGLData); + + graphicsData.points = tempPoints; + } +}; + +/** + * Builds a rounded rectangle to draw + * + * @private + * @param graphicsData {Graphics} The graphics object containing all the necessary properties + * @param webGLData {object} + */ +GraphicsRenderer.prototype.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(this.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height)); + recPoints = recPoints.concat(this.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius)); + recPoints = recPoints.concat(this.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y)); + recPoints = recPoints.concat(this.quadraticBezierCurve(x + radius, y, x, y, x, y + radius)); + + if (graphicsData.fill) + { + var color = utils.hex2rgb(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 = utils.PolyK.Triangulate(recPoints); + + // + + 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; + + this.buildLine(graphicsData, webGLData); + + graphicsData.points = tempPoints; + } +}; + +/** + * Calculate the points for a quadratic bezier curve. (helper function..) + * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c + * + * @private + * @param fromX {number} Origin point x + * @param fromY {number} Origin point x + * @param cpX {number} Control point x + * @param cpY {number} Control point y + * @param toX {number} Destination point x + * @param toY {number} Destination point y + * @return {number[]} + */ +GraphicsRenderer.prototype.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY) +{ + + var xa, + ya, + xb, + yb, + x, + y, + n = 20, + 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; +}; + +/** + * Builds a circle to draw + * + * @private + * @param graphicsData {Graphics} The graphics object to draw + * @param webGLData {object} + */ +GraphicsRenderer.prototype.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; + + // TODO - bit hacky?? + if (graphicsData.type === CONST.SHAPES.CIRC) + { + width = circleData.radius; + height = circleData.radius; + } + else + { + width = circleData.width; + height = circleData.height; + } + + var totalSegs = 40; + var seg = (Math.PI * 2) / totalSegs ; + + var i = 0; + + if (graphicsData.fill) + { + var color = utils.hex2rgb(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); + } + + this.buildLine(graphicsData, webGLData); + + graphicsData.points = tempPoints; + } +}; + +/** + * Builds a line to draw + * + * @private + * @param graphicsData {Graphics} The graphics object containing all the necessary properties + * @param webGLData {object} + */ +GraphicsRenderer.prototype.buildLine = function (graphicsData, webGLData) +{ + // TODO OPTIMISE! + 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 math.Point(points[0], points[1]); + var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); + + // if the first point is the last point - 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 math.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 color + var color = utils.hex2rgb(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); + verts.push(r, g, b, alpha); + + verts.push(p2x + perp3x, p2y +perp3y); + verts.push(r, g, b, alpha); + + verts.push(p2x - perp3x, p2y -perp3y); + verts.push(r, g, b, alpha); + + indexCount++; + } + else + { + + verts.push(px , py); + verts.push(r, g, b, alpha); + + verts.push(p2x - (px-p2x), p2y - (py - p2y)); + verts.push(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); + verts.push(r, g, b, alpha); + + verts.push(p2x + perpx , p2y + perpy); + verts.push(r, g, b, alpha); + + indices.push(indexStart); + + for (i = 0; i < indexCount; i++) + { + indices.push(indexStart++); + } + + indices.push(indexStart-1); +}; + +/** + * Builds a complex polygon to draw + * + * @private + * @param graphicsData {Graphics} The graphics object containing all the necessary properties + * @param webGLData {object} + */ +GraphicsRenderer.prototype.buildComplexPoly = function (graphicsData, webGLData) +{ + //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. + 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 = utils.hex2rgb(graphicsData.fillColor); + + // calclate the bounds.. + var minX = Infinity; + var maxX = -Infinity; + + var minY = Infinity; + var maxY = -Infinity; + + var x,y; + + // get 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 cos there is no point making another buffer! + points.push(minX, minY, + maxX, minY, + maxX, maxY, + minX, maxY); + + // push a quad onto the end.. + + //TODO - this aint needed! + var length = points.length / 2; + for (i = 0; i < length; i++) + { + indices.push( i ); + } + +}; + +/** + * Builds a polygon to draw + * + * @private + * @param graphicsData {Graphics} The graphics object containing all the necessary properties + * @param webGLData {object} + */ +GraphicsRenderer.prototype.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 color + var color = utils.hex2rgb(graphicsData.fillColor); + var alpha = graphicsData.fillAlpha; + var r = color[0] * alpha; + var g = color[1] * alpha; + var b = color[2] * alpha; + + var triangles = utils.PolyK.Triangulate(points); + + 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; +}; diff --git a/src/core/primitives/webgl/WebGLGraphicsData.js b/src/core/primitives/webgl/WebGLGraphicsData.js new file mode 100644 index 0000000..41be102 --- /dev/null +++ b/src/core/primitives/webgl/WebGLGraphicsData.js @@ -0,0 +1,48 @@ +/** + * @class + * @private + */ +function WebGLGraphicsData(gl) { + this.gl = gl; + + //TODO does this need to be split before uploding?? + this.color = [0,0,0]; // color split! + this.points = []; + this.indices = []; + this.buffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + this.mode = 1; + this.alpha = 1; + this.dirty = true; +} + +WebGLGraphicsData.prototype.constructor = WebGLGraphicsData; +module.exports = WebGLGraphicsData; + +/** + * + */ +WebGLGraphicsData.prototype.reset = function () { + this.points = []; + this.indices = []; +}; + +/** + * + */ +WebGLGraphicsData.prototype.upload = function () { + var gl = this.gl; + +// this.lastIndex = graphics.graphicsData.length; + this.glPoints = new Float32Array(this.points); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); + gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); + + this.glIndicies = new Uint16Array(this.indices); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); + + this.dirty = false; +}; diff --git a/src/core/index.js b/src/core/index.js index 6f744e9..7877f3f 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -23,7 +23,7 @@ Sprite: require('./sprites/Sprite'), SpriteBatch: require('./sprites/SpriteBatch'), - SpriteRenderer: require('./sprites/SpriteRenderer'), + SpriteRenderer: require('./sprites/SpriteRenderer'), // primitives Graphics: require('./primitives/Graphics'), @@ -45,7 +45,7 @@ WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), // WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), - + /** * This helper function will automatically detect which renderer you should be using. @@ -103,7 +103,3 @@ return core.autoDetectRenderer(width, height, options, isAndroid); } }; - -// Adding here for now.. sure there is a better place! -core.WebGLRenderer.registerObjectRenderer('sprite', core.SpriteRenderer); -core.WebGLRenderer.registerObjectRenderer('graphics', core.GraphicsRenderer); diff --git a/src/core/primitives/GraphicsRenderer.js b/src/core/primitives/GraphicsRenderer.js deleted file mode 100644 index 1a508f9..0000000 --- a/src/core/primitives/GraphicsRenderer.js +++ /dev/null @@ -1,874 +0,0 @@ -var utils = require('../utils'), - math = require('../math'), - CONST = require('../const'), - ObjectRenderer = require('../renderers/webgl/utils/ObjectRenderer'), - WebGLRenderer = require('../renderers/webgl/WebGLRenderer'), - WebGLGraphicsData = require('./WebGLGraphicsData'); - -/** - * Renders the graphics object. - * - * @class - * @private - * @namespace PIXI - * @param renderer {WebGLRenderer} The renderer this object renderer works for. - */ -function GraphicsRenderer(renderer) -{ - ObjectRenderer.call(this, renderer); - - this.graphicsDataPool = []; -} - -GraphicsRenderer.prototype = Object.create(ObjectRenderer.prototype); -GraphicsRenderer.prototype.constructor = GraphicsRenderer; -module.exports = GraphicsRenderer; - -/** - * Destroys this renderer. - * - */ -GraphicsRenderer.prototype.destroy = function () { - ObjectRenderer.prototype.destroy.call(this); - - this.graphicsDataPool = null; -}; - -/** - * Renders a graphics object. - * - * @param graphics {Graphics} The graphics object to render. - */ -GraphicsRenderer.prototype.render = function(graphics) -{ - var renderer = this.renderer; - var gl = renderer.gl; - - var projection = renderer.projection, - offset = renderer.offset, - shader = renderer.shaderManager.primitiveShader, - webGLData; - - if (graphics.dirty) - { - this.updateGraphics(graphics, gl); - } - - var webGL = graphics._webGL[gl.id]; - - // This could be speeded up for sure! - - renderer.blendModeManager.setBlendMode( graphics.blendMode ); - -// var matrix = graphics.worldTransform.clone(); -// var matrix = renderer.currentRenderTarget.projectionMatrix.clone(); -// matrix.append(graphics.worldTransform); - - for (var i = 0; i < webGL.data.length; i++) - { - if (webGL.data[i].mode === 1) - { - webGLData = webGL.data[i]; - - renderer.maskManager.pushStencil(graphics, webGLData, renderer); - - // render quad.. - gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 ); - - renderer.maskManager.popStencil(graphics, webGLData, renderer); - } - else - { - webGLData = webGL.data[i]; - - - renderer.shaderManager.setShader( shader );//activatePrimitiveShader(); - shader = renderer.shaderManager.primitiveShader; - - gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - - gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true)); - - gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); - - gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha); - - - gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer); - - gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); - gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false,4 * 6, 2 * 4); - - // set the index buffer! - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer); - gl.drawElements(gl.TRIANGLE_STRIP, webGLData.indices.length, gl.UNSIGNED_SHORT, 0 ); - } - } -}; - -/** - * Updates the graphics object - * - * @private - * @param graphicsData {Graphics} The graphics object to update - * @param gl {WebGLContext} the current WebGL drawing context - */ -GraphicsRenderer.prototype.updateGraphics = function(graphics) -{ - var gl = this.renderer.gl; - - // get the contexts graphics object - var webGL = graphics._webGL[gl.id]; - - // if the graphics object does not exist in the webGL context time to create it! - if (!webGL) - { - webGL = graphics._webGL[gl.id] = {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; - - // lop 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(); - this.graphicsDataPool.push( graphicsData ); - } - - // clear the array and reset the index.. - webGL.data = []; - webGL.lastIndex = 0; - } - - var webGLData; - - // loop through the graphics datas and construct each one.. - // if the object is a complex fill then the new stencil buffer technique will be used - // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) - { - var data = graphics.graphicsData[i]; - - if (data.type === CONST.SHAPES.POLY) - { - // 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]); - } - } - - // MAKE SURE WE HAVE THE CORRECT TYPE.. - if (data.fill) - { - if (data.points.length >= 6) - { - if (data.points.length < 6 * 2) - { - webGLData = this.switchMode(webGL, 0); - - var canDrawUsingSimple = this.buildPoly(data, webGLData); - // console.log(canDrawUsingSimple); - - if (!canDrawUsingSimple) - { - // console.log("<>>>") - webGLData = this.switchMode(webGL, 1); - this.buildComplexPoly(data, webGLData); - } - - } - else - { - webGLData = this.switchMode(webGL, 1); - this.buildComplexPoly(data, webGLData); - } - } - } - - if (data.lineWidth > 0) - { - webGLData = this.switchMode(webGL, 0); - this.buildLine(data, webGLData); - } - } - else - { - webGLData = this.switchMode(webGL, 0); - - if (data.type === CONST.SHAPES.RECT) - { - this.buildRectangle(data, webGLData); - } - else if (data.type === CONST.SHAPES.CIRC || data.type === CONST.SHAPES.ELIP) - { - this.buildCircle(data, webGLData); - } - else if (data.type === CONST.SHAPES.RREC) - { - this.buildRoundedRectangle(data, webGLData); - } - } - - webGL.lastIndex++; - } - - // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) - { - webGLData = webGL.data[i]; - - if (webGLData.dirty) - { - webGLData.upload(); - } - } -}; - -/** - * - * - * @private - * @param webGL {WebGLContext} - * @param type {number} - */ -GraphicsRenderer.prototype.switchMode = function (webGL, type) -{ - var webGLData; - - if (!webGL.data.length) - { - webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl); - webGLData.mode = type; - webGL.data.push(webGLData); - } - else - { - webGLData = webGL.data[webGL.data.length-1]; - - if (webGLData.mode !== type || type === 1) - { - webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl); - webGLData.mode = type; - webGL.data.push(webGLData); - } - } - - webGLData.dirty = true; - - return webGLData; -}; - -/** - * Builds a rectangle to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.buildRectangle = function (graphicsData, webGLData) -{ - // --- // - // need to convert points to a nice regular data - // - 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 = utils.hex2rgb(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]; - - - this.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Builds a rounded rectangle to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.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(this.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height)); - recPoints = recPoints.concat(this.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius)); - recPoints = recPoints.concat(this.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y)); - recPoints = recPoints.concat(this.quadraticBezierCurve(x + radius, y, x, y, x, y + radius)); - - if (graphicsData.fill) - { - var color = utils.hex2rgb(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 = utils.PolyK.Triangulate(recPoints); - - // - - 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; - - this.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Calculate the points for a quadratic bezier curve. (helper function..) - * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c - * - * @private - * @param fromX {number} Origin point x - * @param fromY {number} Origin point x - * @param cpX {number} Control point x - * @param cpY {number} Control point y - * @param toX {number} Destination point x - * @param toY {number} Destination point y - * @return {number[]} - */ -GraphicsRenderer.prototype.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY) -{ - - var xa, - ya, - xb, - yb, - x, - y, - n = 20, - 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; -}; - -/** - * Builds a circle to draw - * - * @private - * @param graphicsData {Graphics} The graphics object to draw - * @param webGLData {object} - */ -GraphicsRenderer.prototype.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; - - // TODO - bit hacky?? - if (graphicsData.type === CONST.SHAPES.CIRC) - { - width = circleData.radius; - height = circleData.radius; - } - else - { - width = circleData.width; - height = circleData.height; - } - - var totalSegs = 40; - var seg = (Math.PI * 2) / totalSegs ; - - var i = 0; - - if (graphicsData.fill) - { - var color = utils.hex2rgb(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); - } - - this.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Builds a line to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.buildLine = function (graphicsData, webGLData) -{ - // TODO OPTIMISE! - 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 math.Point(points[0], points[1]); - var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - - // if the first point is the last point - 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 math.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 color - var color = utils.hex2rgb(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); - verts.push(r, g, b, alpha); - - verts.push(p2x + perp3x, p2y +perp3y); - verts.push(r, g, b, alpha); - - verts.push(p2x - perp3x, p2y -perp3y); - verts.push(r, g, b, alpha); - - indexCount++; - } - else - { - - verts.push(px , py); - verts.push(r, g, b, alpha); - - verts.push(p2x - (px-p2x), p2y - (py - p2y)); - verts.push(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); - verts.push(r, g, b, alpha); - - verts.push(p2x + perpx , p2y + perpy); - verts.push(r, g, b, alpha); - - indices.push(indexStart); - - for (i = 0; i < indexCount; i++) - { - indices.push(indexStart++); - } - - indices.push(indexStart-1); -}; - -/** - * Builds a complex polygon to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.buildComplexPoly = function (graphicsData, webGLData) -{ - //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - 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 = utils.hex2rgb(graphicsData.fillColor); - - // calclate the bounds.. - var minX = Infinity; - var maxX = -Infinity; - - var minY = Infinity; - var maxY = -Infinity; - - var x,y; - - // get 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 cos there is no point making another buffer! - points.push(minX, minY, - maxX, minY, - maxX, maxY, - minX, maxY); - - // push a quad onto the end.. - - //TODO - this aint needed! - var length = points.length / 2; - for (i = 0; i < length; i++) - { - indices.push( i ); - } - -}; - -/** - * Builds a polygon to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.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 color - var color = utils.hex2rgb(graphicsData.fillColor); - var alpha = graphicsData.fillAlpha; - var r = color[0] * alpha; - var g = color[1] * alpha; - var b = color[2] * alpha; - - var triangles = utils.PolyK.Triangulate(points); - - 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; -}; diff --git a/src/core/primitives/WebGLGraphicsData.js b/src/core/primitives/WebGLGraphicsData.js deleted file mode 100755 index 41be102..0000000 --- a/src/core/primitives/WebGLGraphicsData.js +++ /dev/null @@ -1,48 +0,0 @@ -/** - * @class - * @private - */ -function WebGLGraphicsData(gl) { - this.gl = gl; - - //TODO does this need to be split before uploding?? - this.color = [0,0,0]; // color split! - this.points = []; - this.indices = []; - this.buffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - this.mode = 1; - this.alpha = 1; - this.dirty = true; -} - -WebGLGraphicsData.prototype.constructor = WebGLGraphicsData; -module.exports = WebGLGraphicsData; - -/** - * - */ -WebGLGraphicsData.prototype.reset = function () { - this.points = []; - this.indices = []; -}; - -/** - * - */ -WebGLGraphicsData.prototype.upload = function () { - var gl = this.gl; - -// this.lastIndex = graphics.graphicsData.length; - this.glPoints = new Float32Array(this.points); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); - gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); - - this.glIndicies = new Uint16Array(this.indices); - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); - - this.dirty = false; -}; diff --git a/src/core/primitives/webgl/GraphicsRenderer.js b/src/core/primitives/webgl/GraphicsRenderer.js new file mode 100644 index 0000000..b3010bd --- /dev/null +++ b/src/core/primitives/webgl/GraphicsRenderer.js @@ -0,0 +1,876 @@ +var utils = require('../utils'), + math = require('../math'), + CONST = require('../const'), + ObjectRenderer = require('../renderers/webgl/utils/ObjectRenderer'), + WebGLRenderer = require('../renderers/webgl/WebGLRenderer'), + WebGLGraphicsData = require('./WebGLGraphicsData'); + +/** + * Renders the graphics object. + * + * @class + * @private + * @namespace PIXI + * @param renderer {WebGLRenderer} The renderer this object renderer works for. + */ +function GraphicsRenderer(renderer) +{ + ObjectRenderer.call(this, renderer); + + this.graphicsDataPool = []; +} + +GraphicsRenderer.prototype = Object.create(ObjectRenderer.prototype); +GraphicsRenderer.prototype.constructor = GraphicsRenderer; +module.exports = GraphicsRenderer; + +WebGLRenderer.registerObjectRenderer('graphics', GraphicsRenderer); + +/** + * Destroys this renderer. + * + */ +GraphicsRenderer.prototype.destroy = function () { + ObjectRenderer.prototype.destroy.call(this); + + this.graphicsDataPool = null; +}; + +/** + * Renders a graphics object. + * + * @param graphics {Graphics} The graphics object to render. + */ +GraphicsRenderer.prototype.render = function(graphics) +{ + var renderer = this.renderer; + var gl = renderer.gl; + + var projection = renderer.projection, + offset = renderer.offset, + shader = renderer.shaderManager.primitiveShader, + webGLData; + + if (graphics.dirty) + { + this.updateGraphics(graphics, gl); + } + + var webGL = graphics._webGL[gl.id]; + + // This could be speeded up for sure! + + renderer.blendModeManager.setBlendMode( graphics.blendMode ); + +// var matrix = graphics.worldTransform.clone(); +// var matrix = renderer.currentRenderTarget.projectionMatrix.clone(); +// matrix.append(graphics.worldTransform); + + for (var i = 0; i < webGL.data.length; i++) + { + if (webGL.data[i].mode === 1) + { + webGLData = webGL.data[i]; + + renderer.maskManager.pushStencil(graphics, webGLData, renderer); + + // render quad.. + gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 ); + + renderer.maskManager.popStencil(graphics, webGLData, renderer); + } + else + { + webGLData = webGL.data[i]; + + + renderer.shaderManager.setShader( shader );//activatePrimitiveShader(); + shader = renderer.shaderManager.primitiveShader; + + gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); + + gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true)); + + gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); + + gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha); + + + gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer); + + gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); + gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false,4 * 6, 2 * 4); + + // set the index buffer! + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer); + gl.drawElements(gl.TRIANGLE_STRIP, webGLData.indices.length, gl.UNSIGNED_SHORT, 0 ); + } + } +}; + +/** + * Updates the graphics object + * + * @private + * @param graphicsData {Graphics} The graphics object to update + * @param gl {WebGLContext} the current WebGL drawing context + */ +GraphicsRenderer.prototype.updateGraphics = function(graphics) +{ + var gl = this.renderer.gl; + + // get the contexts graphics object + var webGL = graphics._webGL[gl.id]; + + // if the graphics object does not exist in the webGL context time to create it! + if (!webGL) + { + webGL = graphics._webGL[gl.id] = {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; + + // lop 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(); + this.graphicsDataPool.push( graphicsData ); + } + + // clear the array and reset the index.. + webGL.data = []; + webGL.lastIndex = 0; + } + + var webGLData; + + // loop through the graphics datas and construct each one.. + // if the object is a complex fill then the new stencil buffer technique will be used + // other wise graphics objects will be pushed into a batch.. + for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + { + var data = graphics.graphicsData[i]; + + if (data.type === CONST.SHAPES.POLY) + { + // 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]); + } + } + + // MAKE SURE WE HAVE THE CORRECT TYPE.. + if (data.fill) + { + if (data.points.length >= 6) + { + if (data.points.length < 6 * 2) + { + webGLData = this.switchMode(webGL, 0); + + var canDrawUsingSimple = this.buildPoly(data, webGLData); + // console.log(canDrawUsingSimple); + + if (!canDrawUsingSimple) + { + // console.log("<>>>") + webGLData = this.switchMode(webGL, 1); + this.buildComplexPoly(data, webGLData); + } + + } + else + { + webGLData = this.switchMode(webGL, 1); + this.buildComplexPoly(data, webGLData); + } + } + } + + if (data.lineWidth > 0) + { + webGLData = this.switchMode(webGL, 0); + this.buildLine(data, webGLData); + } + } + else + { + webGLData = this.switchMode(webGL, 0); + + if (data.type === CONST.SHAPES.RECT) + { + this.buildRectangle(data, webGLData); + } + else if (data.type === CONST.SHAPES.CIRC || data.type === CONST.SHAPES.ELIP) + { + this.buildCircle(data, webGLData); + } + else if (data.type === CONST.SHAPES.RREC) + { + this.buildRoundedRectangle(data, webGLData); + } + } + + webGL.lastIndex++; + } + + // upload all the dirty data... + for (i = 0; i < webGL.data.length; i++) + { + webGLData = webGL.data[i]; + + if (webGLData.dirty) + { + webGLData.upload(); + } + } +}; + +/** + * + * + * @private + * @param webGL {WebGLContext} + * @param type {number} + */ +GraphicsRenderer.prototype.switchMode = function (webGL, type) +{ + var webGLData; + + if (!webGL.data.length) + { + webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl); + webGLData.mode = type; + webGL.data.push(webGLData); + } + else + { + webGLData = webGL.data[webGL.data.length-1]; + + if (webGLData.mode !== type || type === 1) + { + webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl); + webGLData.mode = type; + webGL.data.push(webGLData); + } + } + + webGLData.dirty = true; + + return webGLData; +}; + +/** + * Builds a rectangle to draw + * + * @private + * @param graphicsData {Graphics} The graphics object containing all the necessary properties + * @param webGLData {object} + */ +GraphicsRenderer.prototype.buildRectangle = function (graphicsData, webGLData) +{ + // --- // + // need to convert points to a nice regular data + // + 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 = utils.hex2rgb(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]; + + + this.buildLine(graphicsData, webGLData); + + graphicsData.points = tempPoints; + } +}; + +/** + * Builds a rounded rectangle to draw + * + * @private + * @param graphicsData {Graphics} The graphics object containing all the necessary properties + * @param webGLData {object} + */ +GraphicsRenderer.prototype.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(this.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height)); + recPoints = recPoints.concat(this.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius)); + recPoints = recPoints.concat(this.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y)); + recPoints = recPoints.concat(this.quadraticBezierCurve(x + radius, y, x, y, x, y + radius)); + + if (graphicsData.fill) + { + var color = utils.hex2rgb(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 = utils.PolyK.Triangulate(recPoints); + + // + + 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; + + this.buildLine(graphicsData, webGLData); + + graphicsData.points = tempPoints; + } +}; + +/** + * Calculate the points for a quadratic bezier curve. (helper function..) + * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c + * + * @private + * @param fromX {number} Origin point x + * @param fromY {number} Origin point x + * @param cpX {number} Control point x + * @param cpY {number} Control point y + * @param toX {number} Destination point x + * @param toY {number} Destination point y + * @return {number[]} + */ +GraphicsRenderer.prototype.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY) +{ + + var xa, + ya, + xb, + yb, + x, + y, + n = 20, + 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; +}; + +/** + * Builds a circle to draw + * + * @private + * @param graphicsData {Graphics} The graphics object to draw + * @param webGLData {object} + */ +GraphicsRenderer.prototype.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; + + // TODO - bit hacky?? + if (graphicsData.type === CONST.SHAPES.CIRC) + { + width = circleData.radius; + height = circleData.radius; + } + else + { + width = circleData.width; + height = circleData.height; + } + + var totalSegs = 40; + var seg = (Math.PI * 2) / totalSegs ; + + var i = 0; + + if (graphicsData.fill) + { + var color = utils.hex2rgb(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); + } + + this.buildLine(graphicsData, webGLData); + + graphicsData.points = tempPoints; + } +}; + +/** + * Builds a line to draw + * + * @private + * @param graphicsData {Graphics} The graphics object containing all the necessary properties + * @param webGLData {object} + */ +GraphicsRenderer.prototype.buildLine = function (graphicsData, webGLData) +{ + // TODO OPTIMISE! + 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 math.Point(points[0], points[1]); + var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); + + // if the first point is the last point - 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 math.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 color + var color = utils.hex2rgb(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); + verts.push(r, g, b, alpha); + + verts.push(p2x + perp3x, p2y +perp3y); + verts.push(r, g, b, alpha); + + verts.push(p2x - perp3x, p2y -perp3y); + verts.push(r, g, b, alpha); + + indexCount++; + } + else + { + + verts.push(px , py); + verts.push(r, g, b, alpha); + + verts.push(p2x - (px-p2x), p2y - (py - p2y)); + verts.push(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); + verts.push(r, g, b, alpha); + + verts.push(p2x + perpx , p2y + perpy); + verts.push(r, g, b, alpha); + + indices.push(indexStart); + + for (i = 0; i < indexCount; i++) + { + indices.push(indexStart++); + } + + indices.push(indexStart-1); +}; + +/** + * Builds a complex polygon to draw + * + * @private + * @param graphicsData {Graphics} The graphics object containing all the necessary properties + * @param webGLData {object} + */ +GraphicsRenderer.prototype.buildComplexPoly = function (graphicsData, webGLData) +{ + //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. + 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 = utils.hex2rgb(graphicsData.fillColor); + + // calclate the bounds.. + var minX = Infinity; + var maxX = -Infinity; + + var minY = Infinity; + var maxY = -Infinity; + + var x,y; + + // get 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 cos there is no point making another buffer! + points.push(minX, minY, + maxX, minY, + maxX, maxY, + minX, maxY); + + // push a quad onto the end.. + + //TODO - this aint needed! + var length = points.length / 2; + for (i = 0; i < length; i++) + { + indices.push( i ); + } + +}; + +/** + * Builds a polygon to draw + * + * @private + * @param graphicsData {Graphics} The graphics object containing all the necessary properties + * @param webGLData {object} + */ +GraphicsRenderer.prototype.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 color + var color = utils.hex2rgb(graphicsData.fillColor); + var alpha = graphicsData.fillAlpha; + var r = color[0] * alpha; + var g = color[1] * alpha; + var b = color[2] * alpha; + + var triangles = utils.PolyK.Triangulate(points); + + 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; +}; diff --git a/src/core/primitives/webgl/WebGLGraphicsData.js b/src/core/primitives/webgl/WebGLGraphicsData.js new file mode 100644 index 0000000..41be102 --- /dev/null +++ b/src/core/primitives/webgl/WebGLGraphicsData.js @@ -0,0 +1,48 @@ +/** + * @class + * @private + */ +function WebGLGraphicsData(gl) { + this.gl = gl; + + //TODO does this need to be split before uploding?? + this.color = [0,0,0]; // color split! + this.points = []; + this.indices = []; + this.buffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + this.mode = 1; + this.alpha = 1; + this.dirty = true; +} + +WebGLGraphicsData.prototype.constructor = WebGLGraphicsData; +module.exports = WebGLGraphicsData; + +/** + * + */ +WebGLGraphicsData.prototype.reset = function () { + this.points = []; + this.indices = []; +}; + +/** + * + */ +WebGLGraphicsData.prototype.upload = function () { + var gl = this.gl; + +// this.lastIndex = graphics.graphicsData.length; + this.glPoints = new Float32Array(this.points); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); + gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); + + this.glIndicies = new Uint16Array(this.indices); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); + + this.dirty = false; +}; diff --git a/src/core/sprites/SpriteRenderer.js b/src/core/sprites/SpriteRenderer.js deleted file mode 100644 index fd9a802..0000000 --- a/src/core/sprites/SpriteRenderer.js +++ /dev/null @@ -1,537 +0,0 @@ -var ObjectRenderer = require('../renderers/webgl/utils/ObjectRenderer'), - Shader = require('../renderers/webgl/shaders/Shader'), - SpriteShader = require('../renderers/webgl/shaders/SpriteShader'), - WebGLRenderer = require('../renderers/webgl/WebGLRenderer'); - math = require('../math'); - -/** - * @author Mat Groves - * - * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! - * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now share 4 bytes on the vertex buffer - * - * Heavily inspired by LibGDX's SpriteRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/SpriteRenderer.java - */ - -/** - * - * @class - * @private - * @namespace PIXI - * @param renderer {WebGLRenderer} The renderer this sprite batch works for. - */ -function SpriteRenderer(renderer) -{ - ObjectRenderer.call(this, renderer); - - /** - * - * - * @member {WebGLRenderer} - */ - this.renderer = renderer; - - /** - * - * - * @member {number} - */ - this.vertSize = 5; - - /** - * - * - * @member {number} - */ - this.vertByteSize = this.vertSize * 4; - - /** - * The number of images in the SpriteBatch before it flushes. - * - * @member {number} - */ - this.size = 2000;//Math.pow(2, 16) / this.vertSize; - - // the total number of bytes in our batch - var numVerts = this.size * 4 * this.vertByteSize; - // the total number of indices in our batch - var numIndices = this.size * 6; - - /** - * Holds the vertices - * - * @member {ArrayBuffer} - */ - this.vertices = new ArrayBuffer(numVerts); - - /** - * View on the vertices as a Float32Array - * - * @member {Float32Array} - */ - this.positions = new Float32Array(this.vertices); - - /** - * View on the vertices as a Uint32Array - * - * @member {Uint32Array} - */ - this.colors = new Uint32Array(this.vertices); - - /** - * Holds the indices - * - * @member {Uint16Array} - */ - this.indices = new Uint16Array(numIndices); - - /** - * - * - * @member {number} - */ - this.lastIndexCount = 0; - - for (var i=0, j=0; i < numIndices; i += 6, j += 4) - { - this.indices[i + 0] = j + 0; - this.indices[i + 1] = j + 1; - this.indices[i + 2] = j + 2; - this.indices[i + 3] = j + 0; - this.indices[i + 4] = j + 2; - this.indices[i + 5] = j + 3; - } - - /** - * - * - * @member {boolean} - */ - this.drawing = false; - - /** - * - * - * @member {number} - */ - this.currentBatchSize = 0; - - /** - * - * - * @member {BaseTexture} - */ - this.currentBaseTexture = null; - - /** - * - * - * @member {boolean} - */ - this.dirty = true; - - /** - * - * - * @member {Array} - */ - this.textures = []; - - /** - * - * - * @member {Array} - */ - this.blendModes = []; - - /** - * - * - * @member {Array} - */ - this.shaders = []; - - /** - * - * - * @member {Array} - */ - this.sprites = []; - - /** - * The default shader that is used if a sprite doesn't have a more specific one. - * - * @member {Shader} - */ - this.shader = null; - - // listen for context and update necessary buffers - var self = this; - - this.setupContext(); -} - -SpriteRenderer.prototype = Object.create(ObjectRenderer.prototype); -SpriteRenderer.prototype.constructor = SpriteRenderer; -module.exports = SpriteRenderer; - - - -/** - * Sets up the renderer context and necessary buffers. - * - * @private - * @param gl {WebGLContext} the current WebGL drawing context - */ -SpriteRenderer.prototype.setupContext = function () -{ - var gl = this.renderer.gl; - - // setup default shader - this.shader = new SpriteShader(gl); - - // create a couple of buffers - this.vertexBuffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - - // 65535 is max index, so 65535 / 6 = 10922. - - //upload the index data - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.vertices, gl.DYNAMIC_DRAW); - - this.currentBlendMode = 99999; -}; - -/** - * Renders the sprite object. - * - * @param sprite {Sprite} the sprite to render when using this spritebatch - */ -SpriteRenderer.prototype.render = function (sprite) -{ - var texture = sprite.texture; - - //TODO set blend modes.. - // check texture.. - if (this.currentBatchSize >= this.size) - { - this.flush(); - this.currentBaseTexture = texture.baseTexture; - } - - // get the uvs for the texture - var uvs = texture._uvs; - - // if the uvs have not updated then no point rendering just yet! - if (!uvs) - { - return; - } - - // TODO trim?? - var aX = sprite.anchor.x; - var aY = sprite.anchor.y; - - var w0, w1, h0, h1; - - if (texture.trim) - { - // if the sprite is trimmed then we need to add the extra space before transforming the sprite coords.. - var trim = texture.trim; - - w1 = trim.x - aX * trim.width; - w0 = w1 + texture.crop.width; - - h1 = trim.y - aY * trim.height; - h0 = h1 + texture.crop.height; - - } - else - { - w0 = (texture.frame.width ) * (1-aX); - w1 = (texture.frame.width ) * -aX; - - h0 = texture.frame.height * (1-aY); - h1 = texture.frame.height * -aY; - } - - var index = this.currentBatchSize * this.vertByteSize; - - var resolution = texture.baseTexture.resolution; - - var worldTransform = sprite.worldTransform; - - var a = worldTransform.a / resolution; - var b = worldTransform.b / resolution; - var c = worldTransform.c / resolution; - var d = worldTransform.d / resolution; - var tx = worldTransform.tx; - var ty = worldTransform.ty; - - var colors = this.colors; - var positions = this.positions; - - if (this.renderer.roundPixels) - { - // xy - positions[index] = a * w1 + c * h1 + tx | 0; - positions[index+1] = d * h1 + b * w1 + ty | 0; - - // xy - positions[index+5] = a * w0 + c * h1 + tx | 0; - positions[index+6] = d * h1 + b * w0 + ty | 0; - - // xy - positions[index+10] = a * w0 + c * h0 + tx | 0; - positions[index+11] = d * h0 + b * w0 + ty | 0; - - // xy - positions[index+15] = a * w1 + c * h0 + tx | 0; - positions[index+16] = d * h0 + b * w1 + ty | 0; - } - else - { - // xy - positions[index] = a * w1 + c * h1 + tx; - positions[index+1] = d * h1 + b * w1 + ty; - - // xy - positions[index+5] = a * w0 + c * h1 + tx; - positions[index+6] = d * h1 + b * w0 + ty; - - // xy - positions[index+10] = a * w0 + c * h0 + tx; - positions[index+11] = d * h0 + b * w0 + ty; - - // xy - positions[index+15] = a * w1 + c * h0 + tx; - positions[index+16] = d * h0 + b * w1 + ty; - } - - // uv - positions[index+2] = uvs.x0; - positions[index+3] = uvs.y0; - - // uv - positions[index+7] = uvs.x1; - positions[index+8] = uvs.y1; - - // uv - positions[index+12] = uvs.x2; - positions[index+13] = uvs.y2; - - // uv - positions[index+17] = uvs.x3; - positions[index+18] = uvs.y3; - - // color and alpha - var tint = sprite.tint; - colors[index+4] = colors[index+9] = colors[index+14] = colors[index+19] = (tint >> 16) + (tint & 0xff00) + ((tint & 0xff) << 16) + (sprite.worldAlpha * 255 << 24); - - // increment the batchsize - this.sprites[this.currentBatchSize++] = sprite; -}; - -/** - * Renders the content and empties the current batch. - * - */ -SpriteRenderer.prototype.flush = function () -{ - // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize === 0) - { - return; - } - - var gl = this.renderer.gl; - var shader; - - if (this.dirty) - { - this.dirty = false; - // bind the main texture - gl.activeTexture(gl.TEXTURE0); - - // bind the buffers - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - - // this is the same for each shader? - var stride = this.vertByteSize; - gl.vertexAttribPointer(this.shader.attributes.aVertexPosition, 2, gl.FLOAT, false, stride, 0); - gl.vertexAttribPointer(this.shader.attributes.aTextureCoord, 2, gl.FLOAT, false, stride, 2 * 4); - - // color attributes will be interpreted as unsigned bytes and normalized - gl.vertexAttribPointer(this.shader.attributes.aColor, 4, gl.UNSIGNED_BYTE, true, stride, 4 * 4); - } - - // upload the verts to the buffer - if (this.currentBatchSize > ( this.size * 0.5 ) ) - { - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertices); - } - else - { - var view = this.positions.subarray(0, this.currentBatchSize * this.vertByteSize); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); - } - - var nextTexture, nextBlendMode, nextShader; - var batchSize = 0; - var start = 0; - - var currentBaseTexture = sprite; - var currentBlendMode = this.renderer.blendModeManager.currentBlendMode; - var currentShader = null; - - var blendSwap = false; - var shaderSwap = false; - var sprite; - - for (var i = 0, j = this.currentBatchSize; i < j; i++) - { - - sprite = this.sprites[i]; - - nextTexture = sprite.texture.baseTexture; - nextBlendMode = sprite.blendMode; - nextShader = sprite.shader || this.shader; - - blendSwap = currentBlendMode !== nextBlendMode; - shaderSwap = currentShader !== nextShader; // should I use uuidS??? - - if (currentBaseTexture !== nextTexture || blendSwap || shaderSwap) - { - this.renderBatch(currentBaseTexture, batchSize, start); - - start = i; - batchSize = 0; - currentBaseTexture = nextTexture; - - if (blendSwap) - { - currentBlendMode = nextBlendMode; - this.renderer.blendModeManager.setBlendMode( currentBlendMode ); - } - - if (shaderSwap) - { - currentShader = nextShader; - - shader = currentShader.shaders ? currentShader.shaders[gl.id] : currentShader; - - if (!shader) - { - shader = new Shader(gl, null, currentShader.fragmentSrc, currentShader.uniforms); - currentShader.shaders[gl.id] = shader; - } - - // set shader function??? - this.renderer.shaderManager.setShader(shader); - - if (shader.dirty) - { - shader.syncUniforms(); - } - - // both thease only need to be set if they are changing.. - // set the projection - gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, this.renderer.currentRenderTarget.projectionMatrix.toArray(true)); - } - } - - batchSize++; - } - - this.renderBatch(currentBaseTexture, batchSize, start); - - // then reset the batch! - this.currentBatchSize = 0; -}; - -/** - * Draws the currently batches sprites. - * - * @private - * @param texture {Texture} - * @param size {number} - * @param startIndex {number} - */ -SpriteRenderer.prototype.renderBatch = function (texture, size, startIndex) -{ - if (size === 0) - { - return; - } - - var gl = this.renderer.gl; - - if (!texture._glTextures[gl.id]) - { - this.renderer.updateTexture(texture); - } - else - { - // bind the current texture - gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); - } - - // now draw those suckas! - gl.drawElements(gl.TRIANGLES, size * 6, gl.UNSIGNED_SHORT, startIndex * 6 * 2); - - // increment the draw count - this.renderer.drawCount++; -}; - -/** - * Flushes the sprite renderer's current batch. - * - */ -SpriteRenderer.prototype.stop = function () -{ - this.flush(); - this.dirty = true; -}; - -/** - * Starts a new sprite batch. - * - */ -SpriteRenderer.prototype.start = function () -{ - this.dirty = true; -}; - -/** - * Destroys the SpriteBatch. - * - */ -SpriteRenderer.prototype.destroy = function () -{ - this.renderer.gl.deleteBuffer(this.vertexBuffer); - this.renderer.gl.deleteBuffer(this.indexBuffer); - - this.renderer = null; - - this.vertices = null; - this.positions = null; - this.colors = null; - this.indices = null; - this.currentBaseTexture = null; - - this.drawing = false; - this.dirty = false; - - this.textures = null; - this.blendModes = null; - this.shaders = null; - this.sprites = null; - this.shader = null; -}; diff --git a/src/core/index.js b/src/core/index.js index 6f744e9..7877f3f 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -23,7 +23,7 @@ Sprite: require('./sprites/Sprite'), SpriteBatch: require('./sprites/SpriteBatch'), - SpriteRenderer: require('./sprites/SpriteRenderer'), + SpriteRenderer: require('./sprites/SpriteRenderer'), // primitives Graphics: require('./primitives/Graphics'), @@ -45,7 +45,7 @@ WebGLRenderer: require('./renderers/webgl/WebGLRenderer'), // WebGLGraphics: require('./renderers/webgl/utils/WebGLGraphics'), - + /** * This helper function will automatically detect which renderer you should be using. @@ -103,7 +103,3 @@ return core.autoDetectRenderer(width, height, options, isAndroid); } }; - -// Adding here for now.. sure there is a better place! -core.WebGLRenderer.registerObjectRenderer('sprite', core.SpriteRenderer); -core.WebGLRenderer.registerObjectRenderer('graphics', core.GraphicsRenderer); diff --git a/src/core/primitives/GraphicsRenderer.js b/src/core/primitives/GraphicsRenderer.js deleted file mode 100644 index 1a508f9..0000000 --- a/src/core/primitives/GraphicsRenderer.js +++ /dev/null @@ -1,874 +0,0 @@ -var utils = require('../utils'), - math = require('../math'), - CONST = require('../const'), - ObjectRenderer = require('../renderers/webgl/utils/ObjectRenderer'), - WebGLRenderer = require('../renderers/webgl/WebGLRenderer'), - WebGLGraphicsData = require('./WebGLGraphicsData'); - -/** - * Renders the graphics object. - * - * @class - * @private - * @namespace PIXI - * @param renderer {WebGLRenderer} The renderer this object renderer works for. - */ -function GraphicsRenderer(renderer) -{ - ObjectRenderer.call(this, renderer); - - this.graphicsDataPool = []; -} - -GraphicsRenderer.prototype = Object.create(ObjectRenderer.prototype); -GraphicsRenderer.prototype.constructor = GraphicsRenderer; -module.exports = GraphicsRenderer; - -/** - * Destroys this renderer. - * - */ -GraphicsRenderer.prototype.destroy = function () { - ObjectRenderer.prototype.destroy.call(this); - - this.graphicsDataPool = null; -}; - -/** - * Renders a graphics object. - * - * @param graphics {Graphics} The graphics object to render. - */ -GraphicsRenderer.prototype.render = function(graphics) -{ - var renderer = this.renderer; - var gl = renderer.gl; - - var projection = renderer.projection, - offset = renderer.offset, - shader = renderer.shaderManager.primitiveShader, - webGLData; - - if (graphics.dirty) - { - this.updateGraphics(graphics, gl); - } - - var webGL = graphics._webGL[gl.id]; - - // This could be speeded up for sure! - - renderer.blendModeManager.setBlendMode( graphics.blendMode ); - -// var matrix = graphics.worldTransform.clone(); -// var matrix = renderer.currentRenderTarget.projectionMatrix.clone(); -// matrix.append(graphics.worldTransform); - - for (var i = 0; i < webGL.data.length; i++) - { - if (webGL.data[i].mode === 1) - { - webGLData = webGL.data[i]; - - renderer.maskManager.pushStencil(graphics, webGLData, renderer); - - // render quad.. - gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 ); - - renderer.maskManager.popStencil(graphics, webGLData, renderer); - } - else - { - webGLData = webGL.data[i]; - - - renderer.shaderManager.setShader( shader );//activatePrimitiveShader(); - shader = renderer.shaderManager.primitiveShader; - - gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); - - gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true)); - - gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); - - gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha); - - - gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer); - - gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); - gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false,4 * 6, 2 * 4); - - // set the index buffer! - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer); - gl.drawElements(gl.TRIANGLE_STRIP, webGLData.indices.length, gl.UNSIGNED_SHORT, 0 ); - } - } -}; - -/** - * Updates the graphics object - * - * @private - * @param graphicsData {Graphics} The graphics object to update - * @param gl {WebGLContext} the current WebGL drawing context - */ -GraphicsRenderer.prototype.updateGraphics = function(graphics) -{ - var gl = this.renderer.gl; - - // get the contexts graphics object - var webGL = graphics._webGL[gl.id]; - - // if the graphics object does not exist in the webGL context time to create it! - if (!webGL) - { - webGL = graphics._webGL[gl.id] = {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; - - // lop 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(); - this.graphicsDataPool.push( graphicsData ); - } - - // clear the array and reset the index.. - webGL.data = []; - webGL.lastIndex = 0; - } - - var webGLData; - - // loop through the graphics datas and construct each one.. - // if the object is a complex fill then the new stencil buffer technique will be used - // other wise graphics objects will be pushed into a batch.. - for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) - { - var data = graphics.graphicsData[i]; - - if (data.type === CONST.SHAPES.POLY) - { - // 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]); - } - } - - // MAKE SURE WE HAVE THE CORRECT TYPE.. - if (data.fill) - { - if (data.points.length >= 6) - { - if (data.points.length < 6 * 2) - { - webGLData = this.switchMode(webGL, 0); - - var canDrawUsingSimple = this.buildPoly(data, webGLData); - // console.log(canDrawUsingSimple); - - if (!canDrawUsingSimple) - { - // console.log("<>>>") - webGLData = this.switchMode(webGL, 1); - this.buildComplexPoly(data, webGLData); - } - - } - else - { - webGLData = this.switchMode(webGL, 1); - this.buildComplexPoly(data, webGLData); - } - } - } - - if (data.lineWidth > 0) - { - webGLData = this.switchMode(webGL, 0); - this.buildLine(data, webGLData); - } - } - else - { - webGLData = this.switchMode(webGL, 0); - - if (data.type === CONST.SHAPES.RECT) - { - this.buildRectangle(data, webGLData); - } - else if (data.type === CONST.SHAPES.CIRC || data.type === CONST.SHAPES.ELIP) - { - this.buildCircle(data, webGLData); - } - else if (data.type === CONST.SHAPES.RREC) - { - this.buildRoundedRectangle(data, webGLData); - } - } - - webGL.lastIndex++; - } - - // upload all the dirty data... - for (i = 0; i < webGL.data.length; i++) - { - webGLData = webGL.data[i]; - - if (webGLData.dirty) - { - webGLData.upload(); - } - } -}; - -/** - * - * - * @private - * @param webGL {WebGLContext} - * @param type {number} - */ -GraphicsRenderer.prototype.switchMode = function (webGL, type) -{ - var webGLData; - - if (!webGL.data.length) - { - webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl); - webGLData.mode = type; - webGL.data.push(webGLData); - } - else - { - webGLData = webGL.data[webGL.data.length-1]; - - if (webGLData.mode !== type || type === 1) - { - webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl); - webGLData.mode = type; - webGL.data.push(webGLData); - } - } - - webGLData.dirty = true; - - return webGLData; -}; - -/** - * Builds a rectangle to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.buildRectangle = function (graphicsData, webGLData) -{ - // --- // - // need to convert points to a nice regular data - // - 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 = utils.hex2rgb(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]; - - - this.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Builds a rounded rectangle to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.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(this.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height)); - recPoints = recPoints.concat(this.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius)); - recPoints = recPoints.concat(this.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y)); - recPoints = recPoints.concat(this.quadraticBezierCurve(x + radius, y, x, y, x, y + radius)); - - if (graphicsData.fill) - { - var color = utils.hex2rgb(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 = utils.PolyK.Triangulate(recPoints); - - // - - 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; - - this.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Calculate the points for a quadratic bezier curve. (helper function..) - * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c - * - * @private - * @param fromX {number} Origin point x - * @param fromY {number} Origin point x - * @param cpX {number} Control point x - * @param cpY {number} Control point y - * @param toX {number} Destination point x - * @param toY {number} Destination point y - * @return {number[]} - */ -GraphicsRenderer.prototype.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY) -{ - - var xa, - ya, - xb, - yb, - x, - y, - n = 20, - 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; -}; - -/** - * Builds a circle to draw - * - * @private - * @param graphicsData {Graphics} The graphics object to draw - * @param webGLData {object} - */ -GraphicsRenderer.prototype.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; - - // TODO - bit hacky?? - if (graphicsData.type === CONST.SHAPES.CIRC) - { - width = circleData.radius; - height = circleData.radius; - } - else - { - width = circleData.width; - height = circleData.height; - } - - var totalSegs = 40; - var seg = (Math.PI * 2) / totalSegs ; - - var i = 0; - - if (graphicsData.fill) - { - var color = utils.hex2rgb(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); - } - - this.buildLine(graphicsData, webGLData); - - graphicsData.points = tempPoints; - } -}; - -/** - * Builds a line to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.buildLine = function (graphicsData, webGLData) -{ - // TODO OPTIMISE! - 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 math.Point(points[0], points[1]); - var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); - - // if the first point is the last point - 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 math.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 color - var color = utils.hex2rgb(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); - verts.push(r, g, b, alpha); - - verts.push(p2x + perp3x, p2y +perp3y); - verts.push(r, g, b, alpha); - - verts.push(p2x - perp3x, p2y -perp3y); - verts.push(r, g, b, alpha); - - indexCount++; - } - else - { - - verts.push(px , py); - verts.push(r, g, b, alpha); - - verts.push(p2x - (px-p2x), p2y - (py - p2y)); - verts.push(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); - verts.push(r, g, b, alpha); - - verts.push(p2x + perpx , p2y + perpy); - verts.push(r, g, b, alpha); - - indices.push(indexStart); - - for (i = 0; i < indexCount; i++) - { - indices.push(indexStart++); - } - - indices.push(indexStart-1); -}; - -/** - * Builds a complex polygon to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.buildComplexPoly = function (graphicsData, webGLData) -{ - //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. - 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 = utils.hex2rgb(graphicsData.fillColor); - - // calclate the bounds.. - var minX = Infinity; - var maxX = -Infinity; - - var minY = Infinity; - var maxY = -Infinity; - - var x,y; - - // get 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 cos there is no point making another buffer! - points.push(minX, minY, - maxX, minY, - maxX, maxY, - minX, maxY); - - // push a quad onto the end.. - - //TODO - this aint needed! - var length = points.length / 2; - for (i = 0; i < length; i++) - { - indices.push( i ); - } - -}; - -/** - * Builds a polygon to draw - * - * @private - * @param graphicsData {Graphics} The graphics object containing all the necessary properties - * @param webGLData {object} - */ -GraphicsRenderer.prototype.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 color - var color = utils.hex2rgb(graphicsData.fillColor); - var alpha = graphicsData.fillAlpha; - var r = color[0] * alpha; - var g = color[1] * alpha; - var b = color[2] * alpha; - - var triangles = utils.PolyK.Triangulate(points); - - 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; -}; diff --git a/src/core/primitives/WebGLGraphicsData.js b/src/core/primitives/WebGLGraphicsData.js deleted file mode 100755 index 41be102..0000000 --- a/src/core/primitives/WebGLGraphicsData.js +++ /dev/null @@ -1,48 +0,0 @@ -/** - * @class - * @private - */ -function WebGLGraphicsData(gl) { - this.gl = gl; - - //TODO does this need to be split before uploding?? - this.color = [0,0,0]; // color split! - this.points = []; - this.indices = []; - this.buffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - this.mode = 1; - this.alpha = 1; - this.dirty = true; -} - -WebGLGraphicsData.prototype.constructor = WebGLGraphicsData; -module.exports = WebGLGraphicsData; - -/** - * - */ -WebGLGraphicsData.prototype.reset = function () { - this.points = []; - this.indices = []; -}; - -/** - * - */ -WebGLGraphicsData.prototype.upload = function () { - var gl = this.gl; - -// this.lastIndex = graphics.graphicsData.length; - this.glPoints = new Float32Array(this.points); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); - gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); - - this.glIndicies = new Uint16Array(this.indices); - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); - - this.dirty = false; -}; diff --git a/src/core/primitives/webgl/GraphicsRenderer.js b/src/core/primitives/webgl/GraphicsRenderer.js new file mode 100644 index 0000000..b3010bd --- /dev/null +++ b/src/core/primitives/webgl/GraphicsRenderer.js @@ -0,0 +1,876 @@ +var utils = require('../utils'), + math = require('../math'), + CONST = require('../const'), + ObjectRenderer = require('../renderers/webgl/utils/ObjectRenderer'), + WebGLRenderer = require('../renderers/webgl/WebGLRenderer'), + WebGLGraphicsData = require('./WebGLGraphicsData'); + +/** + * Renders the graphics object. + * + * @class + * @private + * @namespace PIXI + * @param renderer {WebGLRenderer} The renderer this object renderer works for. + */ +function GraphicsRenderer(renderer) +{ + ObjectRenderer.call(this, renderer); + + this.graphicsDataPool = []; +} + +GraphicsRenderer.prototype = Object.create(ObjectRenderer.prototype); +GraphicsRenderer.prototype.constructor = GraphicsRenderer; +module.exports = GraphicsRenderer; + +WebGLRenderer.registerObjectRenderer('graphics', GraphicsRenderer); + +/** + * Destroys this renderer. + * + */ +GraphicsRenderer.prototype.destroy = function () { + ObjectRenderer.prototype.destroy.call(this); + + this.graphicsDataPool = null; +}; + +/** + * Renders a graphics object. + * + * @param graphics {Graphics} The graphics object to render. + */ +GraphicsRenderer.prototype.render = function(graphics) +{ + var renderer = this.renderer; + var gl = renderer.gl; + + var projection = renderer.projection, + offset = renderer.offset, + shader = renderer.shaderManager.primitiveShader, + webGLData; + + if (graphics.dirty) + { + this.updateGraphics(graphics, gl); + } + + var webGL = graphics._webGL[gl.id]; + + // This could be speeded up for sure! + + renderer.blendModeManager.setBlendMode( graphics.blendMode ); + +// var matrix = graphics.worldTransform.clone(); +// var matrix = renderer.currentRenderTarget.projectionMatrix.clone(); +// matrix.append(graphics.worldTransform); + + for (var i = 0; i < webGL.data.length; i++) + { + if (webGL.data[i].mode === 1) + { + webGLData = webGL.data[i]; + + renderer.maskManager.pushStencil(graphics, webGLData, renderer); + + // render quad.. + gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 ); + + renderer.maskManager.popStencil(graphics, webGLData, renderer); + } + else + { + webGLData = webGL.data[i]; + + + renderer.shaderManager.setShader( shader );//activatePrimitiveShader(); + shader = renderer.shaderManager.primitiveShader; + + gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true)); + + gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true)); + + gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint)); + + gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha); + + + gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer); + + gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); + gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false,4 * 6, 2 * 4); + + // set the index buffer! + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer); + gl.drawElements(gl.TRIANGLE_STRIP, webGLData.indices.length, gl.UNSIGNED_SHORT, 0 ); + } + } +}; + +/** + * Updates the graphics object + * + * @private + * @param graphicsData {Graphics} The graphics object to update + * @param gl {WebGLContext} the current WebGL drawing context + */ +GraphicsRenderer.prototype.updateGraphics = function(graphics) +{ + var gl = this.renderer.gl; + + // get the contexts graphics object + var webGL = graphics._webGL[gl.id]; + + // if the graphics object does not exist in the webGL context time to create it! + if (!webGL) + { + webGL = graphics._webGL[gl.id] = {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; + + // lop 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(); + this.graphicsDataPool.push( graphicsData ); + } + + // clear the array and reset the index.. + webGL.data = []; + webGL.lastIndex = 0; + } + + var webGLData; + + // loop through the graphics datas and construct each one.. + // if the object is a complex fill then the new stencil buffer technique will be used + // other wise graphics objects will be pushed into a batch.. + for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++) + { + var data = graphics.graphicsData[i]; + + if (data.type === CONST.SHAPES.POLY) + { + // 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]); + } + } + + // MAKE SURE WE HAVE THE CORRECT TYPE.. + if (data.fill) + { + if (data.points.length >= 6) + { + if (data.points.length < 6 * 2) + { + webGLData = this.switchMode(webGL, 0); + + var canDrawUsingSimple = this.buildPoly(data, webGLData); + // console.log(canDrawUsingSimple); + + if (!canDrawUsingSimple) + { + // console.log("<>>>") + webGLData = this.switchMode(webGL, 1); + this.buildComplexPoly(data, webGLData); + } + + } + else + { + webGLData = this.switchMode(webGL, 1); + this.buildComplexPoly(data, webGLData); + } + } + } + + if (data.lineWidth > 0) + { + webGLData = this.switchMode(webGL, 0); + this.buildLine(data, webGLData); + } + } + else + { + webGLData = this.switchMode(webGL, 0); + + if (data.type === CONST.SHAPES.RECT) + { + this.buildRectangle(data, webGLData); + } + else if (data.type === CONST.SHAPES.CIRC || data.type === CONST.SHAPES.ELIP) + { + this.buildCircle(data, webGLData); + } + else if (data.type === CONST.SHAPES.RREC) + { + this.buildRoundedRectangle(data, webGLData); + } + } + + webGL.lastIndex++; + } + + // upload all the dirty data... + for (i = 0; i < webGL.data.length; i++) + { + webGLData = webGL.data[i]; + + if (webGLData.dirty) + { + webGLData.upload(); + } + } +}; + +/** + * + * + * @private + * @param webGL {WebGLContext} + * @param type {number} + */ +GraphicsRenderer.prototype.switchMode = function (webGL, type) +{ + var webGLData; + + if (!webGL.data.length) + { + webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl); + webGLData.mode = type; + webGL.data.push(webGLData); + } + else + { + webGLData = webGL.data[webGL.data.length-1]; + + if (webGLData.mode !== type || type === 1) + { + webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl); + webGLData.mode = type; + webGL.data.push(webGLData); + } + } + + webGLData.dirty = true; + + return webGLData; +}; + +/** + * Builds a rectangle to draw + * + * @private + * @param graphicsData {Graphics} The graphics object containing all the necessary properties + * @param webGLData {object} + */ +GraphicsRenderer.prototype.buildRectangle = function (graphicsData, webGLData) +{ + // --- // + // need to convert points to a nice regular data + // + 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 = utils.hex2rgb(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]; + + + this.buildLine(graphicsData, webGLData); + + graphicsData.points = tempPoints; + } +}; + +/** + * Builds a rounded rectangle to draw + * + * @private + * @param graphicsData {Graphics} The graphics object containing all the necessary properties + * @param webGLData {object} + */ +GraphicsRenderer.prototype.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(this.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height)); + recPoints = recPoints.concat(this.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius)); + recPoints = recPoints.concat(this.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y)); + recPoints = recPoints.concat(this.quadraticBezierCurve(x + radius, y, x, y, x, y + radius)); + + if (graphicsData.fill) + { + var color = utils.hex2rgb(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 = utils.PolyK.Triangulate(recPoints); + + // + + 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; + + this.buildLine(graphicsData, webGLData); + + graphicsData.points = tempPoints; + } +}; + +/** + * Calculate the points for a quadratic bezier curve. (helper function..) + * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c + * + * @private + * @param fromX {number} Origin point x + * @param fromY {number} Origin point x + * @param cpX {number} Control point x + * @param cpY {number} Control point y + * @param toX {number} Destination point x + * @param toY {number} Destination point y + * @return {number[]} + */ +GraphicsRenderer.prototype.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY) +{ + + var xa, + ya, + xb, + yb, + x, + y, + n = 20, + 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; +}; + +/** + * Builds a circle to draw + * + * @private + * @param graphicsData {Graphics} The graphics object to draw + * @param webGLData {object} + */ +GraphicsRenderer.prototype.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; + + // TODO - bit hacky?? + if (graphicsData.type === CONST.SHAPES.CIRC) + { + width = circleData.radius; + height = circleData.radius; + } + else + { + width = circleData.width; + height = circleData.height; + } + + var totalSegs = 40; + var seg = (Math.PI * 2) / totalSegs ; + + var i = 0; + + if (graphicsData.fill) + { + var color = utils.hex2rgb(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); + } + + this.buildLine(graphicsData, webGLData); + + graphicsData.points = tempPoints; + } +}; + +/** + * Builds a line to draw + * + * @private + * @param graphicsData {Graphics} The graphics object containing all the necessary properties + * @param webGLData {object} + */ +GraphicsRenderer.prototype.buildLine = function (graphicsData, webGLData) +{ + // TODO OPTIMISE! + 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 math.Point(points[0], points[1]); + var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]); + + // if the first point is the last point - 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 math.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 color + var color = utils.hex2rgb(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); + verts.push(r, g, b, alpha); + + verts.push(p2x + perp3x, p2y +perp3y); + verts.push(r, g, b, alpha); + + verts.push(p2x - perp3x, p2y -perp3y); + verts.push(r, g, b, alpha); + + indexCount++; + } + else + { + + verts.push(px , py); + verts.push(r, g, b, alpha); + + verts.push(p2x - (px-p2x), p2y - (py - p2y)); + verts.push(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); + verts.push(r, g, b, alpha); + + verts.push(p2x + perpx , p2y + perpy); + verts.push(r, g, b, alpha); + + indices.push(indexStart); + + for (i = 0; i < indexCount; i++) + { + indices.push(indexStart++); + } + + indices.push(indexStart-1); +}; + +/** + * Builds a complex polygon to draw + * + * @private + * @param graphicsData {Graphics} The graphics object containing all the necessary properties + * @param webGLData {object} + */ +GraphicsRenderer.prototype.buildComplexPoly = function (graphicsData, webGLData) +{ + //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. + 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 = utils.hex2rgb(graphicsData.fillColor); + + // calclate the bounds.. + var minX = Infinity; + var maxX = -Infinity; + + var minY = Infinity; + var maxY = -Infinity; + + var x,y; + + // get 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 cos there is no point making another buffer! + points.push(minX, minY, + maxX, minY, + maxX, maxY, + minX, maxY); + + // push a quad onto the end.. + + //TODO - this aint needed! + var length = points.length / 2; + for (i = 0; i < length; i++) + { + indices.push( i ); + } + +}; + +/** + * Builds a polygon to draw + * + * @private + * @param graphicsData {Graphics} The graphics object containing all the necessary properties + * @param webGLData {object} + */ +GraphicsRenderer.prototype.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 color + var color = utils.hex2rgb(graphicsData.fillColor); + var alpha = graphicsData.fillAlpha; + var r = color[0] * alpha; + var g = color[1] * alpha; + var b = color[2] * alpha; + + var triangles = utils.PolyK.Triangulate(points); + + 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; +}; diff --git a/src/core/primitives/webgl/WebGLGraphicsData.js b/src/core/primitives/webgl/WebGLGraphicsData.js new file mode 100644 index 0000000..41be102 --- /dev/null +++ b/src/core/primitives/webgl/WebGLGraphicsData.js @@ -0,0 +1,48 @@ +/** + * @class + * @private + */ +function WebGLGraphicsData(gl) { + this.gl = gl; + + //TODO does this need to be split before uploding?? + this.color = [0,0,0]; // color split! + this.points = []; + this.indices = []; + this.buffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + this.mode = 1; + this.alpha = 1; + this.dirty = true; +} + +WebGLGraphicsData.prototype.constructor = WebGLGraphicsData; +module.exports = WebGLGraphicsData; + +/** + * + */ +WebGLGraphicsData.prototype.reset = function () { + this.points = []; + this.indices = []; +}; + +/** + * + */ +WebGLGraphicsData.prototype.upload = function () { + var gl = this.gl; + +// this.lastIndex = graphics.graphicsData.length; + this.glPoints = new Float32Array(this.points); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); + gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW); + + this.glIndicies = new Uint16Array(this.indices); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW); + + this.dirty = false; +}; diff --git a/src/core/sprites/SpriteRenderer.js b/src/core/sprites/SpriteRenderer.js deleted file mode 100644 index fd9a802..0000000 --- a/src/core/sprites/SpriteRenderer.js +++ /dev/null @@ -1,537 +0,0 @@ -var ObjectRenderer = require('../renderers/webgl/utils/ObjectRenderer'), - Shader = require('../renderers/webgl/shaders/Shader'), - SpriteShader = require('../renderers/webgl/shaders/SpriteShader'), - WebGLRenderer = require('../renderers/webgl/WebGLRenderer'); - math = require('../math'); - -/** - * @author Mat Groves - * - * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ - * for creating the original pixi version! - * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now share 4 bytes on the vertex buffer - * - * Heavily inspired by LibGDX's SpriteRenderer: - * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/SpriteRenderer.java - */ - -/** - * - * @class - * @private - * @namespace PIXI - * @param renderer {WebGLRenderer} The renderer this sprite batch works for. - */ -function SpriteRenderer(renderer) -{ - ObjectRenderer.call(this, renderer); - - /** - * - * - * @member {WebGLRenderer} - */ - this.renderer = renderer; - - /** - * - * - * @member {number} - */ - this.vertSize = 5; - - /** - * - * - * @member {number} - */ - this.vertByteSize = this.vertSize * 4; - - /** - * The number of images in the SpriteBatch before it flushes. - * - * @member {number} - */ - this.size = 2000;//Math.pow(2, 16) / this.vertSize; - - // the total number of bytes in our batch - var numVerts = this.size * 4 * this.vertByteSize; - // the total number of indices in our batch - var numIndices = this.size * 6; - - /** - * Holds the vertices - * - * @member {ArrayBuffer} - */ - this.vertices = new ArrayBuffer(numVerts); - - /** - * View on the vertices as a Float32Array - * - * @member {Float32Array} - */ - this.positions = new Float32Array(this.vertices); - - /** - * View on the vertices as a Uint32Array - * - * @member {Uint32Array} - */ - this.colors = new Uint32Array(this.vertices); - - /** - * Holds the indices - * - * @member {Uint16Array} - */ - this.indices = new Uint16Array(numIndices); - - /** - * - * - * @member {number} - */ - this.lastIndexCount = 0; - - for (var i=0, j=0; i < numIndices; i += 6, j += 4) - { - this.indices[i + 0] = j + 0; - this.indices[i + 1] = j + 1; - this.indices[i + 2] = j + 2; - this.indices[i + 3] = j + 0; - this.indices[i + 4] = j + 2; - this.indices[i + 5] = j + 3; - } - - /** - * - * - * @member {boolean} - */ - this.drawing = false; - - /** - * - * - * @member {number} - */ - this.currentBatchSize = 0; - - /** - * - * - * @member {BaseTexture} - */ - this.currentBaseTexture = null; - - /** - * - * - * @member {boolean} - */ - this.dirty = true; - - /** - * - * - * @member {Array} - */ - this.textures = []; - - /** - * - * - * @member {Array} - */ - this.blendModes = []; - - /** - * - * - * @member {Array} - */ - this.shaders = []; - - /** - * - * - * @member {Array} - */ - this.sprites = []; - - /** - * The default shader that is used if a sprite doesn't have a more specific one. - * - * @member {Shader} - */ - this.shader = null; - - // listen for context and update necessary buffers - var self = this; - - this.setupContext(); -} - -SpriteRenderer.prototype = Object.create(ObjectRenderer.prototype); -SpriteRenderer.prototype.constructor = SpriteRenderer; -module.exports = SpriteRenderer; - - - -/** - * Sets up the renderer context and necessary buffers. - * - * @private - * @param gl {WebGLContext} the current WebGL drawing context - */ -SpriteRenderer.prototype.setupContext = function () -{ - var gl = this.renderer.gl; - - // setup default shader - this.shader = new SpriteShader(gl); - - // create a couple of buffers - this.vertexBuffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - - // 65535 is max index, so 65535 / 6 = 10922. - - //upload the index data - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferData(gl.ARRAY_BUFFER, this.vertices, gl.DYNAMIC_DRAW); - - this.currentBlendMode = 99999; -}; - -/** - * Renders the sprite object. - * - * @param sprite {Sprite} the sprite to render when using this spritebatch - */ -SpriteRenderer.prototype.render = function (sprite) -{ - var texture = sprite.texture; - - //TODO set blend modes.. - // check texture.. - if (this.currentBatchSize >= this.size) - { - this.flush(); - this.currentBaseTexture = texture.baseTexture; - } - - // get the uvs for the texture - var uvs = texture._uvs; - - // if the uvs have not updated then no point rendering just yet! - if (!uvs) - { - return; - } - - // TODO trim?? - var aX = sprite.anchor.x; - var aY = sprite.anchor.y; - - var w0, w1, h0, h1; - - if (texture.trim) - { - // if the sprite is trimmed then we need to add the extra space before transforming the sprite coords.. - var trim = texture.trim; - - w1 = trim.x - aX * trim.width; - w0 = w1 + texture.crop.width; - - h1 = trim.y - aY * trim.height; - h0 = h1 + texture.crop.height; - - } - else - { - w0 = (texture.frame.width ) * (1-aX); - w1 = (texture.frame.width ) * -aX; - - h0 = texture.frame.height * (1-aY); - h1 = texture.frame.height * -aY; - } - - var index = this.currentBatchSize * this.vertByteSize; - - var resolution = texture.baseTexture.resolution; - - var worldTransform = sprite.worldTransform; - - var a = worldTransform.a / resolution; - var b = worldTransform.b / resolution; - var c = worldTransform.c / resolution; - var d = worldTransform.d / resolution; - var tx = worldTransform.tx; - var ty = worldTransform.ty; - - var colors = this.colors; - var positions = this.positions; - - if (this.renderer.roundPixels) - { - // xy - positions[index] = a * w1 + c * h1 + tx | 0; - positions[index+1] = d * h1 + b * w1 + ty | 0; - - // xy - positions[index+5] = a * w0 + c * h1 + tx | 0; - positions[index+6] = d * h1 + b * w0 + ty | 0; - - // xy - positions[index+10] = a * w0 + c * h0 + tx | 0; - positions[index+11] = d * h0 + b * w0 + ty | 0; - - // xy - positions[index+15] = a * w1 + c * h0 + tx | 0; - positions[index+16] = d * h0 + b * w1 + ty | 0; - } - else - { - // xy - positions[index] = a * w1 + c * h1 + tx; - positions[index+1] = d * h1 + b * w1 + ty; - - // xy - positions[index+5] = a * w0 + c * h1 + tx; - positions[index+6] = d * h1 + b * w0 + ty; - - // xy - positions[index+10] = a * w0 + c * h0 + tx; - positions[index+11] = d * h0 + b * w0 + ty; - - // xy - positions[index+15] = a * w1 + c * h0 + tx; - positions[index+16] = d * h0 + b * w1 + ty; - } - - // uv - positions[index+2] = uvs.x0; - positions[index+3] = uvs.y0; - - // uv - positions[index+7] = uvs.x1; - positions[index+8] = uvs.y1; - - // uv - positions[index+12] = uvs.x2; - positions[index+13] = uvs.y2; - - // uv - positions[index+17] = uvs.x3; - positions[index+18] = uvs.y3; - - // color and alpha - var tint = sprite.tint; - colors[index+4] = colors[index+9] = colors[index+14] = colors[index+19] = (tint >> 16) + (tint & 0xff00) + ((tint & 0xff) << 16) + (sprite.worldAlpha * 255 << 24); - - // increment the batchsize - this.sprites[this.currentBatchSize++] = sprite; -}; - -/** - * Renders the content and empties the current batch. - * - */ -SpriteRenderer.prototype.flush = function () -{ - // If the batch is length 0 then return as there is nothing to draw - if (this.currentBatchSize === 0) - { - return; - } - - var gl = this.renderer.gl; - var shader; - - if (this.dirty) - { - this.dirty = false; - // bind the main texture - gl.activeTexture(gl.TEXTURE0); - - // bind the buffers - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - - // this is the same for each shader? - var stride = this.vertByteSize; - gl.vertexAttribPointer(this.shader.attributes.aVertexPosition, 2, gl.FLOAT, false, stride, 0); - gl.vertexAttribPointer(this.shader.attributes.aTextureCoord, 2, gl.FLOAT, false, stride, 2 * 4); - - // color attributes will be interpreted as unsigned bytes and normalized - gl.vertexAttribPointer(this.shader.attributes.aColor, 4, gl.UNSIGNED_BYTE, true, stride, 4 * 4); - } - - // upload the verts to the buffer - if (this.currentBatchSize > ( this.size * 0.5 ) ) - { - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertices); - } - else - { - var view = this.positions.subarray(0, this.currentBatchSize * this.vertByteSize); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); - } - - var nextTexture, nextBlendMode, nextShader; - var batchSize = 0; - var start = 0; - - var currentBaseTexture = sprite; - var currentBlendMode = this.renderer.blendModeManager.currentBlendMode; - var currentShader = null; - - var blendSwap = false; - var shaderSwap = false; - var sprite; - - for (var i = 0, j = this.currentBatchSize; i < j; i++) - { - - sprite = this.sprites[i]; - - nextTexture = sprite.texture.baseTexture; - nextBlendMode = sprite.blendMode; - nextShader = sprite.shader || this.shader; - - blendSwap = currentBlendMode !== nextBlendMode; - shaderSwap = currentShader !== nextShader; // should I use uuidS??? - - if (currentBaseTexture !== nextTexture || blendSwap || shaderSwap) - { - this.renderBatch(currentBaseTexture, batchSize, start); - - start = i; - batchSize = 0; - currentBaseTexture = nextTexture; - - if (blendSwap) - { - currentBlendMode = nextBlendMode; - this.renderer.blendModeManager.setBlendMode( currentBlendMode ); - } - - if (shaderSwap) - { - currentShader = nextShader; - - shader = currentShader.shaders ? currentShader.shaders[gl.id] : currentShader; - - if (!shader) - { - shader = new Shader(gl, null, currentShader.fragmentSrc, currentShader.uniforms); - currentShader.shaders[gl.id] = shader; - } - - // set shader function??? - this.renderer.shaderManager.setShader(shader); - - if (shader.dirty) - { - shader.syncUniforms(); - } - - // both thease only need to be set if they are changing.. - // set the projection - gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, this.renderer.currentRenderTarget.projectionMatrix.toArray(true)); - } - } - - batchSize++; - } - - this.renderBatch(currentBaseTexture, batchSize, start); - - // then reset the batch! - this.currentBatchSize = 0; -}; - -/** - * Draws the currently batches sprites. - * - * @private - * @param texture {Texture} - * @param size {number} - * @param startIndex {number} - */ -SpriteRenderer.prototype.renderBatch = function (texture, size, startIndex) -{ - if (size === 0) - { - return; - } - - var gl = this.renderer.gl; - - if (!texture._glTextures[gl.id]) - { - this.renderer.updateTexture(texture); - } - else - { - // bind the current texture - gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); - } - - // now draw those suckas! - gl.drawElements(gl.TRIANGLES, size * 6, gl.UNSIGNED_SHORT, startIndex * 6 * 2); - - // increment the draw count - this.renderer.drawCount++; -}; - -/** - * Flushes the sprite renderer's current batch. - * - */ -SpriteRenderer.prototype.stop = function () -{ - this.flush(); - this.dirty = true; -}; - -/** - * Starts a new sprite batch. - * - */ -SpriteRenderer.prototype.start = function () -{ - this.dirty = true; -}; - -/** - * Destroys the SpriteBatch. - * - */ -SpriteRenderer.prototype.destroy = function () -{ - this.renderer.gl.deleteBuffer(this.vertexBuffer); - this.renderer.gl.deleteBuffer(this.indexBuffer); - - this.renderer = null; - - this.vertices = null; - this.positions = null; - this.colors = null; - this.indices = null; - this.currentBaseTexture = null; - - this.drawing = false; - this.dirty = false; - - this.textures = null; - this.blendModes = null; - this.shaders = null; - this.sprites = null; - this.shader = null; -}; diff --git a/src/core/sprites/webgl/SpriteRenderer.js b/src/core/sprites/webgl/SpriteRenderer.js new file mode 100644 index 0000000..2c52116 --- /dev/null +++ b/src/core/sprites/webgl/SpriteRenderer.js @@ -0,0 +1,537 @@ +var ObjectRenderer = require('../renderers/webgl/utils/ObjectRenderer'), + Shader = require('../renderers/webgl/shaders/Shader'), + SpriteShader = require('../renderers/webgl/shaders/SpriteShader'), + WebGLRenderer = require('../renderers/webgl/WebGLRenderer'); + math = require('../math'); + +/** + * @author Mat Groves + * + * Big thanks to the very clever Matt DesLauriers https://github.com/mattdesl/ + * for creating the original pixi version! + * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now share 4 bytes on the vertex buffer + * + * Heavily inspired by LibGDX's SpriteRenderer: + * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/SpriteRenderer.java + */ + +/** + * + * @class + * @private + * @namespace PIXI + * @param renderer {WebGLRenderer} The renderer this sprite batch works for. + */ +function SpriteRenderer(renderer) +{ + ObjectRenderer.call(this, renderer); + + /** + * + * + * @member {WebGLRenderer} + */ + this.renderer = renderer; + + /** + * + * + * @member {number} + */ + this.vertSize = 5; + + /** + * + * + * @member {number} + */ + this.vertByteSize = this.vertSize * 4; + + /** + * The number of images in the SpriteBatch before it flushes. + * + * @member {number} + */ + this.size = 2000;//Math.pow(2, 16) / this.vertSize; + + // the total number of bytes in our batch + var numVerts = this.size * 4 * this.vertByteSize; + // the total number of indices in our batch + var numIndices = this.size * 6; + + /** + * Holds the vertices + * + * @member {ArrayBuffer} + */ + this.vertices = new ArrayBuffer(numVerts); + + /** + * View on the vertices as a Float32Array + * + * @member {Float32Array} + */ + this.positions = new Float32Array(this.vertices); + + /** + * View on the vertices as a Uint32Array + * + * @member {Uint32Array} + */ + this.colors = new Uint32Array(this.vertices); + + /** + * Holds the indices + * + * @member {Uint16Array} + */ + this.indices = new Uint16Array(numIndices); + + /** + * + * + * @member {number} + */ + this.lastIndexCount = 0; + + for (var i=0, j=0; i < numIndices; i += 6, j += 4) + { + this.indices[i + 0] = j + 0; + this.indices[i + 1] = j + 1; + this.indices[i + 2] = j + 2; + this.indices[i + 3] = j + 0; + this.indices[i + 4] = j + 2; + this.indices[i + 5] = j + 3; + } + + /** + * + * + * @member {boolean} + */ + this.drawing = false; + + /** + * + * + * @member {number} + */ + this.currentBatchSize = 0; + + /** + * + * + * @member {BaseTexture} + */ + this.currentBaseTexture = null; + + /** + * + * + * @member {boolean} + */ + this.dirty = true; + + /** + * + * + * @member {Array} + */ + this.textures = []; + + /** + * + * + * @member {Array} + */ + this.blendModes = []; + + /** + * + * + * @member {Array} + */ + this.shaders = []; + + /** + * + * + * @member {Array} + */ + this.sprites = []; + + /** + * The default shader that is used if a sprite doesn't have a more specific one. + * + * @member {Shader} + */ + this.shader = null; + + // listen for context and update necessary buffers + var self = this; + + this.setupContext(); +} + +SpriteRenderer.prototype = Object.create(ObjectRenderer.prototype); +SpriteRenderer.prototype.constructor = SpriteRenderer; +module.exports = SpriteRenderer; + +WebGLRenderer.registerObjectRenderer('sprite', SpriteRenderer); + +/** + * Sets up the renderer context and necessary buffers. + * + * @private + * @param gl {WebGLContext} the current WebGL drawing context + */ +SpriteRenderer.prototype.setupContext = function () +{ + var gl = this.renderer.gl; + + // setup default shader + this.shader = new SpriteShader(gl); + + // create a couple of buffers + this.vertexBuffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + + // 65535 is max index, so 65535 / 6 = 10922. + + //upload the index data + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bufferData(gl.ARRAY_BUFFER, this.vertices, gl.DYNAMIC_DRAW); + + this.currentBlendMode = 99999; +}; + +/** + * Renders the sprite object. + * + * @param sprite {Sprite} the sprite to render when using this spritebatch + */ +SpriteRenderer.prototype.render = function (sprite) +{ + var texture = sprite.texture; + + //TODO set blend modes.. + // check texture.. + if (this.currentBatchSize >= this.size) + { + this.flush(); + this.currentBaseTexture = texture.baseTexture; + } + + // get the uvs for the texture + var uvs = texture._uvs; + + // if the uvs have not updated then no point rendering just yet! + if (!uvs) + { + return; + } + + // TODO trim?? + var aX = sprite.anchor.x; + var aY = sprite.anchor.y; + + var w0, w1, h0, h1; + + if (texture.trim) + { + // if the sprite is trimmed then we need to add the extra space before transforming the sprite coords.. + var trim = texture.trim; + + w1 = trim.x - aX * trim.width; + w0 = w1 + texture.crop.width; + + h1 = trim.y - aY * trim.height; + h0 = h1 + texture.crop.height; + + } + else + { + w0 = (texture.frame.width ) * (1-aX); + w1 = (texture.frame.width ) * -aX; + + h0 = texture.frame.height * (1-aY); + h1 = texture.frame.height * -aY; + } + + var index = this.currentBatchSize * this.vertByteSize; + + var resolution = texture.baseTexture.resolution; + + var worldTransform = sprite.worldTransform; + + var a = worldTransform.a / resolution; + var b = worldTransform.b / resolution; + var c = worldTransform.c / resolution; + var d = worldTransform.d / resolution; + var tx = worldTransform.tx; + var ty = worldTransform.ty; + + var colors = this.colors; + var positions = this.positions; + + if (this.renderer.roundPixels) + { + // xy + positions[index] = a * w1 + c * h1 + tx | 0; + positions[index+1] = d * h1 + b * w1 + ty | 0; + + // xy + positions[index+5] = a * w0 + c * h1 + tx | 0; + positions[index+6] = d * h1 + b * w0 + ty | 0; + + // xy + positions[index+10] = a * w0 + c * h0 + tx | 0; + positions[index+11] = d * h0 + b * w0 + ty | 0; + + // xy + positions[index+15] = a * w1 + c * h0 + tx | 0; + positions[index+16] = d * h0 + b * w1 + ty | 0; + } + else + { + // xy + positions[index] = a * w1 + c * h1 + tx; + positions[index+1] = d * h1 + b * w1 + ty; + + // xy + positions[index+5] = a * w0 + c * h1 + tx; + positions[index+6] = d * h1 + b * w0 + ty; + + // xy + positions[index+10] = a * w0 + c * h0 + tx; + positions[index+11] = d * h0 + b * w0 + ty; + + // xy + positions[index+15] = a * w1 + c * h0 + tx; + positions[index+16] = d * h0 + b * w1 + ty; + } + + // uv + positions[index+2] = uvs.x0; + positions[index+3] = uvs.y0; + + // uv + positions[index+7] = uvs.x1; + positions[index+8] = uvs.y1; + + // uv + positions[index+12] = uvs.x2; + positions[index+13] = uvs.y2; + + // uv + positions[index+17] = uvs.x3; + positions[index+18] = uvs.y3; + + // color and alpha + var tint = sprite.tint; + colors[index+4] = colors[index+9] = colors[index+14] = colors[index+19] = (tint >> 16) + (tint & 0xff00) + ((tint & 0xff) << 16) + (sprite.worldAlpha * 255 << 24); + + // increment the batchsize + this.sprites[this.currentBatchSize++] = sprite; +}; + +/** + * Renders the content and empties the current batch. + * + */ +SpriteRenderer.prototype.flush = function () +{ + // If the batch is length 0 then return as there is nothing to draw + if (this.currentBatchSize === 0) + { + return; + } + + var gl = this.renderer.gl; + var shader; + + if (this.dirty) + { + this.dirty = false; + // bind the main texture + gl.activeTexture(gl.TEXTURE0); + + // bind the buffers + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + + // this is the same for each shader? + var stride = this.vertByteSize; + gl.vertexAttribPointer(this.shader.attributes.aVertexPosition, 2, gl.FLOAT, false, stride, 0); + gl.vertexAttribPointer(this.shader.attributes.aTextureCoord, 2, gl.FLOAT, false, stride, 2 * 4); + + // color attributes will be interpreted as unsigned bytes and normalized + gl.vertexAttribPointer(this.shader.attributes.aColor, 4, gl.UNSIGNED_BYTE, true, stride, 4 * 4); + } + + // upload the verts to the buffer + if (this.currentBatchSize > ( this.size * 0.5 ) ) + { + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertices); + } + else + { + var view = this.positions.subarray(0, this.currentBatchSize * this.vertByteSize); + gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); + } + + var nextTexture, nextBlendMode, nextShader; + var batchSize = 0; + var start = 0; + + var currentBaseTexture = sprite; + var currentBlendMode = this.renderer.blendModeManager.currentBlendMode; + var currentShader = null; + + var blendSwap = false; + var shaderSwap = false; + var sprite; + + for (var i = 0, j = this.currentBatchSize; i < j; i++) + { + + sprite = this.sprites[i]; + + nextTexture = sprite.texture.baseTexture; + nextBlendMode = sprite.blendMode; + nextShader = sprite.shader || this.shader; + + blendSwap = currentBlendMode !== nextBlendMode; + shaderSwap = currentShader !== nextShader; // should I use uuidS??? + + if (currentBaseTexture !== nextTexture || blendSwap || shaderSwap) + { + this.renderBatch(currentBaseTexture, batchSize, start); + + start = i; + batchSize = 0; + currentBaseTexture = nextTexture; + + if (blendSwap) + { + currentBlendMode = nextBlendMode; + this.renderer.blendModeManager.setBlendMode( currentBlendMode ); + } + + if (shaderSwap) + { + currentShader = nextShader; + + shader = currentShader.shaders ? currentShader.shaders[gl.id] : currentShader; + + if (!shader) + { + shader = new Shader(gl, null, currentShader.fragmentSrc, currentShader.uniforms); + currentShader.shaders[gl.id] = shader; + } + + // set shader function??? + this.renderer.shaderManager.setShader(shader); + + if (shader.dirty) + { + shader.syncUniforms(); + } + + // both thease only need to be set if they are changing.. + // set the projection + gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, this.renderer.currentRenderTarget.projectionMatrix.toArray(true)); + } + } + + batchSize++; + } + + this.renderBatch(currentBaseTexture, batchSize, start); + + // then reset the batch! + this.currentBatchSize = 0; +}; + +/** + * Draws the currently batches sprites. + * + * @private + * @param texture {Texture} + * @param size {number} + * @param startIndex {number} + */ +SpriteRenderer.prototype.renderBatch = function (texture, size, startIndex) +{ + if (size === 0) + { + return; + } + + var gl = this.renderer.gl; + + if (!texture._glTextures[gl.id]) + { + this.renderer.updateTexture(texture); + } + else + { + // bind the current texture + gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); + } + + // now draw those suckas! + gl.drawElements(gl.TRIANGLES, size * 6, gl.UNSIGNED_SHORT, startIndex * 6 * 2); + + // increment the draw count + this.renderer.drawCount++; +}; + +/** + * Flushes the sprite renderer's current batch. + * + */ +SpriteRenderer.prototype.stop = function () +{ + this.flush(); + this.dirty = true; +}; + +/** + * Starts a new sprite batch. + * + */ +SpriteRenderer.prototype.start = function () +{ + this.dirty = true; +}; + +/** + * Destroys the SpriteBatch. + * + */ +SpriteRenderer.prototype.destroy = function () +{ + this.renderer.gl.deleteBuffer(this.vertexBuffer); + this.renderer.gl.deleteBuffer(this.indexBuffer); + + this.renderer = null; + + this.vertices = null; + this.positions = null; + this.colors = null; + this.indices = null; + this.currentBaseTexture = null; + + this.drawing = false; + this.dirty = false; + + this.textures = null; + this.blendModes = null; + this.shaders = null; + this.sprites = null; + this.shader = null; +};