JSONによって3Dモデルやシーンを表現するフォーマットである。「3DにおけるJPEG」と表現されることもある。2016において発表された。glTFは3Dシーンを圧縮し、WebGLなどのAPIを利用するアプリケーションの実行時処理を最小化する、効率的で相互運用可能なアセット配布フォーマットとなることを意図している。glTFはまた、3Dコンテンツ作成ツールやサービスのための共通発行フォーマットを定義している。3Dモデル形式には、.objや.fbx、.daeといった汎用形式や、.3dsや.blendなどの3Dモデリングツール専用ファイル形式が存在します。これらは、モデリングツールに強い依存があったり、オフラインでの利用が前提のため、インターネットでの利用を考えると非効率でした。glTFはこうした問題を解決し、プラットフォームにも依存しない、オープンで誰でも利用でき、インターネットでの配信を前提に作られたファイル形式として、3DおけるPNGやMP4のような立ち位置を目指して作られました。https://www.codegrid.net/articles/2018-gltf-1/glTFファイルの作り方glTFファイルを作るには、既存の3Dモデル(.objや.dae)を、ツールを使ってglTF形式に変換する方法と、3Dモデリングツールを使って、glTF形式で出力する方法があります。後者の方法では、無料で利用できるBlenderを使うと良いかと思います。Blenderとは、3次元のCGアニメーションを自由に制作できるアプリケーションソフトです。オープンソースのフリーソフトであるため、ダウンロードすれば誰でも簡単に利用できます。価格が無料なのに、有料ソフトにも劣らない機能を持っていることが、このソフトの特徴です。本格的なCGアニメ制作ソフトとして使用できるため、世界中に多くのユーザーがいます。https://www.blender.org/https://vook.vc/n/2491Blenderでモデリングした3DモデルをglTFでエクスポートすることができます。glTFファイルを無料で探す方法3Dモデリングソフトの操作は複雑で、慣れが必要になりますので、今回は一から作るのではなく、3Dモデルが配布されているサイトから直接ダウンロードして利用します。glTF形式は、JSON形式のglTFファイルと、テクスチャ画像などの複数のファイルで構成されています。複数ファイルに分かれてしまっているとファイルの管理は煩雑になってしまいますので、これらをバイナリ形式でまとめたglb形式のファイルを利用します。https://www.cgtrader.com/glTFファイルをWebブラウザに表示させてみるglTFをWebブラウザで表示するには、対応するWebGLライブラリなどを使う必要があります。今回は、デファクトスタンダートとも言える、three.jsを使っていきます。three.jsとは、手軽に3Dコンテンツを制作できる商用利用可能なJavaScriptライブラリ。WebGLだけで3D表現をするためには、立方体1つ表示するだけでも多くのJavaScriptやGLSLコードを書く必要があり専門知識も必要です。three.jsを使えばJavaScriptの知識だけで簡単に3Dコンテンツが作成できるため、手軽に扱えるようになります。https://threejs.org/今回、three.jsの詳細の説明は省かせていただきますが、JavaScriptで以下のコードになります。camera);}three.jsでglTFファイルをロードするには、GLTFローダーを使います。成功すれば、このように表示されることが確認できたかと思います。ScrollTriggerを使ってパララックス化するScrollTriggerとはWebページのスクロールに応じて、任意の操作を簡単に行うためのJavaScriptライブラリです。このScrollTriggerを使って、読み込んだglTFをパララックス化してみます。https://greensock.com/scrolltrigger/ます、GSAP本体とScrollTrigger.jsの2つを読み込みます。CDNから読む込む場合は以下を書きます。src="//cdn.jsdelivr.net/npm/gsap@3.7.0/dist/ScrollTrigger.min.js"></script>パララックス化するJavaScriptは、今回はこれだけです。}});簡単に説明すると、.js_box要素の上部が、ブラウザの上部と重なると、.js_ice-cream要素が固定され、.js_box要素の下部がブラウザの下部と重なると、.js_ice-cream要素の固定が解除される、という内容です。ScrollTriggerについての詳細は今回は省きますが、以下の記事がとてもわかりやすく解説しています。https://yumegori.com/gsap-scrolltrigger3Dモデルといえど、ブラウザに表示されれば、他のDOM要素と同様に扱えるので、重ね順を変更して、前面にも、背面にも、テキストや画像をのせることができ、パララックス対象の要素として、JavaScriptでアニメーションさせる事も可能です。これでも良いように思えますが、より臨場感を出すために、カメラを移動させてみます。camera);}カメラの位置をスクロールに合わせて移動させることで、よりダイナミックな表現を実現できました。2.0は、発表当時とても話題になり、一時期Facebookでも採用されるなど、注目度が上がりましたが、ここ最近、めっきり話題に登らなくなり、忘れかけてた人もいるかもしれません。Blenderやthree.jsなど、サポートも増えており、次世代3Dフォーマットとして、定着してくる可能性はあります。今回のコンテンツ制作において、glTFが必須というわけではありませんが、バイナリ化されたglbは特に扱いが楽でした。glTF自体はJSONですので、変更が容易にできるという点は、何かのサービスに活用できるのではと思います。knockknock元Flasherのフロントエンドエンジニアです。WEB制作会社でプレイングマネージャーをしています。React.js、Vue.js、WebGL周りに興味があります。Discussionknockknock元Flasherのフロントエンドエンジニアです。WEB制作会社でプレイングマネージャーをしています。React.js、Vue.js、WebGL周りに興味があります。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。