glTF [3DCG]

glTF

JSON データとして 3DCG のアセット (モデル、あるいはシーン) を保存するファイル形式。拡張子は .gltf が用いられる。glTF のバイナリ形式として GLB ファイル (拡張子：.glb) がある。

参考：

glTF Overview | The Khronos Group Inc

glTF – Wikipedia

仕様

参考：

KhronosGroup/glTF: Runtime 3D Asset Delivery – GitHub

概要

参考：

今話題の 3D ファイル形式 glTF で WebGL の表現力を高めよう！- Qiita

使い方

参考：

PBR でブラウザでもリアルな表現をしよう！ | SRETKS

各ツールから glTF 形式でアニメーション出力 | 株式会社モックス

WebGL 向け 3DCG 素材の glTF 書き出しについての覚書 | shujihirai

3D Files for Web AR | 8th Wall

Draco エクステンション

Draco ライブラリを使用してメッシュデータの圧縮・展開を行う glTF の拡張スキーマ

参考：

KhronosGroup/glTF/extensions/2.0/Khronos/KHR_draco_mesh_compression – GitHub

google/draco: Draco is a library for compressing and decompressing 3D geometric meshes and point clouds. It is intended to improve the storage and transmission of 3D graphics – GitHub

DRACOLoader | three.js docs [Official]

Three.js を使って DRACO 圧縮した glTF 形式の 3D モデルを読み込むメモ | 読書乾燥文

劇的に 3D データ容量を削減する DRACO 圧縮のデータを自前描画する方法 – Qiita

Blender から描きだした gltf ファイルを draco で圧縮して Three.js で使用したい – teratail

WebGL ライブラリ

• Three.js
• Babylon.js

参考：

glTF 対応 WebGL ライブラリを比較してみる – Qiita

PBR マテリアル

参考：

KhronosGroup/glTF/extensions/2.0/Khronos/KHR_materials_pbrSpecularGlossiness – GitHub

Spec/Gloss different in Substance Painter, no max statement · Issue #1443 · KhronosGroup/glTF – GitHub

Provide a super simple way for engines to add support for spec gloss · Issue #331 · CesiumGS/gltf-pipeline – GitHub

サンプルモデル

参考：

KhronosGroup/glTF-Sample-Models: glTF Sample Models – GitHub

Sketchfab

Sketchfab のモデルはアップロードされた形式以外に glTF 形式でダウンロードできる。

参考：

Free Models | Sketchfab

リンク

参考：

glTF – Qiita

glTF Viewer

参考：

donmccurdy/three-gltf-viewer: Drag-and-drop preview for glTF 2.0 models in WebGL using three.js – GitHub

glTF Viewer – WebGLを使った glTFビューワー | MOONGIFT

glTF-Sample-Viewer

参考：

KhronosGroup/glTF-Sample-Viewer: Physically-Based Rendering in glTF 2.0 using WebGL – GitHub

glTF Sample Viewer (github.khronos.org)

gltf-pipeline

glTF ファイルを JSON 形式 (.gltf) からバイナリ形式 (.glb) に変換したり、Draco でデータ量を圧縮したりできるツール

参考：

CesiumGS/gltf-pipeline: Content pipeline tools for optimizing glTF assets – GitHub

gltf-pipeline – npm

model-viewer

参考：

model-viewer [Official]

google/model-viewer: Easily display interactive 3D models on the web and in AR! – GitHub

google/model-viewer/packages/model-viewer – GitHub

model-viewer で WebAR やってみる！ – Qiita

Model Editor (modelviewer.dev)

3D Viewer (Chrome 拡張)

参考：

FBX, glTF, GLB 3D Viewer | Chrome ウェブストア [公式]

Babylon.js

参考：

Babylon.js – Powerful, Beautiful, Simple, Open Web-Based 3D At Its Best [Official]

BabylonJS/Babylon.js: Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework – GitHub

three.js

参考：

three.js – JavaScript 3D library [Official]

mrdoob/three.js: JavaScript 3D library – GitHub

glTF を Three.js で読み込み | Pentacreation BLOG

three.js で .gltf / .glb キャラクターを表示する | CodeLabo

何も知らない人が WebGL でキャラクター描画させるまで – Qiita

Blender から GLTF を出し、 Three.js で使うまでの覚書 モデルメッシュ編 – Qiita

Blender で FBX 形式を glTF 形式に変換して Three.js でアニメーションさせる 1 | RYO620

Blender で FBX 形式を glTF 形式に変換して Three.js でアニメーションさせる 2 | RYO620

GLTFLoader | three.js docs [Official]

HoloLens 用 glTF Viewer

HoloLens で glTF モデルを MR として描画するビューワー

参考：

glTF Viewer | Microsoft Store [公式]

A Simple glTF Viewer for HoloLens | Mike Taulty