WebAR丨如何制作基于大空间识别的「世界AR」效果（内附高级API）
最近在用Kivicube在线AR制作平台做一个户外的大空间AR项目，在这里跟大家分享一下快速可视化制作能识别建筑级别的大空间「世界AR 」场景，一起来看看吧~
WebAR场景制作难度：☆☆☆ 素材制作难度：☆☆☆☆ 场景制作时长：5 min
先来看下体验效果
现在开始制作
一、素材准备与获取
（一）素材获取
这里给出素材包，大家可以下载制作，也可以用自己的模型进行制作。
链接: pan.baidu.com/s/1Cpi1pnW5… 提取码: 8cjp
同时提供「世界AR」的高级API，供大家开发参考： github.com/kivisense/w…
（二）识别图拍摄与处理
首先根据需求选择目标环境具有识别特征的位置来拍摄识别图，以此识别图触发AR场景（识别图已在素材包中，可直接使用）。
本案例中，我选定的识别对象是成都来福士广场中央的两栋建筑，大家也可以根据自己需求来选择建筑、雕塑等标志物来拍摄。
需要注意的是，在「世界AR」中，虚拟的AR场景与真实环境有较强的关联性，本教程中给出的位置/大小等参数仅针对以成都来福士为识别建筑的AR场景制作。
为了获得更好的体验效果，大家需要根据现场环境对模型、视频等AR素材进行调整。
关于「世界AR」场景识别图的拍摄和处理，这里给出一些规范：
如何进行识别图的拍摄？ 1、尽量保证拍摄的照片画面中只有需要识别的图像本身，排除周围运动物体的干扰（比如车辆，动物，行人等)，保证识别图主体不被遮挡和影响。
2、保持被拍摄图像正对着放置在拍摄设备下，拍摄的时候尽可能拍摄正面的识别图。但是，在现实生活中基本不可能完全拍摄到平整的识别图。所以如上图所示，我们拍摄到现场的照片后，需要对照片的关键部分进行处理操作，得到平整的识别图。
3、搭建一个良好的拍摄环境，能让拍摄出来的图样更加清晰自然：这里意味着，请尽量在天气晴朗的白天就行采集；
4、避免极端天气下采集识别图，采集到的图像与实际体验时的状态会相差较大，影响识别
如何处理拍摄好的识别图？ 1、将拍摄的图片进行透视变换，处理为正面；
2、裁掉识别对象以外的干扰画面，只保留主体部分
更多有关识别图的规范请参考：Kivicube《用户文档》
二、场景创建与制作
（一）登录&注册
前往AR在线制作平台Kivicube（www.kivicube.com），点击「立即制作」，登录或注册，随后进入编辑器页面。
（二）创建合辑与场景
在创建场景之前，我们需要先创建对应类型的合辑。点击新建合辑，类型选择为「世界AR」，点击保存。
紧接着，打开刚刚新建的合辑，新建「世界AR」场景
在所属合辑中选择对应的「世界AR」类型合辑，自定义设置场景名称
上传素材包中的识别图，选择场景放置方式为「基于图像的定位」
（三）导入模型与调整布局
场景创建完成后，我们需导入以下模型素材并拖入场景内。
导入素材：飞行logo模型、mask遮罩模型、玻璃破碎模型
接下来，我们需对模型进行位置和大小的调整。为方便查看场景结构和所有素材，我们可以在右侧栏进行切换选择。
首先选中“mask遮罩模型”，打开「遮罩」
然后将3个模型的布局参数设置如下：
可使用「复制」功能，对它们进行快速编辑哟~
为了更好的模型视觉效果，我们可对场景的环境贴图和灯光进行设置。点击顶部「灯光」，上传素材包中的HDR文件，光照强度可自行调整。
目前平台还不支持自动保存，为了不丢失进度，请及时手动保存～
三、交互设置
为了让本场景拥有更有趣的交互功能，我们需要对素材进行「模型控制」。在操作之前，我们先来梳理一下体验流程：
1.扫描现场来福士墙面出现次元大门，玻璃破碎后飞出Kivicube的logo模型。
2.用户点击次元大门，logo模型会下降，播放模块重组的动画。
3.最后Kivicube的logo模型会悬浮在水面上，播放待机循环动画。
基于上述流程与逻辑顺序，我们需要对素材中的“玻璃破碎模型”和“飞行logo模型”进行动画交互设计
在左侧功能栏中，选择「模型控制」，请严格按照以下步骤进行设置：
1.“扫描识别到”时，设置“玻璃破碎模型”和“飞行logo模型”动画，如下图所示。
为方便在场景结构中区分这些交互设置，我们可以修改功能名称。
2.“玻璃破碎模型”在“start”动画停止时，设置如下图所示。
3.“玻璃破碎模型”在“被点击”时，设置如下图所示。
4.“飞行logo模型”的第二段循环动画的设置，如下图所示。
四、AR设置
「世界AR」场景还有一个重要的功能点为：场景所用的识别图可以根据现实中真实物体1:1大小还原。所以大家可以根据需求，自定义调整识别图的物理尺寸，从而实现与现实中真实场景物理大小一致。
在本场景中，我们设置识别图的宽度为3米。
五、保存与分享
场景创建完成并保存后，点击右上角「分享」按钮，可以进行分享设置，上传素材包中的分享图。
至此，本次「世界AR」案例全部制作完成，扫描二维码或点击链接，就可以在网页或小程序端进行体验啦，赶紧分享给朋友吧！
需要注意的是，用户在基于真实世界制作「世界AR」场景时，一定要契合现实世界的位置，调整对应素材的大小、位置和角度，才能最终达到满意的效果哦~
点击场景卡片还可以进行预览、设置开发与接入等。
如果有去水印、高级API接入、个性化定制等需求的同学，可以添加微信kiviman72了解，也可以阅读《用户文档》，获取更多信息。
同时也欢迎大家来免费注册使用Kivicube平台（www.kivicube.com），使用低代码编辑器快速创建出专属于你的AR场景。