最近在用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场景。