如何将 gltf 编码/压缩为 draco [英] How to encode/compress gltf to draco

问题描述

我想在带有 reactjs 的 Threejs 中以编程方式使用 draco 压缩/编码 gltf 文件.我不想使用任何命令行工具，我希望它以编程方式完成.请给我一个解决方案.

I want to compress/encode gltf file using draco programatically in threejs with reactjs. I dont want to use any commandline tool, I want it to be done programatically. Please suggest me a solution.

我尝试使用 gltf-pipeline 但它在客户端不起作用.我在 reactjs 中使用 Cesium 库时显示错误.

I tried using gltf-pipeline but its not working in client side. Cesium library was showing error when I used it in reactjs.

推荐答案

是的，这可以通过 实现glTF-变换.还有一个关于three.js的开放功能请求，尚未实现.

Yes, this is can be implemented with glTF-Transform. There's also an open feature request on three.js, not yet implemented.

首先，您需要下载 Draco 编码器/解码器库(当前发布到 NPM 的版本不适用于客户端)，将它们托管在一个文件夹中，然后将它们作为全局脚本标签加载.应该有六个文件和两个脚本标签(将加载剩余的文件).

First you'll need to download the Draco encoder/decoder libraries (the versions currently published to NPM do not work client side), host them in a folder, and then load them as global script tags. There should be six files, and two script tags (which will load the remaining files).

文件:

• draco_decoder.js
• draco_decoder.wasm
• draco_wasm_wrapper.js
• draco_encoder.js
• draco_encoder.wasm
• draco_encoder_wrapper.js

<script src="assets/draco_encoder.js"></script>
<script src="assets/draco_decoder.js"></script>

然后，您需要编写代码来加载 GLB 文件、应用压缩以及对压缩结果执行某些操作.这将需要首先安装如下所示的两个软件包，然后将 Web 应用程序与您选择的工具捆绑在一起(我使用了 https://www.snowpack.dev/ 此处).

Then you'll need to write code to load a GLB file, apply compression, and do something with the compressed result. This will require first installing the two packages shown below, and then bundling the web application with your tool of choice (I used https://www.snowpack.dev/ here).

import { WebIO } from '@gltf-transform/core';
import { DracoMeshCompression } from '@gltf-transform/extensions';

const io = new WebIO()
    .registerExtensions([DracoMeshCompression])
    .registerDependencies({
        'draco3d.encoder': await new DracoEncoderModule(),
        'draco3d.decoder': await new DracoDecoderModule(),
    });

// Load an uncompressed GLB file.
const document = await io.read('./assets/Duck.glb');

// Configure compression settings.
document.createExtension(DracoMeshCompression)
    .setRequired(true)
    .setEncoderOptions({
        method: DracoMeshCompression.EncoderMethod.EDGEBREAKER,
        encodeSpeed: 5,
        decodeSpeed: 5,
    });

// Create compressed GLB, in an ArrayBuffer.
const arrayBuffer = io.writeBinary(document); // ArrayBuffer

这篇关于如何将 gltf 编码/压缩为 draco的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！