网站美工设计详细步骤,angularjs网站开发实例,如何建立免费网站,北京比较好的品牌设计公司文章目录 介绍篮框识别进球算法离屏渲染总结 介绍
神投手是我开发的一款移动端web实时投篮检测游戏。其解决的痛点是#xff1a;专为投篮训练而生的#xff0c;有手机就能玩的投篮计数游戏。我本人是一个篮球爱好者#xff0c;特点就是投篮准#xff0c;虽然投篮挺靠天赋专为投篮训练而生的有手机就能玩的投篮计数游戏。我本人是一个篮球爱好者特点就是投篮准虽然投篮挺靠天赋手感但是大量的训练一定是能锻炼出你的肌肉记忆大大提升命中率。因此对于一次有较多命中数的训练而言计数将成为一个比较大的痛点。传统的人工计数虽然准但是例如你想投进100个靠脑子记忆多少有点费脑子哈哈。基于此诞生了这款在线投篮计数游戏
神投手基于Mediapipe对象检测模型提供数据集训练出可识别篮框的模型。利用图像处理算法检测篮球进框的场景。为了提升游戏体验每次进球都有特殊音效并且在达成目标后也有特殊音效。
神投手游戏入口https://tryiscool.space/shooter-game欢迎移动端体验
提供了两种模式计数模式和计时模式界面如下 点击开始按钮进入游戏界面对准篮框手机保持静止后点击录制游戏开始。 左上角显示进球数右侧可以退出和标定篮框。
篮框识别
篮框识别基于mediapipe的objectDetection模型再训练。通过colab上的云服务器在线训练仅需要提供篮框的训练集即可。colab链接见https://colab.research.google.com/github/googlesamples/mediapipe/blob/main/examples/customization/object_detector.ipynb#scrollToMz3-eHe07FEX 篮框的识别不会稳定在真实篮框处有时也会标错到其余的物体上因此需要通过一个淘汰机制来维持识别次数最多的矩形为篮框。不同的识别框也会根据覆盖度确定新的篮框范围。
进球算法
进球算法使用图像处理参考这篇论文Camera-based Basketball Scoring Detection Using Convolutional Neural Network。原理见下图 简单讲就是每一张图片都和基准图片的灰度图做diff得到的就是移动的物体通过篮框周边范围的移动物体就是篮球利用连通域算法取出篮框周边最大的斑块大概率就是移动的篮球再制定一些进球规则
斑块的bbox宽度比篮框宽度小斑块先经过篮框上边沿斑块后经过篮框下边沿
符合以上规则计一次进球。清空缓存重新计算。
离屏渲染
由于模型计算量较大如果通过通过渲染会有明显卡顿帧率较低。因此采用offscreenCanvas离屏canvas技术这样可以大大提升运算的性能。
总结
这种算法的缺点是手机不能移动强依赖于图片的diff另外篮框的识别的准度和精度都有待提升训练集是700图片似乎不够。
实际使用场景较弱很少有人带手机支架去球场打球只能依赖篮球场边可以竖放手机的支撑物。横屏时前置摄像头靠近地面拍摄的范围很狭窄如果后置摄像头又无法看到实际的篮框识别结果无法手动标定篮框。
总体而言是一次教难的尝试但是过程中学到了蛮多东西特别是死磕算法确实很难。
如果你有好的建议请及时反馈我如果你是篮球爱好者欢迎试用神投手游戏
