webGL      2018.06.19

【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界隈が盛り上がってくれることを願っております。

AUTHOR

sumioka