Skip to main content

网格

¥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、索引和其他属性

    ¥Geometry: Vertex positions, UVs, indices, and other attributes

  • 着色器：定义几何体渲染方式的 GPU 程序

    ¥Shader: A GPU program that defines how the geometry is rendered

  • 状态：GPU 状态配置（例如混合、深度、模板）

    ¥State: GPU state configuration (e.g. blending, depth, stencil)

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

¥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 逐帧更新几何体。

    ¥Use autoUpdate = true to update geometry per frame.

  • 访问 mesh.vertices 以读取/写入数据。

    ¥Access mesh.vertices to read/write data.

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 拉伸纹理。

    ¥textureScale > 0 repeats texture; 0 stretches it.

  • autoUpdate = true 每帧都会重新评估几何体。

    ¥autoUpdate = true re-evaluates geometry each frame.

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 时，纹理更新时会自动调整大小。

    ¥Automatically resizes on texture update when 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(...) 设置角点坐标。

    ¥Set corner coordinates via setCorners(...).

  • 非常适合在 2D 中模拟 3D 投影。

    ¥Ideal for emulating 3D projection in 2D.

API 参考​

¥API Reference