Vuforia開發(fā)完全指南---Image Target，簡單方便的AR圖像識(shí)別

概述

在Vuforia提供的SDK中，最簡單、也是最常見的AR功能就是Image Target---圖像識(shí)別。你只需提供一張可識(shí)別的圖片，將圖片移到設(shè)備的攝像頭下，設(shè)備上就能出現(xiàn)之前已經(jīng)集成進(jìn)去的虛擬場(chǎng)景，而且可以根據(jù)ARCamera的不同模式，讓圖片和虛擬場(chǎng)景的疊加現(xiàn)象有所不同。這篇文章詳細(xì)講解了Vuforia中基于Image Target的AR產(chǎn)品開發(fā)流程，學(xué)完之后你就能開發(fā)出一個(gè)基于圖片的AR App。

演示Demo

這是筆者做的一個(gè)簡單的冰與火之歌的AR Demo，基于Vuforia Image Target。
點(diǎn)擊觀看
視頻地址：https://v.qq.com/x/page/k0557z1x02n.html

準(zhǔn)備工作

工欲善其事，必先利其器。首先我們要做的是準(zhǔn)備好工具，這里采用Unity作為開發(fā)工具，演示在iOS設(shè)備上，因此還需要Mac系統(tǒng)和Xcode。進(jìn)行開發(fā)的第一步就是要下載Vuforia的SDK，登上Vuforia官網(wǎng)進(jìn)入開發(fā)者平臺(tái)下載Unity的SDK包，完成之后將package導(dǎo)入到Unity中。然后就要登錄License Manager和Target Manager創(chuàng)建App的license，以及上傳需要掃描的圖片。關(guān)于License Manager和Target Manager，已經(jīng)在之前的教程中詳細(xì)講過了，可以參考一下。

Vuforia開發(fā)完全指南（三）--- License Manager和Target Manager詳解

首先是在License Manager中創(chuàng)建license key，然后進(jìn)入Target Manger創(chuàng)建Database，上傳需要掃描的圖片。這里在點(diǎn)擊Add Target之后選擇的類型是Device，然后輸入相關(guān)參數(shù)。上傳成功后就可以下載圖片SDK，導(dǎo)入到Unity中。

功能開發(fā)

1. 打開Unity工程，在Project面板中找到Vuforia文件夾，將其Prefabs文件夾中的ARCamera拖到Unity場(chǎng)景中，之后刪掉場(chǎng)景中之前默認(rèn)的Camera。

2. 將Prefabs文件夾中的ImageTarget拖到場(chǎng)景中，這個(gè)是Vuforia用來專門進(jìn)行圖像識(shí)別的工具。

   
   
3. 點(diǎn)擊場(chǎng)景中的ARCamera，在其選項(xiàng)面板中點(diǎn)擊“Open Vuforia configuration”，將之前創(chuàng)建的license key復(fù)制到“App License Key”輸入框中。然后在下面的Datasets中，勾選住之前創(chuàng)建的database以及其“Activate”選項(xiàng)，將database激活。
4. 點(diǎn)擊場(chǎng)景中的ImageTarget，在其選項(xiàng)面板的“Image Target Behaviour”組件中，在Database和Image Target選中對(duì)應(yīng)的名字。
5. 將想要展現(xiàn)的3D模型拖入到場(chǎng)景中，并將其作為ImageTarget的子物體。這樣，已經(jīng)完成了最簡單的AR圖像識(shí)別，如果你現(xiàn)在編譯工程在設(shè)備上運(yùn)行，將識(shí)別圖放到攝像頭取景范圍內(nèi)，模型就能出來了，并隨著識(shí)別圖的位置改變而改變。但是如果想要加入更多的交互功能，就要用代碼來控制。

6. 點(diǎn)擊場(chǎng)景中的ImageTarget，在其屬性面板中可以看到已經(jīng)掛了一個(gè)腳本“Default Trackable Event Handler”，在這個(gè)腳本里我們就能對(duì)AR場(chǎng)景中的物體進(jìn)行控制，當(dāng)圖片被成功識(shí)別時(shí)做什么，當(dāng)圖片消失時(shí)又會(huì)做什么。

   
   
   
   

   在這個(gè)腳本中需要關(guān)注兩個(gè)函數(shù)：OnTrackingFound()和OnTrackingLost()函數(shù)。其中OnTrackingFound會(huì)在圖片被識(shí)別后調(diào)用，OnTrackingLost會(huì)在被識(shí)別的圖片從攝像頭取景范圍內(nèi)消失后調(diào)用。這兩個(gè)函數(shù)的定義如下：

        private void OnTrackingFound()
        {
            Renderer[] rendererComponents = GetComponentsInChildren<Renderer>(true);
            Collider[] colliderComponents = GetComponentsInChildren<Collider>(true);

            // Enable rendering:
            foreach (Renderer component in rendererComponents)
            {
                component.enabled = true;
            }

            // Enable colliders:
            foreach (Collider component in colliderComponents)
            {
                component.enabled = true;
            }

            Debug.Log("Trackable " + mTrackableBehaviour.TrackableName + " found");
        }


        private void OnTrackingLost()
        {
            Renderer[] rendererComponents = GetComponentsInChildren<Renderer>(true);
            Collider[] colliderComponents = GetComponentsInChildren<Collider>(true);

            // Disable rendering:
            foreach (Renderer component in rendererComponents)
            {
                component.enabled = false;
            }

            // Disable colliders:
            foreach (Collider component in colliderComponents)
            {
                component.enabled = false;
            }

            Debug.Log("Trackable " + mTrackableBehaviour.TrackableName + " lost");
        }

這兩個(gè)函數(shù)的最后都有一行Debug.Log的打印，里面有mTrackableBehaviour.TrackableName這個(gè)變量。這個(gè)變量就是之前在Target Manager中上傳圖片后，導(dǎo)入到圖片SDK的圖片名字。還記得在上傳圖片時(shí)需要輸入的那個(gè)名字字符串么？mTrackableBehaviour.TrackableName這個(gè)變量就和那個(gè)名字字符串是一樣的，因此我們可以在代碼中利用這個(gè)變量來判斷是哪張圖片被識(shí)別，繼而控制場(chǎng)景中的物體。

在這個(gè)例子中，筆者在場(chǎng)景中加了一個(gè)紅龍Dragon的模型，還加了一個(gè)附帶幾個(gè)按鈕的Canvas，用來控制這個(gè)紅龍的動(dòng)作。在Default Trackable Event Handler腳本中，將Dragon和Canvas聲明為public變量，

public GameObject dragon;
public GameObject canvas;

將場(chǎng)景中的Dragon和Canvas拖入到腳本中的物體框。然后在OnTrackingFound()函數(shù)中添加當(dāng)圖像被識(shí)
別后，對(duì)Dragon和Canvas的控制代碼，這里只是簡單的讓兩者出現(xiàn)，注意這里對(duì)圖片的名字進(jìn)行了判斷，雖說工程中只有這一張圖片，但是當(dāng)需要識(shí)別多張圖片時(shí)，就必須通過ImageTarget中的圖像名稱來判斷識(shí)別出的是哪張圖片。

if (mTrackableBehaviour.TrackableName == "Dragon")
{
    dragon.SetActive(true);
    canvas.SetActive(true);
}

同樣，在OnTrackingLost()函數(shù)中通過對(duì)mTrackableBehaviour.TrackableName的判斷，來讓Dragon和Canvas消失。

if (mTrackableBehaviour.TrackableName == "Dragon")
{
    dragon.SetActive(false);
    canvas.SetActive(false);
}

Canvas中對(duì)Dragon控制的按鈕腳本代碼就不貼出來了，大家可以通過自己的需求加上很多酷炫和實(shí)用的功能。

當(dāng)代碼檢查無誤后，就能編譯工程，拷進(jìn)設(shè)備進(jìn)行AR體驗(yàn)了。大家可以看到使用Vuforia的Image Target功能，無需很復(fù)雜的代碼就能做出非?？犰诺腁R程序。