内置 6 个锚点:3 张展牌 + 3 款冰箱贴 Demo(印刷稿为程序化生成,可离线)。点「展示」在本机全屏显示,用另一台手机对准即可演示;也可上传自己的图片作为锚点。
目标图要求(文档表 6):特征点丰富、对比明显、无重复纹理、长边 300–1500 像素、录入真实物理尺寸。
三步跑通
- 点「锚点展台」→ 选一张目标图 → 点「展示」,让另一台设备对准它(或直接对准电脑屏幕上这张图)。
- 回到本页点「开始识别」并允许相机权限:冰箱贴 15–30 cm,展牌 0.5–3 m。
- 连续 3 帧命中后内容自动贴合上屏;单击暂停、长按看细节、左右滑切章节、双指缩放。
冰箱贴 Demo:拍一下,画面就动
- 冰箱贴印刷图 = 锚点;动画 canvas 挂在贴合平面内部,随 matrix3d 一起倾斜缩放
- 更鼓报时 → 鼓槌敲击与声波;中轴起点 → 城楼逐盏亮灯;九梁十八柱 → 云纹流动
- 目标占画面 1/5 以上、四边完整;避开直射光与覆膜反光
- C 档机型自动降级为静态首帧,S/A/B 档 24–30 fps
演示模式用内置合成帧模拟一次识别成功,可直接看到动画层贴合在冰箱贴平面内的效果;真机请点「开始识别」对准实物或展台。
相机打不开?
内嵌预览面板通常拿不到摄像头权限。降级页会给出具体原因与操作路径,可一键在系统浏览器打开或复制链接;设置里可查相机环境诊断。
技术口径
- 端侧 FAST 角点 + BRIEF 描述子 + 汉明匹配,ratio 0.75、good ≥ 12
- RANSAC 单应解算,重投影阈值 5px,内点率 > 0.6 才确认
- 五态状态机与最小驻留、一欧元滤波位姿平滑
- CSS matrix3d 透视贴合,无 WebGL/第三方 CV 库依赖
- PWA 离线缓存;无相机或低端机自动降级为静态图文页
对应开发文档第 2.2、4、5、8.3、9 章。网页形态识别率在弱光下比原生低一档,作为分享传播与低端机兜底,不作为主体验。