MCPInstall

pixijs-scene-mesh

by pixijsFrontend & Design

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, PerspectivePlaneOptions.

Installs
5.7K
Last 24h
+31
Trending rank
#4315
Security
Pass

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-scene-mesh
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads pixijs-scene-mesh automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

Security audits

Independent scans of the skill's instructions and bundled files.

Gen Agent Trust Hub PassSAFE ·The skill is a collection of documentation and code examples for working with Meshes in PixiJS v8. It contains no malicious code, data exfiltration patterns, or suspicious external references. All external links point to official PixiJS documentation.
Socket PassNo alerts
Snyk PassLOW ·Risk: LOW · No issues
ZeroLeaks PassNONE ·Score: 93/100 · 2 sections analyzed

SKILL.md

The instructions your agent reads when the skill is triggered.

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

const texture = await Assets.load("pattern.png");

const geometry = new MeshGeometry({
  positions: new Float32Array([0, 0, 100, 0, 100, 100, 0, 100]),
  uvs: new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]),
  indices: new Uint32Array([0, 1, 2, 0, 2, 3]),
  topology: "triangle-list",
});

const mesh = new Mesh({
  geometry,
  texture,
  roundPixels: false,
});
app.stage.addChild(mesh);

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

VariantUse whenTrade-offsReference
MeshFull control, custom geometry, custom shadersYou build the MeshGeometry yourselfreferences/mesh.md
MeshSimpleQuick textured shapes with per-frame vertex animationThin wrapper; auto-updates the vertex bufferreferences/mesh-simple.md
MeshPlaneSubdivided textured rectangle for distortion effectsFixed topology; verticesX/verticesY control densityreferences/mesh-plane.md
MeshRopeTexture following a polyline pathBent at each point; needs many points for smooth curvesreferences/mesh-rope.md
PerspectiveMesh2D plane with perspective cornersNot true 3D; UV-level perspective correction onlyreferences/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:

import { SimpleRope } from "pixi.js";
const rope = new SimpleRope(texture, points);

Correct:

import { MeshRope } from "pixi.js";
const rope = new MeshRope({ texture, points });

Renamed in v8: SimpleMesh → MeshSimple, SimplePlane → MeshPlane, SimpleRope → MeshRope. All switched to options-object constructors.

[HIGH] Positional constructor args for MeshGeometry

Wrong:

const geom = new MeshGeometry(vertices, uvs, indices);

Correct:

const geom = new MeshGeometry({
  positions: vertices,
  uvs,
  indices,
  topology: "triangle-list",
});

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:

mesh.addChild(otherMesh);

Correct:

const group = new Container();
group.addChild(mesh, otherMesh);

Mesh sets allowChildren = false. Adding children logs a deprecation warning. Group meshes inside a plain Container.

API Reference

FAQ

What does the pixijs-scene-mesh skill do?

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, PerspectivePlaneOptions.

How do I install pixijs-scene-mesh?

Run npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-scene-mesh in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/pixijs-scene-mesh/ (personal) or .claude/skills/pixijs-scene-mesh/ (project).

Which AI agents can use pixijs-scene-mesh?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is pixijs-scene-mesh safe to install?

Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk passed; ZeroLeaks passed. As with any skill, read the SKILL.md and bundled scripts before installing.

Who maintains pixijs-scene-mesh?

It is published by pixijs in pixijs/pixijs-skills. It has 5,699 recorded installs.

More from pixijs/pixijs-skills

View all →

pixijs

pixijs/pixijs-skills

Use this skill first for ANY PixiJS v8 task; it routes to the right specialized skill for the job. Covers the full PixiJS surface: Application setup, the scene graph (Container, Sprite, Graphics, Text, Mesh, ParticleContainer, DOMContainer, GifSprite), rendering (WebGL/WebGPU/Canvas, render loop, custom shaders, filters, blend modes), assets, events, color, math, ticker, accessibility, performance, environments, migration from v7, and project scaffolding. Triggers on: pixi, pixi.js, pixijs, PixiJS, v8, Application, app.init, Sprite, Container, Graphics, Text, Mesh, ParticleContainer, DOMContainer, GifSprite, Assets, Ticker, renderer, WebGL, WebGPU, scene graph, filter, shader, blend mode, texture, 3D texture, depth slice, layer, storage texture, BitmapText, create-pixi, how do I draw, how do I render, how do I animate in pixi.

Code Quality & Workflow6.9K installs

pixijs-application

pixijs/pixijs-skills

Use this skill when creating and configuring a PixiJS v8 Application. Covers new Application() + async app.init() options (width, height, background, antialias, resolution, autoDensity, preference, resizeTo, autoStart, sharedTicker, canvas, useBackBuffer, powerPreference, eventFeatures, accessibilityOptions, gcActive, bezierSmoothness, webgl/webgpu/canvasOptions per-renderer overrides), app.stage/renderer/canvas/screen/domContainerRoot access, ResizePlugin, TickerPlugin, CullerPlugin (cullable, cullArea), custom ApplicationPlugin via ExtensionType.Application, start/stop lifecycle, and app.destroy() with releaseGlobalResources. Triggers on: Application, app.init, app.stage, app.renderer, app.canvas, app.screen, app.domContainerRoot, ApplicationOptions, ApplicationPlugin, ExtensionType.Application, resizeTo, sharedTicker, skipExtensionImports, preferWebGLVersion, preserveDrawingBuffer, cullable, CullerPlugin, app.start, app.stop, app.destroy, releaseGlobalResources.

6.1K installs

pixijs-performance

pixijs/pixijs-skills

Use this skill when profiling or optimizing a PixiJS v8 app for FPS, draw calls, or GPU memory. Covers destroy patterns (cacheAsTexture(false), releaseGlobalResources), GCSystem and TextureGCSystem, PrepareSystem, object pooling, batching rules, BitmapText for dynamic text, culling (Culler, CullerPlugin, cullable, cullArea), resolution/antialias tradeoffs, low-level wins (transient MSAA render textures, render bundles, partial buffer updates). Triggers on: FPS, jank, draw calls, batching, object pool, GCSystem, PrepareSystem, Culler, cacheAsTexture, memory leak, destroy patterns, render bundle, transient, MSAA, Buffer.update, WebGPU performance, TexturePool, repeatEdgePixels, bind group.

Code Quality & Workflow6K installs

pixijs-scene-graphics

pixijs/pixijs-skills

Use this skill when drawing vector shapes and paths in PixiJS v8. Covers the Graphics API: shape-then-fill methods (rect/circle/ellipse/poly/roundRect/star/regularPoly/roundPoly/roundShape/filletRect/chamferRect), path methods (moveTo/lineTo/bezierCurveTo/quadraticCurveTo/arc/arcTo/arcToSvg/closePath), fill/stroke/cut, holes, FillGradient (linear/radial), FillPattern, GraphicsContext sharing, svg import/export, containsPoint hit testing, cloning, clearing, bounds, fillStyle/strokeStyle, draw-time transforms (rotateTransform/scaleTransform/translateTransform/setTransform/save/restore), default styles, GraphicsPath reuse. Triggers on: Graphics, GraphicsContext, rect, circle, poly, roundRect, fill, stroke, cut, hole, beginHole, FillGradient, FillPattern, moveTo, bezierCurveTo, svg, graphicsContextToSvg, svg export, GraphicsOptions, containsPoint, clone, clear, bounds, rotateTransform, translateTransform, setFillStyle, setStrokeStyle, GraphicsPath.

Backend & APIs6K installs

pixijs-core-concepts

pixijs/pixijs-skills

Use this skill when understanding how PixiJS v8 renders frames: the systems-and-pipes renderer, the render loop, and how the library adapts to different environments. Covers WebGLRenderer/WebGPURenderer/CanvasRenderer selection, renderer.render() pipeline, environment detection, rendering into RenderTextures and RenderTargets (flipY, mipLevel, layer, bind/push/pop, copyDepthTexture), WebGL context loss and WebGPU device loss recovery, and pointers to per-topic deep dives. Triggers on: renderer, WebGL, WebGPU, Canvas, render loop, render pipeline, systems, environments, autoDetectRenderer, RenderTexture, RenderTarget, render to texture, flipY, mipLevel, layer, 3D texture, depth slice, renderTarget.bind, copyToTexture, copyDepthTexture, depth-only, WebGLLoader, WebGPULoader, CanvasLoader, RendererLoader, lazy-load renderer systems, code splitting, context lost, webglcontextlost, device lost, GPUDevice.lost.

Media & Creative6K installs

pixijs-assets

pixijs/pixijs-skills

Use this skill when loading and managing resources in PixiJS v8. Covers Assets.init, Assets.load/add/unload, bundles, manifests, background loading, onProgress, caching, spritesheets, video textures, web fonts, bitmap fonts, animated GIFs, compressed textures, SVG as texture or Graphics, resolution detection, per-asset data options, and forcing a specific loader with the parser field (for extension-less URLs). Triggers on: Assets, Assets.load, Assets.init, loadBundle, manifest, backgroundLoad, Spritesheet, Cache, LoadOptions, unload, parser, loadParser, loadWebFont, loadBitmapFont, loadVideoTextures, GifSource, VideoSourceOptions.

Media & Creative6K installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs