如何 encode/compress gltf 到 draco

Question

我想 compress/encode gltf 文件在 threejs 和 reactjs 中以编程方式使用 draco。我不想使用任何命令行工具，我希望它以编程方式完成。请给我一个解决方案。

我尝试使用 gltf-pipeline，但它在客户端不起作用。在reactjs中使用Cesium库时报错

Answer 1

是的，这可以用 glTF-Transform. There's also an open feature request on three.js 实现，尚未实现。

首先，您需要download the Draco encoder/decoder libraries（当前发布到 NPM 的版本不能在客户端运行），将它们托管在一个文件夹中，然后将它们作为全局脚本标签加载。应该有六个文件和两个脚本标签（将加载剩余的文件）。

文件：

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/）。

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

Answer 2

在最新的1.5.0版本中，这两个文件是什么？ draco_decoder_gltf.js 和 draco_encoder_gltf.js。这是否意味着我们不再需要 draco_encoder 和 draco_decoder 文件？以及我们如何在不使用 MeshBuilder 的情况下调用转码器接口。更简单的 API 一定会更好。

如何 encode/compress gltf 到 draco

How to encode/compress gltf to draco

three.js

reactjs

gltf