🦕 Draco support (or meshopt )

[LAGENCECREE]

Hi,

First of all — I love OGL!!! Thanks for it.

I’m trying to optimize load times by using Draco compression on a .glb model.

• My original .glb (≈300kb), exported from Blender, loads fine in OGL.
• I created a Draco-compressed version with the following command:
  npx @gltf-transform/cli draco original.glb draco.glb
  This reduced the file size to ≈20kb.

But when I try to load draco.glb with OGL, I get the following error:
Uncaught (in promise) TypeError: can't access property "decodeGeometry", this.dracoManager is undefined

To check if the problem was with the glb file, i loaded in threejs editor -> no error and model successly loaded

From the OGL examples I’ve checked, https://oframe.github.io/ogl/examples/load-gltf.html ,
unlike threejs,
there doesn’t seem to be any special setup required to load a Draco-compressed .glb
they appear to be loaded the same way as regular .glb files.

So i basicaly use :

a component to manage glb loads

import {
  GLTFLoader,
  Transform
} from 'ogl';

export function GLBComp(gl) {

  let _this = this;  
 
  let _parent = new Transform(); 
  
  _this.getParent = function () {
    return _parent;
  };

  _this.load = function (path) {    
    if (!path) {
      console.warn("GLBModelController: No path set. Use setPath(path) before load().");
      return;
    }
    return loadModel(path);
  };

  async function loadModel(path) {
    let gltf = await GLTFLoader.load(gl, path);
    addGLTF(gltf, _parent);
  }

  function addGLTF(gltf, parentNode) {
    const sceneRoots = gltf.scene || gltf.scenes?.[0] || [];
    sceneRoots.forEach((node) => {
      node.setParent(parentNode); 
    });
  }

}

a call in my ogl App :

    const glbMeshController = new GLBComp(gl);
    glbMeshController.load("/models/draco.glb");
    const glbMesh= glbMeshController.getParent();
    glbMesh.setParent(scene);

Am I missing a step when loading Draco models in OGL, or could this be a bug?

Have you also considered supporting Meshopt compression as an alternative (since it’s generally less CPU intensive)?

Thanks a lot for your work on this library!

[pschroen]

Hi,

Just making sure you're using the correct example. The title on the Load GLTF example you referenced might be a little misleading, it's actually a link to a different example here:

https://oframe.github.io/ogl/examples/?src=gltf-draco-webp.html

That example includes an extra line for loading the DracoManager:

ogl/examples/gltf-draco-webp.html

Lines 398 to 400 in 385ce65

	// Set draco manager and pass in draco worker script location
	// Note: this is the only added line from the load-gltf example
	GLTFLoader.setDracoManager(new DracoManager(`assets/libs/draco/DracoWorker.js`));

[LAGENCECREE]

Cool! Thanks for your help 💪

I hadn’t seen this example before (the other one also mentioned Draco in the title).

This line works!!! (and I had to manually include assets/libs/draco, as they don’t come with npm)

However, it seems to break the display of one InstancedMesh in another part of my experience — I’ll investigate the cause on Monday.

Thanks again!