众所周知,GLTF格式除了glb格式外,还有GLTF+BIN+Texture这种存储方式。当我们使用node调用gltf-popeline对(GLTF+BIN+Texture)后者进行压缩的时候,有几个注意点。
1、不要使用node提供的fs模块,fs.writeFile进行写文件。
var gltfPipeline = require('gltf-pipeline');
const fs = require('fs');
var processGltf = gltfPipeline.processGltf;
var gltf = fs.readFileSync('./44/untitled.gltf');
var options = {
dracoOptions: {
compressionLevel: 10
}
}
console.log(gltf)
processGltf(gltf, options).then(function(results) {
console.log(results)
fs.writeFileSync('model1.gltf', results.gltf);
});
上述的代码虽然能够成功生成model1.gltf的文件,但是你会发现生成的文件和压缩前的文件内容是没有变化的。也就是draco压缩并没有生效。所以需要使用作者推荐的fs-extra插件的读写方法进行读写。代码如下:
var gltfPipeline = require('gltf-pipeline');
var fsExtra = require('fs-extra');
var processGltf = gltfPipeline.processGltf;
var gltf = fsExtra.readJsonSync('./44/untitled.gltf');
var options = {
dracoOptions: {
compressionLevel: 10
}
}
processGltf(gltf, options).then(function (results) {
fsExtra.writeJsonSync('./123.gltf', results.gltf);
}).catch(function (err) {
console.log(err)
});
2、需要加上resourceDirectory参数。
对于GLTF+BIN+Texture这种GLTF格式,在压缩的时候需要加上一个参数:resourceDirectory。也就是指明GLTF文件存放的文件夹。不加上的话,会提示 glTF model references separate files but no resourceDirectory is supplied。正确代码如下:
var gltfPipeline = require('gltf-pipeline');
var fsExtra = require('fs-extra');
var processGltf = gltfPipeline.processGltf;
var gltf = fsExtra.readJsonSync('untitled.gltf');
var options = {
resourceDirectory: './',
dracoOptions: {
compressionLevel: 10
}
}
processGltf(gltf, options).then(function (results) {
fsExtra.writeJsonSync('untitled1.gltf', results.gltf);
}).catch(function (err) {
console.log(err)
});
生成文件后,打开GLTF格式,你会发现原先对BIN的引用编程了一串data:application/octet-stream;开头的编码,贴图引入也发生变化,也就是压缩后生成的GLTF文件其效果与GLB效果一样,gltf-popeline将原先的贴图和bin文件全部整合到了.gltf文件中。