Google Cardboard 虛擬現實眼鏡開發初步（四）

Cardboard SDK for Unity Demo的一些解析

寫在前面

自從上次寫完這個系列的第三篇，忙了一陣子的項目，忙了一陣子的英語，考完一大波考試之後，終於能繼續給大家分享一些開發心得了，這期間有好幾個同學給我私信甚至qq我，問我啥時候更新，無奈實在是太忙，只能一拖再拖，我感覺是十分對不起大家的，沒能及時更新，這裡給大家說個對不起。不過能有這麼多人關注我的博客，這也是對我最大的肯定，能得到大家的認可心裡十分的高興，希望大家能繼續關注我，我一定會陸陸續續的把我自己的一些經驗心得認認真真的去整理分享給大家的~

另外，關於Cardboard SDK for Unity的英文版API我已經分享在了我的博客裡，我還自己翻譯了一份中文版的供大家參考，以下是地址：

Cardboard Unity SDK Reference（英文版） ：http://blog.csdn.net/sunmc1204953974/article/details/47157951

Cardboard Unity SDK Reference（翻譯版） ：http://blog.csdn.net/sunmc1204953974/article/details/49945945

其實CardBoard提供的東西都在這裡了，我接下來寫的內容只是幫助大家更容易的上手，還有一些我自己的經驗技巧罷了。另外，這個東西還是比較新的，Google也一直在做後續的更新，我的博客只能寫到這個時間點上的內容，至於最新的動態和更新，大家只能去關注谷歌的官網了~，這個網址前幾篇的時候已經提到過了。

再就是除了本篇之外，我之後會寫一些Cardboard虛擬現實相關的開發技巧，下面是我目前擬定的一些內容，希望對大家有所幫助：

在虛擬現實中播放視頻的幾個解決方案

如何在虛擬現實中高效解決視頻畸變

如何在虛擬現實中快速設置屏幕常亮

如何在虛擬現實中輕松解決手機適配

如何在虛擬現實中快速獲取頭部數據

如何在虛擬現實中布置一個隨頭部移動的物體

如何在虛擬現實中實現注視讀秒點擊

閒話說到這裡，下面繼續說正事：

在上一篇文章中，我們利用了Cardboard SDK for Unity的Demo創建了一個自己的場景，也就是把自己的模型放進場景，用虛擬現實眼鏡就可以進行觀賞了。

我們要想利用這個Demo進行下一步的開發，就要對其有一些基本的了解，本篇將會對官方Demo進行一些解析，希望對大家能有所幫助。

（一）打開DemoScene

導入和運行的過程第二篇已經講得很清楚了，不清楚的同學到前面翻翻就可以了。

我們打開Assets/Cardboard/DemoScene下的DemoScene，大家也發現這個文件夾下的東西並不多，而這些就是這個Demo的全部了，僅僅只有一個腳本代碼文件。

 <喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPtXiuPZEZW1v1MvQ0NauuvO74dPQ1eLDtLy4uPa5psTco7o8L3A+DQo8cD7Uy9DQ1q6686OssLTXoUFsdNLGtq/K87HqxKPE4s23sr/Xqravo6ywtNehQ3RybMSjxOLN4bKx19O1xMqxuvLK073HtcSx5Luvo6y147v3yvOx6s/gtbHT2rSlt6KjrL/J0tTTw8C0stnX96GjPC9wPg0KPHA+sNHEv7ni0rK+zcrH0KG7xrXjttTXvLe9v+mjrLXju/fK87Hqo6y3vb/pu+G0q7avtb3Su7j209C+4MDrz97WxrXEx/LD5snPtcTL5rv6zrvWwzwvcD4NCjxwPrWxxL+54teiytO3vb/po6y3vb/pu+G007rsseSzycLMyaujrLWxxL+54sDrv6q3vb/po6y3vb/pu+G008LMyaux5LvYuuzJqzwvcD4NCjxwPtTavcXPwtPQyP249rC0xaWjrLfWsfDKxzwvcD4NCjxwPlJlc2V0o7rW2NDCsNG3vb/pt8W72LP1yrzOu9bDPC9wPg0KPHA+UmVjZW50ZXKjutbY0MKw0crTvcfX89PSt73P8snPu9i56dbQvOSjrNPD09rQo9e8PC9wPg0KPHA+VlIgTW9kZaO6tPK/qrvy1d+52LHVVlLEo8q9o6i31sbB0+u38aOpPC9wPg0KPHA+PGltZyBhbHQ9"這裡寫圖片描述" src="/uploadfile/Collfiles/20151224/2015122409165367.jpg" title="\" />

（二）DemoScene的實現分析

首先我們看到左側的Hierarchy面板，這裡就把DemoScene裡的組件一覽無疑了，一個Cube自然是那個會變色的紅綠方塊，一個Plane是下面的黑底方格地板，還有一個Point Light作為光源，一個Canvas下面是一個放了三個按鈕的面板，熟悉Unity的同學肯定對這些再熟悉不過了。比較特殊的是一個CardBoardMain和一個EventSystem，虛擬現實的效果就是由CardboardMain這個CardBoard主攝像機搞定的，而EventSystem是與注視點（就是那個小黃點）相關的，這裡我們稍後解釋。

我們去仔細的看每個組件，地板和光源沒啥特殊的，但是方塊Cube就不一樣了：

1.整個Demo唯一的代碼附在了Cube身上
2.Cube帶有一個Box Collider（碰撞器），這也就是為什麼我們可以使用視線（那個黃點）去點擊方塊的原因：只有一個物體有碰撞效果，才能檢測到與視線發生了碰撞，從而進行一些操作。（大家可以發現只有看到帶有碰撞器的物體時，小光點才會顯示出來）
3.Cube有一個EventTrigger來接收之前提到的EventSystem的事件，並用這些條件來調用方法。

我們可以從上圖的Cube的Inspector窗口看到，Cube有一個EventTrigger。

EventTrigger是用來接收來自EventSystem的事件，每當接收事件時，就會調用這些方法。所以這裡就比較清楚了。

Pointer Enter指的就是眼睛看到這個物體時，然後就會調用附著在Cube上的Teleport腳本的SetGazeAt(bool)方法，並且傳入一個true（注意那個箭頭是打上的）

Pointer Exit指的就是眼睛離開這個物體時，然後同樣會調用附著在Cube上的Teleport腳本的SetGazeAt(bool)方法，並且傳入一個false（注意那個箭頭是沒打的）

Pointer Enter指的就是用黃點點擊了這個物體（這裡就是點擊看著Cube點擊鼠標或者觸摸屏），然後就會調用附著在Cube上的Teleport腳本的TeleportRandomly方法，顧名思義就是轉移到一個隨機的位置

順籐摸瓜，接下來當然是看看Teleport的代碼了，看看這幾個方法到底是啥：

這裡我對這個類加了注釋,應該寫的很清楚了：

下面我貼的這個代碼可能和實例裡的有點區別，我加了幾個大家可能比較常用的方法，比如關掉中間那條白線，關掉設置按鈕的方法，大家讀代碼的時候可以留意一下

// Copyright 2014 Google Inc. All rights reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

using UnityEngine;
using System.Collections;

[RequireComponent(typeof(Collider))]

/*
 * 瞬移類 cube的腳本代碼
 */
public class Teleport : MonoBehaviour
{

    //定義開始的位置向量
    private Vector3 startingPosition;

    /*
     * start()方法
     * 如果腳本實例是enabled的，則Start函數在第一幀更新之前被調用，在腳本實例生命周期中僅被調用一次
     */
    void Start()
    {

        //獲得當前位置
        startingPosition = transform.localPosition;

        //設置為false關閉線
        Cardboard.SDK.EnableAlignmentMarker = true;

        //設置為false關閉設置按鈕
        Cardboard.SDK.EnableSettingsButton = true;

        //設置脖子仿真效果為最大
        Cardboard.SDK.NeckModelScale = 1f;

        //初始化注視狀態為false
        SetGazedAt(false);

    }

    /*
     * SetGazedAt(bool gazedAt)方法
     * 根據是否凝視方塊改變方塊的顏色
     */
    public void SetGazedAt(bool gazedAt)
    {
        GetComponent().material.color = gazedAt ? Color.green : Color.red;
    }

    /*
     * Reset()方法
     * 將方塊位置設置為初始位置
     * 由ButtonCanvas -> Panel -> ResetButton調用
     */
    public void Reset()
    {
        transform.localPosition = startingPosition;
    }

    /*
     * ToggleVRMode()方法
     * 切換VR模式
     * 由ButtonCanvas -> Panel -> VRModeButton調用
     */
    public void ToggleVRMode()
    {

        //打開關閉VR模式
        Cardboard.SDK.VRModeEnabled = !Cardboard.SDK.VRModeEnabled;

    }

    /*
     * TeleportRandomly()方法
     * 將方塊位置設置為隨機位置
     * 由Cardboard.SDK.Triggered && isLookedAt調用
     */
    public void TeleportRandomly()
    {

        //返回半徑為1的球體在表面上的一個隨機點
        Vector3 direction = Random.onUnitSphere;

        //static function Clamp (value : float, min : float, max : float) : float
        //限制value的值在min和max之間， 如果value小於min，返回min。 如果value大於max，返回max，否則返回value
        direction.y = Mathf.Clamp(direction.y, 0.5f, 1f);

        // Random.value 返回一個隨機數，在0.0（包括）～1.0（包括）之間
        // 返回1.5 ~ 3.5 之間的隨機數
        float distance = 2 * Random.value + 1.5f;

        // 位置為半徑為1.5~3.5的球面上的隨機點
        transform.localPosition = direction * distance;

    }

}

所以這裡大家就可以理解為什麼看到Cube的時候會變綠，而眼睛離開會重新變紅了吧，隨機傳送也一目了然。

然後這個類裡面的另外幾個方法，就是通過腳底下的幾個按鈕來調用的，大家點擊這三個按鈕，就可以在右側的Inspector窗口看到他們分別調用了綁定在Cube上的Teleport腳本的ToggleVRMode(),Reset(),以及Carboard的Recenter方法。

ResetButton調用了Teleport的Reset()方法，將方塊傳送回初始位置

RecenterButton調用了Cardboard的Recenter()方法，重新校准”前方”，比如你坐在電腦桌前看到的是正前方，你的朋友坐在你的背後和你背對背，他戴上眼鏡看到的是場景的正後方，點擊這個按鈕之後，將會將場景正前方的位置校准為目前的實際朝向，你的朋友就會看到正前方了，而你再拿回眼鏡的時候看到的將是正後方。

Cardboard類中的Recenter方法：

  // Reset the tracker so that the user's current direction becomes forward.
  public void Recenter() {
    device.Recenter();
  }

VRModeButton調用了Teleport的ToggleVRMode()方法，打開/關閉VR模式，所謂打開VR模式就是上面我們看到的那種雙眼雙屏效果，而關閉則會變為單屏，就是下圖這種效果：

（三）結語

到這裡整個Demo的功能實現就告一段落了，大家對這個Demo應該已經看得比較透徹了，接著Demo的思路大家就可以比著葫蘆畫瓢，以這個Demo為基礎繼續自己的開發了，本篇的篇幅也不短了，就寫到這裡吧，希望對大家有所幫助。

總結一下就是CardboardMain作為CardBoard提供的主攝像頭，實現了虛擬現實的效果，這裡大家看文檔的話會有更深的理解，而且也會看到谷歌在背後做的工作還是很多的，像是畸變的處理等等復雜問題，谷歌已經幫我們做好了，再比如後續我會講到關於這個主攝像頭的用法，裡面已經封裝好了很多方法供我們使用，比如可以適配不同手機等等。再就是Demo中的EventSystem與Head下的GazePointer提供了注視點的一系列接口，我們可以用EventTrigger來使用這個注視點作為虛擬現實中的三維鼠標去做一些事情，也可以去自定義注視點，這些我都會在後續中仔細講解。

這個系列的目的一是我自己在網上查資料的時候發現沒有什麼資料，所以分享出來幫助大家，另外就是個拋磚引玉的作用，相信對Unity比較熟悉的同學，基於谷歌做的這些工作，很快就可以開發出很贊的虛擬現實應用了~

這個插件還是有一些問題的，我開發的時候就遇到了不少，比如有時候陀螺儀會亂飄，API提供的獲取頭部數據的方法獲取回來的數一直不變，在後續中我會盡量把這些問題的解決方案分享給大家，還希望大家繼續關注我，謝謝~