pixijs-scene-mesh
Use this skill when rendering custom geometry in PixiJS v8. Covers Mesh with MeshGeometry (positions, uvs, indices, topology), MeshSimple for per-frame vertex animation, MeshPlane for subdivided deformation, MeshRope for path-following textures, PerspectiveMesh for 2.5D corners. Triggers on: Mesh, M
By pixijs · 4,137 installs
npx skills add pixijs/pixijs-skills --skill pixijs-scene-mesh
Source repository · Upstream listing
Meshes render arbitrary 2D (or perspective projected) geometry with a texture or custom shader. PixiJS ships the base Mesh class plus four specialized subclasses for common shapes: MeshSimple , MeshPlane , MeshRope , and PerspectiveMesh . Pick the subclass that matches your shape; drop to the base Mesh when you need full vertex level control or a custom shader.
Assumes familiarity with pixijs scene core concepts . Meshes are leaf nodes; they cannot have children. Wrap multiple meshes in a Container to group them.
Quick Start
Every Mesh subclass takes a single options object. The base Mesh requires a geometry ; subclasses ( MeshSimple , MeshPlane , MeshRope , PerspectiveMesh ) build the geometry internally and require a texture instead. See each variant's reference for the full field list.
Variants
Variant Use when Trade offs Reference
Mesh Full control, custom geometry, custom shaders You build the MeshGeometry yourself [references/mesh.md](references/mesh.md)
MeshSimple Quick textured shapes with per frame vertex animation Thin wrapper; auto updates the vertex buffer [references/mesh simple.md](references/mesh simple.md)
MeshPlane Subdivided textured rectangle for distortion effects Fixed topology; verticesX / verticesY control density [references/mesh plane.md](references/mesh plane.md)
MeshRope Texture following a polyline path Bent at each point; needs many points for smooth curves [references/mesh rope.md](references/mesh rope.md)
PerspectiveMesh 2D plane with perspective corners Not true 3D; UV level perspective correction only [references/mesh perspective.md](references/mesh perspective.md)
When to use what
"I need a textured quad" → Sprite (see pixijs scene sprite ), not a mesh. Meshes are for cases Sprite can't express.
"I need to deform a textured rectangle" → MeshPlane . Set verticesX / verticesY for the desired smoothness.
"I need a rope or trail that follows points" → MeshRope . Control thickness with width ; use textureScale: 0 to stretch or 0 to repeat.
"I need a tilted 2D card or floor" → PerspectiveMesh . Pass four corner positions; not real 3D but good enough for 2.5D effects.
"I need per frame animated vertices with a simple shape" → MeshSimple . It handles the buffer update dance for you.
"I need a custom shader or unusual geometry" → Base Mesh with a hand built MeshGeometry . See pixijs custom rendering for shader authoring.
"I need true 3D rendering" → Use a dedicated 3D library. PerspectiveMesh simulates perspective at the UV level but has no depth buffer.
Quick concepts
MeshGeometry owns the vertex data
MeshGeometry holds the positions , uvs , indices , and topology . You can share one geometry across multiple Mesh instances; positions are reference counted.
Batching
A mesh batches (combines with other draw calls) only if it uses MeshGeometry , has no custom shader, no depth or culling state, and the 'auto' rule ( batchMode = 'auto' and ≤100 vertices). Custom shaders always render independently.
Topology is on the geometry, not the mesh
new MeshGeometry({ topology: 'triangle strip' }) ; topology is a geometry property. The default is 'triangle list' ; set it explicitly if your data is organized differently.
Extra knobs
new MeshGeometry({ shrinkBuffersToFit: true }) — trims GPU buffer storage to the actual vertex count on creation. Use it when feeding large, one shot geometries.
Mesh.containsPoint(point) — topology aware hit test that walks the triangles. Works with any MeshGeometry , including custom layouts.
new Mesh({ geometry, state }) — pass a State object to control blend, depth, and culling. Batching is disabled automatically if depth or culling flags are set. Defaults to State.for2d() when omitted.
Common Mistakes
[HIGH] Using old SimpleMesh / SimplePlane / SimpleRope names
Wrong:
Correct:
Renamed in v8: SimpleMesh → MeshSimple , SimplePlane → MeshPlane , SimpleRope → MeshRope . All switched to options object constructors.
[HIGH] Positional constructor args for MeshGeometry
Wrong:
Correct:
v8 uses an options object. Note the property is positions , not vertices ; the vertices name is only used by MeshSimple .
[MEDIUM] Adding children to a mesh
Wrong:
Correct:
Mesh sets allowChildren = false . Adding children logs a deprecation warning. Group meshes inside a plain Container .
API Reference
[Mesh](https://pixijs.download/release/docs/scene.Mesh.html.md)
[MeshGeometry](https://pixijs.download/release/docs/scene.MeshGeometry.html.md)
[MeshSimple](https://pixijs.download/release/docs/scene.MeshSimple.html.md)
[MeshPlane](https://pixijs.download/release/docs/scene.MeshPlane.html.md)
[MeshRope](https://pixijs.download/release/docs/scene.MeshRope.html.md)
[PerspectiveMesh](https://pixijs.download/release/docs/scene.PerspectiveMesh.html.md)