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, MeshGeometry, MeshSimple, MeshPlane, MeshRope, PerspectiveMesh, positions, uvs, indices, topology, setCorners, constructor options, MeshOptions, MeshPlaneOptions, MeshRopeOptions, SimpleMeshOptions, Pe
Security Assessment
About pixijs-scene-mesh
Covers rendering custom geometry in PixiJS v8 using the base Mesh class and its four specialized subclasses. Meshes render arbitrary 2D or perspective-projected geometry with a texture or custom shader, and the skill helps pick the right tool: MeshSimple for quick textured shapes with per-frame vertex animation, MeshPlane for a subdivided rectangle used in distortion effects, MeshRope for a texture following a polyline path, and PerspectiveMesh for a 2D plane with perspective corners. The base Mesh is reserved for full vertex-level control or a custom shader, and meshes are leaf nodes that cannot have children, so multiple meshes are grouped inside a Container.
Geometry data lives in MeshGeometry, which owns positions, uvs, indices, and topology, and can be shared across multiple Mesh instances with reference-counted positions. The base Mesh requires a geometry while the subclasses build geometry internally and require a texture instead. Each class takes a single options object. Topology is a property of the geometry rather than the mesh, defaulting to 'triangle-list'. The skill explains batching: a mesh combines with other draw calls only when it uses MeshGeometry, has no custom shader, no depth or culling state, and stays within the 'auto' rule of at most 100 vertices, while custom shaders always render independently. Additional knobs include shrinkBuffersToFit for large one-shot geometries, the topology-aware containsPoint hit test, and a State object to control blend, depth, and culling.
Guidance is concrete about v8 migration pitfalls. The old SimpleMesh, SimplePlane, and SimpleRope names were renamed to MeshSimple, MeshPlane, and MeshRope and all moved to options-object constructors, so positional arguments no longer work. MeshGeometry must be constructed with an options object using the property name positions (not vertices, which is only used by MeshSimple). Adding children to a mesh is disallowed because Mesh sets allowChildren to false and instead logs a deprecation warning. A variant table and decision list map common needs to the right class, and for a plain textured quad the skill points to Sprite rather than a mesh, and to a dedicated 3D library for true 3D rendering.
FAQ
Which mesh variant should I use for a deformable textured rectangle?
Use MeshPlane, which provides a subdivided textured rectangle for distortion effects. Set verticesX and verticesY to control the subdivision density and thus the smoothness of the deformation.
What changed about mesh class names in PixiJS v8?
SimpleMesh, SimplePlane, and SimpleRope were renamed to MeshSimple, MeshPlane, and MeshRope, and they all switched to options-object constructors. For example, use 'new MeshRope({ texture, points })' instead of the old positional 'new SimpleRope(texture, points)'.
Why won't my mesh batch with other draw calls?
A mesh batches only if it uses MeshGeometry, has no custom shader, no depth or culling state, and follows the 'auto' rule with at most 100 vertices. Custom shaders always render independently, and batching is disabled automatically if depth or culling flags are set on a State object.
Can a Mesh have child nodes?
No. Mesh sets allowChildren to false and adding a child logs a deprecation warning. To group several meshes, add them to a plain Container instead.
Should I use a mesh for a simple textured quad?
No, use a Sprite for a textured quad. Meshes are intended for cases a Sprite cannot express, such as custom geometry, deformation, path-following textures, or perspective effects.
Install pixijs-scene-mesh
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
pixijs/pixijs-skills