こんにちは、ARエンジニアのイワケンです。
この記事はIwaken Lab. アドベントカレンダーの4日目とWebXRアドベントカレンダー8日目です。(複数カレンダーOKとのことをikkouさんから許可をいただきました。
概要
WebARコンテンツに関わらず、ARコンテンツを制作する際には、3Dファイルの制作が必須になることがほとんどです。
例えば、こちらのGarena Free Fire x McLarenのコラボレーションコンテンツでは車の3DファイルをWebARで表示しています。
3DCGアーティストがMayaやBlenderで3Dファイルを作るとしたときに**「WebAR向けにはどういうファイル形式がいいのか」「何ポリゴンまで制限を書ければいいのか」**といった質問が発生します。
その時に、エンジニアとして答えられるようにするために、この記事を活用していただくことをイメージして書きたいと思います。
私自身も、元々Unity主体のARエンジニアだったのですが、最近WebAR案件を担当することがあり、その時に困ったことをイメージしてこの記事を書きたいと思います。
この記事で解決したいこと
普段ARコンテンツを作っている方はUnityを軸としたiOS,AndroidのARコンテンツを作っている方が多いと思います。私もそうでした。
そのような人たちがWebARコンテンツを作る時に、作り方が違うため混乱する可能性が高いです。
例えば
- Unityの時はfbxを書き出してもらっていたが、WebARではglbやgltfファイルに書き出してもらわないといけないことを知る
- Mayaではデフォルトでglb書き出し機能がないことに絶望する
- 軽量化のための基準がわからず自信をもって指示を出せない
といったことが起こりうると思います。
その解決策の1つとして 8thWallの「Guide to 3D Files for Web AR」を読む をこの記事では提唱します。
8thWallはWebARの開発プラットフォームを提供している会社でありサービスです。
この会社のドキュメントにはWebAR開発の知見や、ユースケースがたくさん書かれています。しかし、全文英語なんですよね...
この記事では、みなさんがWebAR向けの3Dファイルの作り方がわかるよう、 Guide to 3D Files for Web ARを日本語訳しながらまとめていきたいと思います。
前提として、8thWallでのWebARコンテンツ制作にまつわる話になっていますが、一つの基準になることは間違いないので参考にしていただければと思います。
前提知識: glTFとGLBの違い
ちなみにglTFとGLBの違いについてはこちらの記事などで確認すると良いです。
glTFは3DモデルにおけるPNGやMP4のような立ち位置を目指して登場しました。glTFは、インターネットでの配信を前提に作られたWebGLやOpenGLをはじめとする3Dランタイム向けのファイル形式なのです。 https://www.codegrid.net/articles/2018-gltf-1
glTFがJsonファイルであり、また複数のファイルで構成されている3Dファイルなのに対し、glbは「これらを1つのバイナリにまとめよう」としてできたバイナリ形式のデータとなります。
Guide to 3D Files for Web ARの日本語訳&要約
全体像
- 背景
- Converting to GLB for 8th Wall Web (GLBへのコンバートの仕方)
- Preparing an existing 3D File for an AR Camera (既存3Dファイルの準備の仕方)
背景
While there are components that allow for loading various types of 3D files (FBX, OBJ, etc) into these frameworks, we stand by GLB (glTF 2.0 Binary) as the current best option with its small file size, great performance and versatile feature support (PBR, animations, etc). Below you will learn more about how to both create GLB files and convert your existing files to GLB for use with 8th Wall Web.
WebARにおいて、様々なタイプの3Dファイル(FBX,OBJ,etc)を読み込むができるコンポーネントが存在するものの、以下の点でGLB (glTF 2.0 Binary)が現在の最良の選択肢になっています。
- ファイルサイズが小さい
- パフォーマンスが高い
- 多彩な機能 (PBR, アニメーション)
このガイドラインでは、
- GLBファイルを作成する方法と
- 既存のファイルをGLBに変換して8thWallWebで使用する方法
について説明します。
Converting to GLB for 8th Wall Web (GLBへのコンバートの仕方)
重要とのこと
GLBファイルをexportする前に以下について確認すること
- Pivot位置をモデルの基準点 (地面に設置するポイント)にすること
- Z軸はオブジェクトの前を向くように作る
- ポリゴン数を35000以下にすること
-
合計ファイルサイズを10MB以下にすること
- ファイルサイズを減らす為には、テクスチャサイズを圧縮するか、ポリゴン数を減らすこと
A-Frame (three.js,babylon.js)にimportした後に確認すること
ここでA-FrameとはWebAR開発可能なフレームワークの1つです。(three.js,babylon.jsも同様)
-
スケールを (1,1,1)にして、正しいスケールに見えるか確認すること
- もし10000倍以上違う場合、A-Frameなどのフレームワークでスケール調整するのではなく、使用しているモデリングツールでスケールを変更し、再度インポートすること
- A-Frameを使うケースで、もしモデルがAnimationを持つ場合、animation-mixer componentで動くことを確認する
- もしテクスチャの無い&&光沢のあるモデルの場合、何か反射するものを与えないと黒く見えてしまいます。これを解決するためには環境マップを使用します
シーン内のモデルに問題が生じた場合のデバッグ用Viewer
Don McCurdy氏の**GLTF Viewerにモデルをインポートしてください。**これは、A-Frame (three.js)と同じレンダラーを使用しているので、シーンの問題をデバッグするのに役立つはずです。
Online Converters (オンラインでのGLBコンバーターの紹介)
- https://www.creators3d.com/online-viewer
- https://boxshot.com/facebook-3d-converter/
- https://blackthread.io/gltf-converter/ (注意: マテリアルプロパティを失う可能性あり)
Native Converters (ネイティブコンバーターの紹介)
- Blender 2.8 Beta
- FBX2glTF CLI tool (supports GLB)
- Maya GLTF export (supports GLB, macOS/Windows)
- もっと知りたい人はこちら
私の場合、Maya GLTF exportをチームで使用していました。
Preparing an existing 3D File for an AR Camera (既存3Dファイルの準備の仕方)
超重要とのこと
-
exportする前に、以下を確認する
- Pivotがモデルの基準点になっているか
- Z軸がオブジェクトの前向きになっているか
-
Webコンテンツとしてアップロードする前に以下を確認する
- ポリゴン数が35000以下である
- ファイルを合計して15MB以下である
- ファイルサイズを削減するためにはテクスチャを圧縮するかポリゴン数を減らす
(さっきは10MBと述べられていたが、どちらが正しいかはわからず)
リグ付きキャラクター3Dモデルを準備する場合
以下の説明は私がMayaを持っていないため、元文章を日本語訳しただけになります (元のページを見ることをお勧めします)
- リグ付きキャラクターモデルを、お好みのモデリングソフトウェアからエクスポートします。この例では、Maya 2018 with FBX (2018)を使用しました。
- Animation ClipがClip毎にくぎられた1つのタイムライン上にあることを確認する
- Clipを以下の順番で整理する
- Clip 0: Idle animation (必須)
- Clip 1: Motion animation (必須)
- Clip 2: Custom Clip 1 (任意)
- ...
- Game Exporterを開き、以下のような設定を行う
- Export All
- "idle"を1番目、"motion"を2番目、以下他のclip
- Start/End frames per clipが正しい
- Save Clips to Single File
- Bake Animation ✅
- Up Axis: Y
- Embed Media ✅
- File Type: ASCII
- FBX Version: FBX 2018
-
GLBへコンバート
- 4パターン紹介します
- 1. オンラインコンバーターの使用
-
2. CLI Toolの使用
- 例) https://github.com/facebookincubator/FBX2glTF
- 最も信頼できるとのこと (MOST RELIABLE)
- 3. Maya GLTF export toolをインストール
- 4.他のソリューション
-
モデルとアニメーションを確認
- https://gltf-viewer.donmccurdy.com/ に移動
- 新しく作ったglbファイルをドラッグ&ドロップ
- モデルを調べ、ジオメトリやテクスチャに問題がないことを確認する
- Animationタブを開く
- 準備したAnimation Clipがリストに存在しているか確認する
- それぞれのクリップをクリックして正常に動作していることを確認する
静的な3Dモデルを準備する場合
- 3Dモデルを3Dモデリングツールからエクスポートします
- Blender 2.8bとSubstance PainterはどちらもGLTF形式をサポートしています
-
GLBへコンバート
- 上記のGLBへコンバートと同様です。
- モデルの確認
- https://gltf-viewer.donmccurdy.com/ に移動
- 新しく作ったglbファイルをドラッグ&ドロップ
- モデルを調べ、ジオメトリやテクスチャに問題がないことを確認する
ガイドラインはここまで！最後に注意点
-
このガイドラインは8thWallでWebARを作る場合という前提のガイドラインのため、使用するWebフレームワークによっては違うワークフローの方が良い可能性があります。そのためエンジニアは事前に確かめておく方が良いです。
-
glbのファイルサイズについて
- ファイルサイズが10MBと書かれていますが、WebARとして端末でデバッグするときに、10MB以上でも最新のiPhoneだと問題なく動く場合もあります。しかし、サービスを作る場合以下のケースを考える必要もあります。
- ネットワークがWifiではないケース
- 古い機種のAndroidなど、スペックが十分でないケース
- ファイルサイズが10MBと書かれていますが、WebARとして端末でデバッグするときに、10MB以上でも最新のiPhoneだと問題なく動く場合もあります。しかし、サービスを作る場合以下のケースを考える必要もあります。
以上のケースを考えると10MBは1つの基準として置いておく方が無難だと思っております。
以上注意点でした。