
Airi v0.1.0 版本编年史从 VRM 角色渲染到实时语音交互的基座构建【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi导读Airi 是一个自托管、数据归你所有的 AI 数字生命体Grok Companion 同类项目目标是让电子灵魂走进现实世界。本文基于仓库 docs/content/en/docs/chronicles/version-v0.1.0/index.md 中记录的 v0.1.0 版本编年史梳理该版本为整个项目奠定的六大能力基座——VRM 3D 角色前端集成、嘴部TTS 口型、听觉实时语音转写、面部表情、多语言与 UI 优化并结合当前仓库源码逐项验证其底层实现。读完本文你将理解一个能看见、会说话、听得懂、有表情的数字生命体在渲染层与音频链路上是如何一步步搭起来的。一、版本概览v0.1.0 在构建什么从编年史的勾选清单可以清楚看到v0.1.0 的目标不是某个单一功能而是为数字生命体补齐感知与表达的最小闭环功能域关键里程碑完成状态VRM 前端集成模型接入12/5、待机动画12/6、眨眼12/7✅ 完成嘴部Mouthunspeech 项目、TTS 集成6/8、11Labs 封装12/3✅ 完成听觉Hearing说话按钮6/9、socket.io 双向通信6/10、浏览器端 Whisper 转写✅ 完成WebRTC 方案暂缓面部表情前端 VRM 表情控制12/7✅ 完成多语言UI 基础 i18n12/13部分完成UI 层已落地UI 优化安全区域12/4、移动端适配12/5、设置菜单12/7✅ 完成有意思的是编年史中很多聆听相关条目经历了反复的评估 → 推翻 → 再评估过程如 WebRTC 被搁置、Whisper 从whisper.cpp转向浏览器内 WebGPU 推理这些技术选型决策本身就是一份难得的工程笔记下文会结合仓库现状逐一还原其最终走向。二、VRM 前端集成让角色活在浏览器里编年史第一条主线是前端 VRM 集成。得益于pixiv/three-vrm生态Airi 选择了标准的 VRM3D 虚拟角色模型格式作为角色载体并依次完成了模型加载、待机动画.vrma与眨眼三件套。2.1 加载管线GLTFLoader VRM 插件链当前仓库的加载器实现在 packages/stage-ui-three/src/composables/vrm/loader.ts它基于GLTFLoader注册了三条插件链VRMLoaderPlugin解析 VRM 扩展含自定义的AiriMToonMaterialLoaderPlugin用于 MToon 材质的描边兜底策略VRMAnimationLoaderPlugin解析.vrma动画文件这正是编年史中待机动画的落地依赖单例化的GLTFLoader被全局复用避免重复构建。2.2 模型加载与场景自举packages/stage-ui-three/src/composables/vrm/core.ts 的loadVrm()完整展现了加载后的整形流程性能优化VRMUtils.removeUnnecessaryVertices()移除不可见顶点、VRMUtils.combineSkeletons()合并骨骼并遍历关闭frustumCulled视线代理为_vrm.lookAt挂载VRMLookAtQuaternionProxy让模型能播放视线跟随动画朝向矫正将模型正面朝向预置到 Z 轴负方向包围盒计算遍历网格过滤VRMC_springBone_collider前缀的弹簧骨碰撞体计算模型尺寸与中心并把枢轴点上移至胸口高度modelCenter.y modelSize.y / 5相机自举以默认 fov40 计算初始相机偏移(size.x/16, size.y/8, -(size.y/3)/tan(fov/2))保证画面中呈现模型上 2/3 区域。组件层 packages/stage-ui-three/src/components/Model/VRMModel.vue 则负责把这一切接入渲染循环它管理loadStart / loadingProgress / loaded / error生命周期事件、模型切换时的资源销毁/暂存vrm-instance-cache并在每帧依次驱动AnimationMixer → humanoid → lookAt → blink → emote → lipSync → expressionManager → springBoneManager的更新链。2.3 待机动画.vrma的加载与重锚定编年史提到的 VRM 待机动画仓库中通过 packages/stage-ui-three/src/composables/vrm/animation.ts 实现loadVRMAnimation()用插件加载.vrma文件并取出首个VRMAnimationclipFromVRMAnimation()将其转换为 three.jsAnimationClip而reAnchorRootPositionTrack()则把动画的 Hips 根位置轨道整体平移使动画原点对齐模型原点——这是不同角色套用同一份动作数据时画面不漂移的关键。2.4 眨眼与眼动让角色看起来活着编年史 12/7 的VRM blinking在当前源码中对应useBlink()眨眼间隔在1~6 秒间随机单次眨眼持续0.2 秒用正弦曲线Math.sin(π * progress)生成平滑的blink表情权重每次眨眼结束后重新掷骰下一次间隔模拟真实节奏。同文件还提供了useIdleEyeSaccades()模拟空闲时的眼跳扫视在注视目标周围 ±0.25 的随机范围内生成新的注视点模拟 27 寸显示器 65cm 距离的视线落点并通过lookAt.target.position.lerp()平滑过渡。三、嘴部系统TTS 输出如何驱动 VRM 口型编年史嘴部Mouth分支记录了两条支线一是创建了独立的unspeech项目并在 6/8 集成 TTS二是 12/3 把11Labs封装为独立 npm 包f9ddf9af。这体现了 Airi 将语音合成与语音转写解耦、各自沉淀为可复用包的设计思路。3.1 口型同步从音频波形到 BlendShape渲染侧的口型驱动实现在 packages/stage-ui-three/src/composables/vrm/lip-sync.ts链路为TTS 播放的AudioBufferSourceNode→ wLipSync AudioWorklet 分析 → VRM 表情权重。核心细节音素映射wLipSync 输出 A/E/I/O/U/S 五个原始通道代码先做重映射S→I再映射到 VRM BlendShapeA→aa、E→ee、I→ih、O→oh、U→ouwinner runner 混合策略源码注释指出若把所有口型按原始权重一起混合会因 A 口型形变量最大而整体偏向 A。改进后只混合权重最大的两个口型winner runner×0.6口型更自然平滑与静音判定ATTACK50起始速度、RELEASE30结束速度、CAP0.7权重上限、SILENCE_VOL0.04并用 160ms 的IDLE_MS判定停顿避免语音间隙时嘴部僵住。这也是对编年史嘴部最完整的注脚前端角色说话的表现力取决于音频 → 音素权重 → BlendShape这条链路的每一环调校。四、听觉系统从说话按钮到实时语音转写Hearing是编年史中篇幅最长、决策过程最曲折的部分值得单独拆解。4.1 第一层说话按钮与 socket.io 双向通信6/9 先实现了talk button6/10 采用socket.io做前端到后端音频流的双向通道。编年史里留下了非常诚实的技术笔记Socket.IO 并非基于原生 WebSocket它在此基础上增加了重连、心跳、二进制分包等语义这一认知直接决定了后续的架构判断前端使用socket.io-client、后端使用socket.io并调研了 Nuxt 3 socket.io 在生产环境 WebSocket 失效的坑Nuxt/Nitro 对 WebSocket 的支持仍在演进曾评估用WebRTC传输音频VueUse 也支持但结论是Nuxt 和 Nitro 尚不支持暂缓可留待群聊或 Discord 场景——这正是当前仓库中 packages/better-ws 等 WebSocket 基础设施出现的背景。4.2 第二层浏览器内 Whisper 转写的技术选型编年史记录了转写引擎的探索轨迹最初考虑whisper.cpp以 Node.js C Addon 嵌入随后发现 Chrome/Edge 已支持WebGPUTransformers.js ONNX Runtime WebGPU可以让 Whisper 直接跑在浏览器里当时已有 Xenova 的 Realtime Whisper WebGPU 实时演示。这一模型下放到端侧的方向与 Airi 强调的自托管、数据归你理念一脉相承。4.3 今日实现Silero VAD 分段录音 音量兜底编年史最后还残留两个未勾选项Whisper WebGPU Demo 12/10、MicVAD Demo 12/11、MicVAD ONNX Whisper 实时转写 12/12它们在当前仓库中已被完整落地核心实现位于packages/stage-ui/src/workers/vad/vad.ts基于onnx-community/silero-vadfp32的 VAD 处理器默认配置如下参数默认值含义sampleRate16000送入模型的采样率speechThreshold0.3语音判定概率阈值exitThreshold0.1已处于录音态时的退出阈值迟滞minSilenceDurationMs400判定语音结束所需的最短静音speechPadMs80语音前后保留的静音填充minSpeechDurationMs250最短有效语音过短则取消maxBufferDuration30单段缓冲最大秒数其内部用前一缓冲区队列实现语音前导填充createLeadingSpeechAudio用processingChain串行化 AudioWorklet 的消息处理避免并发乱序——这正是编年史 12/12MicVAD 实时转写的最终形态。packages/stage-ui/src/composables/audio/voice-input-session.ts把 VAD 事件speech-start/end/cancel/ready编排成完整的录音段生命周期并内置音量兜底方案用AnalyserNode的时域电平默认起始阈值 10、停止阈值 6、连续 4 帧触发在 VAD 初始化失败或流式模式外继续保障分段可用。packages/stage-ui/src/composables/audio/voice-input-vad-startup.tsstartVoiceInputVadDetectionSafely()对 VAD 初始化做容错启动初始化失败会记录vad-init-failed日志并优雅降级不影响整体会话。五、面部表情7 种情绪状态的权重编排编年史 12/7 的Frontend VRM facial expression control对应 packages/stage-ui-three/src/composables/vrm/expression.ts 的useVRMEmote()它定义了一张情绪状态表情绪BlendShape 组合权重混合时长happyhappy 0.7 aa 0.20.4ssadsad 0.7 oh 0.150.4sangryangry 0.7 ee 0.30.3ssurprisedsurprised 0.8 oh 0.40.15sneutralneutral 1.00.6sthinkthink 0.70.5srelaxedrelaxed 0.70.4s实现要点主表情权重刻意压到0.7~0.8源码注释明确指出这是为了避免 issue #590 中表情过猛/笑过头的问题过渡用lerpeaseInOutCubic缓动且从当前显示值而非 0 开始过渡避免表情跳变setEmotionWithResetAfter(name, ms)支持播放 N 毫秒后自动回到 neutral适合对话中一句一表情的驱动节奏所有表达式在vrm.expressionManager.expressionMap中做大小写不敏感的模型适配兼容不同作者命名习惯的 VRM。六、多语言支持i18n 基础设施编年史中Multilingual Support仅勾选了 UI 层12/13 的basic i18n提交。这一决策在仓库中留下了清晰的足迹packages/i18n维护着覆盖en / ja / ko / zh-Hans / es等多个语言目录的 yaml 词条与类型化导出packages/i18n/src并在docs/content下配套了 en、ja、ko、zh-Hans 多语言文档体系。UI 文本、设置项、舞台相关文案均已走统一词条为后续内容层多语言铺好了路。七、UI 优化移动端与桌面端的适配细节编年史UI Optimization记录了四条移动端与交互相关的优化与仓库stage-ui/stage-ui-three的演进方向吻合安全区域12/4为刘海屏/异形屏预留安全区保证控制按钮不被系统手势遮挡Canvas 场景移动端适配12/5配合 Live2D Viewer 改进与模型缩放 自适应比例让角色在不同屏幕宽高比下保持构图设置菜单与溢出优化12/7收敛入口、处理窄屏溢出交互密度向桌面体验看齐。这些条目看似琐碎却是数字生命体走进现实的必要条件——无论手机还是桌面窗口角色都必须以正确比例、正确区域呈现在用户面前。八、模型生态VRM 工具链与素材来源编年史末尾专门列出了 Models 章节记录了pixiv/three-vrm的引入感谢 kwaa 的引导以及完整的配套工具链这组工具在 v0.1.0 的日常迭代中承担角色制作与动画生产模型制作Blender 的 VRM Add-on导入/导出 VRM摆姿/预览Steam 上的 VRM Posing Desktop可用于快速验证模型姿态素材市场Vket Store 的角色商品列表是现成 VRM 模型的主要来源之一动画规范VRM Animation.vrma1.0 规范以及 Unity 侧把普通 AnimationClip 转换为.vrma的示例工程AnimationClipToVrmaSample配合 BOOTH 等平台可购买/下载角色动画。仓库侧packages/stage-ui-three已内置 VRM 动画资源目录 packages/stage-ui-three/src/assets/vrm/animations/index.ts且engines/stage-tamagotchi-godot中还有独立的 VRM 运行时导入文档 docs/vrm-runtime-import.md说明 VRM 资产链已延伸到多个渲染后端。九、小结v0.1.0 的遗产回看整份编年史v0.1.0 最大的价值不是某一次提交而是确立了一条可复用的数字生命能力链看见VRM 模型加载、待机动画、眨眼与眼动animation.ts说话TTSunspeech / 11Labs wLipSync 口型驱动lip-sync.ts听得懂从 socket.io 音频通道演进到 Silero VAD 端侧 Whisper 的实时转写vad.ts、voice-input-session.ts有表情7 种情绪的权重化混合编排expression.ts。这条链上的每个环节都经历了选型 → 试错 → 落地的完整过程而仓库源码正是这些决策的最终见证。对希望构建同类AI 角色 实时语音 3D 渲染项目的开发者而言v0.1.0 编年史 当前源码的组合是一份难得的端到端参考既能看到为什么这么选编年史的废弃勾选项也能看到怎么做源码的每一处调参注释。【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考