侧边栏壁纸
博主头像
火腾

行动起来，活在当下

  • 累计撰写 7 篇文章
  • 累计创建 9 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录
游戏开发

从性能噩梦到极致优化：顶点动画与GPU Instancing在放置类游戏中的实践

温馨提示：
本文最后更新于2025-07-29，若内容或图片失效，请留言反馈。 本文章权益归属火腾(www.firedance.cn)，转载请注明来源于火腾(www.firedance.cn)。

引言：性能瓶颈的“梦魇”

我在开发一款类似《TrapMaster》的游戏时，遭遇了一个令人头疼的性能瓶颈：场景中需要同时渲染数百甚至上千个播放相同动画的角色。传统的骨骼动画方案在这种高密度场景下彻底“崩盘”，帧率暴跌，CPU不堪重负，Draw Call更是直接“爆炸”。经过一番深入研究与实践，我找到了一套基于顶点动画贴图（VAT）和GPU Instancing的解决方案，不仅完美解决了性能问题，还让游戏在WebGL平台上实现了丝滑的60FPS表现。这篇文章将详细分享我的技术探索历程，包含关键的技术细节、代码片段，以及一些实用的优化技巧，希望能为同样在性能优化道路上摸索的开发者提供参考。问题背景：性能的“滑铁卢”噩梦的起点在我的游戏中，场景需要支持大量角色同时播放动画，比如一群小怪在地图上“群魔乱舞”。然而，使用Unity的传统骨骼动画方案，性能问题迅速暴露：

  • CPU瓶颈：每个角色都需要独立的骨骼矩阵计算，CPU被大量矩阵运算拖垮。

  • Draw Call激增：每个角色实例都会产生独立的渲染调用，导致Draw Call数量飙升。

  • 内存占用过高：每个角色实例的动画数据和网格数据都在疯狂吃内存。

数据说话：性能测试的惨状在一场500个角色的测试场景中，我记录了以下数据：

  • CPU使用率：飙升至85%以上，接近满载。

  • 帧率：跌至15-20 FPS，卡顿感严重。

  • Draw Call：超过2000，渲染管线完全“堵塞”。

这样的性能表现显然无法满足WebGL平台的需求，更别提移动设备了。我意识到，必须找到一种全新的方案来突破这个瓶颈。技术方案探索：从迷雾中找到出路——顶点动画贴图（VAT）的曙光。在查阅了大量技术文档和社区讨论后，我发现了顶点动画贴图（Vertex Animation Texture, VAT）这一神器。VAT的核心思想是将动画的顶点位置和法线数据预烘焙到纹理中，运行时通过顶点着色器直接采样这些数据，完全绕过了CPU的骨骼计算。这不仅大幅降低了CPU开销，还为后续的GPU优化打下了基础。核心原理： VAT将每帧的顶点数据存储在一张纹理中，每行代表一帧动画，每列对应一个顶点的坐标或法线。在着色器中，通过顶点ID和当前动画时间计算纹理坐标，采样得到顶点位置：

float3 GetVatPosition(uint vertexId, float animationTime)
{
    float4 texCoord = CalcVatTexCoord(vertexId, animationTime);
    return SAMPLE_TEXTURE2D_LOD(_VatPositionTex, sampler_VatPositionTex, texCoord.xy, 0).xyz;
}

打造VAT烘焙工具：

从0到1为了将动画数据转化为VAT纹理，我开发了一套自定义的烘焙工具。这个工具不仅要支持复杂的动画数据提取，还要兼顾性能和易用性。经过几周的迭代，我实现了以下核心功能：工具特性：

  • 支持Unity的Humanoid和Generic动画类型，兼容大多数美术资源。

  • 自动优化纹理大小，适应不同GPU的限制。

  • 支持插值采样，确保动画平滑过渡。

  • 批量处理多个动画片段，提升开发效率。

核心算法： 以下是烘焙工具的关键代码片段，展示了如何从动画片段中提取顶点数据并存储到纹理中：

public static (Texture2D positionTex, Texture2D normalTex) BakeClip(
    string name, 
    GameObject gameObject, 
    SkinnedMeshRenderer skin, 
    AnimationClip clip, 
    int textureWidth, 
    float fps, 
    Space space, 
    bool useInterpolation = true)
{
    // 计算帧数和纹理尺寸
    float timeStep = useInterpolation ? 1.0f / (fps * 2) : 1.0f / fps;
    int frameCount = useInterpolation 
        ? Mathf.FloorToInt(clip.length / timeStep) + 1 
        : Mathf.FloorToInt(clip.length * fps) + 1;

    Mesh mesh = new Mesh();
    var positionTex = new Texture2D(textureWidth, frameCount, TextureFormat.RGBAHalf, false);
    var normalTex = new Texture2D(textureWidth, frameCount, TextureFormat.RGBAHalf, false);

    for (int i = 0; i < frameCount; i++)
    {
        float time = i * timeStep;
        clip.SampleAnimation(gameObject, time);
        skin.BakeMesh(mesh);

        // 提取顶点位置和法线，存储到纹理
        var vertices = mesh.vertices;
        var normals = mesh.normals;
        for (int j = 0; j < vertices.Length; j++)
        {
            positionTex.SetPixel(j, i, new Color(vertices[j].x, vertices[j].y, vertices[j].z));
            normalTex.SetPixel(j, i, new Color(normals[j].x, normals[j].y, normals[j].z));
        }
    }
    positionTex.Apply();
    normalTex.Apply();
    return (positionTex, normalTex);
}

这个工具让我能够快速将复杂的动画数据转化为VAT纹理，为后续的着色器开发铺平了道路。

开发VAT着色器：

让GPU接管动画有了VAT纹理，接下来是开发支持VAT的着色器。我基于Unity的URP（Universal Render Pipeline）开发了一款卡通风格的VAT着色器，包含以下关键技术点：纹理坐标计算： 为了从VAT纹理中正确采样顶点数据，需要根据顶点ID和动画时间计算纹理坐标：

float4 CalcVatTexCoord(uint vertexId, float animationTime)
{
    // 将顶点ID映射到纹理的X轴
    float x = (vertexId % (uint)_VatPositionTex_TexelSize.z) + 0.5;
    // 根据动画时间计算Y轴坐标
    float y = animationTime + 0.5;
    return float4(x * _VatPositionTex_TexelSize.x, y * _VatPositionTex_TexelSize.y, 0, 0);
}

动画时间控制： 为了支持循环播放和非循环播放，我在着色器中添加了时间控制逻辑：

float CalcVatAnimationTime(float time)
{
    float animTime = time * _AnimationSpeed + _AnimationTimeOffset;
    #if defined(_LOOP_ON)
        animTime = fmod(animTime, _VatAnimLength); // 循环播放
    #else
        animTime = min(animTime, _VatAnimLength); // 非循环播放
    #endif
    return animTime * _VatAnimFps;
}

GPU Instancing的“神来之笔”瓶颈的再发现虽然VAT技术大幅降低了CPU开销，但测试中发现Draw Call仍然居高不下。每个角色实例仍然需要独立的渲染调用，这在高密度场景下依然是性能瓶颈。GPU Instancing的引入在深入研究Unity的渲染管线后，我发现了GPU Instancing这一利器。通过将相同网格和材质的渲染批次合并，GPU Instancing可以将多个角色的渲染合并为一次Draw Call，极大地提升了渲染效率。关键配置： 在材质上启用GPU Instancing：

var mat = new Material(toonVatUnlitShader)
{
    enableInstancing = true // 开启GPU Instancing
};

着色器支持： 在着色器中添加Instancing支持，确保每个实例可以独立控制动画偏移等属性：

hlsl

#pragma multi_compile_instancing
#pragma instancing_options procedural:setupInstancing

struct Attributes
{
    float4 positionOS : POSITION;
    float3 normalOS : NORMAL;
    uint vertexId : VERTEXID_SEMANTIC;
    UNITY_VERTEX_INPUT_INSTANCE_ID
};

struct Varyings
{
    float4 positionCS : SV_POSITION;
    float3 normalWS : TEXCOORD0;
    UNITY_VERTEX_INPUT_INSTANCE_ID
};

void setupInstancing()
{
    UNITY_SETUP_INSTANCE_ID(input);
    UNITY_TRANSFER_INSTANCE_ID(input, output);
}

数据对比引入GPU Instancing后，性能数据发生了翻天覆地的变化：

指标: Draw Call
  优化前: 2000+
  优化后: 50-100
  提升幅度: 95%+

指标: CPU使用率
  优化前: 85%+
  优化后: 15-25%
  提升幅度: 70%+

指标: 帧率
  优化前: 15-20 FPS
  优化后: 55-60 FPS
  提升幅度: 200%+

指标: 支持角色数
  优化前: 500
  优化后: 2000+
  提升幅度: 300%+

这些数据让我欣喜若狂：不仅帧率恢复到稳定的60FPS，场景还能支持数千个角色同时动画，WebGL平台也能轻松应对！技术细节与优化技巧：从“好用”到“极致”1. 纹理优化：精打细算VAT纹理的尺寸直接影响内存占用和性能。我设计了一套动态计算纹理大小的算法，确保在动画质量和内存占用之间找到最佳平衡点：

if (textureHeight > 16384) // 避免超出GPU纹理大小限制
{
    actualFrameCount = Mathf.FloorToInt(16384 / blockCount);
    textureHeight = blockCount * actualFrameCount;
}

内存优化策略：

  • 使用TextureFormat.RGBAHalf存储顶点数据，精度足够且内存占用低。

  • 启用纹理压缩（如ASTC或ETC2），在移动平台上进一步降低内存开销。

  • 根据需要动态调整Mipmap级别，减少不必要的内存浪费。

动画同步与随机化：视觉多样性的魔法为了避免所有角色动作完全同步（看起来像“克隆人军团”），我在着色器中引入了动画时间偏移：

float _AnimationTimeOffset;
float animationTime = CalcVatAnimationTime(_Time.y + _AnimationTimeOffset);

通过为每个实例设置随机的_AnimationTimeOffset，角色动画呈现出自然的错落感，大幅提升了视觉效果。3. LOD系统：远近有别为了进一步优化性能，我为VAT系统集成了LOD（Level of Detail）机制。根据角色与摄像机的距离，动态切换不同精度的VAT纹理：

float distance = Vector3.Distance(camera.position, transform.position);
if (distance > lodDistance)
{
    material.SetTexture("_VatPositionTex", lowResVatTex); // 切换到低精度纹理
}

这不仅降低了GPU的采样开销，还进一步减少了内存占用。实际应用效果：从“能跑”到“飞起”游戏场景的“华丽转身”在最终的游戏中，这套方案带来了惊艳的效果：

  • 角色密度：支持2000+个角色同时播放动画，场景依然流畅。

  • 性能表现：在WebGL平台稳定运行于60FPS，移动平台表现同样出色。

  • 内存优化：相比传统骨骼动画方案，内存占用降低了约70%。

  • 开发效率：VAT烘焙工具简化了动画制作流程，美术团队可以快速迭代。

技术架构的“隐藏福利”这套方案不仅解决了性能问题，还带来了额外的优势：

  1. 可扩展性：新增角色或动画只需运行烘焙工具，无需修改核心代码。

  2. 平台兼容性：在WebGL、iOS、Android等平台上表现一致。

  3. 美术友好：保留了传统的动画制作流程，美术无需学习新工具。

经验总结：踩过的坑与最佳实践踩过的坑

  1. 纹理溢出：早期未限制纹理大小，导致某些低端设备报错。解决办法是动态调整帧数和纹理尺寸。

  2. 动画抖动：低帧率烘焙导致动画不流畅，启用插值采样后完美解决。

  3. Instancing失效：材质未正确启用Instancing，导致Draw Call未减少。反复检查Shader和材质配置是关键。

最佳实践

  1. 纹理大小平衡：根据目标平台选择合适的纹理分辨率，推荐1024x1024或2048x2048作为起点。

  2. GPU Instancing配置：确保材质和Shader都正确支持Instancing，定期检查渲染管线的批处理状态。

  3. 自动化流程：开发批量烘焙工具，减少手动操作，提升效率。

  4. 质量检查：建立VAT纹理的自动化校验机制，确保数据无误。

  5. 版本管理：将VAT纹理纳入版本控制，方便多人协作和资源管理。

结语：从“救火”到“点燃未来”通过顶点动画贴图（VAT）和GPU Instancing的结合，我不仅成功解决了大量角色动画的性能瓶颈，还为游戏的扩展性和跨平台表现奠定了坚实基础。这次技术探索让我深刻体会到：现代图形渲染技术的魅力在于将复杂问题拆解为可控的模块，通过巧妙的工具和优化实现性能的飞跃。核心收获：

  • VAT技术是处理大量相同动画的“杀手锏”。

  • GPU Instancing是渲染性能优化的“核武器”。

  • 两者结合，能带来数量级的性能提升，堪称“1+1>2”。

对于正在开发放置类游戏或面临类似性能挑战的开发者，这套方案绝对值得一试。希望我的经验能为你的项目点燃一盏明灯！

0
shader unity
版权归属： 白色牙膏
本文链接： https://www.firedance.cn/archives/cong-xing-neng-e-meng-dao-ji-zhi-you-hua
许可协议： 本文使用《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》协议授权

评论区