-
人生转折点是当保安的时候，刷抖音看到抖音特效很好玩，心里想这特效怎么做的？然后开始研究做出了第一个抖音特效，虽然没爆火，但有几个人玩，我觉得非常开心。
-
下班期间开始学做抖音特效，一步步从新手到高级特效师，慢慢收入居然比我当保安高了，这让我非常高兴，最终我决定辞职回家全职做抖音特效。
-
但长期坐电脑前学习让我颈椎经常酸痛，每次做完特效一动脖子就啪啪响。我做游戏特效的时候发现体感游戏可以缓解颈椎酸痛，正好发现了这次AI大赛，所以我就想做个体感游戏网站。
-
是什么
-
「动动脖子」是一款纯网页端双人体感健康游戏平台，用游戏化的体感交互方式，解决青少年及久坐人群颈椎放松难、传统颈椎操依从性差的核心痛点。
-
「中国超2亿人受颈椎问题困扰，其中青少年颈椎不适人群占比已超30%——网课、刷题、刷手机，十几岁就开始脖子酸、肩膀僵，可枯燥的颈椎操没人愿意坚持。」
-
我把颈椎康复训练藏进了体感游戏里，不用下载、不用注册，点开网页就能玩，主打「在娱乐里不知不觉活动颈椎」。
-
面向谁
-
青少年学生群体：长期网课、刷题导致的肩颈僵硬，需要课间碎片化放松
-
久坐办公/内容创作者人群：每天伏案几小时，需要低门槛的肩颈锻炼方式
-
使用场景
-
中小学课间十分钟：全班同学一起玩一局，快速活动肩颈
-
办公室摸鱼五分钟：工作间隙点开就玩，不用下载安装
-
异地好友/亲子互动：拉远在外地的朋友、家人一起联机，边玩边互动
-
核心功能（完整清单）
-
1. 零门槛入口层
- 无需注册、无需下载、无需安装，浏览器打开链接即可进入
- 全平台适配：手机/电脑/平板全覆盖，支持Chrome/Edge/Firefox/Safari四大主流浏览器
-
2. 模式选择层
- 单人训练模式：4款游戏对应不同训练强度，适合独自放松锻炼
- 双人实时对战模式：支持好友房间/随机匹配，WebRTC低延迟同步对战
- 虚拟形象模式：VRM虚拟形象实时动捕，无需露脸即可联机，社恐友好
-
3. 游戏内容层
- 4款体感游戏全覆盖：体感乒乓、摸鱼大师、表情包大师、模仿大师
-
4. 体验优化层
-
专属护眼模式：低饱和柔色设计，长时间玩也不累眼
-
训练时长统计、颈椎活动强度估算
-
护眼色调，避免眼睛疲劳
-
-
布局简约，左右切换游戏就能玩
-
下面是游戏介绍，能双人实时音频视频对战，不想露脸有虚拟形象
-
- 双人乒乓球游戏，左右转头打乒乓球，
-
- 双人摸鱼大师游戏，左右摇头甩鱼竿，抬头钓鱼。鱼是全服玩家手画的
-
- 表情包大师，根据玩家头部+手部动作，显示出对应的表情包
-
- 模仿大师，根据参考图摆出对应的表情+动作
-
- 实时动捕，实时映射玩家表情+动作
-
相比初赛 Demo 的升级
-
初赛只跑通了双人体感乒乓球的通讯功能，复赛完成了以下重要优化：
-
- 实时通讯稳定性优化
- 增加VRM虚拟形象
- 极致的性能压榨，确保手机也能流畅运行
- 新增更多游戏，并且支持双人模式
- 增加双人模式切换游戏功能
- 修复多重BUG，增加稳定性
-
技术栈
-
【动捕与 AI 推理】
-
MediaPipe Tasks Vision(Face/Pose/Hand Landmarker 三模型 4 帧轮转协调)
-
ONNX Runtime Web(ResNet18 简笔画鱼识别,Google QuickDraw 同款)
-
TensorFlow.js FaceDetection(降级方案)
-
One Euro Filter(CHI 2012 自适应低通滤波,消除动捕抖动)
-
requestVideoFrameCallback(视频帧驱动检测,Firefox 降级 rAF)
-
【3D 渲染】
-
Three.js + Three-VRM(VRM 1.0 皮套模型,BlendShape 表情驱动)
-
Canvas 2D + DOM 降级渲染(PC 微信 CEF 内核兼容)
-
WebGL 多层合成(视频/VRM 背景/3D 鱼群/2D UI 分层 z-index)
-
【实时通信】
-
自研 Node.js WebSocket 中转服务器(零依赖,手写 WS 帧编解码+背压控制)
-
SSE 匹配流(Cloudflare 隧道 padding flush)
-
WebCodecs H.264 视频编码 + JPEG 降级链
-
WebSocket 应用层心跳(3s)+ WS 层 Ping(25s)+ 30s 静默超时三级保活
-
【工程与性能】
-
双人模式房间内换游戏(VRM/WS/流复用,只销毁游戏专属素材)
-
背压丢帧(32KB 客户端+服务端双阈值,延迟上限 200ms)
-
HTTP Range 断点续传 + gzip 压缩 + 分级 Cache-Control
-
AbortController 取消 + sendBeacon 卸载上报
-
版本化资源(?v= 破 CEF 缓存)
-
【后端】
-
Node.js 原生 http + crypto + zlib(无 Express/ws 依赖)
-
双人匹配:多游戏类型分队列 + 幽灵房间 TTL 清理 + WS 关闭兜底
-
鱼素材 UGC:Base64 上传 + 元数据(点赞/留言)+ 全国排行榜
-
产品演示视频
-
【Trae复赛作品演示-哔哩哔哩】 https://b23.tv/WP2ut4P
-
产品创作历程
-
手机端性能低，浏览器不能完全发挥手机性能，最大挑战是压榨性能
-
75%的精力都浪费在实时通讯，压榨性能的身上，想要手机端能流畅运行这么大的架构，只能拼命压榨性能，不能有一丝浪费
-
但我连英文都看不懂，只能靠打字让TRAE自己想办法进行极致的性能压榨。
-
全身肢体模型: 手机使用一般会卡死，但是TRAE用了三模型协调，用三个模型组合成全身模型进行轮流调用，把性能压榨到极致
-
实时通讯: TRAE采用裁切区域，重新编码传输，对方接收后再解码，把实时通讯性能压榨到极致
-
虚拟形象: 游戏区域以外，看不到的地方，裁切，停用，不渲染。
-
肢体映射: 双人模式需要传输，改分辨率，改布局，让位置2D映射回3D，想完美映射到对应位置根本不可能。但是TRAE直接手搓了映射系统，靠数学公式纯手搓，能完美对应上视频里玩家的位置
-
这么多复杂的问题TRAE不可能一次完成，每个功能都是和TRAE成百上千次对话完成的，碰到解决不了的问题，让TRAE思考多几次，找到新方法就推翻重做，重新来过，尝试新方法，最终能让这么多功能的项目在手机浏览器里流畅运行
-
商业化规划
-
流量变现：体感游戏天然适合短视频传播→传播带来流量→流量变现
-
卖皮肤: 双人模式有社交属性，可以卖人物模型
-
接入广告：看广告解锁道具皮肤，比如限定乒乓球拍
-
定制商业化游戏：我做的是游戏平台，后续可以和商家合作，定制专属游戏进行推广
-
产品迭代规划
-
方向发展：抖音里的潜水艇游戏，鼻子控制潜水艇的体感游戏有四千万次使用，几十亿次的播放，说明用户是很喜欢玩，也很喜欢看这种游戏视频。这只是一个单人体感游戏的情况，我的网站是实时双人互动体感游戏，趣味性很强，比如双方在游戏中的表情，说的话都有可能成为下一个爆款视频传播起来，所以发展方向得想短视频传播对齐
-
网站宣传：实时双人对战游戏，天然适合短视频传播，推广重心放在短视频平台，比如发视频，图文来拉拢用户，用户觉得有趣二次发视频，以此类推产生裂变
-
迭代方向
-
- 一键分享按钮：点一下分享图文，简短的视频录像，让玩家能自主在短视频平台进行宣传
- 热点游戏：寻找符合制作双人游戏的抖音爆款热点主题，制作成双人游戏
-
TRAE 实践过程:
-
关键开发截图
-
修复双人摸鱼大师的画鱼功能
-
调整按钮排序
-
制作双人模式切换功能
-
关键 Session ID
-
.432547287010320:0659340b36a0e52077b2d772d08af761_6a6da1a06375fb67b3e900cc.6a6dddaa6375fb67b3e90bbe.6a6dddaa1acf50b01e8ff5f6:Trae CN.T(2026/8/1 19:51:06)
-
.432547287010320:4c5115f9c55a926dba867b3334a45f61_6a6da1a06375fb67b3e900cc.6a6dd9c46375fb67b3e90b75.6a6dd9c41acf50b01e8ff5f3:Trae CN.T(2026/8/1 19:34:28)
-
.432547287010320:d8bda44b0539803aaeecdb468fb47f80_6a6da1a06375fb67b3e900cc.6a6da1cd6375fb67b3e900ce.6a6da1cc1acf50b01e8ff5e8:Trae CN.T(2026/8/1 15:35:41)
-
.432547287010320:0ea6eb808094ace3887e0019b108dbb3_6a6da1a06375fb67b3e900cc.6a6dc5546375fb67b3e90624.6a6dc5531acf50b01e8ff5e9:Trae CN.T(2026/8/1 18:07:16)
