★ FEATURED ARTICLE 【免费下载链接】bot-crossingA video game for AI agents. Created by Jarren Rocks项目地址https://gitcode.com/gh_mirrors/bo/bot-crossing点击查看免费下载Bot Crossingbot-crossing是一款把 AI 编码代理coding agent的会话线程变成小机器人殖民地的可视化游戏每个线程变成一个小 bot走出飞船、认领地皮、盖起建筑。当你在本机同时跑着几十个 Claude Code、Codex 会话时场景里就有几十个甚至上百个角色同时走动、挥锤、挥手。这篇文章带你拆解它最核心的渲染技巧骨骼动画烘焙纹理bone-matrix texture GPU 蒙皮 实例化渲染InstancedMesh看它是如何让 66 个机器人 66 栋建筑总共只花105 个 Draw Call的。为什么常规骨骼动画扛不住上百个角色用 Three.js 做角色动画的常规做法是每个角色一个SkinnedMesh 一个Skeleton对象由 CPU 逐帧更新骨骼矩阵。这套方案有个天生的问题角色越多draw call 越多CPU 负担越重——300 个线程就意味着 300 个 draw call 和 300 套每帧都要在 CPU 上推进的骨骼。而 Bot Crossing 的机器人数量直接由你机器上的会话数决定完全不可控。项目的选择是把动画一次性烘焙掉。核心代码在 src/agents/crew.js开头注释把思路写得非常清楚动画在加载时一次性烘焙进一张骨骼矩阵纹理……绘制时由一个InstancedMesh承载整个队伍每个实例只用一个 float 属性读取自己所在的那一帧。烘焙把动画压进一张浮点纹理烘焙过程分四步挑选动作片段clip。机器人需要 15 段动作待机、行走、跑步、挥锤、欢呼、坐下、挥手、受击等全部来自 CC0 资产包 KayKit 的手绘动画片段定义在 src/agents/crew.js 的CLIP表中。按固定帧率采样。以 30 fpsBAKE_FPS见 crew.js 第 30-31 行逐帧推进AnimationMixer取每一帧的全部 21 个骨骼蒙皮矩阵。写入浮点纹理。每个矩阵占 4 个 RGBA texel所有 clip 首尾相接排进一张 84×723 的FloatType纹理约 1 MB。整张表一帧一行行号就是动画帧号。顺手记下骨骼世界变换。头盔、背包这类穿戴件需要知道头骨此刻在哪烘焙时把 head、chest、左右手和脚的世界矩阵也写进一张 CPU 小数组crew.js 第 333-337 行后面取用只需一次矩阵读取不用重新评估骨架。代价是一次性的约 1 MB 显存 启动时 1 秒左右的烘焙时间。换来的好处是——不管场景里是 6 个机器人还是 600 个绘制成本恒定不变。GPU 蒙皮 实例化一条 Draw Call 画出整支队伍有了骨骼矩阵纹理剩下的工作全部搬进顶点着色器。decorateSkinned()函数crew.js 第 407 行给任意 Three.js 材质注入一段蒙皮逻辑每个实例多一个aFrame属性——它当前播到第几帧仅此一个 float着色器按aFrame从纹理里取出前后两帧的骨骼矩阵texelFetch按小数部分线性混合完成插值按顶点自带的skinIndex/skinWeight做加权求和得到蒙皮后的位置。关键的一招是这段蒙皮被注入在begin_vertex上游也就是 Three.js 自己的instanceMatrix实例化变换之前。于是每个被蒙皮的顶点随后照常走实例变换——机器人无论多少个身体永远只是一个 instanced draw。对应的实例化装配在 src/agents/astronauts.js一个InstancedMesh承载全身几何体aFrame作为InstancedBufferAttribute挂在几何体上每帧只需写入每个机器人的一帧号。穿戴件与逐实例个性化矩阵表 实例属性机器人头上戴的头盔、面罩、屏幕脸、背包、天线、灯这些是项目自制的程序化部件每个部件各自是一个InstancedMesh。它们如何跟动画同步答案是那张骨骼世界变换小数组头盔的位置 从数组里读出head骨骼的矩阵再乘一个固定偏移一次矩阵读取零骨架求值。因为身体和头盔读的是同一张烘焙表头盔永远不会和头错位一帧。每个机器人的个性化差异西装颜色、眼睛颜色、面部表情帧号则全部走实例属性instanceColor承载颜色自定义aFrame属性承载动画帧与表情图集索引见 astronauts.js 第 26-28 行注释。头顶的状态徽章?、!、⚒同理由 src/agents/indicators.js 用一个 instanced 图标图集一次画完整张地图。顺带一提面罩上的 16 种表情走的是同样的思路表情被画进一张 512px 的黑白遮罩图集src/agents/faces.js颜色在绘制时按机器人注入——一张 512px 纹理就给了每个 agent 各自的眼睛颜色不需要额外一个字节内存。105 个 Draw Call 是怎么来的把上面所有数字合起来看对象渲染方式Draw Call66 个机器人的身体1 个实例化 GPU 蒙皮 mesh1头盔 / 面罩 / 屏幕脸 / 背包 / 天线 / 灯每类部件 1 个InstancedMesh各 1状态徽章1 个 instanced 图标图集166 栋建筑每栋合并为单一几何体66官方给出的实测数字是66 个机器人 66 栋建筑共 105 个 draw callREADME Performance 一节。最漂亮的一句总结是第 67 个机器人的边际成本只是写一个矩阵和一个 float而不是多一个 draw call。小结这套方案可以照搬的思路如果你想在自己的 Three.js 项目里渲染一大群带骨骼动画的角色Bot Crossing 给出了完整可抄的作业把骨骼动画烘焙成浮点纹理——一次性成本换取逐帧零 CPU 骨骼计算蒙皮搬进顶点着色器插在实例化变换上游让 GPU 蒙皮与 instancing 叠加生效每个实例只给一个当前帧float动画混合全部由 GPU 完成穿戴件与个性化走实例属性 矩阵小表避免为每个角色建骨架行为映射到动作片段时用角色实际移动了多少而不是打算移动多少来选择 clip避免对着墙原地踏步的假象。想动手验证的话克隆仓库后npm install npm run dev即可启动需要 Node 22.13配合 npm run assets 可以从原始 CC0 资产包重建public/assets/下的crew.glb等模型完整体验这条烘焙流水线。赞分享【免费下载链接】bot-crossingA video game for AI agents. Created by Jarren Rocks项目地址https://gitcode.com/gh_mirrors/bo/bot-crossing点击查看免费下载相关推荐Obsidian看板插件重塑你的可视化知识管理体验Obsidian看板插件重塑你的可视化知识管理体验 你可能会遇到这样的情况在Obsidian中积累了大量的笔记和想法但它们散落在各个角落难以形成系统的工前端动画纹理烘焙器 (Animation Texture Baker) 使用指南动画纹理烘焙器 Animation Texture Baker 使用指南 项目介绍 动画纹理烘焙器是一个专为Unity设计的工具由开发者sugi cho创建并MOTR论文精读ECCV2022获奖论文的技术创新点解析MOTR论文精读ECCV2022获奖论文的技术创新点解析 MOTREnd to End Multiple Object Tracking with TRan上一篇『无审查版』不等于无过滤Qwen-Image-2.1 Uncensored 社区版爆火背后的审查与自由之争下一篇数据不出门的时代回来了OpenAI 都在做 Agent Builder自托管 n8n 的隐私卖点反而被放大创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
