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は出力すると２つファイルができます。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しかないので今は忘れてください。