WebGL向け3DCG素材のglTF書き出しについての覚書[WW|UNLOCK YOU]

2019年12月2日 15:28

概要

初めまして。こんにちは。モーショングラフィックデザイナーの平井です。以前下記のようなWebサイトの制作に関わりまして、

ざっくり説明すると3Dのキャラクターがサイト内を駆け回り、ユーザーのアクションにも反応するインタラクティブな演出などが特徴のサイトです。

僕はこちらのキャラクターの動かしとアニメーション素材をWebで使える（WebGL向け）素材に書き出すのを担当していました。そしてその3D素材のデータ形式には「glTF」というデータ形式を採用しました。

3DCGを使って映像を作る（レンダリングして.mp4とか.movにする）のとWebGL向けに3Dの素材を書き出すというのは結構勝手が違うのですが、3DCG側のワークフローがあまり共有されていない（ネットで色々検索したが参考記事などがあまり見当たらず困った）ので知見を共有しておきたいなと思い、今回記事にすることにしました。

glTFとは？

"glTF (GL Transmission Format) はJSONによって3Dモデルやシーンを表現するフォーマットである。「3DにおけるJPEG」と表現されることもある。glTFは3Dシーンを圧縮し、WebGLなどのAPIを利用するアプリケーションの実行時処理を最小化する、効率的で相互運用可能なアセット配布フォーマットとなることを意図している。glTFはまた、3Dコンテンツ作成ツールやサービスのための共通発行フォーマットを定義している"（Wikipediaより抜粋）

上記のように定義されているのですが、要はテクスチャやアニメーションなどを1つのデータにコンパクトにまとめられる便利なフォーマットといったところです。FBXやAlembicといった似たような形式のものよりもデータ容量が基本的に軽いのも大きな特徴。Webサイトで重いデータを扱うと、多くの場合読み込みに時間がかかりユーザーに離脱されるので、データは軽ければ軽いほど良いのです。

今回最終的に書き出した3Dのデータ容量は約2.8MBでした。尺的には40秒程のものなので、映像として書き出すよりもだいぶ軽くまとまりました。

使用ツール

主な使用ツールはアニメーションや3Dモデルの調整にCINEMA4D、最終的なデータの書き出しにblender。基本的にはCINEMA4Dで完結しましたが、データ書き出しにblenderを使用した方がデータが何故か軽かったです。

またブラウザ上でglTFのデータを確認できるviewerがあったので、そちらを使ってglTFが正しく書き出されているかを確認してから実装担当の方に共有していました。

ワークフロー

ざっくり箇条書きにすると以下のようなかたちです

①モーションキャプチャを3Dモデルに適用

②モーション数種類を移植・調整

③blender経由でデータ書き出し

①モーションキャプチャを3Dモデルに適用

インラインスケーターの方に実際に滑っていただいているところを撮影したモーションキャプチャのデータを提供して頂き、モデリングされた3DのキャラクターにCINEMA4Dを使ってデータを組み込み調整していきます。

提供していただいたボーン（動きだけの入った骨組み）を3Dモデルに適用し（バインドという作業なのですが割愛します）、まずはウエイト調整という作業を行います。

ボーンのそれぞれの関節に対して腕や足などのポリゴンがどれくらい付いてくるかを指定する作業です。今回はジャンプやグラインドなど激しいアクションが発生するので、この作業を雑にやるとポリゴンが壊れたり腕や足があり得ない方向に曲がったりしてしまいます。

②モーション数種類を移植・調整

ウエイト調整が終わったらモーションの移植です。キャラクターの動きにはいくつか種類があり、インタラクション等を考慮して上手く繋がるように調整していきました。

↑はアニメーションのエディタ画面です。全部で1281フレーム

・アイドリング (0 - 56F)
・走る (57 - 81F)
・ジャンプ (82 - 143F)

上記のような具合に1つのボーン・1つのタイムライン上に動きを組み込んでいきます。アニメーション付きの3Dモデルが動きのパターン数存在してしまうとその分だけ読み込むデータ量が増えてしまうので、1つのモデルだけで完結させ、走らせたりジャンプさせたりするのは実装上で指定したフレームの動きを呼び出してもらうような形をとりました。

アニメーションを上手く繋げる工夫としては、ジャンプやグラインドの動きのあと共通の走り出すような動きを付け、その直後に必ず走る動きに繋げるといった具合に「各アクションの間の動き」を作って間に必ず挟んでもらうようにしています。

アニメーションの調整が出来たらFBXで書き出し、blenderに読み込みます。

③blender経由でデータ書き出し

blenderでは特にこれといって作業することはないので、glTFで書き出すだけです。glTF exporterは下記からダウンロードしてアドオンを追加すれば使うことができます。

ちなみにCINEMA4DにもglTF書き出しを追加することができます。概要あたりにも書きましたがblenderで書き出した方がデータが軽かったので今回はblenderを経由させています。

glTF viewerで書き出したデータをチェック。アニメーションが壊れたりしていないことを確認すればCG側の作業はOKです。

このビューワーがけっこう便利で、ドラッグ＆ドロップでデータをアップするだけでFPSを表示してくれたり、環境光を変更して最終的な見た目をある程度チェックできたりします。

以上がglTF書き出しについての覚書でした。アニメーション付き3Dモデルを使ったWebサイト制作の参考になれば幸いです！

--------------------------------------------------------------------------

2019/12/12追記

WWサイトが海外のWebサイトのアワードで4冠を達成しました！

■THE FWA
FWA OF THE DAY（2019.12.12）
https://thefwa.com/cases/unlock-youww

■awwwards
SITE OF THE DAY（2019.12.9）
https://www.awwwards.com/sites/unlock-you-ww

■CSS Design Awards
WEBSITE OF THE DAY（2019.12.11）
https://www.cssdesignawards.com/sites/unlock-you-ww/36212/

■CSS Winner
SITE OF THE DAY（2019.11.28）
https://www.csswinner.com/details/unlock-you-ww/14083

この記事が気に入ったらサポートをしてみませんか？