前端图形学【免费下载链接】bloubSVG recreation of the x.ai bot avatar. One shape morphing through 14 states, measured off the reference video frame by frame.项目地址https://gitcode.com/gh_mirrors/bl/bloub点击查看免费下载bloub 是一个零依赖的 SVG 变形动画项目一个纯黑的小机器人在14 种状态之间平滑 morphing全程不借助任何路径变形库或动画库。它的核心技巧是径向轮廓采样——把每种形状变成一圈固定角度上的半径数据让任意两个形状的轮廓点天然一一对应形状变形就退化为 64 个数字的线性插值。本文带新手读者拆透这套原理以及它为什么比调用现成 morphing 库更简单、更稳。先看效果一个形状14 种状态在 bloub 里idle待机、眨眼、六边形、三角形、轨道、爆发……所有状态都是同一个填充形状在连续变形而不是逐个切换贴图。把页面地址加上#planche可以冻结看到全部 14 个状态并排排列对普通用户来说只需pnpm install pnpm dev就能在本地看到它而想理解变形是怎么发生的关键全在 src/bot/ 这一层纯 TypeScript 代码里。路径变形库的痛点点不对应曲线就错乱直接拿两条 SVGpath做 morphing 有一个根本难题两条路径的锚点如何一一对应一个圆通常由 2 段弧线指令描述一个三角形由 3 条直线段描述——指令结构和点数都不同插值无从下手现成的路径变形库如基于路径分解的库要么做复杂的重采样与拓扑匹配要么对形状变化敏感、偶发扭曲即使点数凑齐若点的语义不对齐比如 A 形的第 5 个点在左边、B 形的第 5 个点在右边插值过程就会出现自交和扭动。bloub 的解法是绕开问题本身不让两条路径互相变形而是把每条路径先统一翻译成同一种数据格式。径向轮廓采样把任意形状变成 64 个数字固定角度采样点与点天然一一对应项目约定所有轮廓都写成径向函数 r(θ)从中心出发向一圈均匀分布的角度发射射线记录每条射线到轮廓的距离。采样角度是全局统一常量PROFILE_SAMPLES 64定义在 profiles.ts角度序列在 shape.ts 中一次性预计算好。这就完成了路径变形库里最难的点对应工作任何两个形状的第 k 个半径永远描述同一个角度方向上的轮廓。对应关系不是算出来的而是构造时就存在的。前提是所有轮廓都是凸形蛋形、六边形、圆……这样 r(θ) 才能精确描述轮廓而不丢失信息。变形退化为线性插值对应关系确定后morphing 就变成了对两个长度 64 的数组逐元素 lerp核心实现是 shape.ts 中的blenddst.radii[i] lerp(a.radii[i], b.radii[i], t)旋转角还会走最短路径插值从 170° 到 -170° 只转 20°而不是 340°再叠加缩放与平移的插值。整个引擎里没有一条与路径解析、拓扑匹配有关的代码——这就是避免路径变形库的全部原因。轮廓数据从哪来逐帧测量不是手画一个容易忽略的点profiles.ts里的 64 个数字不是设计出来的而是从参考视频逐帧量出来的。工具链是 tools/extract-profiles.py用 ffmpeg 把参考视频按 10 fps 切成帧找到画面中最大的黑色连通域取质心沿 64 个均匀角度做亚像素射线投射二分找到轮廓边界以静息球体半径190 px归一化输出r(θ)数组。其中蛋形、六边形、三角形这三个不规矩的形状由脚本生成见 profiles.ts 的注释明确标注了对应帧号与实测包围盒而圆和点被验证为完美圆径向偏差 0.7%! 的杆是两个圆的凸包这些都在 shape.ts 里用解析式直接构造比冻结一份带噪点的测量数据更精确。测量细节完整记录在 docs/measurements.md。64 个点如何画得丝滑Catmull-Rom 平滑收尾拿到插值后的 64 个半径toPoints 把它们投影成屏幕坐标依次应用旋转、squash 缩放、平移最后由 closedPath 把闭合折线转成Catmull-Rom 三次贝塞尔曲线。64 个采样点在这个环节绰绰有余即使放大到 600 px 显示轮廓依然像素级平滑而且生成的d字符串链很短渲染开销极低。也就是说变形精度和视觉平滑被拆成了两件事——前者由径向采样保证后者由曲线拟合保证互不干扰。边角场景处理写不成 r(θ) 的形状径向采样假设中心在形状内部且轮廓凸。遇到例外时bloub 的补集工具是 profileFromPolygon对任意多边形从中心发射同一组 64 条射线与每条边求交取最远点把多边形翻译成径向轮廓——从此它也和其他所有形状一样参与线性插值。自定义器里的 8 种身体形状鹅卵石、云朵、水滴、胶囊……全部走这条路解析式生成集中在 skins.ts超椭圆用 superellipseProfile、云朵用圆并集 unionOfCirclesProfile、圆角多边形用 Minkowski 和 regularPolygonProfile。而画在身体上的眼睛与通知圆点则用 radiusAtAngle 查询当前轮廓在指定方向上的真实半径保证眼睛贴边移动而不会穿出轮廓——眼睛本身就是mask里的孔越界即被裁掉无需额外裁剪代码见 docs/architecture.md。工程收益纯函数引擎一帧都可复现因为轮廓是角度 → 半径的确定性数据、变形只是插值整个引擎做到engine.sample(t)是时间的纯函数见 engine.ts 的blendPose暂停、恢复、跳转到任意时刻同一时刻永远渲染出同一张图冻结状态板、GIF/MP4 导出见 docs/export.md都靠这一点成立测试套件无需 DOM直接对帧数做逐帧断言。换一条路径如果用路径变形库输出依赖库内部的重采样状态任意时刻可复现这类性质就很难保证。文件导览沿着源码读懂这套 morphing 原理想理解什么看这里径向轮廓、blend、Catmull-Rom 平滑src/bot/shape.ts64 个角度的测量数据勿手改src/bot/profiles.ts从视频帧提取轮廓的脚本tools/extract-profiles.py自定义形状的解析式构造src/bot/skins.ts纯函数引擎与姿态插值src/bot/engine.ts架构决策为何不用路径变形库docs/architecture.md每个常量的测量来源docs/measurements.md一句话总结bloub 没有和路径变形正面搏斗而是用统一角度的径向轮廓采样把任意形状归一化成同构的半径数组让 morphing 变成一次平凡的线性插值——零库、可复现、逐帧可测试。这套思路对任何多形状平滑过渡的需求都可直接复用。赞分享前端图形学【免费下载链接】bloubSVG recreation of the x.ai bot avatar. One shape morphing through 14 states, measured off the reference video frame by frame.项目地址https://gitcode.com/gh_mirrors/bl/bloub点击查看免费下载相关推荐WeChat聊天记录导出完整教程10分钟用WeChatMsg把对话存成HTML和Word文件WeChat聊天记录导出完整教程10分钟用WeChatMsg把对话存成HTML和Word文件 年底复盘我想找某张项目验收截图当初发在哪个工作群微信里已经翻深度解析开源AI引擎LocalAI3种高效部署方案实战指南深度解析开源AI引擎LocalAI3种高效部署方案实战指南 你是否曾想过在本地环境中运行各种AI模型却苦于GPU资源不足或云端服务成本高昂LocalAI正人工智能大模型模型推理服务本地部署LLM 网关多模态AI AgentRAGMCP 服务Hermes Agent完整配置指南5步搭建你的智能AI代理开发环境Hermes Agent完整配置指南5步搭建你的智能AI代理开发环境 Hermes Agent是一款强大的AI代理开发框架它能够随着你的需求而成长帮助你快AI Agent人工智能AI 应用工具调用Agent 记忆交互助手RAG任务调度MCP 服务创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考