node环境下gltf-pipeline processGltf方法

众所周知,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文件中。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值