150行JavaScript代码实现增强现实

增强现实技术（Augmented Reality，简称 AR），是一种实时地计算摄影机影像的位置及角度并加上相应图像、视频、3D模型的技术，这种技术的目标是在屏幕上把虚拟世界套在现实世界并进行互动。这种技术1990年提出。随着随身电子产品CPU运算能力的提升，预期增强现实的用途将会越来越广。

本文介绍使用JavaScript开源框架AR.js实现的增强现实的Hello World例子。

先看效果：

首先在手机浏览器里打开我部署在github page上的这个demo应用：

https://i042416.github.io/FioriODataTestTool2014/WebContent/098_ar.html

我用的是Android手机安装的Chrome浏览器。

打开网页，会提示你是否允许这个网页应用访问您的手机摄像头。点击允许：

用手机上的摄像头扫描这张图片：

神奇的事情就发生了。您会看到，通过手机摄像头望过去，手机屏幕里会出现一个新的不断滚动的3D物体，如下图所示。

下面具体介绍这个最简单的例子是怎么开发出来的。

所有的源代码在我的github上：

https://github.com/i042416/FioriODataTestTool2014/tree/master/WebContent/ar

新建一个html文件，把下列150行代码粘贴进去，然后在服务器上运行，使用之前描述的步骤即可进行AR测试：

当然，这个效果来自大神jeromeetienne开源的AR.js:

https://github.com/jeromeetienne/AR.js/

当然大神自己也很谦虚地提到，他这个开源的增强现实框架也是建立在巨人的肩膀上开发的：比如其中3D效果的绘制，使用到了另一个开源框架three.js:

要获取更多Jerry的原创文章，请关注公众号"汪子熙":