あなたの3Dモデルをウェブで公開
すべてのWebAR体験で、GLB (glTF 2.0 binary) 形式の3Dモデルの使用を推奨しています。 GLBはファイルサイズが小さく、パフォーマンスが高く、多彩な機能 (PBR、アニメーションなど) をサポートする、現在のWebARに最適なフォーマットです。
モデルをGLBフォーマットに変換する
エクスポートする前に、以下のことを確認してください：
- 原点はモデルの根元にある (地面にくっつくことを想定している場合)
- 物体の前方ベクトルはZ軸に沿う (正面を向いていることを想定している場合)
モデルがglTFとしてエクスポートされている場合は、glTFフォルダを gltf.reportにドラッグ＆ドロップし、Export をクリックしてGLBに変換してください。
3DモデリングソフトからglTF/GLBにエクスポートできないモデルは、BlenderでインポートしてgLTFとしてエクスポートするか、コンバータを使用してください。
オンラインコンバータ: Creators3D, Boxshot
ネイティブコンバータ: Maya2glTF, 3DS Max
コンバーターの全リストは、 https://github.com/khronosgroup/gltf#gltf-toolsでご覧いただけます。
glTF Viewer でモデルを表示してから、 8th Wallプロジェクトにインポートするのがよいでしょう。 これにより、8th Wallプロジェクトにインポートする前にモデルの問題点を発見することができます。
8th Wallプロジェクトにインポートした後、以下のことを確認してください：
- スケールは (1, 1, 1) で正しく表示されます。 スケールが大幅にずれている場合 (例：0.0001または 10000) 、コードでスケールを変更しないでください。 モデリングソフトで変更し、再度インポートしてください。 コード内でスケールを大幅に変更すると、3Dモデルでクリッピングの問題が発生する場合があります。
- マテリアルが正しく表示される。 モデルに反射する素材がある場合、反射するものがないと黒く見えることがあります。 反射材サンプルプロジェクトや ガラスサンプルプロジェクトをご参照ください。
3Dモデルのベストプラクティスについては、 GLB最適化セクションを参照してください。
5 Tips for Developers to Make Any 8th Wall WebAR Project More Realistic のブログ記事もご覧ください。
FBXをGLBに変換する
以下の説明ではFBX2glTF CLI conversion toolをMacのローカルにインストールして実行する方法を説明します。 このツールは、FBXからGLBへの変換において、8th Wallの社員がこれまで使用した中で最も信頼できるツールであり、これまで全てのファーストパーティコンテンツに使用してきました。
MacにFBX2glTFをインストールする。
- このファイルをダウンロードする： https://github.com/facebookincubator/FBX2glTF/releases/download/v0.9.7/FBX2glTF-darwin-x64
- ターミナルを開く
- ダウンロードフォルダに移動する：
cd ~/Downloads - ファイルを実行可能な状態にする：
chmod +x FBX2glTF-darwin-x64 - ダウンロードしたファイルに関する警告が表示された場合は、
Cancelをクリックします。
システム環境設定->セキュリティ & プライバシーを開き、ロックアイコンをクリックし、macOS パスワードを入力してください。
すべて許可をクリックします。- システム環境設定を閉じる。
- ターミナルウィンドウに戻る
- 前のコマンドを再実行します (上矢印を押すと前のコマンドが復元されます) ：
chmod +x FBX2glTF-darwin-x64 - 更新され警告が表示されるので、
開くをクリックします：
- この時点で、FBX2glTFを正常に実行することができるはずです。
FBX2glTFをシステムディレクトリにコピーする(省略可)
FBX2glTFコンバータを簡単に実行するために、/usr/local/binディレクトリにコピーしてください。 これにより、コマンドを実行するために毎回ダウンロードフォルダーに移動する必要がなくなります。
- ダウンロードフォルダから、
sudo cp ./FBX2glTF-darwin-x64 /usr/local/binを実行してください。 - おそらく、macOSのパスワードが要求されると思います。 入力して
Enterを押します。 /usr/local/binがデフォルトで PATH に入っているはずなので、FBX2glTF-darwin-x64を任意のディレクトリから実行できるようになります。
MacでFBX2glTFを起動する
- ターミナルで、fbxファイルがあるフォルダーに移動します。 ここでは、macOSのコマンドラインからディレクトリをトラバースするのに役立つコマンドを紹介します：
pwd端末のカレントディレクトリを出力します。ls現在のディレクトリの内容を一覧表示します。cdディレクトリを変更し、相対パス (例：cd ~/Downloads) または絶対パス (例：cd /var/tmp) をとります。
FBX2glTF-darwin-x64を実行し、入力ファイル (-i) および出力ファイル (-o) のパラメータを渡します。
FBX2glTFの例
FBX2glTF-darwin-x64 -i yourfile.fbx -o newfile.glb
- 上記の例では、
yourfile.fbxを、newfile.glbという新しいGLBファイルに変換します。 - 新しく作成したGLBファイルを https://gltf-viewer.donmccurdy.com/ にドラッグ＆ドロップして正しく動作することを確認します。
- glb変換の詳細設定については、以下のコマンドをご確認ください： https://github.com/facebookincubator/FBX2glTF#cli-switches
FBX2glTFバッチ変換
同じディレクトリに複数のFBXファイルがある場合、それらを一度に変換することができます
- ターミナルで、複数のFBXファイルが入ったフォルダに移動する
- 以下のコマンドを実行してください：
FBX2glTF バッチ変換例
ls *.fbx | xargs -n1 -I {}.FBX2glTF-darwin-x64 -i {} -o {}.glb
- これで、現在のフォルダにある各fbxファイルのglbバージョンが作成されるはずです！
GLB最適化
アセットを最適化することは、魔法のようなWebARコンテンツを作るための重要なステップです。 大きなアセットは、無限ロード、黒いテクスチャ、クラッシュなどの問題につながることがあります。
テクスチャーの最適化
テクスチャは通常ファイルサイズを大きくする最大の要因であるため、まずこれらを最適化するのがよいでしょう。
最良の結果を得るためには、1024x1024以下のテクスチャを使用することをお勧めします。 テクスチャーのサイズは常に2のべき乗 (512x512、1024x1024など) に設定する必要があります。
この作業はお好きな画像編集ソフトや3Dモデリングソフトで行うことができます。しかし、すでに既存のGLBモデルがある場合、3Dモデル内のテクスチャのサイズを変更する迅速で簡単な方法は、 gltf.reportを使用します。
- 3Dモデルをページ上にドラッグします。 左の欄で、希望するテクスチャサイズの最大値を設定します (1)
- Run (2) をクリックするとスクリプトが実行されます。 コンソール (左下) には操作の状態が表示されます。
- エクスポート (3) をクリックし、修正したGLBモデルをダウンロードします。
圧縮
圧縮することで、ファイルサイズを大幅に削減することができます。 Draco圧縮は最も一般的な圧縮方法です Blenderのエクスポート設定またはエクスポート後にgltf.reportで設定することができます。
圧縮されたモデルをプロジェクトに読み込むには追加の設定が必要です。 詳しくは、A-Frameサンプルプロジェクトまたはthree.jsサンプルプロジェクトをご参照ください。
ジオメトリの最適化
さらなる最適化のために、モデルをデシメーションしてポリゴン数を減らします。
Blenderで、 Decimateモディファイアをモデルに適用し、Ratioの設定を1以下の値にします。
書き出し設定で モディファイアの適用 を選択します。