2026-08-11

把 3D 模型变成 8 方向精灵表 —— 在浏览器里，免费

把 3D 模型预渲染成 2D 精灵，是游戏工业里最老的招数之一。《暗黑破坏神 II》这么做过，《辐射》这么做过，2000 年代的一大半韩国网游也这么做过：角色只建一次 3D 模，从每个方向各渲一张，出货的是渲染好的精灵图。你同时得到 2D 的性能和画面一致性，以及 3D 动画的低成本复用。变化的只是它跑在哪——过去需要一套 3D 软件加渲染脚本，现在在浏览器标签页里就能完成。

新上线的「3D → 精灵图」工具，接收一个已绑定骨骼的 3D 模型，输出一张可直接进游戏的精灵表。这篇讲清楚它能做什么、模型需要什么条件、哪几个设置真正重要。

这个工具做什么

上传已绑定的 GLB 或 GLTF。工具把它载入实时视口，列出文件里自带的动画片段供你选择。选好方向数（4、8 或 16）、相机俯仰角、每方向帧数和输出单格尺寸，然后渲染。每个「方向 × 帧」组合都在你自己的显卡上离屏渲染，最终打包成与动画、角色工具完全一致的精灵表 + JSON 元数据格式——你为那些工具搭好的管线可以原样复用。

为什么免费

这背后没有服务器 GPU。渲染是跑在你机器上的 WebGL，和浏览器里的 3D 游戏是同一回事。生成一张精灵表对我们来说零成本，所以对你也零成本：登录即用，不消耗积分。

模型需要满足什么

模型必须已绑定骨骼——也就是网格上绑好了骨架——并且骨骼命名要遵循 Mixamo 规范，这是事实上的行业标准。用 Adobe 免费的 Mixamo 服务自动绑定的模型天然满足；主流 AI 3D 生成器（Meshy、Tripo）的输出也兼容。如果你的模型没有绑定，先过一遍 Mixamo 的自动绑定，只需要几分钟。工具在上传时就校验骨架，不能用会明确告诉你原因，而不是渲出一个扭曲的结果。

真正重要的相机设置

俯仰角——相机往下看多少度——是一个全局参数：横版游戏用正侧 0°，等距视角用 30° 或 45°，俯视用 60°。这里刻意不给自由相机：所有方向必须共用完全相同的俯仰角，否则精灵表的各行彼此对不齐。

投影方式是更微妙的选择。正交投影是传统做法，和瓦片网格严丝合缝，但纯正交的画面容易显得扁平。经典预渲染的质感往往来自长焦镜头——视场角很小、相机拉得很远，接近正交但保留一丝纵深。工具两种都提供，切换时构图保持不变，你可以直接对比。

关于像素化选项

有一个可选的像素化后处理，带描边检测。得把话说清楚：它是机械降采样，不是手工点出来的像素画。用在原型和想要复古味道的游戏里效果不错，但如果你的美术方向是真正的像素艺术，请把输出当作可以往上覆盖细化的底稿，而不是成品素材。

把精灵表接进引擎

JSON 元数据里有两个细节能帮你省下真金白银的调试时间。

锚点。相机在模型四周留了安全边距，所以每个单格里角色脚底下方都有一段透明留白。如果按格子底边定位精灵，角色就是悬空的。JSON 记录了 footInset 和建议锚点——脚底正下方那个点——让你第一次就摆对位置。

方向顺序。精灵表按方向逐行排列，JSON 里写明了每一行对应哪个角度。如果把移动输入接到行号后发现东西方向互换了，那是手性不匹配——计算行号时把 x 输入取负即可。

老招数，去掉了旧管线

这里没有任何新发明，而这恰恰是重点。预渲染被二十五年的已上市游戏反复验证过。新的地方在于：从「我有一个 3D 模型」到「我有一张带正确元数据的 8 方向精灵表」，现在在浏览器里几分钟就能走完——而那些琐碎的部分：各方向构图一致、落地锚点、导出格式，都替你处理好了。