Draco decoder for plain drc file not gltf, got error

Questions
1

Hello, I tried to decode the plain .drc file within draco example(bunny.drc). So I replaced the decocer file with the plain ones, like:

        BABYLON.DracoCompression.Configuration = {
            decoder: {
                wasmUrl: "http://127.0.0.1:8080/lib/draco_decoder.js",
                wasmBinaryUrl: "http://127.0.0.1:8080/lib/draco_decoder.wasm",
                fallbackUrl: "http://127.0.0.1:8080/lib/draco_wasm_wrapper.js",
            }
        };

i copied these 3 files from the draco repo on github.

but I got error like:

Uncaught (in promise) abort(). Build with -s ASSERTIONS=1 for more info.

it’s problem of the decoder its self or not?

1 Like
2

pinging @bghgary

3

@hjlld Do you mind creating a playground for this?

You can point directly to the files using raw github urls, e.g. https://raw.githubusercontent.com/google/draco/master/javascript/draco_decoder.js

4

hello @bghgary , sorry for late reply. Try this playground:

https://www.babylonjs-playground.com/#N3EK4B#10

var delayCreateScene = function () {
    var scene = new BABYLON.Scene(engine);
    scene.useRightHandedSystem = true;

    BABYLON.DracoCompression.Configuration = {
        decoder: {
            wasmUrl: "https://raw.githubusercontent.com/google/draco/master/javascript/draco_decoder.js",
            wasmBinaryUrl: "https://raw.githubusercontent.com/google/draco/master/javascript/draco_decoder.wasm",
            fallbackUrl: "https://raw.githubusercontent.com/google/draco/master/javascript/draco_wasm_wrapper.js",
        }
    };

    BABYLON.Tools.LoadFile("https://raw.githubusercontent.com/google/draco/master/javascript/example/models/bunny.drc", async function (data) {
        var dracoCompression = new BABYLON.DracoCompression();

        var attributes = {
            // [BABYLON.VertexBuffer.UVKind]: 0,
            // [BABYLON.VertexBuffer.NormalKind]: 1,
            // [BABYLON.VertexBuffer.TangentKind]: 2,
            // [BABYLON.VertexBuffer.PositionKind]: 3
        };

        var vertexData = await dracoCompression.decodeMeshAsync(data, attributes);
        var mesh = new BABYLON.Mesh("dracoMesh", scene);
        var geometry = new BABYLON.Geometry("dracoGeometry", scene, vertexData, undefined, mesh);

        mesh.material = new BABYLON.PBRMaterial("material", scene);
        mesh.material.sideOrientation = BABYLON.Material.CounterClockWiseSideOrientation;
        mesh.material.metallic = 0;

        scene.createDefaultCameraOrLight(true, undefined, true);
    }, undefined, undefined, true);

    return scene;
};```
5

GitHub is serving these js files as plaintext mimetype which causes Chrome to choke on them. I tried this locally and it was able to decode the bunny. I only got indices out of it since attributes was empty.

EDIT: I tried uncommenting out the code for the attributes and got the same error as you. The issue here is that the attribute values are wrong, but there isn’t actually a way to do this with the existing code in Babylon.js.

Can you file an issue on GitHub?

6

Problem solved, try the attribute options below, and it works:

                var attributes = {
                    [BABYLON.VertexBuffer.UVKind]: 'uv',
                    [BABYLON.VertexBuffer.NormalKind]: 'normal',
                    //[BABYLON.VertexBuffer.ColorKind]: 'color',
                    [BABYLON.VertexBuffer.PositionKind]: 'position'
                };

it seems like, for the plain drc file, the attribute id is customized for the DRACOLoader of three.js, so it’s directly written in the THREE.DRACOLoader() source code:

    // Native Draco attribute type to Three.JS attribute type.
    this.nativeAttributeMap = {
      'position' : 'POSITION',
      'normal' : 'NORMAL',
      'color' : 'COLOR',
      'uv' : 'TEX_COORD'
    };

see three.js/DRACOLoader.js at a46700a4261fe20f03418bea9417e59898a23f50 · mrdoob/three.js · GitHub

am i understood correctly?

maybe we should also make a default value of the attribute option of BABYLON.DracoCompression.decodeMeshAsync() for plain .drc file or when nothing provided.

and change the attribute type definition from [kind: string]: number to [kind: string]: number | string

7

Yeah, that’s what I was thinking. If you can file an issue, I’ll make the fix when I can. I’m at a conference right now.

Or if you want, you can make a PR yourself. :sweat_smile:

8

done!

have a nice gdc trip.

ps, i just found we also have a talk on Twitter about the babylon native topic.:sweat_smile:

1 Like
9

Hehe, I noticed. :nerd_face:

1 Like
10

The fix landed with https://github.com/BabylonJS/Babylon.js/pull/6130.

See https://playground.babylonjs.com/#22MFU2#4 for an example.

1 Like
11

Thank you @bghgary, i’ll try it later.