GLTF: 如何直观地看到文件中的数据内容

前言

GLTF 把几何数据都存到了 bin 文件里面，数据量是变少了，但是可读性也变差了。有什么办法，可以查看里面的具体数据呢？有时候从某软件把数据导出成 GLTF 格式，发现少了一些几何图形或者是纹理不对，如何找到具体问题呢？

解决方案

用官方的 GLTF-Viewer 来查看：https://github.com/KhronosGroup/glTF-Sample-Viewer
下面用简单的贴图立方体做例子，看看它的数据是如何从 gltf 文件中读取的。

找到它对应的文件位置：
https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/2.0/BoxTextured/glTF/BoxTextured.gltf
截取 meshes 和 accessors：

    "meshes": [
        {
            "primitives": [
                {
                    "attributes": {
                        "NORMAL": 1,
                        "POSITION": 2,
                        "TEXCOORD_0": 3
                    },
                    "indices": 0,
                    "mode": 4,
                    "material": 0
                }
            ],
            "name": "Mesh"
        }
    ],
    "accessors": [
        {
            "bufferView": 0,
            "byteOffset": 0,
            "componentType": 5123,
            "count": 36,
            "max": [
                23
            ],
            "min": [
                0
            ],
            "type": "SCALAR"
        },
        {
            "bufferView": 1,
            "byteOffset": 0,
            "componentType": 5126,
            "count": 24,
            "max": [
                1.0,
                1.0,
                1.0
            ],
            "min": [
                -1.0,
                -1.0,
                -1.0
            ],
            "type": "VEC3"
        },
        {
            "bufferView": 1,
            "byteOffset": 288,
            "componentType": 5126,
            "count": 24,
            "max": [
                0.5,
                0.5,
                0.5
            ],
            "min": [
                -0.5,
                -0.5,
                -0.5
            ],
            "type": "VEC3"
        },
        {
            "bufferView": 2,
            "byteOffset": 0,
            "componentType": 5126,
            "count": 24,
            "max": [
                6.0,
                1.0
            ],
            "min": [
                0.0,
                0.0
            ],
            "type": "VEC2"
        }
    ],

对于一个立方体，它的表示包括：

1. 索引 indices
2. 法向量 NORMAL
3. 位置 POSITION
4. 纹理坐标 TEXCOORD_0

这些步骤都在：https://github.khronos.org/source/Renderer/webgl.js
用浏览器打开：https://github.khronos.org/glTF-Sample-Viewer-Release/
按 F12 进入调试模式。

获取索引号：

对应上文中的 accessors 第0号元素。

获取法向量：

对应上文中的 accessors 第1号元素。

获取位置：

对应上文中的 accessors 第2号元素。

或者纹理坐标：

对应上文中的 accessors 第3号元素。

从中可以看出获取法向量、位置和纹理坐标用的是同一种方法，从文件中也可以看出他们都是 primitives 的 attributes。

结论

GLTF 作为一种开放格式，提供的 viewer 是一个很棒的工具。要好好利用起来解决日常工作中遇到的问题。