图像检测与跟踪教程

案例体验

点击查看【bilibili】
微信图片_20220324173522.jpg
881d2dd7e34a6a819dd64dc19e199a0.jpg

案例详细教程

:::info 包含“Web端”与“小程序端”两个AR教程

  • Web端：即网页端，可以在微信、微信小程序WebView、浏览器（Safari、Chrome、Firefox、Edge、QQ浏览器、百度等）以及App（Facebook、Instagram、LINE（iOS）、QQ、支付宝小程序WebView（iOS）等）打开，甚至可以接入到自己的APP中；Web端AR体验的制作，无需编程也可以完成，立即制作
  • 小程序端：即微信小程序端，开发者可以使用Kivicube平台提供的小程序插件进行二次开发，立即制作 :::

111.gif222.gif
Web端：用户扫描体验二维码，扫描“伊弥戟”识别图，出现一个伴随音乐循环播放的“伊弥戟”模型动画与现实进行交互的效果
小程序端：用户扫描小程序码，扫描“伊弥戟”识别图，伊弥戟他的擂台飞行器会“从识别图内的世界飞出来”伴随着动感的音乐给大家展示他的拳击技能，可以点击拍照与之合影

准备AR互动的素材

会用到的素材，关注公众号“弥知科技”，回复“插画”获取

识别图准备

“web端”和“小程序端”两个教程都需要

  1.   ![881d2dd7e34a6a819dd64dc19e199a0.jpg](https://cdn.nlark.com/yuque/0/2022/jpeg/22913777/1650525197174-326e8be6-dac0-48fd-a31c-e43e9c19654f.jpeg#clientId=ucf280e21-20e4-4&crop=0&crop=0&crop=1&crop=1&from=ui&height=267&id=u1a58de5d&margin=%5Bobject%20Object%5D&name=881d2dd7e34a6a819dd64dc19e199a0.jpg&originHeight=3000&originWidth=1687&originalType=binary&ratio=1&rotation=0&showTitle=true&size=1162809&status=done&style=none&taskId=u7fcfab92-c986-471b-a871-93373e56fb8&title=%E8%AF%86%E5%88%AB%E5%9B%BE&width=150 "识别图")

| 为什么场景不稳定？
本次“AR裸眼插画”图像跟踪场景的识别图已经进行过优化，不过细看还是会发现场景在抖动，造成这种情况从识别图方面看原因有：
- 占识别图大部分的主体，也就是“伊弥戟”本身过于圆滑（如下图），特征点不明显导致抖动
- 识别图主体本身为伪3D效果的平面图，大面积颜色渐变，不利于跟踪稳定性
image2022-4-6_17-47-45.png
- 识别图整体颜色过于统一，没有明确的色彩分布在一定程度上也不利于跟踪稳定性
图像跟踪的稳定性与识别图息息相关，所以需要着重注意识别图规范
更多关于图像跟踪识别图规范请参考：https://www.yuque.com/kivicube/manual/tracking-marker#EYoll | | —- |

模型准备

用于“web端”教程

  • 一个模型动画

    用于“小程序端”教程

  • 一个需要展示的模型动画

  • 一个作为遮罩的模型动画 | 为了做到从传送门内“凭空出现”的效果，要用到插件内模型遮罩的功能，所以需要一个专门起到遮罩功能的模型 | | —- |

透明视频准备

用于“web端”教程

音频准备

“web端”和“小程序端”两个教程都需要

  • 一段格式为mp3的音频

首页设置准备

用于“web端”教程

背景图：请参考 https://www.yuque.com/kivicube/manual/scene-setting#GlngQ
体验按钮：请参考 https://www.yuque.com/kivicube/manual/scene-setting#Aj7mc

分享设置准备

“web端”和“小程序端”两个教程都需要

请参考：https://www.yuque.com/kivicube/manual/save-and-share#xe94B

Web端制作教程

使用Kivicube快速制作此AR互动，无需编程

新建项目（合辑）与场景

针对本次AR体验，需要创建“图像检测与跟踪”场景
image2022-3-22_12-26-26.pngimage2022-4-11_12-12-48.png

  • 选择刚才创建好的项目（合辑）
  • 设置合理的场景名称：如Web端伊弥戟擂台
  • 上传前面制作好的识别图

上传素材

场景创建完成后，导入需要一个模型素材、一段透明视频和一段音频素材
image2022-4-13_18-54-10.png
可以直接在右侧场景结构中查看并修改场景内的所有素材以及其交互功能的设置

调整场景内素材的位置、大小及方向

模型位置、大小和方向调整：

场景中的“IP伊弥戟模型动画-web”该模型的位置、大小和方向都可以在右侧布局中进行调整；导入进来的模型需要在x轴旋转-90°，大小和位置可以参考下图：
image2022-4-13_18-56-1.png

:::info Tips: 画布中的识别图可以作为素材的方位参考，因为素材的布局相对于这张识别图都是固定的 :::

透明视频位置、大小和方向调整：

场景中的“KIVICUBE-image透明视频”的位置、大小和方向同样可以在右侧布局中进行调整；导入进来的视频在x轴旋转-90°，大小和位置可参考下图：
image2022-4-13_18-59-59.png

设置交互功能

该案例场景中有一个模型，一段音频和一段透明视频

模型动画设置

本次案例的AR交互非常简单，只需要扫描到识别图就出现模型，并且循环播放，那我们可以直接在右侧快捷设置下打开“自动播放模型动画”→“循环播放”，如下图：

image2022-4-13_19-6-55.png

透明视频设置

本次案例中的透明视频交互也非常简单，只需在场景开始扫描到识别图时开始播放，并且循环播放即可，可以直接在右侧快捷设置下打开“自动播放视频”→“循环播放”，如下图：

image2022-4-13_19-4-47.png

音频动画设置

这里的交互是，模型出现播放音乐，模型消失音乐暂停，模型再次出现，继续播放音乐 ，可以这样设置：
image2022-3-24_15-43-8.png
image2022-3-24_15-44-1.png、
这样AR交互部分就设置完成了~

首页设置

交互都设置完成后就可以上传我们的首页背景和体验按钮了，在“场景设置”下的“首页背景”与”体验按钮”处点击立即上传图片即可；网页标题也设置自己想要的标题；取消勾选“场景Logo”
33333.jpg

分享设置

添加好分享icon、分享名称以及分享描述
image2022-4-11_15-57-30.png
最后，请务必记得点击保存，平台目前是不会自动保存场景，建议用户在制作的过程中养成及时保存的习惯

AR互动体验

通过网页端体验-WebAR

qrcode.png
点击分享按钮后，会生成体验的链接与二维码。用户可以将此链接发布到各种渠道，详情请参考：https://www.yuque.com/kivicube/manual/publish

通过微信小程序体验

qrcode.png
生成好的二维码可以到官方小程序-AR扫呀扫中查看，详情请访问：https://www.yuque.com/kivicube/manual/publish#9FvPQ

小程序端制作教程

该部分教程可分为两个部分：Kivicube平台制作部分、kivicube AR插件接入和进一步开发部分
Kivicube平台制作部分：无需编程简单快速的上传好素材，通过可视化的操作设置素材基本状态和交互即可完成该案例AR场景展示部分
Kivicube AR插件接入和进一步开发部分：将制作好的AR场景嵌入小程序，进一步完善小程序内的UI，让AR的体验更加完整和丰富

Kivicube平台制作基础场景

新建项目合辑与场景

针对本次AR体验，需要创建“图像检测与跟踪”场景
image2022-3-22_12-26-26.pngimage2022-3-22_12-37-6.png

  • 选择刚才创建好的项目（合辑）
  • 设置合理的场景名称：如AR伊弥戟擂台
  • 上传前面制作好的识别图

上传素材

场景创建完成后，导入需要的两个模型素材和一段音频素材
image2022-4-6_17-59-7.png
可以直接在右侧场景结构中查看并修改场景内的所有素材以及其交互功能的设置

调整场景内素材的位置、大小及方向

用于展示的“image”模型调整：

需要达到“伊弥戟”从图片内出来的效果，就需要把“image”模型放置在识别图上半部分的下方且紧贴识别图放置。导入进来的模型需要在x轴旋转-90°，大小和位置可以参考下图
image2022-4-6_18-4-24.png

作为遮罩的模型“image-mask”调整：

调整好“image”模型后，直接将“image-mask”模型的位置、方向和大小数值调整为和“image”模型一致即可
image2022-4-6_18-6-22.png
这里遮罩，仅仅是先放置模型，调好位置，将模型设置为遮罩请参考接入插件使用高级API开发部分

为什么要用模型遮罩？它有什么作用？

为了达到真实的遮罩效果，场景体验时背景可在一个小框内进行多角度查看展示，而不只是一张无法多角度查看的图片；这个时候模型遮罩就是必不可少的。
例如实现进入画框看画内的世界这类传送门的效果或者两个运动的模型之间的遮挡关系等
WeChat_20220406185947_.gif55555.gif

这里给不太清楚模型遮罩的小伙伴介绍一下其使用方法和效果：

效果 666666.gif
使用方法 使用小程序插件高级API，将需要设置为遮罩的模型设置为遮罩类型即可
如效果中展示的那样，源场景中添加了名称为“柠檬”与“Occluder”的模型对象；
将Occluder设置为遮罩类型，Occluder便可以挡住“柠檬”部分运动轨迹，达到
柠檬跑到物体背后被遮挡，AR体验更真实。

设置交互功能

该案例场景中有两个模型，一段音频

模型动画设置：

要实现扫描到识别图就出现模型，并且循环播放，我们可以直接在右侧快捷设置下打开“自动播放模型动画”→“循环播放”，如下图：
1.png
2.png
注意，由于模型出现交叠覆盖的状态，较难选择中单独的模型，可以在右侧“场景结构”下选择对应的模型，进行设置。

音频交互设置：

这里的交互是，模型出现播放音乐，模型消失音乐暂停，模型再次出现，继续播放音乐 ，可以这样设置：
5.png6.png
这样在kivicube平台编辑器的操作部分就设置完成了
最后，请务必记得点击保存，平台目前是不会自动保存场景，建议用户在制作的过程中养成及时保存的习惯
接下来就需要使用Kivicube AR插件接入小程序进行简单的开发

自研微信小程序接入AR

快速上手

获取场景ID

7.png
在Kivicube平台上制作并保存场景之后，点击右上角”分享”按钮，然后点击”复制链接”，而链接中最后一个正斜杠，之后的一串字符，就是场景id
比如复制的链接为：https://www.kivicube.com/scenes/7MZciMD7jeUFahlAS5Feu8am3LMiq4Op ，则7MZciMD7jeUFahlAS5Feu8am3LMiq4Op就是场景id

基础示例接入

按照如下教程，填入自己制作的场景id，即可
点击查看【bilibili】

更多详情请访问：https://www.yuque.com/kivicube/manual/mp-ar-plugin-quick-start

进一步开发

自定义开发的功能点 详情
首页的开发 11.png
- 首页背景图和按钮的放置
自定义加载页 22.png
- AR加载需要一定的时间，并且针对比较复杂的AR交互时，会存在一些卡顿情况，自定义的加载页面，会先遮住相机画面，并展示相关信息，以防用户看到相机画面卡顿时，带来的不好的观感
对拒绝摄像头权限的处理
- 一套标准化的权限处理流程
扫描提示 33.png
- 一些配套的扫描引导，帮助用户更好的体验AR
拍照页面 44.png
- 将拍摄的照片与水印、文字、小程序码进行合成

使用高级API设置模型遮罩

模型遮罩使用方案API DEMO请查看：https://github.com/kivisense/wechat-kivicube-plugin-api-demo/tree/master/pages/api/mask

注意高级API仅支持企业版账号使用，使用高级API可以加载自己服务器上的素材，意味着可以不用上传到平台，详情请查看高级API的详细使用
开箱即用的源码，帮助开发者理解如何使用自定义开发：https://github.com/kivisense/wechat-kivicube-plugin-cases/tree/main/image2d-tracking
更多关于小程序插件的使用请参考：
- 小程序插件高级API：https://www.yuque.com/kivicube/manual/advanced-api
- 小程序插件常见问题：https://www.yuque.com/kivicube/manual/mp-plugin-faq