最近制作しているwebコンテンツで3DCGを扱っています。そのためのMAYAで制作したCGアセットをGLTF形式書き出そうとしたら標準ではできませんでした。
MAYAにglTF Exporter for Mayaを導入する
リンク先のHPの下にDLボタンがあるので保障の確認にチェックを押し、自分のMAYAのバージョンに合うものをDLしましょう。中に入ってるREADME.txtの指示に従い、各種インストールとファイル導入を済ませます。
最後にMAYAを起動して有効にすれば利用可能です。
ウィンドウ >> 設定/プリファレンス >> プラグインマネージャ
のウィンドウを開き「glTFExporter.mll」にロードにチェックします。
そうすればあとは書き出しです。
実際にMAYAからglTFに書き出す
書き出すのはこの魚のポリゴンのみなので選択ツールで魚のメッシュのみを選択して
ファイル >> 選択項目の書き出し
を行います。
ウィンドウ下側の「ファイルの種類」で「GLTF Export」を選択できていればこの形式で書き出し可能です。今回、書き出しのオプションについてはConpress buffersをBinにしました。
書き出し後のファイル構成はこんな感じになっています。テクスチャの位置はおそらく元のファイルの相対位置です。
Three.jsで読み込んでみる
先ほど書き出したモデルを、web上で3DCGを表現できるライブラリのThree.jsを用いて読み込んでみます。ただ、この記事ではThree.jsの基本的な扱い方については説明しません（というかできません(´;ω;｀)）。
glTFのimporterについては既に公式で存在しているのでそれを利用します。これはThree.js本体のほかにGLTFLoader.jsというファイルも必要になることは注意です。
このファイルも導入することによって、以下のリンク先にあるGLTFLoaderクラスの利用が可能になります。
https://threejs.org/docs/#examples/loaders/GLTFLoader
公式documentationのexampleではDRACOLoaderを利用したコードになっていますが、今回はあえてMAYAの出力時にConpress buffersをDoracoではなくbinにしたので利用しません。（もし利用する場合はほかにもDraco用の圧縮ライブラリの導入が必要になります。それについては今後別のブログで書くと思います。）
上記のコードを加えることで読み込みが可能になっています。
このクラス（GLTFLoader）を利用したjsプログラムは、webの表示にローカルサーバーを立てる必要があります。もしhtmlファイルをそのままブラウザで開いて確認している方は注意です。
ちゃんとテクスチャも反映されていますね。
読み込んだ時のデータ構成について
console.logを打って確認しました。めちゃくちゃ雑に説明すると大体こんな感じになっています。
読み込んだgltf
┣animations
┣scene
┃ ┗scene内のオブジェクト（この場合の魚のみ）
┃ ┣体のメッシュ
┃ ┃ ┣体のジオメトリ
┃ ┃ ┗体のマテリアル
┃ ┣目のメッシュ
┃ ┗口のメッシュ
┣cameras
┗asset
というよりもこれに関しては自分よりもわかりやすく説明してくださっている方はいますのこちらのほうが参考になると思います。
次世代の3Dデータフォーマット決定版 glTF 2.0 の概要図を日本語訳してみた - Qiita
glTF 2.0 サンプルをライブラリを使わずに読み込んでみるテスト - Qiita
ちなみに目と口のメッシュが別々なのはMAYAでの制作時点で異なるマテリアル（テクスチャ）を採用したためです。（それについても別で記事を書きます。）
試しにマテリアルを変更してみる
構成が大体分かったのでマテリアルを指定して直接書き換えてみましょう。今回はMeshToonMaterialに変更します。
上記の表示をしてみるとたしかにToonマテリアルになっていますね。テクスチャのマッピング情報は書き換え時に無くなっているのでこれで大丈夫です。
