Pixijs Scene Mesh
Add perspective-correct textured quads in PixiJS for billboards, tilted cards, and fake-3D scene layouts.
Overview
PixiJS Scene Mesh is an agent skill for the Build phase that explains how to use PerspectiveMesh for perspective-warped textured quads in PixiJS scenes.
Install
npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-scene-meshWhat is this skill?
- PerspectiveMesh warps any texture across four corner points with perspective-correct UVs
- Constructor uses PerspectivePlaneOptions extending MeshPlaneOptions (not PerspectiveMeshOptions)
- verticesX and verticesY subdivide the grid for smoother projection on large quads
- Quick-start pattern: Assets.load texture, define x0–y3 corners, addChild to stage
- Suited for 2D billboards, floor planes, angled cards, and fake 3D layouts
- Four corner points (x0–y3) define the perspective quad
Adoption & trust: 1.3k installs on skills.sh; 206 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need a texture to follow a tilted quadrilateral in PixiJS but only have flat sprites or undocumented mesh APIs.
Who is it for?
Indie game or interactive UI builders already on PixiJS who need angled cards, billboards, or floor planes without a full 3D pipeline.
Skip if: Projects using Three.js/Babylon for real 3D meshes, or teams that only need axis-aligned Sprites with no perspective warp.
When should I use this skill?
Implementing or debugging PerspectiveMesh, perspective billboards, or subdivided textured planes in PixiJS.
What do I get? / Deliverables
You instantiate PerspectiveMesh with corner coordinates and subdivision counts and add a perspective-correct textured plane to your stage.
- PerspectiveMesh instance on stage
- Configured corner coordinates and vertex grid
Recommended Skills
Journey fit
How it compares
Reference skill for one PixiJS mesh primitive, not a full scene graph or asset pipeline generator.
Common Questions / FAQ
Who is pixijs-scene-mesh for?
Frontend and game developers using coding agents to implement PixiJS scenes with perspective-projected textured planes.
When should I use pixijs-scene-mesh?
While building frontend game or canvas features when you need PerspectiveMesh options, corner UV layout, or subdivision guidance for warped quads.
Is pixijs-scene-mesh safe to install?
It is documentation-only; review the Security Audits panel on this page and treat it like any third-party skill package before enabling in your agent.
SKILL.md
READMESKILL.md - Pixijs Scene Mesh
# PerspectiveMesh A mesh that renders a textured plane with perspective projection via four corner points. The UV interpolation is computed per vertex in a subdivided grid, so the more vertices you allocate, the smoother the projection. Use `PerspectiveMesh` for 2D billboards, floor planes, angled cards, fake 3D layouts, or anywhere you want a texture to appear tilted into the scene. ## Quick Start ```ts const texture = await Assets.load("card.png"); const mesh = new PerspectiveMesh({ texture, verticesX: 20, verticesY: 20, x0: 0, y0: 0, // top-left x1: 300, y1: 30, // top-right (raised) x2: 280, y2: 300, // bottom-right x3: 20, y3: 280, // bottom-left }); app.stage.addChild(mesh); ``` The four corner coordinates define a quadrilateral in local space; the mesh warps the texture to fit it with perspective-correct UVs. ## Constructor options `new PerspectiveMesh(options: PerspectivePlaneOptions)` > Note: the interface is `PerspectivePlaneOptions`, not `PerspectiveMeshOptions`. It extends `MeshPlaneOptions`. | Option | Type | Default | Description | | ----------- | --------- | --------------- | --------------------------------------------------------------------------------------------------------------------- | | `texture` | `Texture` | `Texture.WHITE` | Texture warped onto the quad. Inherited from `MeshPlaneOptions`; also drives the geometry's initial `width`/`height`. | | `verticesX` | `number` | `10` | Grid columns. More vertices yield smoother perspective at higher draw cost. | | `verticesY` | `number` | `10` | Grid rows. More vertices yield smoother perspective at higher draw cost. | | `x0` | `number` | `0` | Top-left corner x. | | `y0` | `number` | `0` | Top-left corner y. | | `x1` | `number` | `100` | Top-right corner x. | | `y1` | `number` | `0` | Top-right corner y. | | `x2` | `number` | `100` | Bottom-right corner x. | | `y2` | `number` | `100` | Bottom-right corner y. | | `x3` | `number` | `0` | Bottom-left corner x. | | `y3` | `number` | `100` | Bottom-left corner y. | Corners must be listed clockwise from the top-left. Defaults form a 100x100 square with `Texture.WHITE`; `PerspectiveMesh.defaultOptions` overrides them globally. The constructor omits `geometry` (it builds its own `PerspectivePlaneGeometry`). Other `MeshOptions` fields (`shader`, `state`, `roundPixels`) are inherited from `mesh.md`. All `Container` options (`position`, `scale`, `tint`, `label`, `filters`, `zIndex`, etc.) are also valid here — see `skills/pixijs-scene-core-concepts/references/constructor-options.md`. Call `mesh.setCorners(x0, y0, x1, y1, x2, y2, x3, y3)` at runtime to animate the warp. ## Core Patterns ### Corner order ```ts mesh.setCorners( 0, 0, // top-left (x0, y0) 200, 0, // top-right (x1, y1) 200, 200, // bottom-right(x2, y2) 0, 20