【WebGL特集】第8回:各ツールからglTF形式でアニメーション出力
※three.jsの使用バージョンはr92です。
【前記事】
【WebGL特集】第1回:WebGLって何?
【WebGL特集】第2回:回転する立方体
【WebGL特集】第3回:カメラをグリグリ
【WebGL特集】第4回:Blenderでモデル出力
【WebGL特集】第5回:Blenderでアニメーション出力
【WebGL特集】第6回:他のCGツールからBlenderへの移植
【WebGL特集】第7回:影とアンチエイリアシング
今回はglTF形式を使って、bledenr、Maya、3dsMAXの各種ツールから、直接アニメーションを出力してみます。
glTFとは
今までjson形式で出力していたアニメーションですが、近年もっと優れた形式のフォーマットが登場しました。
jsonとcolladaのいいとこどり、それがglTFです。(Graphics Library Transmission Format)
3D界のjpegを目指して開発されているglTFは、現在は送信向きではあるものの、将来的にはFBXに取って代わる可能性を秘めています。
glTF開発元、クロノスグループのglTFのページ
https://www.khronos.org/gltf/
glTFは出力すると2つファイルができます。glTF と bin
・gltfファイル ・・・・メインのJSONファイル。メタ情報が主。見ればだいたいわかる。
・binファイル ・・・・モデルやアニメーションデータ。数値情報が主。バイナリデータなので見ても理解不能
webGLへの実装
エキスポートの前に、three.jsでの出力の記述を紹介します。記述はオブジェクト&アニメーションのロード部分のみです。
<script src="js/loaders/GLTFLoader.js"></script> //オブジェクト&アニメーション glTFをロードする var loader = new THREE.GLTFLoader(); loader.load( 'models/hoge.gltf',(data) => { var gltf = data; var character = gltf.scene; var animations = gltf.animations; character.position.set(0, 0, 0); character.scale.set(2, 2, 2); //.traverseを使わないと影が表示されない。 character.traverse( function( node ) { if ( node instanceof THREE.Mesh ) { node.castShadow = true; node.receiveShadow = true; } } ); character.castShadow =true; character.receiveShadow =true; //アニメーション mixer = new THREE.AnimationMixer(character); action.dance = mixer.clipAction(animations[ 0 ]); scene.add( character ); animate(); action.dance.play(); } );
glTFを確認するオンラインビュワー
glTFを確認するだけなら、オンラインビューワーがあります。.glTFと.binの2つをドラック&ドロップ
https://gltf-viewer.donmccurdy.com/
blenderでglTFを出力
では、実際にエキスポートしてみましょう。まずはBlenderから。
アドオンはこちら
jsonではレストポーズにして出力していましたが、glTFではその必要はありません。
オブジェクトを選択 > デフォルト設定で出力 で OKです。ちなみにgltf2.0(.glb)というものもありますが、こちらは.gltfとbinファイルを一つにまとめた統合ファイルです。対応ツールがBlenderしかないので今は忘れてください。
ikを使っている場合は、事前に骨のベイクをしておくか、出力設定の[Bake Skinning Constraints]にチェックをいれる必要があります。
Blenderでは、キャラが非常に小さく出力される場合はあるので、出力設定でスケールをかけるか、実装時にスケールなど対策を忘れずに。
MAYAでglTFを出力
クロノスグループ非公式ではありますがMAYAのglTFエキスポーターは2つあります。
ググればTopで出てくるZirax製
■GitHub – Ziriax/Maya2glTF: Maya to glTF 2.0 exporter
日本の企業 (株)カシカ製 こちらはアニメーションがまだ未対応
■glTF Exporter for Maya
ここではアニメーションにも対応しているZirax製の紹介をします。MAYAの対応バージョンは2017と2018のみとなっております。
UVがあることが前提です。ない場合は UV > Automatic で 適当にUVを作っておきましょう。マテリアル貼り直すの忘れずに。
出力はExportからではなく、scriptから。設定のanimationはデフォルトnoneなので変更しましょう。
出力結果で気になる点が2つありますが、実装においては問題ありません。
・.binファイルの末尾に0が追加される。
・オンラインビュワーでは読み込めない。
3dsMAXでglTFを出力
バビロンというプラグインを使ってglTFを出力します。バビロン入れるだけでよいです。割と簡単。
バビロン
https://doc.babylonjs.com/resources/3dsmax_to_gltf
バビロンのインストールは
Githubからダウンロード > zip解凍(セキュリティー解除してから) > 指定フォルダに入れる。
です。詳細はリンク先を参照ください。
3dsMAX立ち上げると、メニューにbabylonが追加されています。
設定はoutputをgltfに。optionはデフォルトでOK。ベイクなしでも大丈夫。大層なUIですがただの設定画面です。何も難しくはありません。
全8回のwebGL特集、いかがでしたでしょうか。
はじめてwebGL特集をくんだ2013年の時点では、「webGL(Three.js)はwebデザイナーでもなければ使う機会はない」と思っていました。
しかしすでに、動画にかわってwebGLでグリグリと気軽にアニメーションを発表できる時代は来ています。
当社でも、動画に変わってFBXReviewを使って、グリグリとモーションチェックを行う機会が増えました。
リアルタイムのプレビューは、動画よりも確実にアニメーションとモーションを魅力的に伝えられる手段です。
これを期に、ぜひアニメーターやモーションデザイナーには、自分のWEBサイトや、faceBookやSketchFabにアニメーションを公開していただき、もっと3DCG界隈が盛り上がってくれることを願っております。