Bevy中如何用单个实体承载多个Sprite实现大量精灵高效渲染

性能瓶颈原因 #

每个独立的SpriteBundle实体默认都会触发单独的绘制调用（Draw Call），10000个实体就会产生10000次绘制调用，GPU调度开销过高自然会导致渲染卡顿。单实体承载多精灵的核心逻辑就是把所有精灵的渲染数据合并，仅触发1次绘制调用。

具体实现方案 #

方案1：手动合并网格（自由度最高） #

你可以把所有精灵的几何数据合并到同一个Mesh对象中，仅用一个挂载Mesh2dBundle的实体完成所有精灵的渲染：

• 每个精灵对应4个顶点、6个索引（组成两个三角面），把所有精灵的顶点位置、UV坐标、顶点颜色、纹理索引等属性都写入同一个网格的顶点缓冲区
• 如果你的精灵使用多张纹理，需要提前把所有纹理打包到同一个TextureAtlas纹理图集，避免纹理切换导致Draw Call拆分
• 单个实体仅需挂载合并后的网格、对应材质、全局变换组件即可，无需创建上万个独立实体
• 如果需要动态修改精灵的位置、颜色等属性，直接更新网格对应的顶点缓冲区数据即可，性能远高于遍历上万个实体组件

方案2：实例化渲染（适合大量同类型精灵） #

如果你的精灵都属于同一张纹理/图集，且属性结构统一，可以用实例化渲染的方案实现：

• 自定义一个实例数据组件，存储每个精灵的位置、缩放、旋转、UV偏移、颜色等实例属性
• 在自定义Material2d的着色器中读取实例缓冲区的数据，渲染时GPU会自动根据实例数据批量生成所有精灵
• 该方案相比手动合并网格的优势是修改单个精灵属性时不需要重写整个顶点缓冲区，仅需更新对应实例的属性即可，动态修改的性能更高
  注意：Bevy 0.11及以上版本已经提供了开箱即用的实例化精灵API，不需要手动编写着色器即可使用

简化代码示例（手动合并网格） #

use bevy::prelude::*;
use bevy::render::mesh::{Indices, MeshTopology};

// 自定义精灵数据结构
struct SpriteData {
    position: Vec2,
    size: Vec2,
    uv: Rect,
    color: Color,
}

fn build_merged_sprite_mesh(sprites: &[SpriteData]) -> Mesh {
    let mut positions = Vec::with_capacity(sprites.len() * 4);
    let mut uvs = Vec::with_capacity(sprites.len() * 4);
    let mut colors = Vec::with_capacity(sprites.len() * 4);
    let mut indices = Vec::with_capacity(sprites.len() * 6);

    for (sprite_idx, sprite) in sprites.iter().enumerate() {
        let base_vertex = sprite_idx as u32 * 4;
        let half_size = sprite.size / 2.0;

        // 生成四个顶点坐标
        positions.push([sprite.position.x - half_size.x, sprite.position.y - half_size.y, 0.0]);
        positions.push([sprite.position.x + half_size.x, sprite.position.y - half_size.y, 0.0]);
        positions.push([sprite.position.x + half_size.x, sprite.position.y + half_size.y, 0.0]);
        positions.push([sprite.position.x - half_size.x, sprite.position.y + half_size.y, 0.0]);

        // 填充UV坐标
        uvs.push([sprite.uv.min.x, sprite.uv.min.y]);
        uvs.push([sprite.uv.max.x, sprite.uv.min.y]);
        uvs.push([sprite.uv.max.x, sprite.uv.max.y]);
        uvs.push([sprite.uv.min.x, sprite.uv.max.y]);

        // 填充顶点颜色
        let color_array = sprite.color.as_linear_rgba_f32();
        colors.extend_from_slice(&[color_array; 4]);

        // 填充索引
        indices.extend_from_slice(&[
            base_vertex, base_vertex + 1, base_vertex + 2,
            base_vertex + 2, base_vertex + 3, base_vertex,
        ]);
    }

    let mut mesh = Mesh::new(MeshTopology::TriangleList);
    mesh.insert_attribute(Mesh::ATTRIBUTE_POSITION, positions);
    mesh.insert_attribute(Mesh::ATTRIBUTE_UV_0, uvs);
    mesh.insert_attribute(Mesh::ATTRIBUTE_COLOR, colors);
    mesh.set_indices(Some(Indices::U32(indices)));
    mesh
}

额外优化提示 #

如果你的所有精灵都使用同一张纹理，也可以先尝试开启Bevy默认的2D渲染批处理，不需要修改代码就能大幅提升性能，只有批处理无法满足需求时再手动实现单实体多精灵方案。

内容的提问来源于stack exchange，提问作者Wisart