pixijs-scene-mesh

Name: pixijs-scene-mesh
Author: pixijs

2.8kinstalls15forks

How to install pixijs-scene-mesh?

pixijs/pixijs-skills/pixijs-scene-mesh

$npx -y skills add pixijs/pixijs-skills --skill pixijs-scene-mesh

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	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.
2
3	Assumes familiarity with `pixijs-scene-core-concepts`. Meshes are leaf nodes; they cannot have children. Wrap multiple meshes in a `Container` to group them.
4
5	## Quick Start
6
7	```ts
8	const texture = await Assets.load("pattern.png");
9
10	const geometry = new MeshGeometry({
11	positions: new Float32Array([0, 0, 100, 0, 100, 100, 0, 100]),
12	uvs: new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]),
13	indices: new Uint32Array([0, 1, 2, 0, 2, 3]),
14	topology: "triangle-list",
15	});
16
17	const mesh = new Mesh({
18	geometry,
19	texture,
20	roundPixels: false,
21	});
22	app.stage.addChild(mesh);
23	```
24
25	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.
26
27	## Variants
28
29	\| Variant \| Use when \| Trade-offs \| Reference \|
30	\| ----------------- \| ----------------------------------------------------- \| ------------------------------------------------------- \| ---------------------------------------------------------------- \|
31	\| `Mesh` \| Full control, custom geometry, custom shaders \| You build the `MeshGeometry` yourself \| [references/mesh.md](references/mesh.md) \|
32	\| `MeshSimple` \| Quick textured shapes with per-frame vertex animation \| Thin wrapper; auto-updates the vertex buffer \| [references/mesh-simple.md](references/mesh-simple.md) \|
33	\| `MeshPlane` \| Subdivided textured rectangle for distortion effects \| Fixed topology; `verticesX`/`verticesY` control density \| [references/mesh-plane.md](references/mesh-plane.md) \|
34	\| `MeshRope` \| Texture following a polyline path \| Bent at each point; needs many points for smooth curves \| [references/mesh-rope.md](references/mesh-rope.md) \|
35	\| `PerspectiveMesh` \| 2D plane with perspective corners \| Not true 3D; UV-level perspective correction only \| [references/mesh-perspective.md](references/mesh-perspective.md) \|
36
37	## When to use what
38
39	- "I need a textured quad" → `Sprite` (see `pixijs-scene-sprite`), not a mesh. Meshes are for cases Sprite can't express.
40	- "I need to deform a textured rectangle" → `MeshPlane`. Set `verticesX`/`verticesY` for the desired smoothness.
41	- "I need a rope or trail that follows points" → `MeshRope`. Control thickness with `width`; use `textureScale: 0` to stretch or `> 0` to repeat.
42	- "I need a tilted 2D card or floor" → `PerspectiveMesh`. Pass four corner positions; not real 3D but good enough for 2.5D effects.
43	- "I need per-frame animated vertices with a simple shape" → `MeshSimple`. It handles the buffer-update dance for you.
44	- "I need a custom shader or unusual geometry" → Base `Mesh` with a hand-built `MeshGeometry`. See `pixijs-custom-rendering` for shader authoring.
45	- "I need true 3D rendering" → Use a dedicated 3D library. `PerspectiveMesh` simulates perspective at the UV level but has no depth buffer.
46
47	## Quick concepts
48
49	### MeshGeometry owns the vertex data
50
51	`MeshGeometry` holds the `positions`, `uvs`, `indices`, and `topology`. You can share one geometry across multiple `Mesh` instances; positions are reference-counted.
52
53	### Batching
54
55	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.
56
57	### Topology is on the geometry, not the mesh
58
59	`new MeshGeometry({ topology: 'triangle-strip' })`; topology is a geometry property. The default is `'triangle-list'`; set it explicitly if your data is organized differently.
60
61	### Extra knobs
62
63	- `new MeshGeometry({ shrinkBuffersToFit: true })` — trims GPU buffer s

People who liked this also viewed

6 picks

Type

pixijs-scene-mesh

2.8kinstalls15forks

View on GitHub

How to install pixijs-scene-mesh?

pixijs/pixijs-skills/pixijs-scene-mesh

$npx -y skills add pixijs/pixijs-skills --skill pixijs-scene-mesh

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	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.
2
3	Assumes familiarity with `pixijs-scene-core-concepts`. Meshes are leaf nodes; they cannot have children. Wrap multiple meshes in a `Container` to group them.
4
5	## Quick Start
6
7	```ts
8	const texture = await Assets.load("pattern.png");
9
10	const geometry = new MeshGeometry({
11	positions: new Float32Array([0, 0, 100, 0, 100, 100, 0, 100]),
12	uvs: new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]),
13	indices: new Uint32Array([0, 1, 2, 0, 2, 3]),
14	topology: "triangle-list",
15	});
16
17	const mesh = new Mesh({
18	geometry,
19	texture,
20	roundPixels: false,
21	});
22	app.stage.addChild(mesh);
23	```
24
25	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.
26
27	## Variants
28
29	\| Variant \| Use when \| Trade-offs \| Reference \|
30	\| ----------------- \| ----------------------------------------------------- \| ------------------------------------------------------- \| ---------------------------------------------------------------- \|
31	\| `Mesh` \| Full control, custom geometry, custom shaders \| You build the `MeshGeometry` yourself \| [references/mesh.md](references/mesh.md) \|
32	\| `MeshSimple` \| Quick textured shapes with per-frame vertex animation \| Thin wrapper; auto-updates the vertex buffer \| [references/mesh-simple.md](references/mesh-simple.md) \|
33	\| `MeshPlane` \| Subdivided textured rectangle for distortion effects \| Fixed topology; `verticesX`/`verticesY` control density \| [references/mesh-plane.md](references/mesh-plane.md) \|
34	\| `MeshRope` \| Texture following a polyline path \| Bent at each point; needs many points for smooth curves \| [references/mesh-rope.md](references/mesh-rope.md) \|
35	\| `PerspectiveMesh` \| 2D plane with perspective corners \| Not true 3D; UV-level perspective correction only \| [references/mesh-perspective.md](references/mesh-perspective.md) \|
36
37	## When to use what
38
39	- "I need a textured quad" → `Sprite` (see `pixijs-scene-sprite`), not a mesh. Meshes are for cases Sprite can't express.
40	- "I need to deform a textured rectangle" → `MeshPlane`. Set `verticesX`/`verticesY` for the desired smoothness.
41	- "I need a rope or trail that follows points" → `MeshRope`. Control thickness with `width`; use `textureScale: 0` to stretch or `> 0` to repeat.
42	- "I need a tilted 2D card or floor" → `PerspectiveMesh`. Pass four corner positions; not real 3D but good enough for 2.5D effects.
43	- "I need per-frame animated vertices with a simple shape" → `MeshSimple`. It handles the buffer-update dance for you.
44	- "I need a custom shader or unusual geometry" → Base `Mesh` with a hand-built `MeshGeometry`. See `pixijs-custom-rendering` for shader authoring.
45	- "I need true 3D rendering" → Use a dedicated 3D library. `PerspectiveMesh` simulates perspective at the UV level but has no depth buffer.
46
47	## Quick concepts
48
49	### MeshGeometry owns the vertex data
50
51	`MeshGeometry` holds the `positions`, `uvs`, `indices`, and `topology`. You can share one geometry across multiple `Mesh` instances; positions are reference-counted.
52
53	### Batching
54
55	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.
56
57	### Topology is on the geometry, not the mesh
58
59	`new MeshGeometry({ topology: 'triangle-strip' })`; topology is a geometry property. The default is `'triangle-list'`; set it explicitly if your data is organized differently.
60
61	### Extra knobs
62
63	- `new MeshGeometry({ shrinkBuffersToFit: true })` — trims GPU buffer s

People who liked this also viewed

6 picks

Type