はじめての Unity x HoloLens の巻

みなさんこんにちは。まだまだ寒い日が続き豆腐が美味しい季節になってきましたね。カヤック・オルタナティ部のカワナクションです。今回は、巷で話題のMicrosoft Hololensについてご紹介します。

１：Hololensってなんじゃ？

Hololensは、ホログラフィックコンピューティングができるゴーグルデバイスです。ワイヤレスで、実空間にデジタル表現を重ねることができ、指のジェスチャーなどで操作できるのです。まずは、映像をごらんください。

Microsoft HoloLens: Skype

そんな、Hololensで簡単な制作過程を今回はご紹介いたします。早速いってみましょう！

２：Hololensの環境設定

今回は以下のように開発環境を設定しました。

Windows 10

Unity 5.5.0p2

Visual Studio 2015

HoloToolkit-Unity

さっそくUnityのプロジェクトを作ってみます。ドキドキしますね！Unityを起動し [New] をクリックします。

f:id:kawana-hirokazu:20170220115859p:plain

プロジェクト名を入力します。

プロジェクトのフォルダを選択します。

3Dにチェックを入れます。

[Create Project]をクリックしUnityProjectを作成します。

プロジェクトが作成されました。おっしゃ！

３：UnityProjectの環境設定

次に、Unityの環境を設定します。

[Hierarchy] にある [Main Camera]をクリックします

[Position] を [0,0,0] に変更

[Color Flags] を [Solid Color] に変更

[Background] を　[0,0,0,0] に変更

[Clipping Planes] を　[0.85] に変更

f:id:kawana-hirokazu:20170220120526p:plain

簡単にざっくりいうとHololensからみた世界とUnity空間を重ねるので、 Unity空間を無色透明に設定してUnity空間内のオブジェクトとユーザーの目線のカメラが見切れる距離感を「0.85」に設定してます。

次に、メニューの [Edit] にある [Project Settings] から [Quality] を選択

Windows Storeのデフォルトを [Fastest] に変更します。

f:id:kawana-hirokazu:20170220120313p:plain

Hololensアプリのクオリティを[Fastest]にすることで、動作を速く最適にするんですね！

４：オブジェクトの配置

Unity内の設定も完了したので、オブジェクトを配置してみたいと思います。僕は、冷奴や湯豆腐が好きなので、今回は豆腐を出現させたいと思います。

[Hierarchy] ビューを右クリックし [3D Object] から [Cube] を選択します

これで、白い豆腐が出現しましたね。嬉しいです。位置も調整したいと思います。

[Cube] の [Inspector] ビューを選択します

[Position] を [0.5,0,1]に変更

[Scale] を [0.2,0.2,0.2]に変更 ※単位はメートル(m)です

豆腐が一つだけだと、朝昼晩たべれないので、もう少し豆腐を増やしてみたいと思います。

２つめの豆腐を作る

[Hierarchy] ビューを右クリックし [3D Object] から [Cube] を選択します

[Cube] の [Inspector] ビューを選択します

[Position] を [0,0,1]に変更

[Scale] を [0.2,0.2,0.2]に変更

３つめの豆腐を作る

[Hierarchy] ビューを右クリックし [3D Object] から [Cube] を選択します

[Cube] の [Inspector] ビューを選択します

[Position] を [-0.5,0,1]に変更

[Scale] を [0.2,0.2,0.2]に変更

f:id:kawana-hirokazu:20170220120652p:plain

これで、豆腐が3つ並びましたね。ワクワクします。このタイミングで一旦、Sceneを保存しておきましょう。メニューの [File] から [Save Scene] を選択します。ちなみにCtrl + S でもOKです。

５：HoloToolKit-Unityをつかってみよう

便利なHoloToolkit-Unityを使ってみることにしましょう。

github.com

からSource Code(zip)をダウンロードします。

[HoloToolkit-Unity/Assets]にある[HoloToolkit-Examples]以外をすべてUnityの[Project]ビューにつっこみます。

せっかくのHololensなのでカーソルも表示させましょう。

[Project] ビューの [HoloToolkit] → [Input] → [Prefabs] → [Cursor] にある [Cursor] プレハブを [Hierarchy]　に設置してください

[Project] ビューの [HoloToolkit] → [Input] → [Prefabs] → [Cursor] にある [InputManager] プレハブを [Hierarchy]　に設置してください

f:id:kawana-hirokazu:20170220121354p:plain

これで、カーソルが表示されます！ワクワクしますね！！

６：HoloLensでジェスチャーを使ってみる

せっかくカーソルが出てきたので、何かアクションをあててみましょう。ついに豆腐とのインタラクションが発生し、より豆腐との距離を縮められますね。

[Project]ビューで右クリックし[Create]→[C# Script]を選択しScriptを作成します

スクリプト名を [TofuTapGesutre] とでもしておきます

[TofuTapGesutre]スクリプトをダブルクリックしてVisual Studioを起動します。

豆腐をタップしたら豆腐が大きくなるスクリプト書きたいと思います。こんな感じで書きました。

using HoloToolkit.Unity.InputModule;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System;
public class TofuTapGesutre : MonoBehaviour, IInputClickHandler
{
    // Use this for initialization
    void Start () {
    }
    // Update is called once per frame
    void Update () {
    }
    public void OnInputClicked(InputEventData eventData)
    {
        this.gameObject.transform.localScale = new Vector3(0.4f,0.4f,0.4f);
    }
}

タップするだけで大好きな豆腐が大きくなることを想像したら、とてもワクワクしますね。

[TofuTapGesture]スクリプトを[Cube]にドラッグアンドドロップします。

[Cube]の[Inspector]ビューに[TofuTapGesture]が追加されます。

HoloToolKitのジェスチャーについてこちらの記事に詳しくまとめられていますので、合わせてご覧ください！

参考URL：HoloLens+Unity開発入力の取得まとめ編 - のしメモアプリ開発ブログ

７：空間のマッピング

Hololens空間マッピングを実装してみましょう。 Hololensは、実際に見えてる空間にデジタルの映像をのせることができます。空間マッピングによって実空間の境などを認識しています。そいつを入れてあげましょう。

メニューの[HoloToolkit]→[SpatialMapping]→[Prefab]にある[SpatialMapping]を[Hierarchy]ビューに追加します

SpatialMappingを有効にする設定を追加します

メニューの[HoloToolkit]→[Configure]→[Apply HoloLens Capability Settings]をクリック

HoloLensで使用できる機能の一覧が表示されるので[Spatial Perception]をチェックします

[Apply]ボタンをクリックします

f:id:kawana-hirokazu:20170220143456j:plain

白い模様（空間のメッシュがでてきます）これで空間マッピングを実装しました。これで、豆腐を実空間にぶつけることなども可能です。

８：実機デプロイ

メニューの [Build Settings]→Windowをだす

SDK : Universal 10 に設定

Target device : HoloLens に設定

UWP Build Type : D3D に設定

Build and Run on : Local Machine に設定

Scenes In Build につくったSceneをいれる

[Build]をクリック

WindowsStoreAppが書き出されます。

次に