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!