Issue reading glTF/GLB with draco compression using draco3dgltf in both client-side browser and backend Node.js

[sonipapa]

Hello,

I'm trying to create a utility ts package that has a function to read glTF and GLB files, and get their bounding box using gltf-transform. I followed the instructions in README/discussions and it works perfectly in backend Node.js - for any gltf/glb with MeshOpt compression or Draco compression.

The MeshoptDecoder doesn't have any issue supporting both client-side browser and backend Node.js, but the draco decoder loaded from the npm package breaks my client-side project and it doesn't work on web at all (I know the reason is because the exported decoder from draco3dgltf npm package is Node.js only and requires Node.js funtions fs and path - google/draco#977). I saw there's a suggestion to add as a script tag this for web - #811, but my package is a util package to be consumed freely by a few client-side browser projects (React projects) and a few backend Node.js projects.

Does anyone have any suggestions on how I should import and install the draco decoders so that I could support both browser and Node.js environments?

This is how I implement it right now - mostly following the doc and previous discussions.

import { Document, getBounds, JSONDocument, NodeIO, WebIO } from '@gltf-transform/core';
import { ALL_EXTENSIONS } from '@gltf-transform/extensions';
import { createDecoderModule } from 'draco3dgltf';
import { MeshoptDecoder } from 'meshoptimizer';

function someMethodToReadFileAndGetBoundingBox() {
    // Create IO reader based on file type
    const io = isWebFile() ? new WebIO() : new NodeIO();
    
    // Configure I/O.
    io.registerExtensions(ALL_EXTENSIONS)
        .registerDependencies({
            'draco3d.decoder': await createDecoderModule(),
            'meshopt.decoder': MeshoptDecoder,
        });
    
    // some steps to create jsonDoc
    ...
    
    // Read jsonDoc and get bounding box
    const document = await io.readJSON(jsonDoc);
    const root = document.getRoot();
    const scene = root.getDefaultScene() || root.listScenes()[0];
    const bbox = getBounds(scene);
    return bbox;
}

Thanks!

[donmccurdy]

Ideally Draco would publish web-ready ESM builds to npm, see:

• Modernizing Draco package - ES modules and unifying NodeJS/Browser builds. google/draco#977

But since the official builds on npm are only for Node.js, I think it's necessary to either add global script tags to the application page (not ideal for a library to do this, as you mention) or to compile Draco from source with different emscripten configuration.

[sonipapa]

Thanks for the reply! I managed to get it working on both browser and node.js by downloading the decoder scripts (js and wsam) from https://github.com/google/draco/tree/main/javascript to my package, and importing the decoder directly from the js script. This script seems to have a environment branching logic for browser and node.js

import * as DracoDecoder from '<local_path>/draco_decoder_gltf.js';

function someMethodToReadFileAndGetBoundingBox() {
    ...

    // Configure I/O.
    io.registerExtensions(ALL_EXTENSIONS)
        .registerDependencies({
            'draco3d.decoder': await DracoDecoder.default(),
            'meshopt.decoder': MeshoptDecoder,
        });

    ...
}