これちのPost-it

技術ネタをペラペラと

Oculus GO 向けアプリを1から作って実機ビルドする方法

はじめに

Oculus GO が発売され手元に届いたので、Unity でサンプルアプリを作成しビルドする方法を忘れないうちにまとめておきます。全然簡単です

使用するツール

  • Unity 2018.1.0.f2

下準備

  1. Oculus GO は Andoird OS なので Unity に Android SDK を登録しておく
    • 今まで Android 向けにアプリをビルドしていた人は不要
  2. スマートフォンアプリ Oculus を使って Oculus GO を開発者モードにする
    • 現状 Oculus GO 単体で開発者モードにする方法は無さそう?

手順

  1. Unity でサンプルシーンを作成
    • 適当に Camera の前に Cube を配置
      f:id:korechi:20180509151916p:plain:h300
  2. Build Settings -> Platform を Android に変更
  3. Build Settings -> Build System を Internal に変更
    f:id:korechi:20180509150841p:plain:h300
  4. Player Setting -> XR Settings の Virtual Reality Supported をチェックし、SDK から Oculus を選択
    f:id:korechi:20180509150938p:plain:h300
  5. Player Setting ->Other Settings を以下のように変更
    • Package Name を適当な値に(例えば com.korechi.oculussample)
    • minimum API Level をAndroid 7.0 に(厳密にどのバージョン以上にする必要があるかは不明だが、低すぎるとエラーになるみたい)
      f:id:korechi:20180509152013p:plain:h300
  6. Oculus Go を PC に接続し Build and Run
    • インストールされている Android SDK のバージョンが古いと自動的にそれも更新してくれるみたい

WebVR について調べてみた

先日友人に「今は WebVR だぜ!HoloLens のゲームも絶対に WebVR で作るべきだよ!」と言われてから WebVR が気になり、今回調査しました。

参考記事

vrinside.jp www.oro.com

WebVR とは

JavaScriptAPI で、Web サイトで VR を実現するための技術です。

WebVR に対応したブラウザを介してコンテンツを体験することができます。そのため、Oculus のような VRHMD のブラウザから PC 上のブラウザなど、使用するデバイスにあまり制限されずにコンテンツを体験することが可能なのが特徴です。メンテナンスも簡単ですね。

Web 技術で VR コンテンツが作成できるとのことなので、おそらく Electron を使った開発なども可能なのではないかと思います。(今後調査します。)

以下のリンクから WebVR を体験することができます。

interactive.aljazeera.com

WebVR の最新動向

Mozilla

Firefox を開発する Mozilla が VR/AR デバイスに対応した専用 Web ブラウザ「Firefox Reality」 を発表しました。

まだプロジェクトの初期段階ですが、今後デザインやジェスチャー、ボイス機能などを追加していくみたいです。

以下の Mozilla VR Blog にて Firefox Reality についての記事が書かれています。

blog.mozvr.com

個人的に特徴的だなと思ったのは、「button tray」です。普通の Web ブラウザにあるようなトップバーメニューの機能が下の画像にある自分の周りに表示されたトレイのようなものに置き換えられるようです。

f:id:korechi:20180412150636p:plain

あくまで VR/AR ヘッドセット向けブラウザということなので、既存の Firefox ブラウザの利点は活かしつつ、既存のものとは異なったゴールに向かっているようです。

Google

下のサイトは Google が公開している WebVR コンテンツを集めたサイト「WebVR Experiments」です。

experiments.withgoogle.com

このサイトのコンテンツを眺めていると、「Three.js」や「WebGL」といった単語をちらちらと見かけますね。

WebGL は、Web ブラウザ上でプラグインを使用せずにインタラクティブな 3D グラフィックスや 2Dグラフィックスをレンダリングするための JavaScript API です。今までネイティブアプリにしか出来なかった GPU へのアクセスを可能にする APIで、WebGL を使えば GPU パワーを使った 3Dゲームも Web 上で実現可能となります。(FlashPlayer などのプラグインは不要)

HTML5Canvas 要素を通してブラウザに表示しています。

そして、WebGL の代表的なライブラリとして「three.js」が存在します。

WebVR 開発フレームワーク

Three.js

three.js - Javascript 3D library

Three.js は3Dコンテンツを手軽に制作するための JavaScript ライブラリです。 非常に多くのサンプルとドキュメントが存在します。MIT License なので商用利用も可能です。 Three.js で3Dコンテンツを作成し、Three.js に同梱される VRControls.jsVREfftct.js を使用することで WebVR への対応が可能となります。 それぞれ VRControls.js がトラッキング関連の機能を担当、 VREfftct.js が右目左目用の画像出力を担当します。

ただサンプルを眺めていると、高いクオリティのものはあまり無いのも分かると思います。圧倒的な没入感や美麗なグラフィックスを体験したいならばネイティブアプリではないと現状難しいでしょう。

A-Frame

aframe.io

こちらは先程の Firefox を開発する Mozilla の VR チーム「MozVR」によって設計されたフレームワークです。 Three.js と同じくMIT License なので商用利用も可能です。

Three.js とは違い HTML のタグベースで VR コンテンツを作成できる点が異なっています。

aframe.io

上のようなサンプル WebVR コンテンツが以下の HTML のみで実現できるのは驚きですね。

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, WebVR! - A-Frame</title>
    <meta name="description" content="Hello, WebVR! - A-Frame">
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

簡単に解説すると、

<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>

で A-Frame を読み込み <a-scene></a-scene> の中に例えば

<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>

を記入すると青いボックスが配置されるようです。position に (x,y,z) 座標が書かれているのが直感的で良いですね。

手っ取り早く WebVR コンテンツを作ってみたい!という方におすすめです。

HoloLens で WebVR

HoloLens も RS4 Preview 段階での確認にはなりますが、問題なく Edge ブラウザから WebVR が体験することができます。

www.tattichan.work

HoloLens ローカル上での WebVR コンテンツの実行方法については上記の記事が参考になると思います。 そんなに大変ではありません。Explorer 上でローカルの HTML ファイルを表示させているだけです。(ただしソースコードは少し長いため全部読むのは大変)

ものすごく大雑把に HTML にかかれていることを読み解くと

  1. HTML ファイルで three.jsWebVR.js を読み込む
  2. new THREE.Scene() でシーンを作成
  3. new THREE.PerspectiveCamera() でカメラを作成
  4. new THREE.Mesh() で配置したいオブジェクトを作成し、scene.add() でシーンに追加
  5. new THREE.DirectionalLight( 0xffffff ); でライトを配置
  6. new THREE.WebGLRenderer( { antialias: true } ); でレンダラーインスタンスを作成
  7. document.body.appendChild( WEBVR.createButton( renderer ) ); でHTML に WebVR を開始するボタンを表示させる

です。分かりづらくてすみません。

クリックなどのイベントリスナーは、

renderer.domElement.addEventListener( 'mousedown', onMouseDown, false );

のようにコールバック関数を設定することができるので比較的簡単に扱えそうです。これ以上は今回は深掘りしないでおきます。

まとめ

WebVR は Web 技術(HTML, JavaScript)を使って実装されたブラウザ上で体験可能な VR コンテンツです。

メンテナンスコストが低く、ブラウザさえ搭載している AR/VR デバイスであればすぐにコンテンツを体験できるのが魅力だと言えます。デモとかがしやすそうですね。 しかし、クオリティの高いコンテンツはまだ多くは存在しません。

どうしてもネイティブアプリ VR アプリに比べてクオリティの高いコンテンツ作成の敷居は高いのでしょう。(もちろんネイティブアプリ制作も大変ですが)

それと、個人的に気になったのが HoloLens でWebVR を体験するとせっかくの Spatial Mapping が活用できなかったのが少し残念でした。WebVR が体験できるのですが、ボックスが壁の奥とかに見えていると複雑な気持ちになります。 (Spatial Mapping は HoloLens 特有の機能ですし、あくまで Web「VR」 なので当然っちゃ当然ですね。。笑)

とはいえそこは WebAR がいずれ出てくる気もしますので、今出来ることを皆さんやっていきましょう!

HoloLens RS4 Preview をインストールしてみた

参考記事

docs.microsoft.com japan.cnet.com

注意事項

HoloLens RS4 Preview をインストールすると HoloLens 内の全コンテンツは削除され工場出荷状態に戻ってしまいます。

RS4 Preview って?

4月ごろに予定されているWindows10 の機能アップデートである Windows10 Spring Creators Update のためのテストビルド (Build 17083) です。

そして、Windows10 の大型アップデートのタイミングで今回 HoloLens 向けの大型アップデートも行われるため、そのプレビュー版がさっそく HoloLens にインストールできるということです。それが HoloLens RS4 Preview です。

これはさっそく使ってみるしかないということで今回 HoloLens RS4 Preview をインストールしました。

ちなみに結構簡単にできます。

公開された新機能の一部(全ユーザ向け)

  • 起動時の2Dおよび3Dコンテンツの自動配置
  • よりスムーズなアプリ操作
  • リフローによる2Dアプリの幅変更
  • 音声コマンドサポートの拡張
  • 「Holograms」および「Photos」アプリのアップデート
  • 「Mixed Reality Capture」の改善
  • 音声の没入感の改善
  • HoloLens内からファイルの移動や削除ができる「File Explorer」のサポート
  • デスクトップPCからHoloLens上の写真、動画、ドキュメントにアクセスできるメディア転送プロトコル (MTP) のサポート
  • Captive Portalを利用してゲストネットワーク上でHoloLensを設定できる機能

公開された新機能の一部(デベロッパ向け)

  • Spatial Mapping の改善
  • ホログラムの安定性を最適化するため、フォーカスポイントを自動的に選択できるオプションが追加
    • Unity では、Edit > Project Settings > Player > Universal Windows Platform tab > XR SettingsWindows Mixed Reality SDK を開き Enable Depth Buffer Sharing にチェックが入っていることで確認できる(デフォルトでチェックが入っている?)
  • 360度動画のような体を動かさないコンテンツでのホログラム安定性向上のため、ホログラフィック再投影モードを disalble にできる
    • Unity では HolographicSettings.ReprojectionModeHolographicCameraRenderingParameters.ReprojectionMode から HolographicReprojectionMode.OrientationOnly に変更することで可能に
  • Windows API がどのデバイスでアプリが起動されているかが分かるように
    • transparent(HoloLens)、opaque(immersive headset)等

下準備

  • Windows Device Recovery Tool をダウンロードし解凍
含まれるファイル 詳細
rs4_release_svc_analog.retail.10.0.17123.1004.FFU The HoloLens RS4 Preview のイメージ。Windows Device Recovery Tool を使ってデバイスにフラッシュ
HoloLens RS4 PreviewEULA 利用許諾契約
  • HoloLens を Windows Insider Program へ登録
    • HoloLens を起動し、Setting App を起動→Update & SecurityGet Insider Preview buildsGet Started
  • Windows Device Recovery Tool のダウンロード
  • HoloLens を Windows Holographic 10.0.14393 にしておく(必須ではないかも?)

RS4 Preview Buile のフラッシュ

  1. Windows Device Recovery Tool を起動
    • 初回起動時は初期セットアップが必要になる(結構時間がかかる)
      f:id:korechi:20180329155706p:plain
  2. HoloLens を接続し Microsoft HoloLens を選択
    f:id:korechi:20180329161138p:plain
  3. Manual package selection を選択し、Windows Device Recovery Tool に含まれている .ffu を選択
    f:id:korechi:20180329161257p:plain
  4. Install software を選択し、Continue を選択するとソフトウェアのインストールが開始されます
    f:id:korechi:20180329163239p:plain
  5. インストールが終了したら HoloLens のセットアップを完了しましょう

所感

  • HoloLens のメニューの動作が早くなった(気がする)
  • アプリを起動時に自動的に配置されるのがとても便利(いちいち置く必要がない)
    • とは言え向きが変な方向を向くこともしばしば。慣れが必要そう
  • 設定の項目がかなり増えている
  • アプリの位置ずれがかなり減った(気がする)
  • File Explorer がかなり便利そう(まだ使い切れていないがアプリからファイルにアクセスできればアプリの幅が広がりそう。今後調査)
  • Spatial Mapping のメッシュが細かい?
  • アプリのバーをつかむとアプリの位置が調整できる(前からあった?)

全体としては HoloLens がより使いやすくなったのは間違いないと思います。

また AR オブジェクトが全体的に現実世界に馴染むようになった気がします。なぜかは分かりませんが。

MixedRealityToolkit-Unity の Github リポジトリを少し眺めてみた

はじめに

MixedRealityToolkit-Unity は Unity 上で HoloLens や Windows MR HMD 向けアプリを作成する際に使用される SDK です。

MixedRealityToolkit-Unity の Github リポジトリ

MixedRealityToolkit-Unity の機能についての記事はたくさんありますが、Github プロジェクトそのものを調べた記事は少なかったので今回記事にしようと思いました。

MixedRealityToolkit プロジェクトを理解することがきっと HoloLens そのものについての理解に繋がるはず (?) です。

とは言え自分も勉強しながら記事を書いているので正しくない部分があるかもしれませんし、Github は常に更新されているため、記事はあくまで現時点(2018/02/28)での情報という点に留意してください。

トップページ

f:id:korechi:20180228010236p:plain

そもそも MixedRealityToolkit プロジェクトは Github 上で開発が進められている OSS プロジェクトです。そのため誰でも SDKソースコードを読む事ができたり、コードの改善を行うことができます。

ソースコードはとても参考になるので時間がある時に読んでみても良いと思います。

まずタブを見ていきましょう。

f:id:korechi:20180228010559p:plain

  • Code
  • Issues
  • Pull requests
  • Projects
  • Wiki
  • Insights

の6つのタブがあります。中身を見ていきましょう。

Code

ソースコードが表示されており、ディレクトリやファイルが確認できます。最新の変更は1ヶ月前に更新された Roadmap.md のようです。

ソースコードの下には README.md の内容が表示されています。

README.md には

  • MixedRealityToolkit-Unity とは
  • 特徴的な API
  • 必要なソフトウェア
  • スタートガイド
  • サンプルシーン
  • Microsoft Windows Dev Center へのリンク

が書かれています。README.md は第3者に読んでもらうことを意識しているので読みやすく作られているはずです。

そしてソースコードの上にもいくつかタブがあります。

f:id:korechi:20180228010523p:plain

このタブには

  • commits
  • branchs
  • release
  • contributors

がありますね。例えば commits を見ると、StephenHodgson さん、NeerajW さん、keveleigh さんの3人が頻繁にコミットしているのが分かります。

branchs にはいくつかのブランチが表示されています。MRTK-Version-Next は名前からしておそらく次の MixedRealityToolkit のバージョンアップだと予想できます。

releases では unitypackageソースコードの zip がダウンロードできます。第3者がこの SDK を使いたい時は、この releases タブの中にあるインストーラなどをダウンロードして使用するパターンが多いです。他の Github で開発されている多くの OSS もこの release タブからインストーラがダウンロードできたりします。

contributors は MixedRealityToolkit を育てていく、いわゆる「中の人」たちです。(106人いるけど活動的なのは10人にも満たなそう)

Issues

f:id:korechi:20180228011213p:plain

現行の SDK で発見されたバグや、質問などが掲示板形式となって表示されます。現在304件の Issues があるそうです。

ラベルを見れば Issues の内容がどんなものか大体判断することができます。(Issues をたてる時はラベルを活用しましょう)

Issues の面白いところは誰でも Issues を作成できる点です。そのためバグを発見しても Issues を立てる前に、他に似た Issues が立っていないか確認しましょう。

Issues を眺めてみるのもプロジェクトの理解につながり面白いです。ここでは例として以下の Issues を取り上げてみます。

github.com

UICollection の中のキーボードが一部デバイス上で見えないバグのようですね。解決策もちゃんと提示しているので近いうちに解決されそうですね。

この Issues は発生条件や望ましい状態、解決策など分かりやすく記述されているので Issues が分かりやすいです。開発者さんにちゃんと状況が伝わるよう心掛けることはとても良いことですね。

Pull request

f:id:korechi:20180228011621p:plain

自分でブランチを切って、master や他のメインとなるブランチに自分のブランチをマージしてもらいたい時にプルリクエストを contributer に投げます。

ほんの1ファイル内の数行のみを変更したものとかもマージされていたりするので、自分で少しでも改善できるとおもったらプルリクエストを出してみるのも良いかもしれません。

例えば以下のプルリクは、Issues で報告されていたバグへの対応のようです。

github.com

一度くらい私もプルリクを投げてみたいものです。笑

Projects

ここではプロジェクト管理のため、Issues を掲示板形式で管理したりします。 MRTK vNextOpenXR based multi-VR refactor という2つのプロジェクトが立っています。

MRTK vNext はまず間違いなく MixedRealityToolkit の次期バージョンに関するものでしょう。少し中を見てみます。

f:id:korechi:20180228011836p:plain

Todo が1つ、In progress が1つあるので今まさに進行中のプロジェクト感がありますね。

OpenXR based multi-VR refactor はおそらく、OpenXR に向けた MixedRealityToolkit のリファクタリングでしょう。

Todo が3つたっているのみなので、まだまだこれからみたいです。

Wiki

f:id:korechi:20180228011958p:plain

MixedRealityToolkit に関する wiki です。お役立ち情報が掲載されています。(ただしどのくらいここの情報が新しいかは不明。少なくともコードよりは古そう)

いろいろなドキュメントやリンクが掲載されています。

おわりに

ざっと一通り見てみました。

本当にさらっと見ただけですが、Issues の内容などは常に更新され続けるので一つ一つ見ていく必要もあまり無いと思います。

それよりもし気になったことがあれば積極的にプルリクを投げたり、Issues を立てたりして OSS に貢献してみる方が面白いかもしれません!

また、非公式のツールキットですが MRDesignLabs_Unityという SDK もあるので興味のある方は使ってみてください。非公式ですが、Mixed Reality Design Labs から Mixed Reality Toolkit へ機能が移植されることもあるみたいなので見ておく価値はあると思います!

Unityのマーカー認識だけでバーチャルYouTuberになってみた

はじめに

現在バーチャルYouTuberになるには HTC Vive のような VR HMDや、Perception Neuronのような全身モーションキャプチャーバイスが必要です。しかしそれらを用意するのは敷居が高いです。
そこで今回は、特別なデバイスを使わずに PC だけでバーチャルYouTuberになる方法をざっくりと紹介したいと思います。

今回作った動画

www.youtube.com

必要なもの

以下のものを用意、もしくはAsset を Unity の新規プロジェクトに Import しておいてください。

  • PC(できればカメラつき。なければWebカメラが必要)
  • Unity 2017.2以降
    • Vuforia
      • マーカーを認識し、その位置にオブジェクトを表示する機能を持つ
    • Recorder。こちらからDL
      • Unity内で動画撮影するために使用。なぜか音声は録音できなかったのでスマホで録音
  • 動画編集ソフト
    • 今回はiMovieを使用しましたが字幕文字サイズや位置の調整が自由に出来ないのでおすすめはしません(Hikakin は Final Cut Pro を使用)
  • 3Dモデル
    • Mayaを使って自作。3Dモデルを作る前に iPad Pro で2D絵も作成しました
  • 印刷したマーカー×3
    • 頭・右手・左手のPCから見える位置に貼り付けるマーカー f:id:korechi:20180210092153j:plain:h400
      この画像は、Unity に Vuforia をインポートすると Unity Project の中のどこかに保存されます。astronaut, fissure, oxygen という名前で探せばどこかにあるはずです。

システム全体像

雑ですみません。笑
頭・右手・左手に印刷されたマーカーをセットし。PC のカメラから見えるようにマーカーの向きを調整して下さい。
f:id:korechi:20180210095927j:plain

Vuforiaの使い方

ここが参考になりました。
www.noshimemo.com

Recorderの使い方

ここが参考になりました。
tsubakit1.hateblo.jp

撮影手順

  1. Unityを起動
  2. GameObject->Vuforia->ARCameraGameObject->Vuforia->Image×3をhierarchyに配置
    • 途中で必要なコンポーネントは適宜インポート
    • Unity のインストール時に Vuforia をインストールしておく必要があります
    • Imageは適宜、FaceImage, RightHandImage, LeftHandImageのように名前を分けておきましょう
    • ARCamera->Open Vuforia configuration から Max Simultaneous Tracked Image を 3 にしましょう。最大3つのマーカーを同時にトラッキングできます
  3. Image Target を変更
    • 3つの Image が同じ画像を使わないように注意 f:id:korechi:20180210100613p:plain:h400
  4. 3Dモデルを Image の子どもとしてアタッチ
    f:id:korechi:20180210100409p:plain
  5. UI->RawImageで背景となる画像を用意し、Rendere Mode を Screen Space - Camera にする
    • こうすると、3D のオブジェクトは UI Canvas より前に表示され、カメラの映像は後ろに隠れる
      f:id:korechi:20180210101031p:plain:h400
  6. Tools > Recorder > Videoでウインドウを開き、Start Recording で撮影開始
  7. Stop Recording で撮影終了
    • デフォルトでは、Project->Recordings フォルダに動画が保存される (8. 適宜動画を編集)
  8. YouTube に公開

バーチャルYouTuberになってみた所感

Vuforia を顔トラッキングに使用するとブレが結構気になる

顔を動かしていないのにモデルがぶれたり、少し顔の角度を変えるとすぐトラッキングロスする。しかし、手のトラッキングはそんなに気にならない。(手がぶれぶれするのは許容できるのかも)
しっかりとバーチャルYouTuberを続けたいなら顔だけも別のトラッキング方法を用いた方が良いかもしれない。例えば VR HMD とか。

PCと顔の距離感が難しい

PCから離れすぎるとトラッキングロス。逆に近すぎても動きをつけるのが大変に。
オブジェクトのサイズ感、PCとの距離にノウハウが求められそう。

iMovie は バーチャルYouTuber の動画作成にあまり向いていない

字幕の自由度が低いのと、エディタ内のタイムラインにコメントを残せない(僕が見つけられなかっただけかも)のが気になりました。
例えば、「ここは~について話している」といったコメントをいろんな箇所に見えるように残しておきたいなと思いました。

Maya はBlender より操作感が Unity に近く扱いやすい

W, E, Rキーのショートカットが移動・回転・スケールに対応しているなど、Maya は比較的 Unity と近い操作感で扱うことができました。
値段は高いですが、無償体験版もありますし Unity を触ったことある人にはこれから Maya をおすすめします。

台本を作っておくことはとても大事

台本があると撮影がスムーズに進みます。しかし、台本だけでちゃんと面白いものにするのはそれなりの技術も必要なので、ある程度慣れたらアドリブでやってみても面白いのかも?
2本しかまだ作っていないのでまだ知見が足りていません。

声は後からでも収録し直して追加できる

バーチャルYouTuberの強みですが、映像と音声が必ずしも同じタイミングに撮影されている必要はありません。あとからセリフだけ追加したり、聞き取りにくかったら取り直すことも可能です。
でも口パクを追加したらまたちょっと違うのかも。

動画作成には結構時間がかかる

(台本作成)、撮影準備、撮影、編集、公開、と、動画撮影に必要となる作業は結構あります。
撮影~公開までは3時間で終わったとしても、ネタを考えている時間など、作業時間以外にも結構な時間とられます。
このコストと目的・楽しさを天秤にかけましょう。

Unity で撮影するなら Unity 経験者はそれなりに有利

エンターキーを押したら~の処理をする、など基本的なスクリプトは多少書くことになると思います。
そういった時の自由度や、そこにかかる時間は Unity に慣れている人の方が有利であることは間違いなくあると思います。
とは言え中でゲーム実装とかでもしない限り複雑なコードは書かないと思うので、Unity 未経験者でも全然大丈夫だとも思います。
そこは作りたい動画の内容次第かな。

今後の方針

ひとまず動画を公開し、バーチャルYouTuberになってみるという目的は達成できました。
ただ、一度なってみて満足してしまったのと、これを継続的に続けていくことはそれなりに負担がかかるのも分かったので、これからもバーチャルYouTuberを続けていくかは要検討、というところです。
たまーーにネタを思いついたら動画をあげてみる、くらいのスタンスが僕には良いのかもしれないなと思いました。
あ、でも Maya を使って 3Dモデルを作成する訓練としてはとても良かったです!
3Dモデルへのアレルギーが大分減りました。笑
これからはこの新しい技術を活かしつつ AR/VR にまた時間を割いていこうと思います。

ジャックランタンをモチーフにしたキャラクターの 3D モデルを作った②

korechipostit.hatenablog.com
の続き

前回までの成果物

f:id:korechi:20180127124229p:plain:h300
今回は、手の部分にあるステッキ×2を作ります!

今回の成果物

f:id:korechi:20180129103128p:plain:h400
3Dモデルは、Unity へインポートされています。

使用したアプリ

  • Maya
  • ibisPaint X
    • iPad Pro でテクスチャに色を塗るのに使用
    • jpegが読み込めて、かつ境界も設定できるため色の塗りつぶしが簡単にできます

ステッキの3Dモデルを作成

ジャックランタンをモチーフにしたキャラクターの 3D モデルを作った①で紹介したベンド機能を使って、シリンダーオブジェクトを曲げます。
f:id:korechi:20180127124616p:plain:h300
折り曲げやすいように、縦と横の分割数は調整してあります。

UVの編集

  1. 作業用窓を2つ用意し片方をパネル->パネル->UVエディタを選択してUVエディタ画面に
    f:id:korechi:20180127125006p:plain:h300
  2. イメージ->UVのスナップショットからテクスチャ画像を保存
    f:id:korechi:20180127125122p:plain:h300
  3. 保存した画像をiPadに送信し、ibisPaint Xで開く
    f:id:korechi:20180127125350p:plain:h300
  4. 色を塗り、Macに送信
    f:id:korechi:20180127125443p:plain:h300
  5. Mayaに戻り、ステッキにマテリアルを割り当て、カラーをファイルから選択にし先程の画像を選択
  6. 6キーを押して反映されているのを確認
    f:id:korechi:20180127125542p:plain:h300

キャンディの3Dモデルを作成

  1. シリンダーを用意して、縦をいくつか分割
  2. ベンド機能を使って折り曲げます f:id:korechi:20180128150216p:plain:h300
  3. 2回目以降折り曲げるには、オブジェクトを分割して折り曲げていきます f:id:korechi:20180128150421p:plain:h300
  4. 上記をひたすら繰り返してステッキの形を作成
    f:id:korechi:20180128224944p:plain:h300

UVの編集

しかし、作り方が悪かったのか、UVが複雑怪奇になってしまったため、色は単色にしました。。なんでこうなった・・
f:id:korechi:20180128225130p:plain:h400
次はもっと賢く作らなきゃ

Unity へインポート

ファイル->Unityへ送信で顔とステッキをfbxデータにして適当な Unity プロジェクトにインポートしてみました。
ただし、テクスチャ画像は fbx をインポートしただけでは反映されていなかったため別途テクスチャ画像のみ Unity にインポートし、ステッキに適当なマテリアルを割り当て画像を読み込ませる必要がありました。
f:id:korechi:20180129103128p:plain:h400
・・・結構いけてる!!!
あとは、Unityで動かすのみです!次回やりたいと思います!

改善したい点

Transformの原点の位置

キャンディは、1本のシリンダーを折り曲げ・伸ばしぐるぐる巻きました。
しかしそのせいか、Maya上でTransformの原点がキャンディの中に収まっていません。(というより、キャンディオブジェクトが変な場所に存在している)
そのため、移動するのも大変でしたし、スケールを変えようとすると、それぞれのパーツがばらばらになってしました。
これはUnityでの操作の時には問題にはならなかったのですが、気持ち悪かったです。
次3Dモデルを作る時は、Mayaで操作しやすいようにモデルを作成することも念頭に置いておこう・・・

UVが展開しやすいようにシンプルに3Dモデルを作成

上にも書きましたがキャンディのUV展開はカオスになってしまいました。
こうなると色を塗る(テクスチャ作成)が大変になってしまうので、もっとシンプルに効率よくモデルが作成できるよう今後注意します。(具体的にどうすれば良いかはまだ分からない)

学んだこと

  • ベンド機能はベンドの長さ・始点終点位置がとても大事
  • ベンドはオブジェクト毎に設定される(できる)
  • Mayaでテクスチャを反映させていても、Unity へ書き出す fbx データにテクスチャは含まれていない
  • ibisPaint X、Adobe Draw はとても便利

SpatialMappingがぶれぶれだった時の対処法

久しぶりに HoloLens 向けアプリを作成しビルドしたら SpatialMapping で表示しているメッシュがぶれぶれになり、RGBの線が見えるように。空間に配置していたオブジェクトもぶれぶれになっている現象が発生しました。
どうも処理落ち?してるっぽく、ムービーを撮影しながらアプリを起動した時の挙動と少し似ています。

発生環境

  • Unity 2017.3.0f3
  • Windows10 ver1709(OSビルド 16299.192)
  • HoloToolkit-Unity-2017.2.1.0

対処法

InputManagerプレハブの中のStabilizationPlaneModifierスクリプトのチェックを外す。
f:id:korechi:20180124220622p:plain:h400
ついでに InputManager の下にある使っていないMouseInputControlXboxControllerInputSourceも無効にしちゃいました。
その結果SpatialMappingも安定し、空間に配置したオブジェクトも一定位置にとどまるようになりました。
MRToolkitとUnityにIssuesとしてあがっています。いずれ対処されるでしょう。
github.com
issuetracker.unity3d.com