我这里的3dtile有一部分数据是由gltf构成的,在创建模型(model)的时候,构造函数里面,已经将该数据进行了解析。现在我们来看一下源代码是如何执行的,这里截取构造函数里面的一部分代码。
options = defaultValue(options, defaultValue.EMPTY_OBJECT);
var cacheKey = options.cacheKey;
this._cacheKey = cacheKey;
this._cachedGltf = undefined;
this._releaseGltfJson = defaultValue(options.releaseGltfJson, false);
var cachedGltf;
if (defined(cacheKey) && defined(gltfCache[cacheKey]) && gltfCache[cacheKey].ready) {
// glTF JSON is in cache and ready
cachedGltf = gltfCache[cacheKey];
++cachedGltf.count;
} else {
// glTF was explicitly provided, e.g., when a user uses the Model constructor directly
var gltf = options.gltf;
if (defined(gltf)) {
if (gltf instanceof ArrayBuffer) {
gltf = new Uint8Array(gltf);
}
if (gltf instanceof Uint8Array) {
// Binary glTF
var parsedGltf = parseGlb(gltf);
cachedGltf = new CachedGltf({
gltf : parsedGltf,
ready : true
});
} else {
// Normal glTF (JSON)
cachedGltf = new CachedGltf({
gltf : options.gltf,
ready : true
});
}
cachedGltf.count = 1;
if (defined(cacheKey)) {
gltfCache[cacheKey] = cachedGltf;
}
}
}
setCachedGltf(this, cachedGltf);
var basePath = defaultValue(options.basePath, '');
this._resource = Resource.createIfNeeded(basePath);
主要是下面的这句代码,执行了转换。
var parsedGltf = parseGlb(gltf);
现在我们将断点打入到这个位置,进入到了parseGlb.js里面。如下所示。
function parseGlb(glb) {
// Check that the magic string is present
var magic = getMagic(glb);
if (magic !== 'glTF') {
throw new RuntimeError('File is not valid binary glTF');
}
var header = readHeader(glb, 0, 5);
var version = header[1];
if (version !== 1 && version !== 2) {
throw new RuntimeError('Binary glTF version is not 1 or 2');
}
if (version === 1) {
return parseGlbVersion1(glb, header);
}
return parseGlbVersion2(glb, header);
}
看一下parseGlbVersion2的定义,如下所示。
function parseGlbVersion2(glb, header) {
var length = header[2];
var byteOffset = 12;
var gltf;
var binaryBuffer;
while (byteOffset < length) {
var chunkHeader = readHeader(glb, byteOffset, 2);
var chunkLength = chunkHeader[0];
var chunkType = chunkHeader[1];
byteOffset += 8;
var chunkBuffer = glb.subarray(byteOffset, byteOffset + chunkLength);
byteOffset += chunkLength;
// Load JSON chunk
if (chunkType === 0x4E4F534A) {
var jsonString = getStringFromTypedArray(chunkBuffer);
gltf = JSON.parse(jsonString);
addPipelineExtras(gltf);
}
// Load Binary chunk
else if (chunkType === 0x004E4942) {
binaryBuffer = chunkBuffer;
}
}
if (defined(gltf) && defined(binaryBuffer)) {
var buffers = gltf.buffers;
if (defined(buffers) && buffers.length > 0) {
var buffer = buffers[0];
buffer.extras._pipeline.source = binaryBuffer;
}
}
return gltf;
}
使用如下的语句将数据转为json格式,做相应的管线渲染。
var jsonString = getStringFromTypedArray(chunkBuffer);
gltf = JSON.parse(jsonString);
addPipelineExtras(gltf);
最后数据格式如下图所示。