KLabGames Tech Blog

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

前回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では今回も有志が集い、技術書典8で技術同人誌を頒布する予定でした。 残念ながら、新型コロナウイルスの影響により技術書典は中止となってしまいましたが、代わりにオンラインイベント「応援祭」の開催が発表されました。 そこでKLab有志としても、応援祭へ物理本を出品することにいたしました。

本記事では、今回出品する新刊「KLab Tech Book Vol 6」について紹介します。 新刊 KLab Tech Book Vol.6 では、以下の内容を収録しています。

  • NVIDIA OptiXで『レイマーチング×パストレーシング』による物理ベースレンダラーを自作する
  • Unityの描画ラインをハイジャックして遊ぶ
  • Unity 2D Animationでキャラクターを動かす
  • Arduino UNOを有線ゲームパッドにする
  • バーコードリーダーになろう ― Code128編
  • Python組み込み関数マニアックス
  • 退屈なことはEmacsにやらせよう
  • CloudFront-WAF制御下でLambda@Edgeを利用してReactSPAを動かす
  • 天下一 Game Battle Contest (β) の裏側
ktbv6

取りまとめ担当から

編集および取りまとめ、執筆に参加したmizusawa-kです。 今回は今まででもっとも多く、9人のエンジニアが記事執筆に取り組みました。 その結果100P超えの大ボリュームとなっております。

前述した目次からもわかるとおり、Unityやグラフィック、AWSといったゲーム開発に関わる技術はもちろん、 言語の組み込み関数からArduino、競技プログラミングなど、様々な技術にも触れられる本になっております。

専門分野も技術経験もさまざまなエンジニアが集まって書いており、いつも以上に多岐に渡った記事が楽しめますので、 いろいろな技術に触れてみたい方にはきっと満足して頂け、KLabのエンジニアの幅広さも伺えるのではないかと思います。

そして今回頒布する物理本ですが、表紙に特殊加工、箔押しを用いた豪華な装丁となっております。 毎度恒例になりつつある素晴らしい表紙のイラストですが、今回は格好いいイラストについに箔がつきました。 物理版を手に取った方々には、技術記事の情報だけでなく紙の本ならではの楽しみも感じて頂けると思います。

頒布価格は据え置きで1000円です。 技術書典応援祭では新刊の他、既刊も頒布予定ですので、興味のある方はぜひご確認いただければと思います。

技術書典応援祭購入ページリンク(※リンクはマーケットオープン後更新予定です)

以下に本文のサンプルをいくつか載せておきます。 気になる記事がありましたら、電子版PDFをご覧ください。

contents01
contents02
contents03
sample01 sample02 sample03 sample04 sample05 sample06 sample07 sample08 sample09

技術書典運営事務局の方の尽力のおかげでこのような短期間での実施ができる運びとなったオンラインイベント「応援祭」。 サークル参加、一般参加みなさまの力でぜひ、盛り上げて行きましょう!

ダウンロードリンク

これまでのKLab Tech Bookと、新刊Vol.6のダウンロードリンクは以下になります。

※Vol.6については、応援祭のオンラインマーケットのオープン以降有効になります。

こんにちは。
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

↑このページのトップヘ