PIXI.Mesh

class Mesh extends PIXI.Container

Base mesh class.

This class empowers you to have maximum flexibility to render any kind of WebGL visuals you can think of. This class assumes a certain level of WebGL knowledge. If you know a bit this should abstract enough away to make your life easier!

Pretty much ALL WebGL can be broken down into the following:

Geometry - The structure and data for the mesh. This can include anything from positions, uvs, normals, colors etc..
Shader - This is the shader that PixiJS will render the geometry with (attributes in the shader must match the geometry)
State - This is the state of WebGL required to render the mesh.

Through a combination of the above elements you can render anything you want, 2D or 3D!

Constructor

new PIXI.Mesh(geometry: PIXI.Geometry, shader: PIXI.MeshMaterial, state: PIXI.State, drawMode: PIXI.DRAW_MODES) → {}

Parameters:
Name	Type	Attributes	Description
geometry	PIXI.Geometry		The geometry the mesh will use.
shader	PIXI.MeshMaterial		The shader the mesh will use.
state	PIXI.State	<optional>	The state that the WebGL context is required to be in to render the mesh if no state is provided, uses PIXI.State.for2d to create a 2D state for PixiJS.
drawMode	PIXI.DRAW_MODES		The drawMode, can be any of the PIXI.DRAW_MODES constants.

Summary

Properties from Mesh

number	static BATCHABLE_SIZE = 100 The maximum number of vertices to consider batchable. Generally, the complexity of the geometry.
PIXI.BLEND_MODES	blendMode = PIXI.BLEND_MODES.NORMAL;
PIXI.DRAW_MODES	drawMode The way the Mesh should be drawn, can be any of the PIXI.DRAW_MODES constants.
PIXI.Geometry	geometry
T	material Alias for PIXI.Mesh#shader.
boolean	roundPixels = false
PIXI.Shader \| PIXI.MeshMaterial	shader
number	size = 0
number	start = 0
PIXI.State	state
PIXI.Texture	texture The texture that the Mesh uses. Null for non-MeshMaterial shaders
number	tint = 0xFFFFFF
PIXI.Buffer	uvBuffer
PIXI.Buffer	verticesBuffer
PIXI.Texture	protected _cachedTexture = undefined
number	protected _cachedTint = 16777215
HTMLCanvasElement	protected _tintedCanvas = undefined

Methods from Mesh

void	calculateUvs() Updates uv field based on from geometry uv's or batchUvs.
void	calculateVertices() Updates vertexData field based on transform and vertices.
boolean	containsPoint(point: IPointData)
void	renderCanvas(renderer: PIXI.CanvasRenderer)
void	protected _calculateBounds()
void	protected _render(renderer: PIXI.Renderer)
void	protected _renderCanvas(renderer: PIXI.CanvasRenderer)
void	protected _renderDefault(renderer: PIXI.Renderer)
void	protected _renderToBatch(renderer: PIXI.Renderer)

Properties inherited from Container

T[]	children
number	height The height of the Container, setting this will actually modify the scale to achieve the value set.
boolean	interactiveChildren = true
boolean	sortableChildren
boolean	sortDirty Should children be sorted by zIndex at the next updateTransform call.
number	width The width of the Container, setting this will actually modify the scale to achieve the value set.

Properties inherited from DisplayObject

boolean	_accessibleActive = false
boolean	_accessibleDiv = undefined
PIXI.Bounds	_bounds The bounds object, this is used to calculate and store the bounds of the displayObject.
PIXI.Bounds	_localBounds Local bounds object, swapped with `_bounds` when using `getLocalBounds()`.
boolean	accessible = false
boolean	accessibleChildren = true
string	accessibleHint = undefined
string	accessiblePointerEvents = 'auto'
?string	accessibleTitle = undefined
string	accessibleType = 'button'
number	alpha The opacity of the object.
number	angle
boolean	buttonMode
boolean	cacheAsBitmap
number	cacheAsBitmapMultisample = PIXI.MSAA_QUALITY.NONE
number	cacheAsBitmapResolution = null
boolean	cullable Should this object be rendered if the bounds of this object are out of frame?
PIXI.Rectangle	cullArea
string	cursor = undefined
boolean	destroyed Readonly flag for destroyed display objects.
PIXI.Rectangle	filterArea
PIXI.Filter[] \| null	filters
PIXI.IHitArea	hitArea = undefined
boolean	interactive = false
boolean	isMask Does any other displayObject use this object as a mask?
boolean	isSprite Used to fast check if a sprite is.. a sprite!
PIXI.Matrix	localTransform
PIXI.Container \| PIXI.MaskData \| null	mask
string	name = undefined
PIXI.Container	parent The display object container that contains this display object.
PIXI.ObservablePoint	pivot
PIXI.ObservablePoint	position
boolean	renderable
number	rotation
PIXI.ObservablePoint	scale The scale factors of this object along the local coordinate axes.
PIXI.ObservablePoint	skew
PIXI.DisplayObject	smartMask = undefined
PIXI.Transform	transform
boolean	visible
number	worldAlpha
PIXI.Matrix	worldTransform
boolean	worldVisible
number	x
number	y
number	zIndex The zIndex of the displayObject.
number	protected _boundsID Flags the cached bounds as dirty.
PIXI.Rectangle	protected _boundsRect Cache of this display-object's bounds-rectangle.
boolean	protected _destroyed If the object has been destroyed via destroy(). If true, it should not be used.
PIXI.Filter[]	protected _enabledFilters
number	protected _lastSortedIndex
PIXI.Rectangle	protected _localBoundsRect Cache of this display-object's local-bounds rectangle.
PIXI.Container \| PIXI.MaskData	protected _mask
PIXI.Container	protected _tempDisplayObjectParent
number	protected _zIndex

Methods inherited from Container

PIXI.DisplayObject	addChild(children: PIXI.DisplayObject) Adds one or more children to the container.
PIXI.DisplayObject	addChildAt(child: PIXI.DisplayObject, index: number)
void	calculateBounds() Recalculates the bounds of the container.
	containerUpdateTransform()
void	destroy(options: IDestroyOptions \| boolean)
T	getChildAt(index: number)
PIXI.DisplayObject	getChildByName(name: string, deep: boolean) Returns the display object in the container.
number	getChildIndex(child: T)
PIXI.Rectangle	getLocalBounds(rect: PIXI.Rectangle, skipChildrenUpdate: boolean) Retrieves the local bounds of the displayObject as a rectangle object.
PIXI.DisplayObject	removeChild(children: PIXI.DisplayObject)
T	removeChildAt(index: number)
T[]	removeChildren(beginIndex: number, endIndex)
void	render(renderer: PIXI.Renderer) Renders the object using the WebGL renderer.
void	setChildIndex(child: T, index: number)
void	sortChildren() Sorts children by zIndex. Previous order is maintained for 2 children with the same zIndex.
void	swapChildren(child: T, child2: T)
void	updateTransform() Updates the transform on all children of this container for rendering.
void	protected _renderWithCulling(renderer: PIXI.Renderer)
void	protected onChildrenChange(_length: number)
void	protected renderAdvanced(renderer: PIXI.Renderer)

Methods inherited from DisplayObject

	addEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean \| AddEventListenerOptions)
void	disableTempParent(cacheParent: PIXI.Container)
boolean	dispatchEvent(e: Event) Dispatch the event on this PIXI.DisplayObject using the event's PIXI.EventBoundary.
	displayObjectUpdateTransform()
PIXI.Container	enableTempParent() Used in Renderer, cacheAsBitmap and other places where you call an `updateTransform` on root
PIXI.Rectangle	getBounds(skipUpdate: boolean, rect: PIXI.Rectangle) Calculates and returns the (world) bounds of the display object as a Rectangle.
PIXI.Point	getGlobalPosition(point: PIXI.Point, skipUpdate: boolean)
	removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean \| AddEventListenerOptions)
PIXI.Container	setParent(container: PIXI.Container)
this	setTransform(x: number, y: number, scaleX: number, scaleY: number, rotation: number, skewX: number, skewY: number, pivotX: number, pivotY: number)
P	toGlobal(position: IPointData, point: P, skipUpdate: boolean)
P	toLocal(position: IPointData, from: PIXI.DisplayObject, point: P, skipUpdate: boolean)
PIXI.Rectangle	updateSmartMask(recursive: boolean, skipUpdate: boolean)
void	protected _recursivePostUpdateTransform() Recursively updates transform of all objects from the root to this one internal function for toLocal()

Inherited Events from Container

childAdded

Inherited Events from DisplayObject

	added
	childRemoved
	click
	clickcapture Capture phase equivalent of `click`.
	destroyed
	mousedown
	mousedowncapture Capture phase equivalent of `mousedown`.
	mouseenter Fired when the mouse pointer is moved over a DisplayObject and its descendant's hit testing boundaries.
	mouseentercapture Capture phase equivalent of `mouseenter`
	mouseleave Fired when the mouse pointer exits a DisplayObject and its descendants.
	mouseleavecapture Capture phase equivalent of `mouseleave`.
	mousemove
	mousemovecature Capture phase equivalent of `mousemove`.
	mouseout
	mouseoutcapture Capture phase equivalent of `mouseout`.
	mouseover
	mouseovercapture Capture phase equivalent of `mouseover`.
	mouseup
	mouseupcature Capture phase equivalent of `mouseup`.
	mouseupoutside
	mouseupoutsidecapture Capture phase equivalent of `mouseupoutside`.
	pointercancel
	pointercancelcapture Capture phase equivalent of `pointercancel`.
	pointerdown
	pointerdowncapture Capture phase equivalent of `pointerdown`.
	pointerenter Fired when the pointer is moved over a DisplayObject and its descendant's hit testing boundaries.
	pointerentercapture Capture phase equivalent of `pointerenter`
	pointerleave Fired when the pointer leaves the hit testing boundaries of a DisplayObject and its descendants.
	pointerleavecapture Capture phase equivalent of `pointerleave`.
	pointermove
	pointermovecapture Capture phase equivalent of `pointermove`.
	pointerout
	pointeroutcapture Capture phase equivalent of `pointerout`.
	pointerover
	pointerovercapture Capture phase equivalent of `pointerover`.
	pointertap
	pointertapcapture Capture phase equivalent of `pointertap`.
	pointerup
	pointerupcapture Capture phase equivalent of `pointerup`.
	pointerupoutside
	pointerupoutsidecapture Capture phase equivalent of `pointerupoutside`.
	removed
	rightclick
	rightclickcapture Capture phase equivalent of `rightclick`.
	rightdown
	rightdowncapture Capture phase equivalent of `rightdown`.
	rightup
	rightupcapture Capture phase equivalent of `rightup`.
	rightupoutside
	rightupoutsidecapture Capture phase equivalent of `rightupoutside`.
	tap
	tapcapture Capture phase equivalent of `tap`.
	touchcancel
	touchcancelcapture Capture phase equivalent of `touchcancel`.
	touchend
	touchendcapture Capture phase equivalent of `touchend`.
	touchendoutside
	touchendoutsidecapture Capture phase equivalent of `touchendoutside`.
	touchmove
	touchmovecapture Capture phase equivalent of `touchmove`.
	touchstart
	touchstartcapture Capture phase equivalent of `touchstart`.
PIXI.FederatedWheelEvent	wheel Fired when a the user scrolls with the mouse cursor over a DisplayObject.
PIXI.FederatedWheelEvent	wheelcapture Capture phase equivalent of `wheel`.

Public Properties

BATCHABLE_SIZE Mesh.ts:482

static BATCHABLE_SIZE: number = 100

The maximum number of vertices to consider batchable. Generally, the complexity of the geometry.

blendMode Mesh.ts:190

blendMode: PIXI.BLEND_MODES = PIXI.BLEND_MODES.NORMAL;

The blend mode to be applied to the Mesh. Apply a value of PIXI.BLEND_MODES.NORMAL to reset the blend mode.

drawMode Mesh.ts:50

drawMode: PIXI.DRAW_MODES

The way the Mesh should be drawn, can be any of the PIXI.DRAW_MODES constants.

geometry Mesh.ts:123

geometry: PIXI.Geometry

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 objects.

material Mesh.ts:179

material: T

Alias for PIXI.Mesh#shader.

roundPixels Mesh.ts:205

roundPixels: boolean = false

If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. Advantages can include sharper image quality (like text) and faster rendering on canvas. The main disadvantage is movement of objects may appear less smooth. To set the global default, change PIXI.settings.ROUND_PIXELS

shader Mesh.ts:37

shader: PIXI.Shader | PIXI.MeshMaterial

Represents the vertex and fragment shaders that processes the geometry and runs on the GPU. Can be shared between multiple Mesh objects.

size Mesh.ts:59

size: number = 0

How much of the geometry to draw, by default 0 renders everything.

start Mesh.ts:53

start: number = 0

Typically the index of the IndexBuffer where to start drawing.

state Mesh.ts:44

state: PIXI.State

Represents the WebGL state the Mesh required to render, excludes shader and geometry. E.g., blend mode, culling, depth testing, direction of rendering triangles, backface, etc.

texture Mesh.ts:243

texture: PIXI.Texture

The texture that the Mesh uses. Null for non-MeshMaterial shaders

tint Mesh.ts:226

tint: number = 0xFFFFFF

The multiply tint applied to the Mesh. This is a hex value. A value of 0xFFFFFF will remove any tint effect.

Null for non-MeshMaterial shaders

uvBuffer Mesh.ts:160

uvBuffer: PIXI.Buffer

To change mesh uv's, change its uvBuffer data and increment its _updateID.

verticesBuffer Mesh.ts:169

verticesBuffer: PIXI.Buffer

To change mesh vertices, change its uvBuffer data and increment its _updateID. Incrementing _updateID is optional because most of Mesh objects do it anyway.

Protected Properties

_cachedTexture Mesh.ts:24

protected _cachedTexture: PIXI.Texture = undefined

The cache texture is used to generate _tintedCanvas.

_cachedTint Mesh.ts:8

protected _cachedTint: number = 16777215

Cached tint value so we can tell when the tint is changed.

_tintedCanvas Mesh.ts:16

protected _tintedCanvas: HTMLCanvasElement = undefined

Cached tinted texture.

Public Methods

calculateUvs Mesh.ts:389

calculateUvs() → {void}

Updates uv field based on from geometry uv's or batchUvs.

Returns:
Type	Description
void

calculateVertices Mesh.ts:337

calculateVertices() → {void}

Updates vertexData field based on transform and vertices.

Returns:
Type	Description
void

containsPoint Mesh.ts:421

containsPoint(point: IPointData) → {boolean}

Tests if a point is inside this mesh. Works only for PIXI.DRAW_MODES.TRIANGLES.

Parameters:
Name	Type	Description
point	IPointData	The point to test.

Returns:
Type	Description
boolean	The result of the test.

renderCanvas Container.ts:17

renderCanvas(renderer: PIXI.CanvasRenderer) → {void}

Renders the object using the Canvas renderer

Parameters:
Name	Type	Description
renderer	PIXI.CanvasRenderer	The renderer

Returns:
Type	Description
void

Protected Methods

_calculateBounds Mesh.ts:410

protected _calculateBounds() → {void}

Updates the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account. there must be a aVertexPosition attribute present in the geometry for bounds to be calculated correctly.

Returns:
Type	Description
void

_render Mesh.ts:254

protected _render(renderer: PIXI.Renderer) → {void}

Standard renderer draw.

Parameters:
Name	Type	Description
renderer	PIXI.Renderer	Instance to renderer.

Returns:
Type	Description
void

_renderCanvas SimpleRope.ts:6

protected _renderCanvas(renderer: PIXI.CanvasRenderer) → {void}

Renders the object using the Canvas renderer

Parameters:
Name	Type	Description
renderer	PIXI.CanvasRenderer	The canvas renderer.

Returns:
Type	Description
void

_renderDefault Mesh.ts:280

protected _renderDefault(renderer: PIXI.Renderer) → {void}

Standard non-batching way of rendering.

Parameters:
Name	Type	Description
renderer	PIXI.Renderer	Instance to renderer.

Returns:
Type	Description
void

_renderToBatch Mesh.ts:310

protected _renderToBatch(renderer: PIXI.Renderer) → {void}

Rendering by using the Batch system.

Parameters:
Name	Type	Description
renderer	PIXI.Renderer	Instance to renderer.

Returns:
Type	Description
void