pixijs-scene-mesh

Les mailles (meshes) restituent une géométrie 2D (ou projetée en perspective) arbitraire avec une texture ou un shader personnalisé. PixiJS fournit la classe de base Mesh plus quatre sous-classes spécialisées pour les formes courantes : MeshSimple, MeshPlane, MeshRope et PerspectiveMesh. Choisissez la sous-classe qui correspond à votre forme ; utilisez la Mesh de base quand vous avez besoin d'un contrôle complet au niveau des sommets ou d'un shader personnalisé.

Suppose une familiarité avec pixijs-scene-core-concepts. Les mailles sont des nœuds feuilles ; elles ne peuvent pas avoir d'enfants. Enveloppez plusieurs mailles dans un Container pour les grouper.

Démarrage rapide

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);

Chaque sous-classe Mesh accepte un unique objet d'options. La Mesh de base nécessite une geometry ; les sous-classes (MeshSimple, MeshPlane, MeshRope, PerspectiveMesh) construisent la géométrie en interne et nécessitent une texture à la place. Consultez la référence de chaque variante pour la liste complète des champs.

Variantes

Quand utiliser quoi

• « Je need une quad texturée » → Sprite (voir pixijs-scene-sprite), pas une maille. Les mailles concernent les cas que Sprite ne peut pas exprimer.
• « Je need de déformer un rectangle texturé » → MeshPlane. Définissez verticesX/verticesY pour la fluidité désirée.
• « Je need une corde ou une traînée qui suit des points » → MeshRope. Contrôlez l'épaisseur avec width ; utilisez textureScale: 0 pour étirer ou > 0 pour répéter.
• « Je need une carte 2D inclinée ou un sol » → PerspectiveMesh. Passez quatre positions d'angles ; pas de vrai 3D mais suffisant pour les effets 2.5D.
• « Je need des sommets animés par image avec une forme simple » → MeshSimple. Elle gère la mise à jour du buffer pour vous.
• « Je need un shader personnalisé ou une géométrie inhabituelle » → Mesh de base avec une MeshGeometry construite à la main. Voir pixijs-custom-rendering pour la création de shaders.
• « Je need un vrai rendu 3D » → Utilisez une bibliothèque 3D dédiée. PerspectiveMesh simule la perspective au niveau UV mais n'a pas de buffer de profondeur.

Concepts rapides

MeshGeometry possède les données de sommets

MeshGeometry contient les positions, uvs, indices et topology. Vous pouvez partager une géométrie entre plusieurs instances Mesh ; les positions sont comptabilisées par référence.

Batching

Une maille se groupe (combine avec d'autres appels de dessin) uniquement si elle utilise MeshGeometry, n'a pas de shader personnalisé, pas d'état de profondeur ou culling, et la règle 'auto' (batchMode = 'auto' et ≤100 sommets). Les shaders personnalisés se restituent toujours indépendamment.

La topologie est sur la géométrie, pas sur la maille

new MeshGeometry({ topology: 'triangle-strip' }) ; la topologie est une propriété de géométrie. La valeur par défaut est 'triangle-list' ; définissez-la explicitement si vos données sont organisées différemment.

Boutons supplémentaires

• new MeshGeometry({ shrinkBuffersToFit: true }) — réduit le stockage du buffer GPU au nombre de sommets réel à la création. Utilisez-le quand vous alimentez de grandes géométries uniques.
• Mesh.containsPoint(point) — test de collision tenant compte de la topologie qui parcourt les triangles. Fonctionne avec n'importe quelle MeshGeometry, y compris les dispositions personnalisées.
• new Mesh({ geometry, state }) — passez un objet State pour contrôler le blend, la profondeur et le culling. Le batching est désactivé automatiquement si les flags de profondeur ou culling sont définis. Par défaut State.for2d() quand omis.

Erreurs courantes

[HAUTE] Utiliser les anciens noms SimpleMesh / SimplePlane / SimpleRope

Incorrect :

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

Correct :

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

Renommé en v8 : SimpleMesh → MeshSimple, SimplePlane → MeshPlane, SimpleRope → MeshRope. Tous basculés vers des constructeurs à objet d'options.

[HAUTE] Arguments positionnels du constructeur pour MeshGeometry

Incorrect :

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

Correct :

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

v8 utilise un objet d'options. Notez que la propriété est positions, non vertices ; le nom vertices n'est utilisé que par MeshSimple.

[MOYEN] Ajouter des enfants à une maille

Incorrect :

mesh.addChild(otherMesh);

Correct :

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

Mesh définit allowChildren = false. Ajouter des enfants enregistre un avertissement de dépréciation. Groupez les mailles dans un simple Container.

Référence API

• Mesh
• MeshGeometry
• MeshSimple
• MeshPlane
• MeshRope
• PerspectiveMesh