KLabGames Tech Blog

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

カテゴリ: VR

① 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

前回Blenderで作った望遠鏡のモデルのテクスチャを作っていきます。
使用するソフトはSubstance Painter (バージョン2019.3.3)です。

cap01
前回作成したfbxファイルをインポートしました。
メッシュが表示される3Dビューと、その隣にはUVが表示されています。

cap02
右上には前回Blender上でマテリアルを分けた通り、M_Lens/M_Telescopeが並んでいます。 M_Lensは接眼レンズのマテリアルなので、UE4上でマテリアルを組んでリアルタイムにレンダリングされた風景が映るようにします。Substance Painter上の作業はありません。

cap03
M_Telescopeを選択します。すると接眼レンズ以外の部分のUVが表示されます。
デフォルトのレイヤはごみ箱のアイコンを押して削除しておきましょう。

cap04
モデルに質感を加えていくのにはブラシで色(マテリアル)を塗る方法と、Smart materialをレイヤーにのせる方法があります。
今回は後者の方法のみを使って望遠鏡のテクスチャを作ります。
Smart materialsの中から好きなものを選んでレイヤにのせ、パラメータを調整するという作業なので誰がやっても同じ見た目を作る事が出来ます。

cap05
まずはベースとなるSmart materialを選びます。Copper Red Bleachedがいいでしょう。

cap06
レイヤにドラッグ&ドロップします。
すると3DビューやUVのビューに質感が加わります。

cap07
次に持ち手の部分に革のマテリアルをあてます。
Leather Creasedを使います。

cap08
先ほどのCopper Red Bleachedより階層が上になるようにレイヤにのせます。
これだけだと全体が革張りになってしまいますのでマスクを使って持ち手の部分にだけLeather Creasedが適用されるように設定しましょう。

cap09
レイヤ上のLeather Creasedを右クリックして「黒のマスクを追加」を選択します。

cap10
レイヤ上のLeather Creasedで追加されたマスクの方に青枠が当たっていることを確認して、左端のメニューからPolygon Fillを選びます。
すると3DモデルとUVにワイヤーフレームの表示がかかります。
この状態で持ち手の部分のポリゴンを選択しましょう。
3DビューからもUVのビューからも選択できます。今回の場合はUVから上部の長方形を選択するのが簡単だと思います。

cap11
するとこのような見た目になります。
凹凸や光の反射具合など革の質感はそのままに、もう少し赤に近い茶色に色を変えていきたいと思います。

cap12
レイヤ上のLeather Creasedのフォルダアイコンをクリックすると、Smart materialの詳細な項目が表示されます。
その中のBaseを選んで下のPROPERTIESパネルからBase Colorを探し出して色を赤茶色っぽく変更します。

cap13
3Dビューで見た目を確認するとこのようになります。

cap14
持ち手の革と同様の方法で対物レンズにもSmart materialをあてて完成です。Glass Visorがオススメです。

cap15
最後にテクスチャのエクスポートを行います。
ファイル > Export Textures を選択すると画像のような画面が開きます。
エクスポート先のパスを設定して、ConfigにはUnreal Engine 4(Packed)を選択します(この他にもUnity用など様々なConfigが用意されています)。
Texture setsではM_Lensが不要なのでチェックを外し、M_Telescopeのテクスチャだけエクスポートされるように設定します。
上記の設定が終わったらエクスポートボタンを押します。

cap16
BaseColor / NormalMap / OcclusionRoughnessMetallic の3つのテクスチャがエクスポートされれば成功です。

以上でテクスチャ製作は終了です。
今回はブラシを使う方法ではなくSmart materialをレイヤに載せてパラメータ調整する方法を紹介しました。 この方法であれば本職のアーティストでなくとも簡単な操作でクオリティの高いテクスチャを作る事が出来ます。
プロの間でデフォルトとなりつつあるSubstance Painterですが、本職ではない私のような人にもおススメしたいツールです。

テクスチャをエクスポートできたのでUE4上での作業を進める準備が整いました。 ですがその前に今回のテクスチャの見た目をBlender上で確認する方法を次回見ていきましょう。

fmystB

こんにちは。
KLabでVRの研究開発をしているfmystBです。
普段3Dのゲームを開発しているプログラマですが、アセットの制作も行っています。
今回から数回に分けて、研究室内で作っているデモの一部を紹介します。

VR研究開発で使用するツール

ゲームエンジンはUE4を使用しています。
アセットの制作は、モデリングにはBlender2.81(連載中にアップデートされたら都度バージョンを上げます)、テクスチャはSubstance Painterを使用しています。
アニメ調のものではなく、フォトリアルなデモを作っているのでこの組み合わせは使いやすいです。
この連載ではBlenderでのモデリング・UV展開、Substance Painterでのテクスチャ作成、UE4でのマテリアル作成やプログラム開発といった、VRデバイスでプレイ可能な作品を作るための一連の流れを紹介していきます。

Blender2.81

今回の記事ではBlenderでの作業を紹介していきます。
この記事を書いている時点での最新版2.81を使用します。
バージョンが2.8になってからEpic Gamesが資金を提供するなど、ここ最近ますます勢いを増しているツールです。

VRで面白アイテムを作りたい!!

デスクトップ向けのゲームではなく、VRという環境なのでより現実に近い体験を3D空間の中に作り出したい。そんな思いで研究開発を進めています。そこでVRで利用できる面白アイテムを多数作っているのですが、今回はその中の一つ、望遠鏡の作り方を紹介します。
実際にVRデバイス(VIVE)でプレイした映像↓

動画のように昔の海賊をイメージしたアンティークな仕上げにします。

オブジェクトのサイズと向き

それでは作業を始めていきましょう! 望遠鏡の全長は30cmとします。 接眼レンズ側が原点に、対物レンズ側がX軸上の30cmのところに来るようモデリングを進めていきます。
Capture001
デフォルトのCubeのサイズは2m×2m×2mです。
Capture002
Capture002a
テンキーの1を押し-Yから+Yへの視点にして、マウスホイールをスクロールして1マスのサイズ(画像の①)が10 Centimetersになるように拡大していきます。この1マスのサイズは②がorthographic(平行投影)になっているときのみ表示されるもので、テンキー1/3/7で視点をY/X/Z軸方向に調整したときは自動的に平行投影になります。

View Clip の調整

視点がオブジェクトに接近すると
Capture003
のように手前側の表示が欠けてしまう事があります。これを避けるために3Dview上でNキーを押して出てくるメニューでClip startの値を調整します。今回は0.001mまで下げておけば十分でしょう。 Capture005

モデリング

Capture006
デフォルトのCubeを削除し、Cylinderを追加してオブジェクト名をTelescopeに変更します。
Capture007
Edit Modeに切り替えて以下の操作にてモデリングを進めます。

キー 操作
G 移動
R 回転
S 拡大縮小
E 押し出し

G/R/Sの操作はCtrlキーを押しながらマウスを動かすことでキリの良い数値に調整することができます。
3D view上で(テンキーではない)キーボードの3を押して面選択モードに切り替えておきます。(左上の方のアイコンからも切り替えることが可能です。)
まずRキーで全体を90度回転させてX軸方向を向くようにたおします。
次にSキーで底面の直径が4cmになるように縮小します。
その後接眼レンズ側が原点に来るようにGキーで移動し、反対側の面のみを選択して10cmの位置に来るようにします。
そこからEキーを押して真ん中の筒を作ります。大きさは直径5cmになるように調整します。
同様に対物レンズ側の筒も作ります。直径は6cmです。

Capture008
Loop Cutを使い、3つの筒に線を入れます。(Loop Cutをすることで辺選択モードに自動的に切り替わります。)
線が入ったら再び面選択モードに切り替えて
Capture009
の面を1周選択(altキーを押しながら選択することでループ選択になります。)してEキーで押し出して少し拡大します。

対物レンズを作ります。 Capture010
Capture011
Inset Facesを使用して筒の底面の中心に向かって面を作ります。
Capture012
Eキーで内側に凹ませます。
接眼レンズも同じように作りましょう。

対物レンズ側の一番太い筒には後で古い皮のテクスチャを貼りたいのでLoopCutで辺を1周追加しておきます。 Capture013

シェーディング(法線の向き)

デフォルトでは全ての面がFlat Shadeになっているはずです。
Capture014
画像のように曲面をすべて選択してSmooth Shadeにしましょう。
レンズやそれぞれの筒の底面などX軸方向に法線が向いている面はFlat Shadeのままにしてください。

マテリアル

Capture015
マテリアルを2つ作ります。 M_Lens:接眼レンズ
M_Telescope:対物レンズを含む望遠鏡本体
M_という表記はUE4の命名規則を意識しています。
接眼レンズにはUE4上でメインのカメラとは別のカメラで撮影した風景を映し出す特殊なマテリアルの効果を割り当てるため、他の面のマテリアルとは分けておきます。
対物レンズは特に何も映し出さず、その他の部分と同じ扱いをするのでM_Telescopeの方にAssignしてください。

UV展開

3D view上で(テンキーではない)キーボードの2を押して辺選択モードに切り替えておきます。 Capture016
画像のように選択してMark SeamしてUVの切れ目を入れます。 両方のレンズは1周選択して丸ごと切り取り、筒の一番下のラインをすべて選択して切れ目を入れることにより、筒のUVを平面に開くことができます。
一番太い筒の皮のテクスチャを貼る部分は別に切り取っておきましょう。

Capture017
UV EditingタブでUV展開用の画面を開き、接眼レンズ以外を選択してUキーでUV Mappingメニューを開いてUnwrapを選択しましょう。
選択した面のみ左側の画面にUV展開されます。UVの面は大きくとるほどテクスチャの解像度を広く利用できるのでギリギリまで広げておきます。

Capture018
次に接眼レンズを選択してテンキー1でY軸方向に視点を向けて今度はUnwrapではなく、Project from View (Bounds)を選択しましょう。 そうすると現在選択されている接眼レンズを3D Viewの視点から真っすぐにUV展開してくれて、サイズも最大限確保してくれます。

エクスポート

完成図は
Capture019
こんな感じです。
この後Substance Painterを使ってテクスチャを作るわけですが、Substance Painter / UE4 の両方にインポートできるようにFBX形式でエクスポートしましょう。 Telescopeオブジェクトのみが選択された状態で、
Capture020
File > Export > FBX(.fbx) を選択します。
Selected Objectsにはチェックを入れて、選択されたTelescopeオブジェクトのみがエクスポートされるようにします。こうすることでその他のカメラやライトを排除してFBX化することができます。 また、上記のモデリングでは全長3mの望遠鏡になっているので、Scaleを0.1にして30cmの大きさにエクスポートします。

Blenderでのモデリング作業はこれで終了です。
今回作ったFBXを使って、次回Substance Painterでテクスチャを作っていきます。

fmystB

(本稿はKLab Advent Calendar 2017 の1日目の記事になります)

2017年のKLabのアドベントカレンダーです。最初はoho-sです。よろしくお願いします。

自分が作ったVRコンテンツをどんなのか説明したい!

VRコンテンツを作っていて、自分が作ったVRコンテンツをどんなものか説明したり共有したい時ってありませんか? ハイスペックPCやVR用HMDを持っていない人にも、雰囲気だけでも伝えたい。そんな時に便利なのが、いわゆる360°動画でのキャプチャです。 今回は、Facebookが公開している、360-Capture-SDKを使ってキャプチャしてみます。日本語での使い方の情報が探してもあまりなかったので、参考になれば幸いです。

Facebookの360-Capture-SDKを使ってみる

360-Capture-SDKの動作環境は、こちらを参考にしてください。 Windows(64bitのみ)の8以降で、NVIDIAもしくは、AMDのGPUが必要になります。各ドライバのバージョン指定があるので確認してください。 対応しているUnityのバージョンは、README.mdに記載がありませんが、今回Unity 5.5.3p3 (64-bit)で動きました。一方、Unity 2017.2.0p2 (64-bit)では、動画のキャプチャはできましたが、画面の表示がされないなどの不具合が見られました。

さて、では使ってみましょう。まず、キャプチャしたいUnityプロジェクトにSDKを組み込みます。 360-Capture-SDKが公開されているリポジトリは、こちらです。 このリポジトリをcloneしてきて、 Samples/Unity/Assets 以下のEncodePackageフォルダとPluginsフォルダをそのまま組み込みたいプロジェクトのAssets以下にコピーします。

次に、EncodePackage内の、EncoderObjectプレファブをシーンに置きます。

組み込み

そして、EncoderObjectのインスペクターからいくつかの録画用パラメータなどを修正などします。 負荷とクオリティを考えて、ピクセル数などを選びましょう。 EncoderObjectの位置がキャプチャの中心位置になるので、適切にPositionを設定します。少し離れた位置にすると、観客視点とかもできると思います。

最後にキャプチャをします。 プロジェクトを実行して、キャプチャしたいポイントでF2キー(デフォルトでは。インスペクターで変更可能)を押すとキャプチャ開始、F3キーで停止です。キャプチャした動画は、プロジェクトフォルダのGallery内に保存されます。

動画のメタデータの調整

ここまでの手順で作成した動画を、そのままYouTubeやFacebookに投稿しても360°動画再生の専用プレイヤーになりません。 動画に360°動画であることのメタデータを付けてやります。

そのためのツールが、こちらになります。

展開して実行すると下図のようなダイアログが出てくるので、「Open」からキャプチャした動画ファイルを選び、「Spherical」 のチェックボックスをオンにして「Inject metadata」します。以上で新しい動画ファイルができたと思います。

ダイアログ

アップロードしてみる

通常の手段でアップロードします。FacebookやYouTubeであれば、自動的に先ほどの手順でつけたメタデータに基づいて処理してくれて、360°動画として扱われるはずです。

サンプル動画ファイルリンク

まとめ

以上のように、比較的容易に360°動画でのキャプチャができてしまいました。 VRコンテンツのプロモーションなどに使えるのではないかと思います。 是非試してみてください。

最後に余談ですが、EncoderObjectのインスペクターを見ていると、どうもキャプチャーした動画のストリーミングができるようですが、試してみたところうまく動きませんでした。 この辺りも面白そうなので、今後調査を進めてみたいと思います。

KLab Advent Calendar 2017 の2日目は、haltさんです。よろしくお願いします。

↑このページのトップヘ