diff --git a/packages/graphics/package.json b/packages/graphics/package.json index 0941261..34cd46b 100644 --- a/packages/graphics/package.json +++ b/packages/graphics/package.json @@ -30,8 +30,7 @@ "@pixi/display": "^5.0.0-alpha.3", "@pixi/math": "^5.0.0-alpha.3", "@pixi/sprite": "^5.0.0-alpha.3", - "@pixi/utils": "^5.0.0-alpha.3", - "@pixi/mesh": "^5.0.0-alpha.3" + "@pixi/utils": "^5.0.0-alpha.3" }, "devDependencies": { "floss": "^2.1.3" diff --git a/packages/graphics/package.json b/packages/graphics/package.json index 0941261..34cd46b 100644 --- a/packages/graphics/package.json +++ b/packages/graphics/package.json @@ -30,8 +30,7 @@ "@pixi/display": "^5.0.0-alpha.3", "@pixi/math": "^5.0.0-alpha.3", "@pixi/sprite": "^5.0.0-alpha.3", - "@pixi/utils": "^5.0.0-alpha.3", - "@pixi/mesh": "^5.0.0-alpha.3" + "@pixi/utils": "^5.0.0-alpha.3" }, "devDependencies": { "floss": "^2.1.3" diff --git a/packages/graphics/src/Graphics.js b/packages/graphics/src/Graphics.js index c601b7e..ae2bfc0 100644 --- a/packages/graphics/src/Graphics.js +++ b/packages/graphics/src/Graphics.js @@ -9,10 +9,11 @@ Matrix, } from '@pixi/math'; import { hex2rgb } from '@pixi/utils'; -import { Mesh } from '@pixi/mesh'; -import { Texture, +import { + Texture, Shader, - UniformGroup } from '@pixi/core'; + UniformGroup, State, +} from '@pixi/core'; import FillStyle from './styles/FillStyle'; import GraphicsGeometry from './GraphicsGeometry'; import LineStyle from './styles/LineStyle'; @@ -20,6 +21,8 @@ import QuadraticUtils from './utils/QuadraticUtils'; import ArcUtils from './utils/ArcUtils'; import Star from './utils/Star'; +import { BLEND_MODES } from '@pixi/constants'; +import { Container } from '@pixi/display'; const temp = new Float32Array(3); @@ -33,10 +36,10 @@ * rectangles to the display, and to color and fill them. * * @class - * @extends PIXI.Mesh + * @extends PIXI.Container * @memberof PIXI */ -export default class Graphics extends Mesh +export default class Graphics extends Container { /** * @param {PIXI.GraphicsGeometry} [geometry=null] - Geometry to use, if omitted @@ -44,11 +47,28 @@ */ constructor(geometry = null) { - const ownsGeometry = geometry === null; + super(); + /** + * Includes vertex positions, face indices, normals, colors, UVs, and + * custom attributes within buffers, reducing the cost of passing all + * this data to the GPU. Can be shared between multiple Mesh or Graphics objects. + * @member {PIXI.Geometry} + */ + this.geometry = geometry || new GraphicsGeometry(); - geometry = geometry || new GraphicsGeometry(); + /** + * Represents the vertex and fragment shaders that processes the geometry and runs on the GPU. + * Can be shared between multiple Graphics objects. + * @member {PIXI.Shader} + */ + this.shader = null; - super(geometry, null, null, 4); // DRAW_MODES.TRIANGLE_STRIP + /** + * Represents the webGL state the Graphics required to render, excludes shader and geometry. E.g., + * blend mode, culling, depth testing, direction of rendering triangles, backface, etc. + * @member {PIXI.State} + */ + this.state = State.for2d(); /** * If this Graphics object owns the GraphicsGeometry @@ -56,7 +76,7 @@ * @member {boolean} * @private */ - this._ownsGeometry = ownsGeometry; + this._ownsGeometry = geometry === null; /** * Current fill style @@ -137,8 +157,12 @@ */ this.vertexData = null; + this._transformID = -1; + this.batchDirty = -1; + // Set default this.tint = 0xFFFFFF; + this.blendMode = BLEND_MODES.NORMAL; } /** @@ -155,7 +179,25 @@ } /** - * The tint applied to the Rope. This is a hex value. A value of + * The blend mode to be applied to the graphic shape. Apply a value of + * `PIXI.BLEND_MODES.NORMAL` to reset the blend mode. + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL; + * @see PIXI.BLEND_MODES + */ + set blendMode(value) + { + this.state.blendMode = value; + } + + get blendMode() + { + return this.state.blendMode; + } + + /** + * The tint applied to the graphic shape. This is a hex value. A value of * 0xFFFFFF will remove any tint effect. * * @member {number} @@ -403,8 +445,6 @@ QuadraticUtils.curveTo(cpX, cpY, toX, toY, points); - this.dirty++; - return this; } @@ -425,8 +465,6 @@ BezierUtils.curveTo(cpX, cpY, cpX2, cpY2, toX, toY, this.currentPath.points); - this.dirty++; - return this; } @@ -457,8 +495,6 @@ this.arc(cx, cy, radius, startAngle, endAngle, anticlockwise); } - this.dirty++; - return this; } @@ -520,8 +556,6 @@ ArcUtils.arc(startX, startY, cx, cy, radius, startAngle, endAngle, anticlockwise, points); - this.dirty++; - return this; } @@ -778,7 +812,7 @@ if (geometry.batchable) { - if (geometry.batchDirty !== this.batchDirty) + if (this.batchDirty !== geometry.batchDirty) { this.batches = []; this.batchTint = -1; diff --git a/packages/graphics/package.json b/packages/graphics/package.json index 0941261..34cd46b 100644 --- a/packages/graphics/package.json +++ b/packages/graphics/package.json @@ -30,8 +30,7 @@ "@pixi/display": "^5.0.0-alpha.3", "@pixi/math": "^5.0.0-alpha.3", "@pixi/sprite": "^5.0.0-alpha.3", - "@pixi/utils": "^5.0.0-alpha.3", - "@pixi/mesh": "^5.0.0-alpha.3" + "@pixi/utils": "^5.0.0-alpha.3" }, "devDependencies": { "floss": "^2.1.3" diff --git a/packages/graphics/src/Graphics.js b/packages/graphics/src/Graphics.js index c601b7e..ae2bfc0 100644 --- a/packages/graphics/src/Graphics.js +++ b/packages/graphics/src/Graphics.js @@ -9,10 +9,11 @@ Matrix, } from '@pixi/math'; import { hex2rgb } from '@pixi/utils'; -import { Mesh } from '@pixi/mesh'; -import { Texture, +import { + Texture, Shader, - UniformGroup } from '@pixi/core'; + UniformGroup, State, +} from '@pixi/core'; import FillStyle from './styles/FillStyle'; import GraphicsGeometry from './GraphicsGeometry'; import LineStyle from './styles/LineStyle'; @@ -20,6 +21,8 @@ import QuadraticUtils from './utils/QuadraticUtils'; import ArcUtils from './utils/ArcUtils'; import Star from './utils/Star'; +import { BLEND_MODES } from '@pixi/constants'; +import { Container } from '@pixi/display'; const temp = new Float32Array(3); @@ -33,10 +36,10 @@ * rectangles to the display, and to color and fill them. * * @class - * @extends PIXI.Mesh + * @extends PIXI.Container * @memberof PIXI */ -export default class Graphics extends Mesh +export default class Graphics extends Container { /** * @param {PIXI.GraphicsGeometry} [geometry=null] - Geometry to use, if omitted @@ -44,11 +47,28 @@ */ constructor(geometry = null) { - const ownsGeometry = geometry === null; + super(); + /** + * Includes vertex positions, face indices, normals, colors, UVs, and + * custom attributes within buffers, reducing the cost of passing all + * this data to the GPU. Can be shared between multiple Mesh or Graphics objects. + * @member {PIXI.Geometry} + */ + this.geometry = geometry || new GraphicsGeometry(); - geometry = geometry || new GraphicsGeometry(); + /** + * Represents the vertex and fragment shaders that processes the geometry and runs on the GPU. + * Can be shared between multiple Graphics objects. + * @member {PIXI.Shader} + */ + this.shader = null; - super(geometry, null, null, 4); // DRAW_MODES.TRIANGLE_STRIP + /** + * Represents the webGL state the Graphics required to render, excludes shader and geometry. E.g., + * blend mode, culling, depth testing, direction of rendering triangles, backface, etc. + * @member {PIXI.State} + */ + this.state = State.for2d(); /** * If this Graphics object owns the GraphicsGeometry @@ -56,7 +76,7 @@ * @member {boolean} * @private */ - this._ownsGeometry = ownsGeometry; + this._ownsGeometry = geometry === null; /** * Current fill style @@ -137,8 +157,12 @@ */ this.vertexData = null; + this._transformID = -1; + this.batchDirty = -1; + // Set default this.tint = 0xFFFFFF; + this.blendMode = BLEND_MODES.NORMAL; } /** @@ -155,7 +179,25 @@ } /** - * The tint applied to the Rope. This is a hex value. A value of + * The blend mode to be applied to the graphic shape. Apply a value of + * `PIXI.BLEND_MODES.NORMAL` to reset the blend mode. + * + * @member {number} + * @default PIXI.BLEND_MODES.NORMAL; + * @see PIXI.BLEND_MODES + */ + set blendMode(value) + { + this.state.blendMode = value; + } + + get blendMode() + { + return this.state.blendMode; + } + + /** + * The tint applied to the graphic shape. This is a hex value. A value of * 0xFFFFFF will remove any tint effect. * * @member {number} @@ -403,8 +445,6 @@ QuadraticUtils.curveTo(cpX, cpY, toX, toY, points); - this.dirty++; - return this; } @@ -425,8 +465,6 @@ BezierUtils.curveTo(cpX, cpY, cpX2, cpY2, toX, toY, this.currentPath.points); - this.dirty++; - return this; } @@ -457,8 +495,6 @@ this.arc(cx, cy, radius, startAngle, endAngle, anticlockwise); } - this.dirty++; - return this; } @@ -520,8 +556,6 @@ ArcUtils.arc(startX, startY, cx, cy, radius, startAngle, endAngle, anticlockwise, points); - this.dirty++; - return this; } @@ -778,7 +812,7 @@ if (geometry.batchable) { - if (geometry.batchDirty !== this.batchDirty) + if (this.batchDirty !== geometry.batchDirty) { this.batches = []; this.batchTint = -1; diff --git a/packages/mesh/src/Mesh.js b/packages/mesh/src/Mesh.js index 1750771..0d69a7a 100644 --- a/packages/mesh/src/Mesh.js +++ b/packages/mesh/src/Mesh.js @@ -129,7 +129,7 @@ } /** - * The blend mode to be applied to the graphic shape. Apply a value of + * The blend mode to be applied to the Mesh. Apply a value of * `PIXI.BLEND_MODES.NORMAL` to reset the blend mode. * * @member {number}