人体姿势检索实战Pose-Search 开源项目完整上手指南【免费下载链接】pose-searchx6ud.github.io/pose-search项目地址: https://gitcode.com/gh_mirrors/po/pose-search图片找图已经是家常便饭但按姿势找图呢想象你是一名滑板教练想从几千张照片里找出所有空中展体的动作瞬间关键词搜索完全无能为力——而这就是人体姿势检索项目 Pose-Search 解决的问题。它用 33 个骨骼关键点把每张照片变成一串可计算的空间坐标让你拖一拖 3D 模型就能按姿势相似度把整个照片库重新排序。这篇文章记录我实际跑通它的完整过程以及它最值得借鉴的几个设计思路。一图理解这不是搜图是给姿势配一把量角器Pose-Search 的逻辑可以概括为一句话把姿势翻译成数字再按数字找同类。作者 x6ud 选了一条非常聪明的路径不训练自己的识别模型而是用 Google 的 MediaPipe Pose 在浏览器里完成姿态估计把检测到的 33 个关键点肩、肘、腕、髋、膝……连同它们的可见度一起存入数据文件。搜索时你在一具可交互的 3D 骨骼模型上摆出目标姿势系统把它当尺子逐一量取照片库中每张图的对应关节角度按误差排序返回结果。上面那张截图就是它的编辑器界面左侧是原始照片与红色骨骼标注中间是 2D 关键点轨迹和 3D 骨骼模型右侧是照片元数据管理。整套数据流完全跑在浏览器里前端代码里src/utils/detect-pose.ts负责姿态检测public/worker/下的 Worker 让检测不卡主线程。真实上手从克隆到搜出第一个结果我按照 README 的指引走了一遍全过程约 15 分钟git clone https://gitcode.com/gh_mirrors/po/pose-search cd pose-search npm install npm run dev启动后访问/#/editor页面会向你要一个 Unsplash 的 App Key。这一步是唯一需要外部准备的去 Unsplash 官网申请一个免费的 Access Key粘贴进输入框即可。接下来就是标准流程搜图输入关键词我用了 skate翻页挑选照片检测点击 Run Model等待 MediaPipe 标注出骨骼关键点入库点击 Add Record照片连同关键点数据写入数据集保存点 Save data.db数据落盘到public/下的photos.json与landmarks.dat一个值得注意的细节作者把关键点存成了紧凑的二进制文件每张照片 33 个点、每个点 7 个浮点数归一化坐标、世界坐标加可见度。几百张照片的数据集依然毫秒级加载这种省到底的存储设计在纯前端项目里很实用。数据准备好后切到/#/search核心玩法出现了——左侧有一具灰色 3D 骨骼模型你可以用鼠标拖动它的控制点比如把右膝掰到 90 度。右侧下拉框选择身体部位Face、Chest、Shoulder、Elbow、Hip、Knee点击搜索照片库会按相似度重新排序还在缩略图上用红点标出匹配的关节位置。我第一次搜出右膝弯曲的结果时确实有点兴奋顶部第一张图就是一张侧身屈膝的照片而系统根本没看过它的文字标签。亮点深挖四个值得抄的设计1. 局部匹配器把大问题拆成小问题src/Search/impl/下没有一个大而全的姿势匹配器而是每个身体部位一个类MatchShoulder、MatchElbow、MatchKnee……它们都实现同一个PoseMatcher接口只有两个方法prepare()读取目标模型的姿态match()对单张照片打分。好处是显而易见的搜肘部角度就不必关心手指计算量小每个部位还能用完全不同的几何策略。想加一个新部位比如脚踝只需新建一个类零侵入。2. 视角无关匹配器消除相机位置的影响这是全文最亮眼的设计。普通匹配器直接在三维空间里比较向量方向但同一姿势从侧面拍和从正面拍向量方向完全不同。解决办法藏在MatchElbowCameraUnrelated这类文件里先把手臂方向从世界坐标系转换到以躯干为基准的局部坐标系——相当于把人的躯干当作参照物重新描述手臂朝向。这样一来无论相机在哪、人物朝向哪边描述手臂怎么抬的数据都不变。界面里Camera Related开关控制的就是切换普通匹配器和这种视角无关匹配器。搜索运动照片时我强烈建议打开它结果质量提升非常明显。3. 3D 骨骼模型就是查询条件本身大部分以图搜图工具要你上传一张示例图而 Pose-Search 让你直接捏出一个姿势。SkeletonModelCanvas组件用 WebGL 2 渲染可交互的 3D 模型拖动手臂、腿部的控制点模型实时响应。更贴心的是左右手镜像处理你在模型上摆的是左臂上举系统也能找出右臂上举的照片搜索结果的缩略图上还会标注出匹配的关键点方便你快速确认得分依据。4. 优雅的工程封装底层用了 Vue 3 naive-ui gl-matrix但作者把算法和 UI 分得很干净。搜索逻辑集中在src/Search/impl/search.ts参数全部收在src/config.tsLANDMARK_VISIBILITY_ACCEPTABLE_THRESHOLD控制关键点可见度下限MAX_NUM_OF_SEARCH_RESULTS限制结果数量。调参时不用翻代码改一个配置文件就行。横向对比它和传统搜图的取舍维度文本关键词搜索传统以图搜图Pose-Search 姿势检索查询方式文字描述上传示例图拖动 3D 模型摆姿势表达能力差姿势难用文字描述中依赖示例图强关节角度精确可控视角鲁棒性无关一般好有视角无关匹配器数据要求文本标签图片特征需先跑一遍姿态检测适合场景海量素材粗筛找同款图动作分析、姿态比对代价也很清楚它需要前置的骨骼关键点数据所以数据准备成本比纯文本索引高但换来的是传统方案给不了的精确度。避坑与 FAQQ网页提示不支持 WebGL 2 怎么办这是硬性要求。3D 骨骼模型依赖 WebGL 2老浏览器或部分虚拟机环境不支持建议换用 Chrome / Edge 最新版并确认硬件加速已开启。Q检测出来的关键点对不上人检查图片里人物是否太小或被遮挡。LANDMARK_VISIBILITY_ACCEPTABLE_THRESHOLD默认 0.4偏低置信度的点会被过滤识别质量直接决定后续搜索精度尽量选主体清晰、光线均匀的照片。Q搜索速度慢先确认数据是否已保存。搜索是纯内存计算数据量大时会线性变慢可以把MAX_NUM_OF_SEARCH_RESULTS调小或精简照片库。QUnsplash 的 Key 存哪了存在浏览器 localStorage 里换机器需要重新粘贴属于正常现象。进阶玩法写一个自己的匹配器给src/Search/impl/加一个类实现PoseMatcher接口然后在src/Search/Search.ts的matchers表里注册就完成了一次扩展。例如为舞蹈分析写一个踝关节匹配器prepare()里算好目标模型脚踝的角度和朝向match()里对每张照片的 14、16 号关键点求误差并打分。想再进一步可以借鉴getNormalInLocalSpace这套局部坐标变换工具让你的匹配器也做到视角无关。社区与生态项目由 x6ud 开发MIT 协议开源代码结构清晰、注释到位非常适合作为人体姿态应用的学习样本。仓库根目录的 README 就是最简入门文档src/下的目录划分Search、Editor、components、utils本身就是在教你如何组织一个视觉类前端项目。下一步动手搜一个姿势Pose-Search 的价值在于它把一个听起来很 AI的需求——按人体姿势检索图像压缩成了一个十几分钟就能跑通的开源工具。无论你想研究姿态估计算法、做运动数据分析还是单纯好奇骨骼关键点能玩出什么花样都值得亲手试一次。打开终端克隆仓库申请一个免费的 Unsplash Key然后试着搜一搜屈膝或上举手臂——你会直观感受到什么叫姿势的数字化表达。跑通之后再回头看src/Search/impl/math.ts里的坐标变换很多算法上的巧思就一目了然了。【免费下载链接】pose-searchx6ud.github.io/pose-search项目地址: https://gitcode.com/gh_mirrors/po/pose-search创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考