GLTF（GL Transmission Format）是一种现代的三维模型传输格式，专为Web3D应用设计。以下是关于GLTF格式的详细介绍和示例。
GLTF格式的崛起
GLTF作为Web3D领域的JPEG，自2015年发布以来，逐渐成为三维模型在互联网上传输的标准格式。随着技术的发展，尤其是物联网、WebGL和5G技术的普及，GLTF格式的重要性日益凸显。
为什么选择GLTF？
- 跨平台支持：GLTF得到广泛的WebGL引擎支持，如Three.js、Cesium和Babylon.js。
- 高效传输：GLTF优化了模型数据的传输，减小了文件体积，加快了加载速度。
- 丰富的模型信息：GLTF不仅包含几何数据，还支持材质、纹理、动画等高级特性。
GLTF 2.0版本
GLTF 2.0由Khronos Group在2017年发布，相较于1.0版本，2.0在性能和特性上都有显著提升。
GLTF格式的结构
GLTF格式基于JSON，结构清晰，易于解析。一个典型的GLTF文件包含以下几个部分：
- 资产信息（
asset）：包含版本和版权信息。 - 材质（
materials）：定义模型的材质属性，如PBR（Physically Based Rendering）材质。 - 网格（
meshes）：包含模型的几何数据。 - 纹理（
images）和缓冲区（buffers）：存储纹理图像和模型的顶点数据。
示例：GLTF文件的结构
json
{
"asset": {
"version": "2.0"
},
"materials": [{
"pbrMetallicRoughness": {
"baseColorFactor": [1, 1, 0, 1],
"metallicFactor": 0.5,
"roughnessFactor": 1
}
}],
"meshes": [...],
"images": [{
"uri": "texture.png"
}],
"buffers": [{
"byteLength": 12345,
"uri": "data.bin"
}]
}.bin文件
GLTF文件可能伴随一个或多个.bin文件，这些文件以二进制形式存储顶点数据等信息，与GLTF文件中的buffers属性相对应。
二进制GLB文件
GLTF也支持二进制格式，即.glb文件，它将模型的所有资源打包成一个单一文件，减小了体积，加快了加载速度。
导出GLTF模型
- Blender：最新版本的Blender支持直接导出GLTF格式。
- 3ds Max：通过第三方插件，如BabylonJS Exporters，支持导出GLTF。
完整示例：在Three.js中加载GLTF模型
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js GLTF Loader Example</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script type="module">
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const loader = new GLTFLoader();
loader.load('path/to/your/model.gltf', function (gltf) {
scene.add(gltf.scene);
});
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>