不懂編程也能做AR程序
可能一聽到要做AR程序，很多人都會(huì)想到這是程序員的事。如果不懂編程，不會(huì)寫代碼，是做不了AR程序的。其實(shí)，Vuforia的Unity SDK非常人性化，即使你不會(huì)編程，也能做出簡(jiǎn)單的AR程序。只要按著這篇教程一步一步來(lái)，你就能做出一個(gè)簡(jiǎn)單的識(shí)圖AR App。
在開始做AR App之前，你需要準(zhǔn)備好制作工具，磨刀不誤砍柴工嘛。由于本篇教程是生成在iOS平臺(tái)，所以選擇的操作系統(tǒng)是Mac OS，然后需要下載Unity和Xcode。如果你是想做Android程序，在Windows上用Unity可以直接生成APK包。做一個(gè)簡(jiǎn)單的識(shí)圖AR需要的大致步驟分為這樣幾步：
登錄Vuforia官網(wǎng)，注冊(cè)開發(fā)者賬號(hào)
在Vuforia的開發(fā)者平臺(tái)中，創(chuàng)建AR App的license Key
在對(duì)象數(shù)據(jù)庫(kù)中上傳你需要識(shí)別的圖像，下載圖片SDk
下載Vuforia的Unity SDK，將Unity SDK導(dǎo)入到Unity中
將圖片SDK導(dǎo)入U(xiǎn)nity中，拖入Vuforia預(yù)設(shè)體，導(dǎo)入模型，進(jìn)行一系列參數(shù)設(shè)置
用Unity生成Xcode工程，再用Xcode編譯鏈接，在iOS設(shè)備上運(yùn)行；或者在Windows平臺(tái)上，直接用Unity生成APK包。
在這里，我采用的圖片是這張Unity社區(qū)中很有名的Unity Chan，
然后人物模型也是采用Unity Chan，可以在Unity的Asset Store下載，地址是https://www.assetstore.unity3d.com/en/#!/content/18705。下載后將模型的Unity Package導(dǎo)入到Unity中。
可以看到這些步驟不需要你寫一行代碼，就是一些簡(jiǎn)單的拖拽和點(diǎn)擊。在設(shè)備上運(yùn)行的時(shí)候，App會(huì)自動(dòng)打開你的攝像頭，然后將攝像頭對(duì)著之前已經(jīng)打印好的識(shí)別圖像，你的攝像頭取景屏幕上就會(huì)出現(xiàn)Unity Chan模型和打印圖像相互疊加的AR景象。好了，下面我就一步一步進(jìn)行講解，帶著你不寫一行代碼做出神奇的AR App。
注冊(cè)開發(fā)者賬號(hào)
在使用任何Vuforia SDK之前，你首先要做的是注冊(cè)Vuforia開發(fā)者賬號(hào)，有了賬號(hào)之后你才能有對(duì)象數(shù)據(jù)庫(kù)、才能下載SDK。進(jìn)入Vuforia官網(wǎng)（https://www.vuforia.com），點(diǎn)擊頂部的“Dev Portal”，進(jìn)入開發(fā)者平臺(tái)，
進(jìn)入之后點(diǎn)擊右上角的Register進(jìn)行賬號(hào)注冊(cè)，
創(chuàng)建App license，創(chuàng)建對(duì)象數(shù)據(jù)庫(kù)
注冊(cè)好開發(fā)者賬號(hào)之后，在開發(fā)者界面中點(diǎn)擊“Develop”，
之后會(huì)進(jìn)入開發(fā)者界面，會(huì)有兩個(gè)主要的選項(xiàng)：
- License Manager：這是App的License管理界面，因?yàn)閂uforia對(duì)每個(gè)App都會(huì)有一個(gè)唯一的License Key，在Unity的設(shè)置中需要輸入這個(gè)長(zhǎng)串的Key，才能開啟Vuforia的識(shí)別功能。點(diǎn)擊“Get Development Key”獲取免費(fèi)的開發(fā)license，用免費(fèi)的key的話程序左下方會(huì)一直有Vuforia的水印，而且一些功能會(huì)有些限制，但是用來(lái)學(xué)習(xí)足夠了;
- Target Manager：這是對(duì)象數(shù)據(jù)庫(kù)管理界面，每個(gè)數(shù)據(jù)庫(kù)中可以上傳需要識(shí)別的圖片。點(diǎn)擊“Add Database”，會(huì)彈出一個(gè)界面，輸入這個(gè)數(shù)據(jù)庫(kù)的名字和類型。數(shù)據(jù)庫(kù)類型一共有三種：Device（設(shè)備識(shí)別），Cloud（云端識(shí)別），VuMark（條形碼）。這里我們將數(shù)據(jù)庫(kù)名字取為“AR_Test”，類型選擇“Device”；
上傳識(shí)別圖像，下載圖像SDK
點(diǎn)擊創(chuàng)建好的數(shù)據(jù)庫(kù)，進(jìn)入之后點(diǎn)擊“Add Target”添加圖片對(duì)象，
之后會(huì)彈出圖片上傳界面，上傳需要進(jìn)行掃描識(shí)別的圖片
Type：這里選擇Single Image，因?yàn)橹皇且粋€(gè)簡(jiǎn)單的圖片識(shí)別；
File：中從電腦本地中選擇識(shí)別圖片，這里選擇之前的Unity Chan圖片；
Width：輸入識(shí)別圖片的寬度。這個(gè)是為了建立Unity場(chǎng)景中的單位長(zhǎng)度，場(chǎng)景中所有其他物體的大小是以這個(gè)值為參照建立的。Vuforia中的單位長(zhǎng)度是以米來(lái)計(jì)算。輸入之后，圖片的高度會(huì)以這個(gè)寬度來(lái)自動(dòng)計(jì)算。這個(gè)值可以是任意的，但是最好比Camera的Near Clip值要大，不然在鏡頭靠近時(shí)你可能會(huì)看不到相關(guān)內(nèi)容。這里輸入為1；
Name：識(shí)別圖的名字。這個(gè)很重要，每張識(shí)別圖對(duì)象都有一個(gè)唯一的名字，而且Vuforia可以同時(shí)識(shí)別多張不同的圖片，因此如果以后要用代碼來(lái)控制選擇是哪個(gè)對(duì)象的話，就是用這個(gè)名字來(lái)查找是哪張識(shí)別圖，所以最好取一個(gè)能方便認(rèn)識(shí)的名字。這里就輸入”Unity_Chan“。
全部信息填完之后，點(diǎn)擊”Add“就能將識(shí)別圖上傳到對(duì)象數(shù)據(jù)庫(kù)，之后就能在對(duì)象管理界面中看到已經(jīng)上傳成功的識(shí)別圖，這里要注意的是”Rating“的星星數(shù)量，這個(gè)是對(duì)圖像識(shí)別度的評(píng)級(jí)，滿分是5顆星，一般來(lái)說(shuō)最低要有3顆星才能被準(zhǔn)確識(shí)別。所以上傳圖片的時(shí)候Rating要保證在3顆星以上。然后勾選住最左邊的checkbox，點(diǎn)擊上方的”Download Database“按鈕，在彈出的界面中選擇Unity Editor，下載圖片的Unity Package。雙擊這個(gè)Package將圖片SDK導(dǎo)入到Unity中。將對(duì)象數(shù)據(jù)庫(kù)導(dǎo)入到Unity中需要注意的是，一定要保證Editor/Vuforia/ImageTargetTextures中的文件被拷貝進(jìn)Unity中，這是后面將要導(dǎo)入到Unity中ImageTarget的紋理。
下載Vuforia Unity SDK，進(jìn)行工程設(shè)置
之后就需要下載Vuforia的Unity SDK，在開發(fā)者平臺(tái)的Download界面下載最新的Unity SDK，這里最新的版本號(hào)是6-2-10。下載完成之后，雙擊SDK的Package，將Vuforia SDK導(dǎo)入到Unity中。導(dǎo)入之后會(huì)在Unity的Project面板中出現(xiàn)Vuforia的相關(guān)文件夾，如下圖所示，這其中也包含了之前導(dǎo)入的圖片SDK相關(guān)文件：
Editor：包含了在Unity編輯器中與對(duì)象進(jìn)行互動(dòng)控制的腳本；
Plugins：包含了Java和iOS的原生庫(kù)，用來(lái)將Vuforia集成到Android和iOS平臺(tái)上；
Vuforia：包含了用來(lái)實(shí)現(xiàn)增強(qiáng)現(xiàn)實(shí)功能的預(yù)設(shè)體和代碼腳本；
StreamingAssets：包含了之前從Target Manager中下載的關(guān)于對(duì)象數(shù)據(jù)庫(kù)的XML配置文件和DAT文件。
打開其中的Prefabs文件夾，將ARCamera預(yù)設(shè)體拖入到Unity場(chǎng)景中，并且將場(chǎng)景中之前默認(rèn)的Main Camera刪除掉。ARCamera負(fù)責(zé)渲染攝像頭的取景，以及追蹤識(shí)別圖像對(duì)象。然后將Prefabs文件夾中的ImageTarget預(yù)設(shè)體也拖入到Unity場(chǎng)景中，ImageTarget就是專門用于圖像識(shí)別之用的。
之后就進(jìn)行以下步驟的設(shè)置：
- 選中被拖入場(chǎng)景中的ARCamera，在其屬性面板中點(diǎn)擊”O(jiān)pen Vuforia Configuration“，進(jìn)行Vuforia的設(shè)置：
- 在“App License Key”中，將之前申請(qǐng)的App license復(fù)制到輸入框中
- 在Datasets中將之前導(dǎo)入的識(shí)別圖片對(duì)象勾選上。其他設(shè)置采用默認(rèn)參數(shù)（我將會(huì)在下一篇教程中詳細(xì)講解這些另外參數(shù)的作用，這里先一筆帶過(guò)）；
- 然后選中場(chǎng)景中的ImageTarget，在其屬性面板中將“Database”和“Image Target”分別選為之前設(shè)置好的數(shù)據(jù)庫(kù)和圖片對(duì)象，注意這里的“Image Target”中顯示的是之前在上傳圖片時(shí)填入的識(shí)別圖片的名字，Unity中就是靠這個(gè)名字來(lái)區(qū)分單個(gè)圖片對(duì)象的。原先場(chǎng)景中的ImageTarget是個(gè)灰色的平面，這是識(shí)別圖片對(duì)象的占位符，當(dāng)你在這里勾選上相應(yīng)的圖片對(duì)象之后，這個(gè)占位符會(huì)選擇StreamingAssets文件夾中相應(yīng)的datasets，這樣這個(gè)ImageTarget就會(huì)按照datasets中圖片的大小和形狀來(lái)作為其紋理。其他設(shè)置采用默認(rèn)參數(shù)。
- 將之前下載好的Unity Chan的模型拖入到場(chǎng)景中，作為ImageTarget的子物體，調(diào)整模型的position和scale，使其能和ImageTarget的大小很相配，看起來(lái)Unity Chan仿佛站在圖片上一樣。
- 現(xiàn)在工程設(shè)置就已經(jīng)全部完成了，到目前為止沒(méi)有寫一行代碼?，F(xiàn)在你可以在Unity中直接點(diǎn)擊Play運(yùn)行測(cè)試，Vuforia會(huì)自動(dòng)調(diào)用電腦的攝像頭。如果攝像頭沒(méi)有調(diào)用，在ARCamera的屬性面板中，WebCam選項(xiàng)中選擇對(duì)應(yīng)的攝像頭，需要注意的是不要勾選Disable Vuforia Play Mode，這樣會(huì)禁止在Unity Editor中進(jìn)行測(cè)試。
然后將之前打印好的識(shí)別圖像移動(dòng)到攝像頭前，神奇的事情發(fā)生了，Unity Chan就赫然站在識(shí)別圖上了，而且會(huì)隨著識(shí)別圖方位的改變而轉(zhuǎn)動(dòng)。這時(shí)你會(huì)驚嘆，做AR就是這么簡(jiǎn)單！
將AR搬上手機(jī)
但是你也不能抱著一個(gè)電腦筆記本給別人演示AR程序吧。接下來(lái)我們就將已經(jīng)制作好的AR程序搬運(yùn)到移動(dòng)設(shè)備上去，這里采用的設(shè)備是iPhone手機(jī)。點(diǎn)擊Unity主目錄中的File--Build Settings，將當(dāng)前的Unity場(chǎng)景添加到“Scenes In Build”中，然后“Platform”中選擇iOS，再點(diǎn)擊Build And Run，會(huì)生成Xcode工程。
連上iPhone，編譯鏈接，將程序拷到手機(jī)中。之后，拿著你的手機(jī)向你的家人朋友炫耀吧，看，這是我做的神奇AR App！
到這里，你應(yīng)該學(xué)會(huì)了不寫一行代碼就能做出AR程序，也知道AR是個(gè)什么概念了。但這只是一個(gè)簡(jiǎn)單的Demo，雖說(shuō)沒(méi)有寫一行代碼就做出來(lái)了，但是你也看出功能太簡(jiǎn)單了點(diǎn)。如果想要做出更加酷炫的AR程序，還是要會(huì)一些編程（用Unity開發(fā)的話主要是c#）。同時(shí)，AR也是要看展示效果的，因此模型方面也要精美。所以說(shuō)AR程序是個(gè)需要精湛技術(shù)的藝術(shù)品。發(fā)揮你的工匠精神吧！
下面這段視頻是筆者加了一些控制代碼的效果，點(diǎn)擊按鈕可以與模型進(jìn)行簡(jiǎn)單的互動(dòng)。
點(diǎn)擊觀看AR Demo
視頻地址：http://v.youku.com/v_show/id_XMzAzNjg1OTY2MA==.html?spm=a2h3j.8428770.3416059.1
