网格

🌐 Mesh

PixiJS v8 提供了一个强大的 Mesh 系统，可以完全控制几何体、UV、索引、着色器以及 WebGL/WebGPU 状态。网格非常适合自定义渲染效果、高级扭曲、透视操作或性能优化的渲染管线。

🌐 PixiJS v8 offers a powerful Mesh system that provides full control over geometry, UVs, indices, shaders, and WebGL/WebGPU state. Meshes are ideal for custom rendering effects, advanced distortion, perspective manipulation, or performance-tuned rendering pipelines.

import { Texture, Mesh, MeshGeometry, Shader } from 'pixi.js';

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]),
});

const shader = Shader.from({
  gl: {
    vertex: `
            attribute vec2 aPosition;
            attribute vec2 aUV;
            varying vec2 vUV;
            void main() {
                gl_Position = vec4(aPosition / 100.0 - 1.0, 0.0, 1.0);
                vUV = aUV;
            }
        `,
    fragment: `
            precision mediump float;
            varying vec2 vUV;
            uniform sampler2D uSampler;
            void main() {
                gl_FragColor = texture2D(uSampler, vUV);
            }
        `,
  },
  resources: {
    uSampler: Texture.from('image.png').source,
  },
});

const mesh = new Mesh({ geometry, shader });
app.stage.addChild(mesh);

网格是什么？

🌐 What Is a Mesh?

网格是一个底层渲染基元，由以下部分组成：

🌐 A mesh is a low-level rendering primitive composed of:

几何：顶点位置、UV、索引以及其他属性
着色器：一种定义几何体如何被渲染的 GPU 程序
状态：GPU 状态配置（例如混合、深度、模板）

使用这些元素，你可以构建任何内容，从简单的四边形到曲面和程序化效果。

🌐 With these elements, you can build anything from simple quads to curved surfaces and procedural effects.

网格几何

🌐 MeshGeometry

PixiJS 中的所有网格都是使用 MeshGeometry 类构建的。该类允许你定义顶点位置、UV 坐标和描述网格形状及纹理映射的索引。

🌐 All meshes in PixiJS are built using the MeshGeometry class. This class allows you to define the vertex positions, UV coordinates, and indices that describe the mesh's shape and texture mapping.

const geometry = new MeshGeometry({
  positions: Float32Array, // 2 floats per vertex
  uvs: Float32Array, // matching number of floats
  indices: Uint32Array, // 3 indices per triangle
  topology: 'triangle-list',
});

你可以直接访问和修改缓冲区：

🌐 You can access and modify buffers directly:

geometry.positions[0] = 50;
geometry.uvs[0] = 0.5;
geometry.indices[0] = 1;

内置网格类型

🌐 Built-in Mesh Types

MeshSimple

一个针对 Mesh 的最小封装，直接接受顶点、UV 和索引数组。适用于快速的静态或动态网格。

🌐 A minimal wrapper over Mesh that accepts vertex, UV, and index arrays directly. Suitable for fast static or dynamic meshes.

const mesh = new MeshSimple({
  texture: Texture.from('image.png'),
  vertices: 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]),
});

使用 autoUpdate = true 来每帧更新几何体。
访问 mesh.vertices 以读/写数据。

MeshRope

沿着一系列控制点弯曲纹理，通常用于轨迹、蛇形和动画丝带。

🌐 Bends a texture along a series of control points, often used for trails, snakes, and animated ribbons.

const points = [new Point(0, 0), new Point(100, 0), new Point(200, 50)];
const rope = new MeshRope({
  texture: Texture.from('snake.png'),
  points,
  textureScale: 1, // optional
});

textureScale > 0 重复纹理；0 拉伸它。
autoUpdate = true 每一帧都会重新评估几何形状。

MeshPlane

一个灵活的细分四边形网格，适用于扭曲或基于网格的变形。

🌐 A flexible subdivided quad mesh, suitable for distortion or grid-based warping.

const plane = new MeshPlane({
  texture: Texture.from('image.png'),
  verticesX: 10,
  verticesY: 10,
});

当 autoResize = true 时，在纹理更新时自动调整大小。

PerspectiveMesh

MeshPlane 的一个特殊子类，通过转换 UV 来应用透视校正。

🌐 A special subclass of MeshPlane that applies perspective correction by transforming the UVs.

const mesh = new PerspectiveMesh({
  texture: Texture.from('image.png'),
  verticesX: 20,
  verticesY: 20,
  x0: 0,
  y0: 0,
  x1: 300,
  y1: 30,
  x2: 280,
  y2: 300,
  x3: 20,
  y3: 280,
});

通过 setCorners(...) 设置角坐标。
非常适合在 2D 中模拟 3D 投影。

API 参考

🌐 API Reference

网格是什么？​

网格几何​

内置网格类型​

MeshSimple​

MeshRope​

MeshPlane​

PerspectiveMesh​

API 参考​