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场景。

相关推荐
qq_364371721 小时前
Vue 内置组件 keep-alive 中 LRU 缓存淘汰策略和实现
前端·vue.js·缓存
y先森2 小时前
CSS3中的弹性布局之侧轴的对齐方式
前端·css·css3
y先森7 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy7 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189117 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿8 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡9 小时前
commitlint校验git提交信息
前端
虾球xz10 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇10 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒10 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript