Skip to main content
ARShow
 首页 » 资源教程

基于Metaio Creator的AR开发原创小白教程(零编程基础也能上手)

2016年08月13日 21:48:5331320

前些日子3D小熊在朋友圈火了几天,看大家玩熊玩的开心就想写个帖子普及一下现实增强技术.这个教程旨于让零编程基础的同学们也能轻松+愉快的开发出现实增强小作品,我是善良的程序猿.

基于Metaio Creator的AR开发原创小白教程(零编程基础也能上手) 资源教程 第1张

\

这张图是大约一个多月前的某个晚上,趁着LOL更新下载的时候利用Metaio Creator随手做的AR小作品.(之后我和老叶开黑输了3盘)

当时放在朋友圈show了一下,看反响还不错,于是坚定了我写这个傻瓜式教程的信念

不过这一个月忙成猴,一直拖到现在

手把手教你做出这张图里的AR效果

首先,我们用的开发工具是造福人类的Metaio公司旗下明星产品: Metaio Creator , 非常好上手的AR开发平台(不可否认Creator目前有很多弊端而且功能也不完善,如果想做专业开发,推荐Metaio SDK,有机会下次出教程)

除了Metaio,目前还有很多比较成熟的AR SDK比如高通. 

但是个人觉得Metaio SDK在性价比、跨平台等方面都有很强的优势,可以在html5 以及Unity结合。

进入正题,首先预备工,先下载一个Metaio Creator

安装好之后双击进入

基于Metaio Creator的AR开发原创小白教程(零编程基础也能上手) 资源教程 第2张

这里会跳出一系列的对话框,有兴趣的同学可以了解下,在这里全叉掉就可以了。

下图是Creator的界面,我加了点标注,大致介绍了一下各个模块的功能(谁说用标签的就是娘炮了?脱下高跟鞋砸死你)

基于Metaio Creator的AR开发原创小白教程(零编程基础也能上手) 资源教程 第3张

STEP 1  添加识别图

在这个项目里,识别图就是下面这张图(无码版会打包给下载连接的,我是红领巾)

基于Metaio Creator的AR开发原创小白教程(零编程基础也能上手) 资源教程 第4张

识别图是什么

简单地讲识别图就是个用来匹配资源的maker

通常来说,整个识别调用的过程是摄像机捕捉图像,在服务器端进行对比,找到相应内容(模型动画等)至客户端,实现AR效果

具体添加识别图的操作方法:

基于Metaio Creator的AR开发原创小白教程(零编程基础也能上手) 资源教程 第5张

点击creator下方这个Trackable,跳出如下对话框

基于Metaio Creator的AR开发原创小白教程(零编程基础也能上手) 资源教程 第6张

选择ImageTracking,选择图片后可以看到识别图已经打开

基于Metaio Creator的AR开发原创小白教程(零编程基础也能上手) 资源教程 第7张

STEP2 添加模型资源

creator支持fbx dae md2 obj这几个模型格式,but 模型贴图貌似只支持jpg和png格式图片。

这里要注意很多模型贴图格式都是DDS,creator不认。我一开始从网上找了很多野模(野生的模型)都是DDS贴图,后来是自己把贴图转换格式成jpg,再在MAYA里重新绑定了一下贴图就OK了

这个工程里用的LOL模型我已经转成dae格式,贴图也重新绑定好了,直接用即可(我是雷锋)

顺便叨叨一下,以前LOL英雄模型貌似C盘了找找好了,现在升级了几次之后不行了

我的LOL英雄模型包是淘宝上5块钱买来的,没错,5块钱买不到上当,5块钱买不到受骗,你什么都买不了,你这个穷B

噢,再烦一句,不要用中文命名模型和贴图,不要用中文命名模型和贴图,不要用中文命名模型和贴图(重要的问题要说三次)

具体添加模型方法:

选择右边resources中的模型选项,就是第一个

基于Metaio Creator的AR开发原创小白教程(零编程基础也能上手) 资源教程 第8张

依次导入5个模型

导入之后的模型周围会有一个框框,框框四周有放大旋转等操作按钮,将模型适当放大,并拖到合适位置

基于Metaio Creator的AR开发原创小白教程(零编程基础也能上手) 资源教程 第9张

模型可能超出识别图边界,问题不大

这里我们用的是2D浏览方式,看到的是一个顶视图(是这么叫的吗?)有部分模型“串”到识别图下方的位置了,不要惊慌,一会儿调整

我比较喜欢换到45度这个浏览方式,特别适合调整位置,点左边这个图标

基于Metaio Creator的AR开发原创小白教程(零编程基础也能上手) 资源教程 第10张

切换浏览方式

基于Metaio Creator的AR开发原创小白教程(零编程基础也能上手) 资源教程 第11张

会发现人物都是这样倒着的,现在使用平移旋转等方式调整模型角度和方位

选中模型,默认操作是平移,出现三个方向的移动标识,用刀妹举个栗子

基于Metaio Creator的AR开发原创小白教程(零编程基础也能上手) 资源教程 第12张

先做旋转,让刀妹模型和识别图保持垂直。选择左边旋转工具

基于Metaio Creator的AR开发原创小白教程(零编程基础也能上手) 资源教程 第13张

基于Metaio Creator的AR开发原创小白教程(零编程基础也能上手) 资源教程 第14张

可以通过拉动模型外围的曲线旋转模型,也可以在选定旋转工具的前提下双击模型,输入旋转参数

基于Metaio Creator的AR开发原创小白教程(零编程基础也能上手) 资源教程 第15张

同样方法,旋转5个模型,并且使用位移工具调整位置

基于Metaio Creator的AR开发原创小白教程(零编程基础也能上手) 资源教程 第16张

做到目前这一步,姿势已摆好,可以使用电脑外接摄像头或者笔记本自带摄像头经行浏览了。

如果没有摄像头不要捉急,下一篇会讲怎么用Metaio Cloud+Junaio直接在手机上调试的,方法不难,就是有点繁琐

STEP 3 Quick Preview

在经行这一步之前可以把识别图导在手机或者PAD上,打印出来最好咯

右下方Quick Preview和Upload to Metaio Cloud分别是电脑摄像头快速浏览和上传服务器经行手机端浏览

基于Metaio Creator的AR开发原创小白教程(零编程基础也能上手) 资源教程 第17张

选择preview,360流氓小卫士跳出来卖个萌

基于Metaio Creator的AR开发原创小白教程(零编程基础也能上手) 资源教程 第18张

允许之

拿出识别图,举起你的土豪金,现在可以看到了

基于Metaio Creator的AR开发原创小白教程(零编程基础也能上手) 资源教程 第19张

是不是SO EASY?

红领巾时间:

本次教程用到的所有材料 百度云分享

里面包括metaio creator 识别图 模型

http://yun.baidu.com/pcloud/album/info?query_uk=2623919721&album_id=1051735673499498286

噹噹噹 下期我们来讲讲,怎么通过Metaio Cloud 来实现手机PAD的浏览(这个做好之后还可以把作品分享给朋友看哦)

更多AR教程就在中国AR网

本文链接:http://www.chinaar.com/ZYJC/885.html


评论列表暂无评论
发表评论