pose-search 人体姿态搜索指南MediaPipe 姿态检测与以姿搜姿的完整之旅【免费下载链接】redux-devtools-extensionRedux DevTools extension.项目地址: https://gitcode.com/gh_mirrors/re/redux-devtools-extensionpose-search 是一个基于 Web 的人体姿态搜索方案用 MediaPipe 检测照片里的 33 个人体关键点然后让你以姿搜姿——扭一扭 3D 骨骼秒出姿态最像的一批图片。它专治姿势没法用语言描述、照片又找不到的痛点。一次以姿搜姿之旅从输入到结果不看模块跟着你提交的一次搜索请求走一遍它会路过四站。进站 · 数据就位采集数据集不靠实时全库检测。src/utils/PhotoDataset.ts 启动时一次性读入photos.json和预计算好的landmarks.dat——所有图片的关键点早已算好以Float32Array二进制躺进内存。想扩充图库进编辑器页面MediaPipe大脑先检测、落库之后搜索就零等待。摆姿态 · 你出题输入搜索面板里有一只 3D 骨骼滚轮旋转相机、右键平移、Shift左键旋转关节。你还要挑裁判标准查哪个部位肩/肘/膝/髋…、性别过滤、是否忽略相机角度。这只被你摆好姿势的骨骼就是本次查询。打分 · 裁判登场特征 → 匹配照片里的姿态特征已经过以躯干为中心的归一化变成任何相机角度下都能互相比较的向量裁判逐个部位比对不合格的直接淘汰。出分 · 结果到手打分 → 排序 → 缩略图按相似度排出来每张还标出最像的那几个关键点。pose-search 人体姿态搜索界面骨骼姿态标注、3D 骨骼模型与姿态搜索结果展示全程主线程不卡秘诀在第 4 节的加速器里。大脑MediaPipe 如何看懂你的姿态MediaPipe 吐出来的 33 个关键点MediaPipe Pose 在一张图里找出33 个人体关键点NUM_OF_LANDMARKS 33每个点带 x/y/z 坐标和一个 visibility可见度置信分。手被挡住、人出画了visibility 就会掉后面的裁判会据此弃权。双通道坐标一个管显示一个管比较检测入口 src/utils/detect-pose.ts 拿到结果后立刻拆成两路normalizedLandmarks归一化坐标相对图片的 0~1 坐标负责在 2D 平面上画骨架、标关键点worldLandmarks世界坐标带深度的 3D 坐标负责这只手到底举多高这类空间问题。模型配置也很有意思三个参数就定生死pose.setOptions({ selfieMode: false, // 不用镜像模式 modelComplexity: 2, // 拉满模型精度 smoothLandmarks: false // 不平滑每张图独立判断 });以躯干为中心归一化让姿态跨相机可比直接比坐标肯定不行同一个抬肩动作人站近站远、相机歪不歪坐标完全不同。pose-search 的办法是把躯干当坐标系原点——用髋中点指向肩中点的方向当上、双肩连线当右、叉乘出前把身体部位的方向投影进这套局部坐标系核心函数getNormalInLocalSpacesrc/Search/impl/math.ts。于是左肩相对躯干抬起 30°变成一个谁都能比较的数相机角度影响被剥掉了。裁判相似度是怎么打分的每个部位一个判罚员没有一个大一统的打分器而是一个部位一个裁判类都实现prepare/match两方法的小接口Face、Chest、Left/Right Shoulder、Left/Right Elbow、Left/Right Knee、Left/Right Hip、Crotch各自独立成类例如 src/Search/impl/MatchShoulder.ts肩、肘、膝、髋还各配一个CameraUnrelated 变体只做 3D 局部角度比较、丢掉 2D 视角误差——你选忽略相机时就用它。不同部位在姿态识别里分量不同这里没有搞一张统一权重表而是干脆让每个部位自己实现判罚规则想给某个部位加戏只改它自己的类就行。角度误差变分数越小越好以肩部裁判为例逻辑很直白// 简化判罚完整版见 MatchShoulder.ts if (角度误差 45deg) { score (π - 角度误差) * (π - 视角误差1) * (π - 视角误差2); // 角度差越小分数越小 越像 } else { return null; // 这张照片此部位不参与本次搜索 }两个硬门槛世界空间角度误差和视图空间角度误差都不得超过 45°否则判不成立再叠加一个 visibility 下限——关键点被挡得看不清的照片直接跳过不冤枉。镜像翻转与最终排序人对着镜子做动作也是合法答案所以左右两侧都会各试一次正的不像就拿镜像版本再比匹配上了就给结果打上flip标记。最后 src/Search/impl/search.ts 里的filterAndSort收尾——查询姿态只prepare一次逐张照片matchnull 剔除按分数升序排越小越像取前 N 张上屏。加速器为什么它跑起来不卡Web Worker 跑模型src/utils/detect-pose-worker.ts 把 MediaPipe 整个搬进子线程界面线程专注渲染大图还会先缩到 1000px 以内再送进去带宽和推理时间双省。WebGL 2.0 渲染骨骼src/components/SkeletonModelCanvas/ 里每个部位都是一块真实 3D 网格躯干、上臂等 OBJ 模型配自写 GLSL 着色器打光照、描轮廓进入页面前先做 WebGL2 支持检测不支持就明说绝不半残渲染。二进制缓存 限额数据集关键点全部预计算进landmarks.dat启动一次读入搜索时零检测成本结果数量由MAX_NUM_OF_SEARCH_RESULTS兜底缩略图分批上屏。落地部署、监控与可维护性部署几乎零负担——Vite 打包出纯静态资源Nginx 或任意静态服务器直接托管不需要后端npm install npm run build上线后盯三个指标即可单图检测延迟进 Worker 到出关键点、搜索响应时间点按钮到首屏结果、WebGL2 支持率不支持的用户会看到提示而不是白屏。想调搜索手感改两个常量就行LANDMARK_VISIBILITY_ACCEPTABLE_THRESHOLD关键点多糊才算数和角度阈值判罚松紧。可维护性上最省事的设计是判罚接口新增一个搜索部位 写一个MatchXxx类 在 src/Search/Search.ts 注册一行配置就上线其余代码纹丝不动。从搜索到场景体育训练在骨骼上摆出标准动作再搜学员照片里最接近标准的一组——动作标不标准从凭教练眼力变成有分数。康复监测把目标关节角度设进骨骼患者每天的照片按角度差排序康复进度直接量化成还差几度。智能安防同一套 33 点姿态特征可以支撑跌倒识别、异常行为筛查——这个项目里的部位判罚类本质就是现成的角度比对原语。结语下次想找一张长得像这个姿势的图就扭一扭 pose-search 里那只 3D 骨骼大脑负责看懂裁判负责打分加速器保证不卡。想往下挖src/Search/impl/ 里一个部位一个类是最好读也最好魔改的地方。【免费下载链接】redux-devtools-extensionRedux DevTools extension.项目地址: https://gitcode.com/gh_mirrors/re/redux-devtools-extension创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考