Compressed glb file is not loading in the editor

Sinlyu · March 30, 2021, 10:03pm

Hi,

i compressed some of my glb files with (meshoptimizer / gltfpack) and i just noticed that i can display them fine in the gltf viewer but the editor does not load them correctly into my assets.

is this intended behavior?

BR

yaustar · March 30, 2021, 10:09pm

What differences are you getting and how are loading them in the Editor?

Sinlyu · March 30, 2021, 10:21pm

okay i just noticed that happens with every glb. i can display them in the viewer but not drag and drop in the editor, but if i use an fbx and the editor converts it to an glb, i am able to drag and drop that.

yaustar · March 30, 2021, 10:28pm

Ah yes, the editor doesn’t handle importing GLBs directly yet.

Current workaround is the following https://developer.playcanvas.com/en/tutorials/loading-gltf-glbs/

We are currently looking to support import of GLBs and the next step is to release importing o FBX hierarchies as templates which is in very early beta.

Once that is done, then importing GLBs will come after.

Sinlyu · March 30, 2021, 10:29pm

Alright, thank you for the information

mvaligursky · March 30, 2021, 11:12pm

We’re not looking at adding the glb import into the Editor anytime soon though. But we’re keen to import fbx files as currently, convert them to glb as currently, but additionally have the glb use draco / meshoptimizer compression. But again, it will likely be months before this is ready.

Chris · April 1, 2021, 3:08am

It should also be noted if you use Draco or Meshopt, in addition to loading the models into the scene with scripts, you also need to add the WASM scripts / any changes to model loading yourself.

Example from @yaustar loading a GLB with Draco: https://playcanvas.com/project/730372/overview/loading-draco-compressed-glbs

MeshOpt support is a bit more experimental, if you need a place to start, I have a project showing meshopt compression: https://playcanvas.com/project/779762/overview/load-glb-model-with-meshopt

For ease of use, I’d recommend sticking with FBX since models are easy to tweak in the editor. If you’re looking for faster loading and you’re okay with messing with scripts, load GLBs with scripts. With that you can then use Draco to compress those. If your models require shape keys / morphs, then as a last resort I would go to MeshOpt.

Mark_Lundin · May 19, 2021, 1:27pm

I’m trying to modify the engine to natively support meshopt. It looks like a good start would be to add a check for the ‘EXT_meshopt_compression’ extension in the same way the draco path is handled

Although looking at the viewer implementation it seems like this might be overkill and could be added earlier in the asset processing. @mvaligursky what are your thoughts on this

mvaligursky · May 19, 2021, 2:21pm

Meshopt processes buffer views, so that should be easier to integrate, similar to how viewer does it.

If you look at the viewer, it uses processAsync callback on the buffer view here:

github.com

playcanvas/playcanvas-viewer/blob/4b2868ef938db592c358685f6b3c130ec73c0716/src/viewer.ts#L673


        this.app.assets.add(bufferAsset);
        this.app.assets.load(bufferAsset);
    } else {
        continuation(null, null);
    }
};
const containerAsset = new pc.Asset(gltfUrl.filename, 'container', gltfUrl, null, {
    // @ts-ignore TODO no definition in pc
    bufferView: {
        processAsync: processBufferView.bind(this)
    },
    image: {
        processAsync: processImage.bind(this)
    },
    buffer: {
        processAsync: processBuffer.bind(this)
    }
});
containerAsset.on('load', () => {
    this.onLoaded(null, containerAsset);

where it uses that small function above (processBufferView).

That gets called from here in the engine:

github.com

playcanvas/engine/blob/0763d1b43b552f43e1fba4d66cdb5248c7fcb62e/src/resources/parser/glb-parser.js#L1948


    }
    if (--remaining === 0) {
        callback(null, result);
    }
};
for (let i = 0; i < gltf.bufferViews.length; ++i) {
    const gltfBufferView = gltf.bufferViews[i];
    if (preprocess) {
        preprocess(gltfBufferView);
    }
    processAsync(gltfBufferView, buffers, function (i, gltfBufferView, err, result) {       // eslint-disable-line no-loop-func
        if (err) {
            callback(err);
        } else if (result) {
            onLoad(i, result);
        } else {
            const buffer = buffers[gltfBufferView.buffer];
            const typedArray = new Uint8Array(buffer.buffer,

So in theory that processBufferView function should be inlined here, just before the preprocess callback on the gltfBufferView is called. And then it could be removed from the viewer.

But note that even with this, meshOpt would only be partially supported. See details here on what else would need to be implemented for full support: