CODEWITHSUNDEEP
three.jstexturesgltf
Sangwook
Sangwook

Reputation: 21

GLFT with Basis Universal texture in Three.js: Is mipmap required?

I change a PNG texture of a GLTF file to Basis Universal and try to read it through the GLTFLoader of Three.js. I use basisu executale from https://github.com/BinomialLLC/basis_universal.

Loading a texture which was converted using -mipmap option of basisu executable is successful. The textures looks well. But when a GLTF file with a basis texture which was converted without -mipmap option is loaded, it looks all black. I would like to load also texture not having mipmap.

Am I missing something? Or is mipmap required to load Basis texture in Three.js ? I learned how to use BasisTextureLoader and GLTFLoader from Three.js documents. And my initialize code is like the attached code.

https://threejs.org/docs/?=GLTF#examples/en/loaders/GLTFLoader https://threejs.org/docs/#examples/en/loaders/BasisTextureLoader

    let basisLoader = new BasisTextureLoader()
    .setTranscoderPath('examples/js/libs/basis/');
    .detectSupport(viewer.renderer);
    THREE.DefaultLoadingManager.addHandler(/\.basis$/i, basisLoader);   

    let dracoLoader = new DRACOLoader().setDecoderPath( 'examples/js/libs/libs/draco/' );

    let gltfLoader = new GLTFLoader()
    .setCrossOrigin('anonymous')
    .setDRACOLoader( dracoLoader );

Upvotes: 2

Views: 1156

Answers (1)

Don McCurdy
Don McCurdy

Reputation: 11980

To use Basis Universal compression in a glTF file, don't use the .basis format or BasisTextureLoader – the standardized way to do that is with a .ktx2 file. There's an artist guide for updating a glTF asset to use .ktx2 textures available, which includes some details on mipmaps. You'll almost always need mipmaps, unless you know enough about mipmap filtering to be sure you can disable it without causing rendering issues (this is rare).

three.js provides an example of how to load these files, which would look something like this:

const ktx2Loader = new KTX2Loader()
  .setTranscoderPath( 'path/to/basis/transcoder/' )
  .detectSupport( renderer );

const loader = new GLTFLoader();
loader.setKTX2Loader( ktx2Loader );
loader.load( 'path/to/model.glb', function ( gltf ) {

 ...

}, undefined, console.error );

Upvotes: 4

Related Questions