3Dファイルフォーマット「glTF」での出力方法
https://www.youtube.com/watch?v=0xMToziR5V4
Modoではバージョン11.2からWeb3Dの世界で使われるフォーマットであるglTFフォーマットがサポートされるようになりましたが、今回はそのglTFフォーマットでのマテリアルの設定および出力方法をご紹介します。
サンプルとして、現在シーンにはキャラクタが走るシーンが用意されています。このシーンをglTFフォーマットで出力していきます。glTFフォーマットで出力する際、JSON形式のgltfと画像なども一つにまとめたバイナリ形式のglb形式との2種類で出力形式を選択することができます。今回は、glb形式で出力するようにしてみます。
glTF出力に関しての詳細については、初期設定 ＞ ファイル入出力 ＞ glTF v2.0 入出力というカテゴリにオプションがまとめられていますので、そちらで設定を行うことが可能です。
ではまず簡単にマテリアルを設定してみましょう。このサンプルにはデフォルトでSimplyGuyというマテリアルグループが設定されており、標準のModoマテリアルが適用されています。glTFで出力する場合、UnityやUnrealなどと同様、glTF専用のマテリアルを設定する必要があります。
マテリアルグループを選択した状態で、レイヤー追加 ＞ カスタムマテリアル ＞ glTf Materialを追加します。Modo標準のマテリアルは削除してOKです。ただUnity/Unreaと同様、カスタムマテリアルの場合はビューポート上で確認することはできませんので、マテリアルを設定する場合はプレビューウィンドウを表示させるようにします。
glTF Materialを選択し、プロパティを見てみると、Base ColorやMetalic、Roughness、Normalといったプロパティが用意されていますので、まずはBase Colorを設定し、この状態で出力してみます。ファイルメニュー ＞ 書き出しからglb形式で出力します。出力すると警告メッセージが現れるときがありますが、これは出力時の警告やエラーを表します。詳しい内容についてはイベントログに出力されますので、中身を確認したい場合には、システム ＞ 高度な設定 ＞ イベントログで確認してみてください。
では出力したglTFファイルを確認してみましょう。ウェブでglTF Viewerと検索をすると、このフォーマットを確認できるビューワーサイトが見つかりますので、今回はそちらで確認してみます。出力したファイルをブラウザ上にドラッグアンドドロップしてみると、さきほどBase Color で指定した色で、キャラクタのアニメーションが再現できているのが確認できるかと思います。ただメッシュはサブディビジョンは考慮されることはなく、面タイプのポリゴンのみとなっていますので、メッシュの粗さが気になる場合には、メッシュを細分化すると良いでしょう。
アニメーションの出力と基本的なマテリアルの設定は確認できましたので、今度はテクスチャの設定を確認してみます。顔の部分にテクスチャを張り付けてみましょう。顔の部分のポリゴンを選択し、マテリアルグループFaceを作ります。タイプをglTFで作成しましょう。ここにModoのロゴ画像を貼り付けたいので、まずはUVを作成します。
頂点マップタブ ＞ UV マップから新規マップを作成し、顔のUVマップを作成します。ロゴ画像をシェーダツリーのマテリアルグループへとドラッグアンドドロップして適用します。デフォルトではエフェクトがディフューズの色になっているため、テクスチャが反映されません。エフェクトをディフューズの色からglTF ＞ glTF Base Colorへと変更します。UVの大きさを調整したり、Base Colorの色を調整するなどして、もう一度、glTFフォーマットで出力してみます。ビューワーで確認してみると、顔の部分にきちんとテクスチャが張られているのが確認できました。
ではさらに顔以外の部分にもテクスチャを張り付けてみましょう。もともとあるマテリアルグループのほうでグラディエントのテクスチャを設定してみましょう。レイヤー追加 ＞ 処理 ＞ Gradientを追加します。エフェクトをglTf Base Colorへと変更し、入力パラメータをサンプルパラメータ ＞ ロケータまでのＹ軸の距離を指定したら、グラディエントのテクスチャロケータを足元へと配置しなおします。これでロケータの近くにある足元から徐々に上がるにつれて、グラディエントで設定した色に変化していきます。最初にglTF MaterialのBase Colorは白に設定しなおしておきます。設定するグラディエントの値と、このBase Colorで指定した値とを掛け合わせることになるからです。グラディエントのテクスチャレイヤーで色を設定し、プレビューで確認してみます。
いい感じにテクスチャが設定できましたが、グラディエントはあくまでModoの中のテクスチャ機能なので、外部に持っていくためには画像に対してこの模様をベイクする必要があります。ベイクするためには、まずUVが必要です。顔以外のポリゴンを選択し、新たにUVマップを作成します。簡単に済ませるために、今回はアトラス展開した後、パックツールを使ってUVを展開します。
UVが準備できたらベイクを行います。シェーダツリーからGradientを選択し、右クリックでファイルへベイクを行います。これにより、直接ベイクした画像をファイルへと出力することができます。このとき出力する画像は、glTFに対応させるためPNGもしくはJPGを選択してください。解像度は2048×2048ぐらいに設定しておきましょう。ベイクが終了すると、クリップブラウザには出力した画像ファイルが読み込まれた状態になっていますので、シェーダツリーにドラッグアンドドロップでもってきて、エフェクトをglTF Base Colorへと変更します。
これで設定できたようですので、出力してビューワーで確認してみましょう。そうするとメッシュ全体で見てみると、テクスチャが失われてしまっています。これはどういうことかというと、glTFの場合、一つのメッシュに対して一つのUVまでしか対応していないので、今回のように顔のUVと体のUVとかが分かれていると、正しく出力することができません。
Modoに戻り、頂点マップのタブから二つのUVを選択した状態で、右クリックから統合を選択します。これでUVが一つにまとめられるようになりました。UVが統合され、名称が変更されたことで、設定が外れてしまった方のテクスチャについては、もう一度UVを指定しなおします。これでもう一度出力し確認してみると、ロゴのテクスチャもグラディエントのテクスチャも反映されたのがわかります。
もしUVの継ぎ目にラインが出ていて気になるようであれば、初期設定 ＞ レンダリング ＞ 最終レンダリング ＞ ベイク時のUV境界サイズの値を大きめに変更してください。これはUVの境界部分をはみ出してレンダリングすることで、継ぎ目部分にラインが出なくするための方法です。この値はベイクする画像の大きさによって適切な値というのは異なりますので、都度調整するようにしてください。
このような感じでテクスチャを設定していくことができますが、glTF Materialの設定を見てみると、透過度に対するプロパティというのがありません。それでは透過度を設定するテクスチャを設定することができないかというとそうではなく、ひと工夫重ねることで、透過用のテクスチャを設定することも可能になります。
透過用のテクスチャを設定するには、Modo標準のマテリアルのディゾルブのプロパティを使います。Modo標準のマテリアルを追加し、これに対してディゾルブをコントロールするテクスチャを追加します。レイヤー追加 ＞ テクスチャ ＞ Noiseを追加し、エフェクトを基本チャンネル＞ ディゾルブに設定します。ノイズの効果がわかりやすいように、ゲインの値を100%に設定し、テクスチャのサイズも調整します。
これもまた、画像テクスチャとしてベイクします。このままベイクしようとすると、UVを統合してしまったために、顔のUVが重なり合ってしまうので、顔の部分のポリゴンを選択し、あらかじめ非表示の状態にしておきましょう。先ほどと同じように、Noiseテクスチャを右クリックしファイルへベイクでPNGとして画像を出力します。完了したらシェーダツリーに画像を持ってきて、エフェクトをディゾルブへと変更し、gltfファイルで確認してみましょう。設定は正しいように思えるのですが、実際に確認してみると、透過がきちんと表現されていません。
glTFで透過のテクスチャを出力する際には、Base Colorの画像のアルファとして透過のテクスチャを組み込み、それをスウィズル機能で指定してあげる必要があります。PhotoshopでベイクしたBase Colorとディゾルブの画像を一つにまとめましょう。一つにまとめたファイルをModoに読み込み、ディゾルブ用に設定した画像ではスウィズル機能をAlphaで有効にし、もう一つBase Color用に設定した画像ではスウィズル機能をRGBで有効にします。この状態で書き出して確認してみると、透過のテクスチャもBase Colorも正しく反映されて出力されたのが確認できます。
このように、Modoで作りこんだマテリアルをもとに、glTFフォーマットへと出力し、ウェブ上で確認することが可能になります。