[SOLVED] PlayCanvas glTF DRACO compression support

Hi… I am trying to use the open-source playcanvas engine to render a gLTF model with DRACO compression. I am using source files from playcanvas-gltf module to load the model into playcanvas… It keeps throwing an error Cannot read property 'DecoderBuffer' of undefined. I am using the latest playcanvas engine release 1.27.0

Hi @DANIEL_SSEJJEMBA and welcome!

DRACO support was added to engine very recently, indeed it may be a bug or something similar.

Try posting a bug request on the engine repo about it and if you are able supply a sample playcanvas project url that reproduces your issue:

1 Like

Calling @mvaligursky :smile:

1 Like

playcanvas-gltf module is the gltf support written few years ago. This is getting replaced by glb support added directly into the engine. If you have on latest engine as you say, you don’t need the module at all. See the new viewer we are developing which is using built in glb (with draco) here as an inspiration: https://github.com/playcanvas/engine/tree/master/tools/glb-viewer

Thanks @mvaligursky, My problem now is how I can access this support from the pc api. it seems to be missing in the docs as it is understandably still in development. I wouldn’t mind using the playcanvas-gltf module for now as this gets more clear but I have got it to render the model succesfully by adding the decoderModule from draco but still it doesn’t seem to render the textures correctly…
With DRACO compression


Without DRACO compression

Hi @DANIEL_SSEJJEMBA
Does the file in question show up okay in an online viewer that supports other Draco formats?
You can drag and drop the glTF file to the following online viewer to try viewing it.

three.js glTF Viewer
https://gltf-viewer.donmccurdy.com/
Babylon.js Sandbox
https://sandbox.babylonjs.com/
PlayCanvas glTF Viewer (using playcanvas-gltf)
https://playcanvas.github.io/playcanvas-gltf/viewer/index.html

@DANIEL_SSEJJEMBA - have a look at the link I sent

index.html loads engine - playcanvas.js, and also wasm-loader.js to allow us to load wasm draco module, and a viewer.js which is the view app itself.

inside viewer, have a look at “load” function - that’s how you access it. Also, before you can call that for draco compressed models, see how DracoDecoderModule is loaded here as well.

you can also just do local hosting for engine folder on your computer, load index.html file into your browser, and drag & drop your glb into it.

I think there could be an issue if your textures are in separate binary file, I’m not sure loading of that is fully supported yet. If they’re part of glb file, that works fine.

@slimbuck - adding you in case you have some further advice.

@cx20 thanks, I have looked at the output in the three online viewers… half of the problem is with the model and I have fixed that drawn a new model from blender… but also the model doesn’t look the same for threejs viewer and the last two viewers… all show different results… But thanks atleast I know where the problem is coming from… Also @mvaligursky thanks for the details… my models are all embedded so i’ll be looking at migrating my implementation

@mvaligursky The glb viewer doesn’t let me drag and drop… I have tried it on chrome… It just changes the window location to my local glb file…

That’s strange, it works for me in every browser. I just tested in Chrome on Mac, and Chrome and Firefox on Windows. I host my playcanvas project, and start the viewer this way:

http://localhost:1234/engine/tools/glb-viewer/

and then simply drag & drop glb file into the middle of the viewer.

Ohhh found it was an issue with blender implementation of the DRACO compression… Thanks all… works fine now…

2 Likes