在论坛上看到大家对于 colAR Mix 这款增强现实应用是如何实现的很感兴趣。我就从我理解的角度为大家浅析一下。 大家对增强现实的实现原理一定不陌生,利用算法定位环境或物料。这是技术基础,想要将虚拟信息叠加到现实环境或物体上少不了这步。然后我们会试图用许多方式来增强物料与叠加信息的联系,这部分属于交互。比如,视频的第一帧与物料相同,给物体添加阴影,从物料中钻出来等等。再则就是从环境与物料中获取信息与虚拟信息产生交互,比如识别手势。colAR Mix 就属于从物料中提取信息。下面我们就来看看如何实现这一效果吧。
基础知识
纹理坐标与贴图
盗来一张图来简单说明一下,3D 模型在制作贴图的时候都需要将模型展开到平面,在平面上模型每个顶点所对应的坐标就是纹理坐标了。而纹理贴图就是给这个平面上完颜色画完画所生成的图片。那么问题来了,模型展开到平面后样子是不是一定会很纠结呢?答案是纹理坐标是可以调整的,而且在各类 3D 建模软件中展开的方式有许多种。所以 colAR Mix 中得物料图很可能就是物料图片。
Camera-target-patch
翻译过来不知道是不是叫相机物料遮罩,但目的就是想使用相机捕获的画面来做为纹理。这个方法在 AR 中使用的还是很普遍的,比如 Taggar 中的水波纹效果,《东京新闻》中的翻转效果等等。在 vuforia 上翻了翻,以前有一篇文章专门讲这个技术的实现的,现在文章的链接断了看不了,所以只能通过网上零零碎碎的信息弄了。
制作模型
我这里做模型使用了 Blender,这是一款免费的软件,国外用的人比较多。
关于 Blender 的基本操作大家可以到 Youtube 上找视频来看。上图中一个是物体的编辑界面,一个是纹理坐标的编辑界面。为了简单我这边只展开了三个面,并改变成了右面的样子。最后将模型导出成 fbx 文件。
为了不弄错顶点相对应的位置,我弄了一张贴图做测试。这里应该有更方便的方法,不过我 3D 设计没怎么做过,所以只能用笨办法了。
物料制作
由于我们的立方体实在是太简单了(colAR 中的填色图片复杂度足够),如果直接把它作为物料图的话一定识别不了,所以我为它增加了一张图片。
Unity 配置
将我们制作的 fbx 模型导入 Unity 工程,可以把它的 Material 改为 Diffuse,然后把贴图换成我们的物料图试试,看看是否正确。除了我们的模型之外我们还要添加一个透明的平面来标记物料图在哪里,我们将它设置成位置大小与物料图一样。最后的配置如下图。
代码
首先我们修改一下 vuforia 官网上 CameraImageAccess 的代码
========
这里是代码,特喵的复制不过来
========
其中 mPlane 使用配置中的 Quad。这个脚本的作用是获取相机捕捉到的图片并把它作为纹理传给我们的着色器。而我们需要的纹理并不是整个相机捕捉到得画面,所以我们需要用一个 shader 来计算真正的纹理坐标从而获取到正确的纹理。
========
这里是Shader "Custom/CameraTargetPatch"
========
创建一个 material ,将 shader 应用到上面。最后把脚本和 material 都使用到我们的 Cube 上运行代码,看看效果是不是很棒~。