Embedded Files
stormworksのビークルを
こちらのページは「すとーむすきーアドベントカレンダー 令和6年12月7」の投稿物になります。
このページは中編です。「前編はこちらから飛べます」
stormworksのビークルをUnityに持ってくる方法
stormworksのビークルをUnityに持ってくる方法
・ビークルのテクスチャーが表示されるようにしよう！
１．ビークルのUV展開を行おう！
２．シェーダーの設定をしよう！
３．空のテクスチャーに色をベイクしよう
４．窓を透明にしよう！
５．窓の設定をしよう！
１．ビークルのUV展開を行おう！
①前編で作った編集可能になったビークルの3DモデルのUV展開を行っていきます。
UV展開は3Dモデルの表面にテクスチャー(絵)を表示するために必要な作業になります。
上部ツールバーの[UV編集]を左クリックして[UV編集画面]を開きます。
左側の画面にはUVの展開図、右側には3Dモデルの選択状況が表示されます。
②実際にモデルのUV展開を行っていきます。
モデルが選択されている必要があるので選択されていない場合(辺が黒線の場合)は、[Aキー](全体選択)を押してください。
選択されている場合は、モデル選択画面の右上に表示されている[UV]を左クリック
または[Uキー]を押すとショートカットで開けます。
③UVマッピングの項目が表示されます。
ここでははUV展開の種類を決めます。自動で頂点をきれいに並べてくれる[スマートUV展開]を選択します。
④スマートUV展開の設定を行います。アイランドの余白を0.002にしてOKを左クリックします。
(「アイランドの余白（Margin）」は、UV展開時に生成される複数の
UVアイランド（＝展開されたポリゴンのグループ）間に確保されるスペースの広さです。
数値が大きいほど、テクスチャのにじみを防ぎやすくなります。 )
⑤左側にUV展開図が生成されました。ここからビークルのテクスチャーを作ることができます。
２．シェーダーの設定をしよう！
シェーダー とは、3Dにおいてオブジェクトの見た目 を制御する部分です。
①次は[シェーダーエディター]を開いて作業をするのですが、UV展開図と同時に見ながら作業した方が分かりやすいです。
Blenderでは表示ブラウザの数を増やすことが可能です。UV画面の左上を左クリックしながら下側にドラッグします。
②元からあったUV展開画面の上部に新たなUV展開画面がコピーされました。
③新しく増えたブラウザをシェーダーエディターに設定します。
左上にあるエディター選択を左クリックして[シェーダーエディター]を選択します。
④左上のブラウザがシェーダーエディターに変更できました。
ただしこのままだと設定を行うマテリアルが選択されていないので何も表示されていません。
⑤シェーダーエディター上部からマテリアルの選択が可能です。
丸が描かれたアイコンを左クリックすると[Material]という名称のマテリアルがあります。
これがビークルのマテリアルなのでこれを選択します。
⑥[Material]が選択されたことにより[マテリアル出力]と[プリンシプルBDSF]が表示されました。
(プリンシプルBDSFとは、素材の質感などを表現するためのシェーダーノードです )
⑦次はプリンシプルBSDFを左クリックして選択します。
選択されたら[Ctrl+T]同時押しをすると選択テクスチャーノードが展開されます
⑧プリンシプルBSDFに選択テクスチャーノードが自動展開・接続されました。
ここにテクスチャーを指定するとビークルと紐づけられます。
次は紐づけるテクスチャーを作っていきます。
⑨ビークルから作ったUV展開図を元にテクスチャーを作ります。
「UV展開図を元にテクスチャーを作る」とは、3Dモデルの表面を2Dの平面に広げて、そこに模様や色を描けるようにすることです 。
UV展開画面の右上にある[+新規]をクリックすると空のテクスチャーを作ることができます。
⑩テクスチャーの名前を設定します。わかりやすい名前を付けましょう。
今回はモデルと同じ[3D_Export_Training_Ship]と名称を付けます。OKを押すと空のテクスチャーが作られます。
(幅と高さに1024px(1K)という初期サイズが入っていますが、ビークルが大きい際はここの数値を
2048px(2K)や4096(4K)のテクスチャーサイズに変更する必要があります。)
⑪次はプリンシプルBSDFに先ほど作ったテクスチャーを紐づけていきます。
先ほど名前を付けた空のテクスチャーがあるのでそれを選択します。
⑫先ほど作ったUV展開図がテクスチャーとして選択されました。
現時点でのテクスチャーとビークルの状態を例えるならば、
色のついていない透明な紙が作られて、ビークルの表面に貼られている感じです。
３．空のテクスチャーに色をベイクしよう
先ほどまでの解説でテクスチャーとビークルの状態を例えるならば、
色のついていない透明な紙が作られて、ビークルの表面に貼られている感じと伝えました。
次はその透明な紙に色を付ける作業を行います。
①まずはStormworksでビークルについていた元々の色の情報を取り出していきます。
シェーダーエディター上部から[追加]→[入力]→[カラー属性]を選択します。
②カラー属性が表示されました。
③カラー属性を設定してプリンシプルBSDFと接続していきます。
カラー属性の選択部から[Col]を選択し、カラー属性の[カラー]とプリンシプルBSDFの[ベースカラー]を接続します。
[Col]は元々Stormworksのゲーム内でビークルについていた色の情報です。
この色の情報は外部ではそのまま使用できないため、テクスチャーに色を映す[ベイク]を行う必要があります。
現在の接続状態はStormworksのゲーム内で元々ついていた色を出力に呼び出ししています。
④上部ツールバーの[レイアウト]をクリックしてオブジェクトモードに戻ります。
次はUV展開図にビークルの色をベイクしていきます。これはビークルの元々の色をテクスチャーに反映する作業です。
レイアウト画面の右側にある[レンダー]を左クリックで選択します。
⑤[レンダー]が開かれました。[レンダーエンジン]を[Cycles]に設定します。
レンダーエンジンは、3Dシーンの光、影、反射などを計算して、きれいな画像や動画を作るための仕組みです。
・Blenderには主に2つのレンダーエンジンがあります
(1) Eevee: リアルタイムで高速だけど、やや簡易的な見た目 (ガラスなどで使用します)
(2) Cycles: よりリアルな見た目を目指した高精度な計算 (通常のモデルで使用します)
⑥ベイクを行うデバイス設定を[GPU演算]にします。
(GPUが無い場合は、CPUでも可能ですが処理に多大な時間がかかるので注意)
⑦設定が完了したら次は下にあるベイクの項目を左クリックして開きます。
⑧ベイクの項目を開いたら[ベイクタイプ]を左クリックで開きます。
ベイクタイプを[ディフーズ]に変更します。(ディフーズは光源と色のモード)
⑨[影響]の項目内にある[直接照明]、[間接照明]のチェックを外します。
⑩設定できたらベイク(焼くということ)を行います
※ベイクを初心者の人向けに説明すると
「Stormworks内でビークルについていた色の情報などを、フィルム(UV展開図)に写真(テクスチャー)として保存する感じ」です。
⑪Blenderの画面下部に[Baking map saved to intemal image,save it externally or pack it]と表示が出たら成功
表示されない場合失敗しています。
失敗する原因にベイク対象が選択されていないことがよくあります。
ビークルがオレンジの枠線で囲まれているかの確認を忘れないようにしてください。(下記画像の状態)
できていない場合は、ビークルを選択モードで左クリックして選択してください。
またそれでも改善しない場合は、UV展開図を紐づける部分から見直ししてみてください。
⑫これでベイク作業が終わりました。UV編集に移動してベイクの結果を見て見ましょう。
⑬UV展開図に色が付きました。
現時点では頂点と辺が表示されているので確認しにくいです。
UV展開画面のテクスチャーが無い部分をクリックして表示を消してみます。
⑭何も置いてない部分を左クリックしたら、線が未選択状態になりテクスチャーが見やすくなりました。
⑮テクスチャーノードとプリンシプルBSDFをつなぎます。
これは先ほどベイクで作られたテクスチャーを出力させる設定です。
⑯画面上部のツールバーから[シェーディング]を開きます。
⑰シェーディングで確認したらビークルにゲーム内と同じ色がついてます！
おめでとうございます！テクスチャーが完成しました！
ですがまだ窓が透明ではありません。次は窓の透過作業を行っていきます。
４．窓を透明にしよう！
次はビークルの窓部分を透明にして色を変えたりできるようにしていきます。
窓は専用のマテリアルを作りそれを透明にして表現します。
①レイアウトに戻ってきました。現在、オブジェクトモードなので[TAB]キーを押して編集モードにします。
②編集モードになりました。次は面選択モードにします。
(前編から引き続き作業している場合、面選択になっている)
③面選択モードになったのを確認して窓の部分を１か所左クリックで選択しておきます。
(この後、スクリプトで自動選択するため１か所だけの選択で大丈夫です。)
④上部ツールバーから[スクリプト作成]を選択します。
⑤[スクリプト作成]を開きました。ここはPythonプログラムを使用してBlenderを操作する場所です。
[+新規]をクリックします。
⑥[テキスト]が作られました。ここにPythonプログラムを書き込むと内容に応じてBlenderを自動で動かすことができます。
⑦次は下記のPythonプログラムをコピーし、Blenderのテキスト内に貼ります。
以下のPythonプログラムはSteamのiogic氏の記事に公開されているものを使用させていただいています。
原文は以下のリンクから見ることができます。
import bpy
from mathutils import Color
threshold = .1
obj = bpy.context.object
bpy.ops.object.mode_set(mode="OBJECT")
colors = obj.data.vertex_colors.active.data
selected_polygons = list(filter(lambda p: p.select, obj.data.polygons))
if len(selected_polygons):
p = selected_polygons[0]
r = g = b = 0
for i in p.loop_indices:
c = colors[i].color
r += c[0]
g += c[1]
b += c[2]
r /= p.loop_total
g /= p.loop_total
b /= p.loop_total
target = Color((r, g, b))
for p in obj.data.polygons:
r = g = b = 0
for i in p.loop_indices:
c = colors[i].color
r += c[0]
g += c[1]
b += c[2]
r /= p.loop_total
g /= p.loop_total
b /= p.loop_total
source = Color((r, g, b))
if (abs(source.r - target.r) < threshold and
abs(source.g - target.g) < threshold and
abs(source.b - target.b) < threshold):
p.select = True
bpy.ops.object.editmode_toggle()
⑧コピーしたPythonプログラムをテキスト内に貼り付けます。
右上の矢印を押すと実行されます。
⑨窓だけが自動選択されました。次はレイアウトに移動します。
⑩窓だけが選択されていれば成功です！
⑪次は窓のマテリアルを作ります。編集画面右側にある[マテリアル]を開きます。
⑫新しいマテリアルを追加します。
マテリアル項目の右側にある[+]を左クリックします。
⑬新規マテリアルをどうするか聞かれるので[+新規]を選択します。
⑭新しいマテリアルが追加されました。ただしこのままだと何のマテリアルか分かりにくいです。
⑮わかりやすい名前を付けます。画像下側の赤枠内を左クリックすると名称変更ができます。
今回は"glass"とつけます。
⑯マテリアルの準備ができたので窓の位置に割り当てを行います。
項目内の[割り当て]を左クリックすることで窓のマテリアルだけが"glass"に置き換えられます。
⑰上部ツールバーから[シェーディング]へ移動します。ビークルの窓(矢印部分)を確認してみると色が変わっています！
先ほど作った"glass"マテリアルに置き換えが成功したみたいです。
ただ"glass"マテリアルにはまだ何も設定がされていないので窓っぽくありません。
次は"glass"マテリアルを透過していきます
５．窓の設定をしよう！
次は窓が透明になるように設定していきます。また透明な窓に色を付けることも可能です。
①まずは窓のレンダーを設定します。
②シェーディング確認モードに変更しておきます。
(レイアウト画面上部にある４つの丸が並んでいる項目のうち一番右がシェーディングの確認モードです)
次にレンダーエンジンを[EEVEE]に変更します。
(1) Eevee: リアルタイムで高速だけど、やや簡易的な見た目 (ガラスなどで使用します)
(2) Cycles: よりリアルな見た目を目指した高精度な計算 (通常のモデルで使用します)
③レンダーエンジンが[EEVEE]になったのを確認したら
マテリアルの設定に戻ります
④マテリアルの下側に移動して[設定]からブレンドモードを[アルファブレンド]に変更します。
⑤ブレンドモードがアルファブレンドになりました。
影は不透明のままでOKです。
⑥アルファ値を調整します。アルファ値とはどれくらい透明にするかの値です。
今回は0.2にしてみます。
⑦シェーディングに移動して透過状態を確認します。
窓がちゃんと透けてますね。
⑧現在、窓が完全な透明なので色を付けていきます。
レイアウト画面で窓に色が変わるのを確認するために
シェーディング確認モードにしておきます。(右上赤枠内)
窓の色はマテリアル項目内のベースカラーの色を変えることで反映されます。
⑨ベースカラーを左クリックするとカラーパレットが出現します
真ん中にある白い点を操作することで色を変えられます。
⑩白い点を左クリックでつかんで右上に移動させてみます。
今回は窓を青色にしてみます。
白い点を青色の方向に動かすとレイアウト画面のビークルの窓も青色になりました。
⑪上部ツールバーから[シェーディング]に移動します。
窓が青色になりました。これでビークルの3Dモデルが完成しました！
ビークルの3Dモデルの調整はこれで終了です。
Page updated
Google Sites
Report abuse