diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f37f2f5..2506adb 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -28,8 +28,9 @@ { /** * + * @param {boolean} [nativeLines=false] - If true the lines will be draw using LINES instead of TRIANGLE_STRIP */ - constructor() + constructor(nativeLines = false) { super(); @@ -50,6 +51,13 @@ this.lineWidth = 0; /** + * If true the lines will be draw using LINES instead of TRIANGLE_STRIP + * + * @member {boolean} + */ + this.nativeLines = nativeLines; + + /** * The color of any lines drawn. * * @member {string} @@ -1031,6 +1039,7 @@ this.fillColor, this.fillAlpha, this.filling, + this.nativeLines, shape ); diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f37f2f5..2506adb 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -28,8 +28,9 @@ { /** * + * @param {boolean} [nativeLines=false] - If true the lines will be draw using LINES instead of TRIANGLE_STRIP */ - constructor() + constructor(nativeLines = false) { super(); @@ -50,6 +51,13 @@ this.lineWidth = 0; /** + * If true the lines will be draw using LINES instead of TRIANGLE_STRIP + * + * @member {boolean} + */ + this.nativeLines = nativeLines; + + /** * The color of any lines drawn. * * @member {string} @@ -1031,6 +1039,7 @@ this.fillColor, this.fillAlpha, this.filling, + this.nativeLines, shape ); diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index f5a87ae..b6f03c0 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -14,14 +14,19 @@ * @param {number} fillColor - the color of the fill * @param {number} fillAlpha - the alpha of the fill * @param {boolean} fill - whether or not the shape is filled with a colour + * @param {boolean} nativeLines - the method for drawing lines * @param {PIXI.Circle|PIXI.Rectangle|PIXI.Ellipse|PIXI.Polygon} shape - The shape object to draw. */ - constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) + constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, nativeLines, shape) { /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; + /** + * @member {boolean} if true the liens will be draw using LINES instead of TRIANGLE_STRIP + */ + this.nativeLines = nativeLines; /** * @member {number} the color of the line to draw @@ -85,6 +90,7 @@ this.fillColor, this.fillAlpha, this.fill, + this.nativeLines, this.shape ); } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f37f2f5..2506adb 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -28,8 +28,9 @@ { /** * + * @param {boolean} [nativeLines=false] - If true the lines will be draw using LINES instead of TRIANGLE_STRIP */ - constructor() + constructor(nativeLines = false) { super(); @@ -50,6 +51,13 @@ this.lineWidth = 0; /** + * If true the lines will be draw using LINES instead of TRIANGLE_STRIP + * + * @member {boolean} + */ + this.nativeLines = nativeLines; + + /** * The color of any lines drawn. * * @member {string} @@ -1031,6 +1039,7 @@ this.fillColor, this.fillAlpha, this.filling, + this.nativeLines, shape ); diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index f5a87ae..b6f03c0 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -14,14 +14,19 @@ * @param {number} fillColor - the color of the fill * @param {number} fillAlpha - the alpha of the fill * @param {boolean} fill - whether or not the shape is filled with a colour + * @param {boolean} nativeLines - the method for drawing lines * @param {PIXI.Circle|PIXI.Rectangle|PIXI.Ellipse|PIXI.Polygon} shape - The shape object to draw. */ - constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) + constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, nativeLines, shape) { /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; + /** + * @member {boolean} if true the liens will be draw using LINES instead of TRIANGLE_STRIP + */ + this.nativeLines = nativeLines; /** * @member {number} the color of the line to draw @@ -85,6 +90,7 @@ this.fillColor, this.fillAlpha, this.fill, + this.nativeLines, this.shape ); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index e67680f..867dde2 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -102,7 +102,15 @@ shaderTemp.uniforms.alpha = graphics.worldAlpha; renderer.bindVao(webGLData.vao); - webGLData.vao.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); + + if (graphics.nativeLines) + { + gl.drawArrays(gl.LINES, 0, webGLData.points.length / 6); + } + else + { + webGLData.vao.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); + } } } diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js index f37f2f5..2506adb 100644 --- a/src/core/graphics/Graphics.js +++ b/src/core/graphics/Graphics.js @@ -28,8 +28,9 @@ { /** * + * @param {boolean} [nativeLines=false] - If true the lines will be draw using LINES instead of TRIANGLE_STRIP */ - constructor() + constructor(nativeLines = false) { super(); @@ -50,6 +51,13 @@ this.lineWidth = 0; /** + * If true the lines will be draw using LINES instead of TRIANGLE_STRIP + * + * @member {boolean} + */ + this.nativeLines = nativeLines; + + /** * The color of any lines drawn. * * @member {string} @@ -1031,6 +1039,7 @@ this.fillColor, this.fillAlpha, this.filling, + this.nativeLines, shape ); diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js index f5a87ae..b6f03c0 100644 --- a/src/core/graphics/GraphicsData.js +++ b/src/core/graphics/GraphicsData.js @@ -14,14 +14,19 @@ * @param {number} fillColor - the color of the fill * @param {number} fillAlpha - the alpha of the fill * @param {boolean} fill - whether or not the shape is filled with a colour + * @param {boolean} nativeLines - the method for drawing lines * @param {PIXI.Circle|PIXI.Rectangle|PIXI.Ellipse|PIXI.Polygon} shape - The shape object to draw. */ - constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) + constructor(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, nativeLines, shape) { /** * @member {number} the width of the line to draw */ this.lineWidth = lineWidth; + /** + * @member {boolean} if true the liens will be draw using LINES instead of TRIANGLE_STRIP + */ + this.nativeLines = nativeLines; /** * @member {number} the color of the line to draw @@ -85,6 +90,7 @@ this.fillColor, this.fillAlpha, this.fill, + this.nativeLines, this.shape ); } diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js index e67680f..867dde2 100644 --- a/src/core/graphics/webgl/GraphicsRenderer.js +++ b/src/core/graphics/webgl/GraphicsRenderer.js @@ -102,7 +102,15 @@ shaderTemp.uniforms.alpha = graphics.worldAlpha; renderer.bindVao(webGLData.vao); - webGLData.vao.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); + + if (graphics.nativeLines) + { + gl.drawArrays(gl.LINES, 0, webGLData.points.length / 6); + } + else + { + webGLData.vao.draw(gl.TRIANGLE_STRIP, webGLData.indices.length); + } } } diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js index ecf43f7..4d6862e 100644 --- a/src/core/graphics/webgl/utils/buildLine.js +++ b/src/core/graphics/webgl/utils/buildLine.js @@ -11,7 +11,29 @@ * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties * @param {object} webGLData - an object containing all the webGL-specific information to create this shape */ -export default function buildLine(graphicsData, webGLData) +export default function (graphicsData, webGLData) +{ + if (graphicsData.nativeLines) + { + buildNativeLine(graphicsData, webGLData); + } + else + { + buildLine(graphicsData, webGLData); + } +} + +/** + * Builds a line to draw using the poligon method. + * + * Ignored from docs since it is not directly exposed. + * + * @ignore + * @private + * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties + * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + */ +function buildLine(graphicsData, webGLData) { // TODO OPTIMISE! let points = graphicsData.points; @@ -224,3 +246,46 @@ indices.push(indexStart - 1); } + +/** + * Builds a line to draw using the gl.drawArrays(gl.LINES) method + * + * Ignored from docs since it is not directly exposed. + * + * @ignore + * @private + * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties + * @param {object} webGLData - an object containing all the webGL-specific information to create this shape + */ +function buildNativeLine(graphicsData, webGLData) +{ + let i = 0; + const points = graphicsData.points; + + if (points.length === 0) return; + + const verts = webGLData.points; + const length = points.length / 2; + + // sort color + const color = hex2rgb(graphicsData.lineColor); + const alpha = graphicsData.lineAlpha; + const r = color[0] * alpha; + const g = color[1] * alpha; + const b = color[2] * alpha; + + for (i = 1; i < length; i++) + { + const p1x = points[(i - 1) * 2]; + const p1y = points[((i - 1) * 2) + 1]; + + const p2x = points[i * 2]; + const p2y = points[(i * 2) + 1]; + + verts.push(p1x, p1y); + verts.push(r, g, b, alpha); + + verts.push(p2x, p2y); + verts.push(r, g, b, alpha); + } +}