翻译:增强现实的新手指南

 

英语水平好的请看原文:http://active.tutsplus.com/tutorials/3d/beginners-guide-to-augmented-reality/

增强现实的新手指南
      Jonathan Reid 发表于2010 816
 
辅助信息
难度:新手
程序:Flash
大约完成时间:12小时
 
 
增强现实最近经常被提起,特别是在AR基础上的Flash。我会引导你去创建一些简单且简洁的应用, 你可以把这些应用放到你自己的个人网站上。
 
介绍:增强现实Augmented Reality
 
增强现实被评为2010年最热的趋势之一。这背后的原因很简单,跨越了物理世界,用炫目的图案出现且占据你所在的空间。
 
很多伙伴已经把它作业一个强大的促销工具。 Adidas 最近已经把这应用到 它们的鞋子  并且制作了一个很炫目的游戏。
 
 
 
Lego(译者语:乐高,一家有名的玩具公司) 把增强现实当作一个知道当他们的产品制作好时会成什么样的途径。
 
 
 
 source: http://www.virtualworldlets.net/Worlds/Listings/AugmentedReality/Lego.jpg
 
 一些自由作家把它当作 一个很酷的名片和促销工具AR让你在没有成本的情况下建立一个印象更深刻的名片并且你能配设更多信息在里面。
 
source: http://jamesalliban.wordpress.com/2009/06/03/ar-business-card/
 
今天的一月份,我完成了一个大学的项目,项目的内容是我要建立一个可穿戴的增强现实系统。它以的一个真正画廊为特色,当您环绕走动时,讲述一个非常悲惨的故事。 
 source: http://kablamo.co.uk
 
 
我从一个设计师的观点接近创造AR,并且只是知道很少AS3代码。我在这里将与你分享我所学到的,而我也知道对于初学者来说,学习这个课题的很多东西都是困难的。这只是一个怎么从头开始的问题。
现在,我确定你有很多关于事物要怎么创造的想法。让我们建创你的第一个增强现实项目:增加深度到一张平的纸。
 
介绍:flARToolkit
 
flARToolkit C-coded 增强现实的FLASH版本,广泛而简单的认知为ARToolkit。它被一个相当相当有技术的日本编码员修改成著名的 saqoosha. 他用增强现实做各种疯狂的东西,如果您可以阅读日语或者准备通过大量在翻译时仅仅有道理的公告去涉及,这样你可以从他身上学到很多。他创造了臭名昭著的 '墙洞' 影响——演示在他用来欢迎2009 新年庆祝活动项目。
 
 source: http://vimeo.com/2734815
 
 
更近期,他已经演示了你可以 连接各种各样的标 r在一起以及其它精彩极了的,而我只是曾经梦想过创建的效果。
 source: http://vimeo.com/6262632
 
 
1: 获取到源(Getting to the source
 
Squidder.com 修正了一个现存的flARTookit库,flARManager类,以至于可以控制事件和多样的对象。更有趣的是他们发布他们的源码而且一个所谓的“怎么样”但是从来没有实在地解释他们自己的编码。我花了一些时间来找出如何获取所有可能不同的多个对象。我想指出,现在,我首先是一个设计师和想要用编码造成的疯狂的事情。我接触这个,最终想要的结果是工作而不是关心最佳方法进行编码的事情。
 
让我们从原主题上a 下载发布的编码,然后看一看这些编码。
 
下载一个叫做"flarsquidderki.zip"的文件,解压.ZIP文件打开根目录.NOTE。如果你不解压.ZIP文件,你是不能正确地打开.SWF文件或者编辑你的需要。所以,只要你做了,你会看到三个重要的文件夹:deploy,flasrc. 你也会看到一个叫做“flardrums.pdf”的文件。
 
source: My hard drive
 
2步,游戏时间(Play time)
现在我们有我们的标记,打印出来了,这样我们可以测试一下,看看源码是如何正确工作的。
 
打开deploy文件夹并且打开打开MultiFLARExample.swf。允许网络摄像头并开始玩标记。
 
source: My parents front room
 
在他们创建的录像调节,你用你的手独个儿通过每一个标记,看看他们是如何发出的声音当他们消失的时。这是由squidder写的。他们增加了两个事件, MARKER_ADDED MARKER_REMOVED我们将在后面探讨怎么使用这事事件。
 
现在你知道它是如何一回事,让我们开始认真地修改他们的源代码来执行一些我们自己的很酷的事情。
 
3步:还有一些要做的编码(There is coding to do
 
对于本教程,我假设你有AS3和类表的基本知识。
 
打开\ FLA\文件夹,然后双击multiFLARExample.fla在属性面板,您应该看到用MultiFLARExample填补的类框。你会想点击类框旁边的铅笔盒图标,以便我们能够开始看代码。
 
source: Flash
 
4步:MultiFLARExample
 
马上你会看到通常在顶部和底部的进口代码,为光源的一些基本变量。
 
接下来是有趣一部分,加载在标记上面的编码。正如你可以看到,标记被加载到一个数组,他们在后面可以很容易地被调用。注意到他们的加载顺序。数组中的第一个标记获取到的ID0,其次是1,如此类推。我们将在往后使用到这些ID
 
source: Flash
 
也要看到秘密的函数 _addCube _getFlatMaterial ,因为这些是我们今天将重点编辑的其他的两个部分。他们完美地自我解释了他们做了什么,但他们奇怪地成立了。到简单地获取同样的对像在多种颜色中已经被编码,而不是许多的不同的目标,所以我们必须作出一些变动。
 
 
5步:Ch-Ch-Changes
 
好吧,让我们改动一些代码。让我们改变它至一个更可用的状态,但现在我们会保持看上去一样。当我盘算出这一切, 这是一个奇怪的发现在最后所有的会下至is语句的结束。当谈到编码的东西时,If (statements)语句是这么神奇和有用的。
 
_addCube 函数替换此代码:

  1. var cube : Cube = new Cube( new MaterialsList( {all: fmat} ) , 40 , 40 , 40 );
  2. cube.z = 20;
  3. dispObj.addChild( cube );

 
用下面的代码
 

  1. if (id==0){
  2. var cube : Cube = new Cube( new MaterialsList( {all: fmat} ) , 40 , 40 , 40 );
  3. cube.z = 60;
  4. dispObj.addChild( cube );
  5. } else if(id==1){
  6. var cube2 : Cube = new Cube( new MaterialsList( {all: fmat} ) , 40 , 40 , 40 );
  7. cube2.z = 0;
  8. dispObj.addChild( cube2 );
  9. } else if (id==2) {
  10. var cube3 : Cube = new Cube( new MaterialsList( {all: fmat} ) , 40 , 40 , 40 );
  11. cube3.z = 20;
  12. dispObj.addChild( cube3 );
  13. } else if (id==3){
  14. var cube4 : Cube = new Cube( new MaterialsList( {all: fmat} ) , 40 , 40 , 40 );
  15. cube4.z = 40;
  16. dispObj.addChild( cube4 );
  17. }

 
6步:测试影片(Test the movie)
 
现在,这看起来似乎是一个令人费解的处理cubes的方式,但它使我们能够处理每个独立的cube(立方体)例如,在上面的代码中,我已经改变了立方体的Z轴,以证明代码现在掌控作为自己对象的每个立方体让我们测试影片,你应该有类似的效应:
source: My parents front room
 
7步:解释(Explanation)
 
在继续之前,让我解释一下你刚放进去的编码。它很直接明了,如果你之前已经使用过papervision3D,你可以跳过这一部分。
 

  1. var cube : Cube = new Cube( new MaterialsList( {all: fmat} ) , 40 , 40 , 40 );

 
在这里,我们创建一个新的变量,cube这个变量包含了呈现一个cube 决定cube外貌的所有的所需信息。MaterialsList 部分指的是用在cube外面的材料。正如我们希望每一个面都是用相同的材料以及材料是给前面创建的一个变量所控制的,我们使用allfmat}之后,我将讨论更多关于fmat变量。最后,三个40's,这些都是立方体的维数,宽度,高度和深度。当然,他们不需要都设置成一样即使是一个立方体cube如果你想的话,你还可以使用cube 方法来创建长方体形状。
 

  1. cube.z = 20;

 
这个是设置立方体的Z值。这是立方体立在标记上多高。0是立方体中心线,这么设置一半形状的高度,意味着它正立在标记的顶部。
 

  1. dispObj.addChild( cube );

 
dispObj 指的是一个以前代码创建的显示对象。显示对象会使你的对象在屏幕上。你可以加载许多你想要的形状在一个显示对象里面,因此现在我们将加载我们所有的形状到里面去。
 
现在你知道他是如何工作的,让我们继续编辑代码。你真的不需要 _getFlatShadeMaterial 函数,让我们把它编辑到一起。这样做也使我们能够给各个对象一个不同的材料。
 
8步:拉在一起(Pulling it Together
 
在你的编码中找到这一行:
  source: Flash
 
 我们现在要编辑 fmat 变量以致于代替调用函数,它将调用一个新的flatShadeMaterial我们用来指定颜色。稍后我会处理包括(bitmap)位图材料在内的其他材料。
 
用下面的,替换 _getFlatMaterialid
 

  1. newFlatShadeMaterial( _lightPoint ,0xff22aa,0x75104e);

 
这三个参数设置flatShadeMaterial lightsource(光源),该单面的颜色,也是阴影的颜色。这样做会使我们的对象有个更真实的效果,因为我们把在物理空间改变了方向和旋转。
 
 
现在,在下面的一行里,我们将要添加:
 

  1. var fmat2 : FlatShadeMaterial = new FlatShadeMaterial( _lightPoint , 0x00ff00 , 0x113311 );
  2. var fmat3 : FlatShadeMaterial = new FlatShadeMaterial( _lightPoint , 0x0000ff , 0x111133 );
  3. var fmat4 : FlatShadeMaterial = new FlatShadeMaterial( _lightPoint , 0x777777 , 0x111111 );

 
现在我们已经为每一个对象创建了一个变量,我们将要更改早前我给你的的立方体代码。不只是仅有 fmat 作为所有立方体的材料,你会希望将更改 fmatfmat2fmat3 fmat4 ,使我们的立方体每一个都显得不一样。
 
当你这样做,你现在终于可以去除 _getFlatMaterial 函数。
删除下面代码:
 

  1. private function _getFlatMaterial( id:int ) : FlatShadeMaterial {
  2. if ( id == 0 ) {
  3. return new FlatShadeMaterial( _lightPoint , 0xff22aa , 0x75104e );
  4. } else if ( id == 1 ){
  5. return new FlatShadeMaterial( _lightPoint , 0x00ff00 , 0x113311 );
  6. } else if ( id == 2 ) {
  7. return new FlatShadeMaterial( _lightPoint , 0x0000ff , 0x111133 );
  8. } else {
  9. return new FlatShadeMaterial( _lightPoint , 0x777777 , 0x111111 );
  10. }
  11. }

 
 
 
9步:再次测试影片(Test the movie again)
 
 现在让我们再次测试。如果一切操作正确,应该是看起来相同的。是这个成绩吗?
 source: My parents front room
 
它看起来可能不是很像,但我们刚刚建立了创建不同外貌对象的基础。
 
10步:材料(Metrials)
 
好吧,让我们继续一点有用的东西,位图的材料。大多数人会想把他们自己的照片投入AR作为一个炫目的方式来展示他们的作品,这是通过使用图像作为一种材料实现的。
 
这极其简单。我已经创建了下面的图像供你使用,接下来我会告诉你如何通过网络连接使用位图材料。
 source: Photoshop
 
首先,你需要引进BitmapFileMaterial 类,在你的编码表单顶部(包含着其它引入的类的地方),增加下面一行:
 

  1. import org.papervision3d.materials.BitmapFileMaterial;

 
然后如下改变你的fmat 材料:
 

  1. var fmat : BitmapFileMaterial = new BitmapFileMaterial("http://kablamo.co.uk/artutorial/kcube1.jpg");

 
现在,让我们测试它,它看起来应该是这样的:
 source: My parents front room
 
多么简单啊,不是吗?
 
 
11步:制作洞(Making it Hole
 
现在,我已经向你展示了如何在一个坐标记上创建一个立方体,让我们创建一个坐落在标记的下面的立方体,以实现创造一个墙洞中的效果。
 
这种效果是saqoosha最先想到和实现的。不幸的是,他是用日语解释的并且为了papervision3d而不是使用flARToolkit,做了一些变动。
 
你需要输入这两个类:
 

  1. import flash.geom.ColorTransform;
  2. import flash.filters.*;

 
用其它的私有变量在_lightpoint 下面增加这行:
 

  1. private var _green:Cube;

 
然后在var dispObj : DisplayObject3D = new DisplayObject3D();下面增加下面内容:

  1. this.viewport.filters = [
  2. 1, 0, 0, 0, 0,
  3. 0, 1, 0, 0, 0,
  4. 0, 0, 1, 0, 0,
  5. 1, -1, 1, 1, 0
  6. ])
  7. ];

 
本质上,这里的情况是你将有两个立方体,一个是绿色的,而另一个形成内部视图。他们将建立在另一个的里面。视口过滤器将遮住特定的绿色颜色,而这正是我们为外面立方体设置的,给予其大意是在标记上有一个洞。
 
现在我们将创建两个立方体。
 
删除现有的立方体代码,用下面的替换它:
 

  1. var hole:Cube = dispObj.addChild(new Cube(new MaterialsList(
  2. {all:new BitmapFileMaterial( "assets/hole.jpg" ), bottom: new BitmapFileMaterial( "assets/k.jpg" )}
  3. ), 80, 80,80,1,1,1, Cube.ALL,Cube.TOP)) as Cube;
  4.  
  5. this._green = dispObj.addChild(new Cube(new MaterialsList({all: new ColorMaterial(0x00ff00)}), 80, 80,80, 1, 1, 1, Cube.TOP)) as Cube;
  6. hole.rotationX = this._green.rotationX =90;
  7. hole.z = this._green.z = -40;

 
注意,为了增加材料,我们从总文件夹中放入两个.jpg文件。这个文件夹位于主部署文件夹里面,文件MultiFLARExample.swf所在的地方。可以下载下面我做好的图像也可以用你自己做的。
 
 

source: Photoshop
 
source: Photoshop

 
 
12步:测试洞(Test the hole)
 
测试,你的看起来应该是这样的:
 source: My parents front room
 
13步:制作标记(Making Markers
 
现在,你可能厌倦了拿着了一张有着四个标记到摄像头的烂纸。你想拥有属于自己的标记,所以让我们做一个吧。用一些网络工具和Photoshop,你可以在几分钟内拥有自己的标记。
 
首先,做你的标记。您不必使用你目前使用的条码一样设计的标记,但是,如果你要使用的大量的标记,条码是最好的方式。如果你正在使用一个或两个,那么随便自由的设计吧。对于我的标志设计,我使用我的网站的徽标——K
 source: My parents front room
如果你用它来做名片或一些宣传材料,想想如何把标志做得好看一些且更融入设计。
 
为了标记创作,你需要设置你的Photoshop文档。对于一个基本标志,创建一个围绕边界为150像素,大小为800x800px的文件。或者下载下面的图片:
 
source: Photoshop
 
14步:网上标记发生器(Online Marker Generator
 
这中间的白色正方形是放放置你设置的标记的地方。复制标记,然后访问在线标记发生器 
 
他们有一个在线标记生成器,把您的标记生成一个.pat文件以便你的代码工作。很奇怪,他们有一个上传选项,但我从来没有见它的工作过(打印出的作品只是罚款)。还有一个相同功能的AIR应用程序,但现在是罚款。
 
设置标记部分为16 × 16和标记的大小为50%,显示您的标记到你的网络摄像头,当一个红色的正方形周围你的标志时,点击获取图案,如果你对展示出来的预览表示满意的话就点击保存。
 
 source: My parents front room
 
如果你的标记预览看起来很奇怪或红色正方形框不出现,你可能需要重新设计你的标记。您还必须确保你的标志物周围有白色的空间,否则的话Flash将无法识别它。
 
当对话框出现时,不要只是下载到随便一个地方,你必须把.PAT放在一个特定的文件夹中。。导航到你的flARToolkit folder>deploy>assets>flar,而且在那儿你应该还要找到其他4pat文件。在那儿保存你的图案,并记住你的命名。我给我的命名为kmarker.pat
 source: My hard drive
 
15步:更改编码(Alter the Code
 
回到flash, 找到这一行:
 source: Flash
 
接着改变crash.pat 到你所命名的标记的名字:
 source: Flash
 
如果你测试你的Flash文件,你会发现你的新标记把一切都实现地很完美。
 
 source: My parents front room
 
总结
 
感谢您阅读这增强现实的介绍。我希望你喜欢它,它会让对创建你自已的AR项目更加地渴望。在本教程的下一部分,我将介绍如何用TweenMax使对象栩栩如生,使标记能播放一点声音,放入三维模型以至于使一切更漂亮。
 
 
 

 
 
 
 

 

riadevID: 
您给予的分值: None 平均分: 10 ( 3 票)

不错,很酷,AR国内的

不错,很酷,AR国内的应用还不多。
感谢您的翻译。

发表新评论

  • 网页地址和电子邮件地址将会被自动转换为链接。
  • 行和段被自动切分。
  • 您可以使用下面的标签来高亮显示您的评论内容: <code>, <blockcode>. 可以使用"[foo]".旁边显示标签样式 "<foo>" PHP代码可以用这样的区块来包含<?php ... ?> or <% ... %>

更多格式化选项信息

验证区域
系统验证:请回答下面的问题