Compression ... draco + ktx2 example

Questions
,
1

Hi,

It is my understanding that “draco compression” is emerging as the standard for meshes in 3D. Gltf’s main mesh compression uses “draco”.

For textures ktx2 appears to be the dominant emerging standard and extremely powerful.

I could not find a working example for “draco” + “ktx2”. When I tried adding them to GLTFLoader it did not work. Basically “textures” show up as "black|.

I used “gestaltor.io” the emerging gltf editor to create “draco compression” as well as “ktx2” compressed textures (converting them from jpeg / png)

The only working example that I could find is for “meshopt” compression + ktx2. This seems to be based on “gltfpack”. This is also quite powerful and effective. So my work is not blocked.

I am a “newbie” with threejs. Request the experts in this group to advice.

In general it would be nice to see many more examples with mesh compression, texture compression with various tools (draco, meshopt, gltfpack, gltf-transform, rapidcompact, gestaltor).

It appears to be that “interoperability” is at a nascent stage. Is this right ?

Regards
/rk

2

There’s no compatibility conflict between KTX2 and Draco — you’ll need to install the decoders correctly for whichever compression method(s) you are using and check for errors in the JS Console if things aren’t working. Here’s a snippet from my viewer, which supports all three:

import { REVISION } from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js';

const THREE_PATH = `https://unpkg.com/three@0.${REVISION}.x`;

const manager = new LoadingManager();

const dracoLoader = new DRACOLoader( manager )
  .setDecoderPath( `${THREE_PATH}/examples/js/libs/draco/gltf/` );

const ktx2Loader = new KTX2Loader( manager )
  .setTranscoderPath( `${THREE_PATH}/examples/js/libs/basis/` )
  .detectSupport( renderer );

const loader = new GLTFLoader( manager )
        .setCrossOrigin( 'anonymous' )
        .setDRACOLoader( dracoLoader )
        .setKTX2Loader( ktx2Loader )
        .setMeshoptDecoder( MeshoptDecoder );
3

I’d also recommend testing the model you’ve created in viewers like https://gltf-viewer.donmccurdy.com/ or https://sandbox.babylonjs.com/ – there’s no difference in how you would use a model created by one compression tool vs. another, aside from setting up the decoders. So we don’t have specific examples for a model compressed with Draco using tool A instead of tool B. If the model works in online viewers and not in your code, you’ll likely need to share code, a demo, and/or the error(s) you’re seeing in the console.

1 Like