【STEP6】DOOR（Mozilla Hubs）にテクスチャを描き替えたアバターをアップロードする方法
はい。GugenkaCGアーティストらげたけです。
今回はDOOR（Mozilla Hubs）用にGugenkaが作成したモデルのテクスチャを改変してマテリアルに組み込み、DOORにアップロードする手順を解説します。
目次です
1.配布アバターの紹介
2.使用ツールについて
3.テクスチャの改変
4.マテリアルへの組み込み
5.3Dビューアーで見た目を確認
6.DOORへアップロード
ではやっていきましょう。
1.配布アバターの紹介
今回はGugenkaで作成しましたこちらのアバターを使用します。部位ごとにレイヤーを分けたPSDファイルと一緒に配布しますので↓からダウンロードしてください
今回はこのアバターの服の色を変更してDOORにアップロードすることを目的として解説していきます。
2.使用ツールについて
使用ツールは
Blender 2.83
任意の画像編集ソフト
です。
Blender 2.83をお持ちでない方はこちらからダウンロードしましょう
Blender 2.79ではシェーダーの設定が行えず、2.93では動作の保証ができないので、今回は動作の安定している2.83を使用します。
画像編集ソフトはPSDファイルの読み込みができれば何でもいいです。最近のツールであれば大体読み込めると思います。
今回の解説にはAffinity Photoというソフトを使います。買い切り3060円でPhotoshopみたいな使用感なので、なに使うか迷ってる人にはおすすめです。はい
3.テクスチャの改変
ここでは主に髪や服装などの色替えについて解説します。
普段からテクスチャの改変を行ってる人はここは読み飛ばしてもらっても構いません
psdファイルを開くとパーツごとにレイヤーが分かれているので、色を変えたいパーツのレイヤーをクリックして色調整を行います。フォトショやAffinityの場合はCtrl+Uで行えます
Affinityの場合色調整中は他のレイヤーも色が変わりますが結合を押すと選択したレイヤー以外は元の色に戻るので気にしないでください。
結合を押すと色が確定されるのでこれをPNGで出力します。
ファイル→エクスポート→PNG→書き出し
で保存できます。
4.マテリアルへの組み込み
では、出力したテクスチャをモデルに組み込んでいきましょう。
Blender2.83を開いてください。
初めてBlenderを開いた人は日本語化が必要になるのでEdit→Preferences→interfaceでTranslationから日本語を選択しておきましょう。 ついでに新規データは英語の方が便利なのでNew Dataだけチェックを外しておきます
自動保存はありますが一応プリファレンスを保存します
ここから本題に入ります。
Glbへマテリアル組み込みを行う際は
GLBデータのインポート
→シェーダーへのテクスチャ差し替え
→GLBのエクスポート
の手順で行います。
GLBデータのインポート
ファイル→インポート→glTF 2.0
を押すとファイル選択画面が出てきます。
glbをインポートする前にインポート時の設定を確認しましょう。
ファイルビューの右側のボーンの方向から「Blender（再インポートに最適）」を選択してください。これ以外を選択するとボーンがあらぬ方向を向きがちです。
glbをそのままドラッグアンドドロップするとファイルの場所まで飛んでくれるのでそのまま「glTF2.0をインポート」をクリックでインポートできます。
シェーダーへのテクスチャ差し替え
インポートに成功したらモデルが表示されるので一番上のタブのShadingを選択します
先ほど改変したテクスチャをファイルからドラッグアンドドロップ
BASECOLORを選択しXキーを押して消します。モデルの色が灰色になればOKです。
追加されたテクスチャの右上にある「カラー」とかかれた黄色い球を引っ張ると線が伸びてくるので、これを右のプリンシプルBSDFの「ベースカラー」に繋ぎます。
モデルが先ほど改変したテクスチャの色になれば成功です。
では、作成したデータをエクスポートして行きましょう
GLBのエクスポート
ファイル→エクスポート→glTF2.0
を選択します。
インポート時と同様にファイルビューが出るので出力したいフォルダを選択し、設定を確認します。
特別な理由がない限りは下の設定に合わせると良いと思います。
ジオメトリ項目の「頂点カラー」、シェイプキー項目の「シェイプキーの法線」のチェックを外しています。
適当に名前を付けて「glTF2.0をエクスポート」を押します
次は出力したGLBの見た目に問題がないかを確認してみましょう。
5.3Dビューアーで見た目を確認
出力されたglbをダブルクリックすると3Dビューアーが開きます
3DビューアーではGLBデータが正常に表示されているかを確認できます。
ここで確認すべきことは今回は主に
・導入したテクスチャが意図した見た目になっているか
・光源によってアバターが真っ白になったりしないか
・大きさにアバターのサイズに問題がないか（窓内に収まっていればok）
です。
今回はアニメーションが入っていないので確認しませんがアニメーションが導入されている場合こちらも確認しましょう
ここで問題が起きている場合はいったんBlenderに戻って設定を確認しましょう。
ーーーーーーーーーーー以下問題があった場合ーーーーーーーーーーーーー
今回の作業で最も発生しやすいトラブルは「テクスチャが表示されずモデルが白くなってしまう」です。
Blender上では正常に表示されていても3Dビューアーでは白くなってしまう場合は、ShadingのプリンシパルBSDFを作り直し繋ぎなおすことでほとんどの場合直ります。
プリンシパルBSDFは
追加→シェーダー→プリンシプルBSDF
で追加できます。設定は元のプリンシパルBSDFのものをそのまま参考にしてください。
この問題はblender2.79以前のFBXをマテリアルを使い回したままGLB化しようとすると発生しやすいようです。なので今回はほとんど発生しないと思っていただいてよいかと思います。他のfbxをGLB化する際の参考程度に考えてください。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ここまで問題なく進めばあとはDOORにアップロードするだけです。
右上のクラフトルームからEntryし、
どこでも良いので好きな部屋を選びます
マイルームを新しく作成します
入室したら右上に人マークがあるのでクリック
鉛筆マークをクリック
デフォルトアバターが表示されているので「他のアバターを探す」
「アバターを作成」
「glbファイル」をクリック
作成したGLBを選択して「開く」
問題なく表示されていれば適当に名前を付けて「保存」を押してください
上手くいけばアバター一覧に表示されるのでクリック
OKでアバターを着れます
画面上のカメラマークを押すとカメラで自分の姿を確認できます。
VRの場合は自分の手がちゃんと動いているかも確認しましょう
これでアバターの色変えは完了です。好きな見た目でDOORの世界を楽しみましょう！
