KLabGames Tech Blog

KLabは、多くのスマートフォン向けゲームを開発・提供しています。 スマートフォン向けゲームの開発と運用は、Webソーシャルゲームと比べて格段に複雑で、またコンシューマゲーム開発とも異なったノウハウが求められる領域もあります。 このブログでは、KLabのゲーム開発・運用の中で培われた様々な技術や挑戦とそのノウハウについて、広く紹介していきます。

① VRで望遠鏡を作ろう! -モデリング編-
② VRで望遠鏡を作ろう! -テクスチャ編-
③ VRで望遠鏡を作ろう! -SubstancePainterのテクスチャをBlenderで読み込む-
④ VRで望遠鏡を作ろう! -UE4編-

前回、SceneCaptureComponent2Dで撮影した映像を接眼レンズに映すところまで実装しました。
cap01
このSceneCaptureComponent2DのField of Viewの値を調節するとレンズの倍率を変える事が出来、値を下げるほど高い倍率になります。
肌感覚で値の調整をすることもできますが、ここはしっかりと数値で~倍というふうに指定できるような仕組みを作ってみましょう。

f01
上の図から倍率とField of Viewの関係を考えていきます。
まずは各変数の定義から。
Zは対象物との距離を表します。
FOVとfovはそれぞれ肉眼(ヘッドマウントディスプレイ)の視野角と、接眼レンズ(SceneCaptureComponent2D)の視野角です。
Lとlはそれぞれ肉眼と接眼レンズで見た時に見える範囲の長さです。

f02
接眼レンズの倍率(ScopeMagとする)とL,lの関係は上記のとおりです。
このScopeMagという変数をユーザーが入力することでfovを決定できるような関数を作成していきます。

f03
f04
L,FOVとl,fovの関係はそれぞれ上記の式となります。
以上3つの式からfovを算出すると
f05
となります。
この数式をブループリントで関数化していきます。

cap02
Functionsの+ボタンを押して新規に関数を作成します。
関数名はCalcScopeFOVとしておきます。
引数はfloatの値が2つで、Mag(倍率)とNakedEyeFOV(ヘッドマウントディスプレイの視野角)です。
返値もfloatでFOVとしておきます。
cap03
目的の式をブループリントで組むとこのようになります。
これでCalcScopeFOVは完成です。
cap04
あとはゲームの起動後にこの関数が実行できるよう、上のようにつないで、引数の値を入れます。
ここでは仮に8倍としました。

以上の作業でVR望遠鏡が完成しました。

プロジェクトのデフォルトの背景では味気ないのでEpic Games様がマーケットプレイスで公開しているInfinity Blade: Hideoutを使用させていただきました。

というわけで、Blenderでのモデリングから始まりSubstancePainterでのテクスチャ作成、UE4でのVR実装まで一連のワークフローを見てきました。
皆さんのVRコンテンツ製作の参考となれば幸いです。

fmystB

① VRで望遠鏡を作ろう! -モデリング編-
② VRで望遠鏡を作ろう! -テクスチャ編-
③ VRで望遠鏡を作ろう! -SubstancePainterのテクスチャをBlenderで読み込む-

前回までの記事で望遠鏡のモデルとテクスチャを作り終えたので、UE4にインポートしてVRデバイスで動くようにしていきます。
UE4のバージョンは4.24.3を使用します。

cap01
First Personのテンプレートを利用してプロジェクトを作成します。

cap02
Game/直下にTelescopeフォルダを作り、 -モデリング編-で作成したFBXをインポートします。

cap03
メッシュとそれに関連付けられた2つのマテリアルがインポートされました。 3つともサムネイルが白くなっていますが、マテリアルの設定をすれば色が付きます。

cap04
次にテクスチャ3つもインポートします。

cap05
テクスチャの色空間の設定をします。
Telescope_M_Telescope_OcclusionRoughnessMetallic.pngを開いてsRGBのチェックを外してください。
ベースカラーはデフォルトのままチェックが入った状態でOKですし、ノーマルマップは自動で処理されチェックが外れますが、AO/Roughness/Metalicのテクスチャだけは手動で外す必要があります。

cap06
M_Telescopeを開いてテクスチャをドラッグ&ドロップし、上図のようにノードをつなぎます。
物理ベースのマテリアルなので前回の記事で見てきたBlenderのマテリアルノードと似ていますね。

cap07
M_Lens(接眼レンズマテリアル)には対物レンズ方向へリアルタイムに見えている映像を映したいと思います。
Content Browser上で右クリックしてRender Targetを選択します。

cap08
Lens_RTという名前で保存しましょう。
このオブジェクトはリアルタイムに撮影される映像をレンダリングできるもので、マテリアル上ではテクスチャと同じように扱う事ができます。

cap09
解像度はデフォルトの256では荒い画像になってしまうので2048に上げておきます。

cap10
M_Lensを開いてLens_RTをドラッグ&ドロップし、Emissive Colorにつなぎます。
Shading ModeはUnlitに変えておきます。
これで接眼レンズにはリアルタイムに撮影された映像が映るようになりました。
まだ何も撮影されていないので真っ黒ですが、後程撮影する側の仕組みも作ります。

cap11
さて、望遠鏡オブジェクト自体の設定は終わったので、今度はそれをVRデバイスでコントロールできるようにします。
Content BrowserでContent/FirstPersonBP/Blueprintsに移動し、FirstPersonCharacterを開きます。
これがゲームをプレイ中にコントロールするキャラクターオブジェクトとなります。

cap12
デフォルトで腕と銃のオブジェクトが設置されていますが、これらは今回使いません。黄色で選択されたオブジェクトを削除して保存しましょう。

cap13
上でオブジェクトを削除したことによって、ブループリント上にエラーが発生します。
これらのエラーは全て削除したオブジェクトが見つからずに発生しているものなので、エラー個所のブループリントノードを削除するだけで解決できます。(虫眼鏡のマークをクリックすると直接該当箇所のノードに飛ぶ事が出来ます。)

cap14
Spawn projectileの枠で囲われたノードはデフォルトで設置されていた銃から弾を発射するもので今回は使わないので丸ごと削除します。

cap15
この部分はErrorとなっているノード2つを削除しましょう。

cap16
Construction Scriptに移り、エラーの出ているAttachToComponentノードを削除します。
以上でエラーはすべて解決できます。

cap17
望遠鏡オブジェクトを手に持たせる作業に移ります。
R_MotionControllerは右手のVRコントローラに関連付けられています。
ここにTelescopeを配置します。
こうすることでVRデバイスで実行したときに右手に望遠鏡を持った状態になります。

cap18
次に接眼レンズ(先ほどのLens_RT)に映像を映す仕組みを作ります。
Add Componentで、Telescopeの下にSceneCaptureComponent2Dを配置します。
Texture TargetにはLens_RTを指定して、これにリアルタイムの映像がレンダリングされるようにします。
Lens_RTはM_Lensマテリアル上でノードに接続されているので対物レンズに結果が映し出されることになります。

cap19
SceneCaptureComponent2Dを少しずらし、対物レンズよりも前にピボットが出るようにします。

cap20
以上で今回の作業は終わりです。実行するとVRのコントローラで望遠鏡を持てることと接眼レンズにリアルタイムの映像が映ることが確認できます。

SceneCaptureComponent2DにはFOV(視野角)の設定項目があり、こちらの値を下げるほど狭い部分にフォーカスできるので望遠鏡としての倍率が高まります。
よって、FirstPersonCamera(VRディスプレイに直接表示するためのカメラ)よりもFOVを下げれば遠くのものが大きく映り望遠鏡としての役割を果たせるわけですが、ここは○○倍という風にしっかりと数値で倍率を指定できるようにしたいと思います。
次回その仕組みを作っていきましょう。

fmystB

① VRで望遠鏡を作ろう! -モデリング編-
② VRで望遠鏡を作ろう! -テクスチャ編-

前回Substance Painterを使ってテクスチャを作成しました。
これでUE4での作業に移れるところではあるのですが、その前に少し寄り道してBlenderでテクスチャを反映させる方法を見て行きましょう。
(第1回の記事ではBlender2.81を使用していましたが、連載中に2.82がリリースされました。今回の記事では2.82を使用しています。)

cap00
前回3つのテクスチャをUE4用の設定でエクスポートしました。
左からベースカラー、ノーマルマップ、1番右はAmbientOcclution/Roughness/MetalicそれぞれをRGBのチャンネルに格納して1枚のテクスチャにまとめたものになります。
UE4用の設定であってもBlender上で表示するのに問題はありません。

cap01
Blenderを開いて初回に作成したTelescopeオブジェクトを選択し、Shadingタブに移ります。マテリアルのノードを組むときはこのタブを使うと便利です。

cap02
Telescopeオブジェクトに割り当てた2つのマテリアルのうち、M_Telescopeを選択します。

cap03
最終的な出力であるMaterial OutputノードにPrincipled BSDFノードがつながっています。
その中でBaseColor/Metalic/Roughness/Normalのパラメータをテクスチャによって調整することで望遠鏡の質感を作っていきます。

cap04 cap05
Add > TextureからImage Textureを追加します。
前回作成した3つのテクスチャのうちベースカラー(Telescope_M_Telescope_BaseColor.png)をOpenボタンで開きます。

cap06
テクスチャの詳細設定は赤枠のようになっていればOKです。Principled BSDFノードのBase Colorに接続しましょう。
これでTelescopeオブジェクトに色が反映されます。

cap07
同様にImage Textureノードを追加してノーマルマップ(Telescope_M_Telescope_Normal.png)を開きます。
ベースカラーと違い、Color SpaceはNon-Colorに設定しておきます。
そしてPrincipled BSDFのNormalに接続するわけですが、間にNormal Mapノード(Add > Vector > Normal Map)を挟みます。

cap08
最後にRoughnessとMetalicです。
Image Textureノードを追加してTelescope_M_Telescope_OcclusionRoughnessMetallic.pngを開きます。
Color Spaceはノーマルマップと同様、Non-Colorに設定します。
RGBのGチャンネルからRoughnessの値を、BチャンネルからMetalicの値を取り出します。(Rチャンネルのアンビエントオクルージョンの値は今回使用しません)
それにはAdd > ConverterからSeparete RGBを追加します。
Gの値はRoghnessへ、BはMetalicに接続しましょう。
これで一通りの作業は完了です。

cap09
ノード全体は↑のようになります。

cap10
以上のような作業を行うことでSubstance Painterで作成したテクスチャをBlender上でプレビューできるようになります。

ここまで3回の記事でBlender <-> Substance Painter間のワークフローを紹介してきました。
次回はUE4の作業に移っていきましょう。

fmystB

↑このページのトップヘ