A-FRAME 公式ドキュメントの非公式日本語訳
1.3.0 › components

gltf-model

glTF (opens new window) (GL Transmission Format) is an open project by Khronos providing a common, extensible format for 3D assets that is both efficient and highly interoperable with modern web technologies.

[glTF][about-gltf] (GL Transmission Format)は、Khronosによるオープンプロジェクトで、3D資産のための共通で拡張可能なフォーマットで、効率的かつ最新のWeb技術との高い相互運用性を提供するものです。

gltf-modelコンポーネントは、glTF (.gltf または .glb) ファイルを使用して3Dモデルを読み込みます。

glTFはかなり新しい仕様で、採用がまだ拡大していることに注意してください。three.jsのglTFローダー (opens new window)とコンバーターに関する作業は、まだ活発です。

注意: A-FrameはglTF 2.0に対応しています。古いバージョンのglTFフォーマットを使用しているモデルには、[donmccurdy/aframe-extrasdonmccurdy/aframe-extras (opens new window)のgltf-model-legacyをお使いください。

# なぜglTFを使うのか?

頂点、法線、テクスチャ座標、基本的なマテリアルのみをサポートする旧来のOBJフォーマットと比較して、glTFはより強力な機能群を提供します。上記全てに加え、glTFは以下を提供します。

  • 階層的なオブジェクト
  • シーン情報(光源、カメラ)
  • スケルトン構造およびアニメーション
  • より堅牢なマテリアルとシェーダー

アニメーションを伴わないシンプルなモデルの場合、OBJは一般的で信頼性の高い選択肢となります。

COLLADAやFBXと比較すると、サポートされる機能は非常に似ています。しかし、glTFはエディタ形式ではなく「伝送形式」の提供に重点を置いているため、Web技術との相互運用性がより高くなっています。例えるなら、2D画像の編集には.PSD（Adobe Photoshop）形式が便利ですが、Webで使うには画像は.JPGに変換されます。それと同じように、glTFは3D資産をよりシンプルに転送しながら、同じ結果をレンダリングする方法なのです。

つまり、glTFのモデルは、他のフォーマットよりも、より確実にA-Frameで動作すると思ってください。

# 例

glTFファイルのsrcを指定したアセットを指して、glTFモデルを読み込みます。

<a-scene>
  <a-assets>
    <a-asset-item id="tree" src="/path/to/tree.gltf"></a-asset-item>
  </a-assets>

  <a-entity gltf-model="#tree"></a-entity>
</a-scene>

# Values

タイプ 概要
selector <a-asset-item>へのセレクタ
string 文字列url()で囲まれたgLTFファイルへのパス

# イベント

イベント名 概要
model-loaded glTFモデルがシーンにロードされました。
model-error glTFモデルがロードされなかった。

# インラインローディング

あるいは、url()の中で直接パスを指定してglTFモデルをロードすることもできます。しかし、シーンはレンダリングの前にリソースがロードされるのを待ちません。

<a-entity gltf-model="url(/path/to/tree.gltf)"></a-entity>

# アニメーション

glTFモデルのアニメーションを使いたい場合は、aframe-extras (opens new window)のanimation-mixer (opens new window) コンポーネントを使用します。デフォルトでは、すべてのアニメーションはループで再生されます。

<a-entity gltf-model="#monster" animation-mixer></a-entity>

# 圧縮を利用する

glTFのファイルサイズは、Draco (opens new window) または Meshopt (opens new window)圧縮を使用すると小さくなる場合があります。どちらもテクスチャには影響しないので、他の方法で圧縮またはサイズ変更する必要があります。さらに、圧縮はフレームレートに特に影響を与えません。モデルの三角形や描画呼び出しが多すぎる場合、圧縮しても変わりませんので、代わりにBlender (opens new window) や gltfpack (opens new window)などのツールを使ってモデルを簡素化する必要があります。

  • Draco: ジオメトリの圧縮で、しばしばジオメトリサイズを90-95%削減します。デバイス上で解凍するために余分な時間がかかりますが、これはWeb Workerのメインスレッドから発生します。
  • Meshopt。 ジオメトリ、モーフターゲット、アニメーションの圧縮を行います。可逆圧縮（gzip など）と組み合わせると、Meshopt は Draco と同様の圧縮率になり、解凍ははるかに速くなります。注：一部のウェブサーバーは .glb または .gltf ファイルでの gzip をサポートしていません (参照：GitHub ページ (opens new window))。

既存のglTFモデルを最適化するには、以下のようなツールを使用します。

また、以下のようにシーンのプロパティを設定し、デコーダライブラリを読み込む必要があります。

# シーンプロパティ

DracoやMeshoptで圧縮したglTFモデルを使用する場合、必要なデコーダーのパスを設定する必要があります。

<a-scene gltf-model="dracoDecoderPath: path/to/decoder/;
    meshoptDecoderPath: path/to/meshopt_decoder.js;">
  <a-entity gltf-model="url(pony.glb)"></a-entity>
</a-scene>
Property Description Default Value
dracoDecoderPath ドラレコデコーダライブラリへのパスです。 ''
meshoptDecoderPath Meshopt デコーダーへのパス。 ''

dracoDecoderPath パスには、3つのファイルを含むフォルダを指定する必要があります。

  • draco_decoder.js — Emscripten でコンパイルされたデコーダで、IE11 のような古いブラウザと互換性がある。
  • draco_decoder.wasm — WebAssembly デコーダ、モダンブラウザと互換性がある。
  • draco_wasm_wrapper.js — WASM デコーダの JavaScript ラッパー。

これらのファイルは three.js リポジトリの examples/js/libs/draco/gltf (opens new window) から入手可能です。gltf-modelコンポーネントは、WASMとJavaScriptのどちらのデコーダを使用するかを自動的に選択するので、両方を含める必要があります。Google がホストしている Draco デコーダライブラリを使用すると、これらのライブラリを自分のプロジェクトに含める必要がなくなります。https://www.gstatic.com/draco/v1/decoders/ を dracoDecoderPath の値として設定してください。

meshoptDecoderPath パスには、Meshopt デコーダーの完全なファイルパス（ファイル名を含む）を指定します（通常は meshopt_decoder.js という名前です）。Meshopt には WebAssembly のサポートが必要です。CDN でホストされ、バージョン管理されたデコーダーは https://unpkg.com/meshoptimizer@0.16.0/meshopt_decoder.js で入手できます。また、meshoptimizer GitHub リポジトリ (opens new window)からコピーをダウンロードすることもできます。

# 他のリソース

Sketchfab (opens new window)では10万以上のglTFモデルが無料でダウンロードでき、様々なエキスポーターやコンバーターが利用可能です。

利用可能な機能、コミュニティのリソース、貢献の方法については、glTFの公式仕様書 (opens new window)をご覧ください。

← hand-controls →

TABLE OF CONTENTS
EXAMPLES
公式ドキュメント