クローズドβ版のUE4 Looking Glassプラグインを試してみる　表示編（ver1.1.0）

日本時間の6/1、ついにUE4 Looking Glassプラグインのクローズドβが解禁されました！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/baa70cb9-650c-46e9-e392-0478eecfff65.png)

イェーイ！　やったぜ！　待ってました！
プラグイン開発者の方々に感謝します！

というわけで、早速プラグインを使ってみました！

今回は簡単にLooking Glassに表示するまで、をまとめました。

# 注意

今回使用するのは**クローズドβ版**になります。
製品としてリリースされるプラグインでは、プロパティ名等が大幅に変わる可能性が非常に高いことをご理解ください。

※すでにリリース済みのUnityもv0.4→v1.0で大幅に変わっていました

# ドキュメント

既に公式から[ドキュメント](https://docs.lookingglassfactory.com/UE4/)が公開されています。
英語が理解、翻訳でなんとなくわかる方はそちらを見たほうが早いです。

#　前提条件

Windows10で動作確認をおこなっています。

以下のバージョンで試しました。
・UE4.22

また、プラグインビルドが必要なため、以下をあらかじめインストールしています。
・Visual Studio 2017

## 今回記載すること

サンプルプロジェクトの起動
UE4 Looking Glass Pluginを用いて、グレーマンをLooking Glassに表示

##　記載しないこと

・プラグインビルドのやり方

クローズドβのプラグインを使用するので、最低限、**プラグインビルドを自力でやれる人**でないと使用するのが厳しいです。
英語ですが、[ドキュメントのSet-Up Guideにビルドのやり方](https://docs.lookingglassfactory.com/UE4/setting-up/)が書かれていますので、こちらを見てください。
日本語では、[UE4 プラグインを自分でビルドしてみる](http://unrealengine.hatenablog.com/entry/2015/05/20/220000)等、検索すれば結構出てきます。

そのため、UE4 Looking Glass Plugin（ベータ版）は**初心者向けではありません**。

・英語の正確な翻訳

僕は英語できません。Google翻訳をフル活用していますｗ

# UE4 Looking Glass Plugin

プラグインをダウンロードするためには、**Looking Glassのクローズドベータへ参加**する必要があります。

## プラグインを手に入れる

[こちら](https://airtable.com/shrw9bog5jY2sZ8ad)から登録してください（英語です）
登録が終われば、公式からダウンロードのURLが書かれたメールが来ます。

## サンプルプロジェクトの起動～プラグインビルドまで

早速プラグインをダウンロードしましょう。
2019/6/1時点では「**UnrealSDK-1.1.0.zip**」がダウンロードできると思います。

ダウンロードしたzipファイルを解凍しましょう。
中身はこのようになっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/374994f1-0dde-5b73-e0e5-55471ce80c69.png)

早速サンプルプロジェクトを起動しましょう。
その前に、プラグインのビルドが必要なため、UnrealSDK.uprojectを右クリックして、Generate Visual Studio project filesを選択して、Visual Studioのプロジェクトファイルを生成してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/132d6454-9498-96ac-2022-78b8e537ae8a.png)

こんな感じで作られます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/022a6c26-4790-7fc1-a14a-8994545a4350.png)

あとはUnrealSDK.uprojectをダブルクリックすれば、プラグインのビルドが走ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/3404de8f-586f-7382-332a-03fe33c6b00d.png)

※未ビルドの場合は、以下の警告が表示されます。はいを押してビルドを実行しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/4079fad4-10e6-16e8-8f9d-a5fdeadcd2ca.png)

無事、ビルドが成功すればサンプルプロジェクトが起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/b1f4d465-fe47-00b3-1f3c-db4785fa767d.png)

エラーが起きた人は頑張って解決してください。
（大半がバージョン違いや最新版でなかったり、VS C++のインストールし忘れ）

## サンプルプロジェクトを動かす

早速サンプルプロジェクトを動かしてみましょう。

Looking Glassに表示するためには、ツールバーにLooking GlassマークのPlayというアイコンが追加されているので、それをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/193ef89b-b4cb-778b-24e1-5f2f674d1415.png)

これをクリックすると、Looking Glassに表示されます！　簡単！

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">キャー、looking glass表示されたー！！ <a href="https://twitter.com/hashtag/ue4study?src=hash&amp;ref_src=twsrc%5Etfw">#ue4study</a> <a href="https://t.co/IC1thYcTgN">pic.twitter.com/IC1thYcTgN</a></p>&mdash; 荻野雄季 (@YuukiOgino) <a href="https://twitter.com/YuukiOgino/status/1134569081548394496?ref_src=twsrc%5Etfw">2019年5月31日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

あとはいつものPlayボタンを押すと、上記Twitterで呟いた通り、ロゴがグルグル回ります。
思ったよりキレイに表示されているので感動します。

Looking Glassへの表示をやめる場合は、Looking Glassロゴが書かれたStopボタンを押してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/43d62da8-c2f8-e60a-1df8-0f179c77d899.png)

## 自分のプロジェクトでUE4 Looking Glass Pluginを使用する

次は自分が作成したプロジェクトでプラグインを使用しましょう。
今回はサードパーソンテンプレートをそのまま使用しています。

簡潔にやり方を書きます。

まずサンプルプロジェクトにあった、Pluginsフォルダをそのまま、自分のプロジェクトへコピー＆ペーストします。

これを……
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/05db7c0b-43b0-7ea4-ec0b-71944080644b.png)

自分のプロジェクトに移す！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/ea5f8325-f3a8-6e96-ae59-ef6376ca5f38.png)

※プラグインのビルドが済んでいない場合は、サンプルプロジェクトで記載したやり方等でプラグインをビルドする必要があります

ここからはすでにビルドが完了、かつ、Pluginsを移して正常にプロジェクトが開ける前提で書きます。

自分のプロジェクトを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/36a0d4e6-6328-0560-bd27-8fcbc2e59fbb.png)

※もし、ツールバーに先ほどのLooking Glassのマークが書かれたほうのPlayボタン、Settingボタンが表示されていない場合は、Pluginを有効にしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/31db694f-db8d-7cc9-21d6-1b7f64e3ee0c.png)

早速Looking Glassのカメラをビューに置きたいのですが、初期表示だとどこにもありません。
実はクローズドβのLooking GlassにかかわるActorクラスは**すべてC++**のため、C++のコンテンツを表示させる必要があります。

コンテンツブラウザの表示オプションをクリックし、「Show C++ Class」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/6f363e35-07cb-d38a-6f1f-11ee30dd4675.png)

次に、プラグインのコンテンツを表示する必要があるので、同じく表示オプションを選択して「プラグインのコンテンツを表示（日本語エディターの場合）」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/4e6b2d44-92e7-846f-053f-5eadde281f26.png)

これでコンテンツブラウザに「HoloPlay C++クラス」が表示されていれば成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/3ae01218-7567-01c2-c553-30f5abb50c01.png)

これでプラグインを使用する準備ができました。

## Looking Glassにマネキン（グレーマン）を表示する

プラグインを使用する準備ができたので、[公式ドキュメント](https://docs.lookingglassfactory.com/UE4/plugin-usage/)に従って試しにマネキンを表示します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/d47bb6b8-0eb1-b78f-f8a9-8c1ae52a2486.png)
↑コイツです

HoloPlay C++クラス→HoloPlayRuntime→Classes→Gameの中にある、HoloPlayCaptureをビューにドラッグ＆ドロップします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/7fc47bf4-ed49-66b3-bbb9-2f0044422273.png)

このように、青い四角のActorが配置されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/487869e3-6fb7-f19f-3032-b345f302e6e5.png)

Looking Glassは、Unityもそうですが、白い四隅の位置がもっともキレイに、立体的に見えます。

そのため、マネキンの位置に白い四隅を合わせるように、大体でいいので位置調整します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104377/228a97f5-8942-6f27-ceaf-beb9981042fe.png)

これで表示準備ができました。

あとはサンプルプロジェクトの通り、ツールバーのLooking GlassのPlayをクリック後、UE4のいつのもPlayボタンを押します。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">♪───Ｏ（≧∇≦）Ｏ────♪<br>寝ぼけの頭には若干難易度が高い <a href="https://twitter.com/hashtag/ue4study?src=hash&amp;ref_src=twsrc%5Etfw">#ue4study</a> <a href="https://t.co/xOGqbBTfwp">pic.twitter.com/xOGqbBTfwp</a></p>&mdash; 荻野雄季 (@YuukiOgino) <a href="https://twitter.com/YuukiOgino/status/1134574507576815616?ref_src=twsrc%5Etfw">2019年5月31日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

無事、Looking Glassへマネキンの表示ができました！　
~~ここまでくれば徹夜明けの寝ぼけた頭でも簡単にできます！~~

C++はもちろん、BluePrintすら書かずに表示できます。素晴らしい！！

#まとめ

UE4 Looking Glass Pluginがビルドできれば、Looking Glassへ表示するのは非常に簡単です！
~~ビルドさえできれば！~~

皆様もぜひUE4 Looking Glass Pluginを使用して、素敵な3Dモデルを表示してください！！