メインエンジニアを務めている、茨田と申します。第5回目になる今回で、王子様のささやき朗読VRに使った技術の紹介は最後になります。そんなラストを飾る記事は、一つの記事にまとめるほどではないけれど、つまずいた部分や解決方法のTIPS集を紹介させていただきます。※開発中に起きたことなので、現在の最新verを使えば起きないことも含まれているかもしれませんが、ご了承ください。▼以前の記事はこちらから「王子様のささやき朗読VR」で使った技術の概要はじめにはじめまして。メインエンジニアを務めている、茨田と申します。メインエンジニアを務めている、茨田と申します。メインエンジニアを務めている、茨田と申します。メインエンジニアを務めている、茨田と申します。問題Application.LoadLevel(Application.loadedLevelName)で他のシーンから遷移した場合にライトが暗くなってしまうことがありました。Generateのチェックを外します。Lightingを押すことでライティングが生成され、シーンが暗くなってしまうのを解消できました。問題AndroidのVRで、LinearColorSpaceを使うと、シミュレータと実機で比較した場合に実機が圧倒的に暗くなってしまいました。解決方法Gammaに設定するとシミュレータとほぼ同じ明るさになるため、修正されるまでこちらを使用した方がいいと思います。参考URLのスレッドを見ると、長い間直っていない様なので、これからVR開発する場合はGammaに設定するのが無難かもしれません。View)が操作できない視野角で見た目が変わるので、数値を操作しつつ最適な値を探そうとしていました。enabled.」と警告が出て、実機のVRだとFieldOfViewを操作できないようです。警告の理由VRでFieldOfViewを操作すると不快感が酷いらしく、daydream側のデバイスでロックがかかっているようでした。問題FBXを普通にインポートすると、内部にあるマテリアルは変更などが一切できません。ExtractMaterials...ボタンを押すことで、FBX外にmaterialを取り出し、編集することができます。FBXに含まれたアニメーションを取り出す方法model.fbxをプロジェクトにドロップして読み込みます。model.fbxからanimation.animファイルを選択した状態で、macの場合command+d、winの場合はctrl+dで複製することができます。シーン上に置いたmodelに、複製して編集などを行なったanimation.animをドロップすることで、Animatorに適応できます。問題Maya上では正常に動いているが、UnityにFBXを持って行き、アニメーションさせると、結構な頻度で目が飛び出てしまいました。確認すると、目玉が飛び出ているわけではなく、顔全体が前後に動いているようでした。問題の切り分けのために行った事Maya以外のツールでも動くかを確認しました。確認を行なったツールはblenderとFBXViewerで、どちらもMayaと同じように動いているため、Unity自体が読み込む時などに何かしている可能性が高いと判断して色々調べ始めました。原因Unityにインポート時、それぞれのアニメーションのキーフレームに圧縮がかかっていたため、顔の動きのアニメーションと髪の毛の動きのアニメーションで同期が取れなくなってしまっていました。解決方法インポートしたモデルを選択して、AnimationタブのAnim.CompressionをOffにする事で、アニメーションの圧縮がかからなくなり、Mayaなどで作成した時と同じ動きになりました。UTJ/UCL)同封されているマニュアルに書いてあります。項目がありますが、全ての項目を設定する必要はありません。今回はここら辺を抑えておけば、ある程度見た目を調整できる部分を紹介したいと思います。ベースマップについてモデルに対してUVマッピングがされているテクスチャを設定します。BaseColorはテクスチャに上乗せで色の設定ができる。暗いところにいたらBaseColorを灰色にして、テクスチャ全体を暗めに表現できます。Is_LightColor_Baseは空間上に設置されたライトの色を使うかどうかの設定で、おそらくチェックすると反映、しないと無視します。1st_ShadeMapと2nd_ShadMapもColorとIs_LightColorをベースマップと同じように設定できます。1st_ShadeMapと2nd_ShadeMapの作成1st_ShadeMapと2nd_ShadeMapは本来影ができる部分に代わりにこのテクスチャを設定するようになっています。影(暗さ)が一定の値を越えると1st_ShadeMapのテクスチャになり、さらに暗くなると2nd_ShadeMapが適応されます。ベースマップの画像をphotshopやGimpなどで明るさやコントラストをいじって、暗めの色を作ることで、元の画像より暗めの影の様な画像ができます。開く/インポートからベースマップの画像を開きます。コントラストを選択してWindowを開きます。明るさ-60とコントラスト20に変更してOKを押します。名前をつけてエクスポートで画像を保存することでUnityで使えるようになります。NormalMapNormalMapは凹凸を強調するために使うテクスチャで、利用するためには、テクスチャのインポートセッティングでTextureTypeをNormalMapにする必要があります。下の画像の様に、ベースマップに対して、凹凸を強調したい場所だけ、NormalMapに書き込まれています。詳細については参考URLを確認してください。アニメ的な表現をしてみたい3Dだと、見る角度によって左の王子の様に、髪の毛に目や眉毛が隠れてしまします。「王子様のささやき朗読VR」では、元々2Dのキャラクタだったこともあり、右の王子の様にどの角度から見ても目や眉毛が髪の毛より前面に来るアニメ的な表現にも挑戦してみることになりました。StencilMaskとStencilOutそれぞれのパーツの前後関係を変えるにはStencilMaskとStencilOutのシェーダーを設定する必要があります。前面に出したいものにはUnityChanToonShader/Mobile/Toon_DoubleShadeWithFeather_StencilMaskのシェーダーを設定します。今回は目と眉毛のパーツに設定しました。背面に出したいものにはUnityChanToonShader/Mobile/Toon_DoubleShadeWithFeather_StencilOutのシェーダーを設定します。今回は髪の毛のパーツに設定しました。Noを同じ数字に設定します。上の2枚の画像では両方2を設定しています。この数字を設定することで、同じ数字同士のパーツのStencilMaskが前に表示、StencilOutが後ろに表示といった具合に前後関係を操作することができます。ステンシルを使った時に起きた問題mobile版UTSを使うとUnityでは想定通りの見た目だったのに、実機ではステンシルが効かない問題がありました。原因はビルド時の設定で、ステンシルを使える様に設定していないとダメでした。stencil]に設定することで、実機でもUnityと同じ見た目にすることができました。負荷軽減周りで試したことUnityには負荷計測のために、Profilerというツールが標準搭載されています。Profilerでプロファイル画面が開けます。プロファイル画面を開いたままUnityを実行すると、様々な負荷が見られるようになります。プロファイラ上の負荷をクリックすることで、実行を一時停止して、どのような負荷がかかっているかを確認できます。UsageとRenderingとMemoryあたりを見ながら行います。基本的に縦軸が負荷の大きさで横軸が経過時間になっています。Usageはメインで見るべきところで、CPUに何がどれだけ負荷をかけているか確認できます。Renderingとそれ以外(VSyncを除く)で、どちらの負荷が大きいかを見て、どこをチューニングすべきか、ある程度あたりをつけることができます。VSyncとはVSyncは垂直同期のことです。除外される理由は、GPUの処理をCPUが待っているときの待機時間で、計算の負荷などではないため、除外して見られます。除外するためにはWindow左側にあるVsyncの横の黄色い■を押すことで、その数値を除外できます。エディタと実機で数値が全然違うため(そもそものCPUやGPUの性能に左右されるため)、実機でしっかり確認する必要があります。負荷の高いシェーダーなどを使っていると、かなり高い数値になっていることが多いです。原因を特定するためにすることCPUUsageが選択された状態だと、下に選択したフレームどの処理がどれだけ負荷をかけているかが出ています。ここから特に負荷をかけている処理が何かを特定して対応していきます。どの機能かわからない場合には、関数名などを検索することで、大体どのあたりのことか検討をつけられます。上記画像のグラフと下のスレッドの間(縦方向の中央あたり)の左側にHierarchyのボタンがあり、これをTimeLineに変更することで、どの処理がどのタイミングで実行されて、何を待っているかなど処理のネックになっている部分を特定することに使えます。RenderingRenderingはSetPassCallsやDrawCalls、頂点数(verts)、面数(Tris)などの描画周りでどれだけ負荷がかかっているか見ることができます。setPassCallはGPUに対して、CPUが何回描画命令を送っているかを表す数値で、少なければ少ないほど良いです。setPassCallsを減らすためには簡単に減らせるのは、ライトで影を描画しないように設定したり、動かないオブジェクトをstaticObjectに設定してバッチングを効かせたり、カメラにつけているポストエフェクトを削除することです。処理の対象の面数(Tris)を減らすには手っ取り早いのはライトを減らす事でした。ライトを1つ、2つ、3つ増やすごとにtrisが2倍、3倍、4倍となっていました。266kと上がって行きました。(キャラクタのモデルは約60kポリゴンのため)また、今回大きくtrisを減らすことができたのは、最初に使っていた通常のUTSをmobile版のUTSに切り替えたことでした。203kあったtrisが140kまで軽減されてfpsが倍以上にあがりました。最終手段として、そもそものモデルのポリゴン数を落とすことで負荷を大きく軽減できます。基礎のポリゴン数が高すぎると、システム的にどれだけ頑張っても限界点があるので、気をつけましょう。Androidでの負荷計測Profilerはエディタだけではなく、実機でも負荷を確認することができます。Androidで確認するためには、ビルド設定でDevelopmentBuildをONにする必要があります。BuildSettingsを開き、targetPlatformをAndroidにします。DevelopmentBuildの項目があるのでONにすることで、実機からプロファイルするための準備ができました。Androidと実際に通信するには、ProfilerWindowの上の方にある「Editor▼」ボタンを押して、端末を選択するか、端末が見つからない場合はIPを選択する必要がある。※接続するPCと端末が同一ネットワーク内にいる必要があります。IPを選択する場合は、恐らく端末ごとにIPの表示方法が違うので使う端末で検索して下さい。s8の表示方法になります。IPアドレスで辿ると書いてあります。あとは端末でアプリを起動するとProfilerにデータが飛んできました。おわりに今回は一つの記事にまとめるほどではないけれど、つまずいた部分や解決方法のTIPS集を紹介させていただきました。アプリを開発していると、この様に様々な問題に直面します。解決出来ることと、出来ないことがありますが、少しでも皆さんのお役にたてば嬉しいです。「王子様のささやき朗読VR」の使った技術やTIPSの紹介にお付き合いいただき、ありがとうございました。イケメンテックラボの第二弾も鋭意製作中ですので、次回作にもご期待ください。メインエンジニアを務めている、茨田と申します。クリエイティブのディレクションをしております、三木と申します。メインエンジニアを務めている、茨田と申します。記事検索Twitterツイート。