2017年8月25日

実験版 ARKit を使ってみよう

作成 Nick Whiting

6月5日、Apple は最先端の ARKit を使って、iOS デバイスを使った斬新な 独自の物語の制作方法 を披露しました。ARKit をアンリアル エンジンに統合する作業を進めている我々にとって WWDC でのこの Wingnut AR デモは圧巻でした。そして、これほど多くのアンリアル デベロッパー達が既に iOS 向け AR 体験を制作していることに大興奮しました。

ARKit を構造設計に使って、これまでとは違うタイプの背景をプレイヤーが楽しめるゲーム、あるいは完全に異なるゲームを作りたいとお考えですか?

今日のブログは、ARKit で自分のアイデアを実現するためのアンリアル エンジン 4.17 クイックスタートガイドです。

Unreal+Engine%2FblogAssets%2F2017%2FAUGUST+2017%2FARKit+Sample+Released%2F770_ARKitSampleReleased-770x404-fdc202e4d3fe46fce114a597fe900460c23d5ae9

プロジェクトを設定する

実験版 Apple ARKit プラグインをプロジェクトで使用するには、まず以下の前提条件を満たす必要があります。

  • ARKit 対応のアンリアル エンジン 4.17
  • XCode 9 Beta 3 または 4
  • iPhone または iPad (iOS 11 Beta)

XCode 9 Beta 3 / 4 と iPhone / iPad (iOS 11 Beta) は両方とも http://developer.apple.comからダウンロードすることができます。

XCode のバージョンが正しいかどうかを確認するには Terminal ウィンドウから以下のコマンドを実行します。

        sudo xcode-select -s /Applications/Xcode-beta.app/Contents/Developer

ここで、アンリアル エンジン 4.17 を開いてモバイル向けプロジェクトを新規作成します。プロジェクトを開き、プラグイン メニューから 体験版 Apple ARKit プラグインを有効にします。 GitHub ソースから作業している場合は、サポートを有効にするためにプラグインのビルドが必要になることがあります (プロンプトが表示されます)。

まだ有効にしていない場合、署名済みアプリケーションを作成するために ドキュメントの手順に従って デバイスの認証を設定します。

[編集] > [プラグイン] から ARKit プラグインを有効にして、エディタを再起動します。

 ARKit プラグインを有効にしたら、 [プロジェクト設定] > [iOS] を開きます。 ARKit を使用するには、以下のように設定します。

  • Minimum iOS Version: 11 Beta
  • 特殊な追加データ:

<key>NSCameraUsageDescription</key>\n<string>UE4 needs permission to use the camera in order to use ARKit.</string>\n

  • Max Metal Shader Standard to Target: Metal v1.2

ARKit をプロジェクトで使う

ARKit は大きく分けてカメラ、パススルー、平面探知の 3 つの部分で構成されています。それでは 1 つずつ簡単に説明していきます。

カメラの設定

カメラは VR カメラの設定と非常によく似ています。VR カメラを設定したことのある方には馴染みやすいです。必要なものは特別な Apple ARKit Camera コンポーネントが入っている新しい Pawn クラスだけです。 デバイスで実行すると、Camera コンポーネントは現実世界での自分の動きを仮想世界で行います。

Unreal+Engine%2FblogAssets%2F2017%2FAUGUST+2017%2FARKit+Sample+Released%2FARKitSample_Pic1-770x208-9f5bf132bba2cb6f253fd50b740620a6ed92e626

パススルーの設定

パススルーは、iPhone / iPad の背面カメラからのデータを受け取り、それを仮想コンテンツ用のバックグラウンドとして使えるようにする機能で、現実世界でコンテンツが「拡大している」ような錯覚が起こります。 以下は、パススルー カメラの基本的な設定方法のおおなかな流れです。 詳細な手順は、「ARSample プロジェクトのマテリアル設定」へのリンクが後半に出てきますので、そちらをご覧ください。

  •  ARKit テクスチャをプロジェクトに追加します。

Unreal+Engine%2FblogAssets%2F2017%2FAUGUST+2017%2FARKit+Sample+Released%2FARKitSample_Pic2-770x314-45be1359ad5f70912ff14d39775ec81c9eb9fb72

  • 新規マテリアルの作成シェーディング モードを [Unlit (ライティングなし)] に変更して、[Two-Sided (両面) にチェックを入れます。

Unreal+Engine%2FblogAssets%2F2017%2FAUGUST+2017%2FARKit+Sample+Released%2FARKitSample_Pic3-770x550-aab37b9ac575fb171355fb4e82cc602cac63f05b

  • Texture Sample ノードを追加して、作成した ARKit Texture を参照し、マテリアルのエミッシブ チャンネルに接続します。ScreenPosition 座標ノードを追加して、ARKit Texture の UV 入力に接続します。 注意:画面比率に合わせて ARKit Texture の UV をスケーリングすることもできます。実際のスケーリングの様子は、後述の「ARSample」へのリンクをご覧ください。

Unreal+Engine%2FblogAssets%2F2017%2FAUGUST+2017%2FARKit+Sample+Released%2FARKitSample_Pic4-770x550-29313731161e40050edee311d58cbeac66015d1a

  • 球体メッシュをシーンに追加し、コンテンツを囲むようにスケーリングしたら、新規作成したマテリアルを適用します。これがスカイボックスとなり、カメラが見たものを球体へレンダリングします。

平面検出

仮想コンテンツを現実世界に配置しようとした時、壁や床、あるいは台の上といった平面があると便利ですよね。そこで活躍するのが平面検出です。平面検出は ARKit がワールドの近辺で平面を検出してくれる機能で、その上に仮想コンテンツを配置することができます。例えば、仮想の猫を作ったとしたら、その猫を動かすための床探しを手伝ってれるのです。

この機能はデバイスを起動すると自動的に開始します。検出された平面をタッチ入力で使用する場合は、単純に ARKit カメラ コンポーネントに「Hit Test at Screen Position (現実空間への当たり判定)」関数を呼び出します。平面を検出したら、「Apple ARKit Hit Test Result (当たり判定結果)」のトランスフォーム情報にアクセスして、現実世界のそのポイントとのインタラクション ロジックを処理することができます。

Unreal+Engine%2FblogAssets%2F2017%2FAUGUST+2017%2FARKit+Sample+Released%2FARKitSample_Pic5-770x198-72ea15ee182d62a56f2fead96f278ad7f1c986f8

デバイス上でテストをする

プロジェクトの設定が完了したら、他のモバイル プロジェクトと同じ要領で [起動] > (お持ちの iPad あるいは iPhone) をクリックして、プロジェクトをビルドし デバイス にデプロイします。

AR サンプル プロジェクトで実践する

Unreal+Engine%2FblogAssets%2F2017%2FAUGUST+2017%2FARKit+Sample+Released%2FARKitSample_Pic6-770x462-d7e8c4d92cd7afd92cb3be38eaf4b5f2ff3a6fe3

サンプル プロジェクトには ARKit と UE4 での作業に必要なすべてのものをそろえておきましたので、すぐに簡単に始めることができます。 4.17.1 用の ARSample プロジェクトは こちからダウンロードできます。

このプラグは実験版のため、技術の進歩や改良に伴う変更が生じる場合があります。ご了承ください。4.18 でこの ARKit プラグインがエンジンの一部として公式リリースされる際には、ドキュメントを改訂して最新の構造を反映します。

この最新技術を用いてどのような作品が誕生するのか、考えただけでもウキウキします。是非ソーシャルメディアで ARKit 作品を紹介してください。  Twitter、 Facebook 、 Instagramでは @UnrealEngine と #UE4 を使ってタグ付けをお願いします!