How to use KTX2Loader with useGLTF, and without use useKTX2() which seems to need explicit textures URIs

[epouliquen]

Hi,

I have a glb + jsx file, coming from gltfjsx cli , and including KTX2 textures (embedded).

I'm trying to extend the loader as seen in sources, like this

import { useGLTF, PerspectiveCamera } from '@react-three/drei'
import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader'
import { useThree } from '@react-three/fiber'

const ktxLoader = new KTX2Loader()

export function APModel(props) {
  const state = useThree()
  const { nodes, materials } = useGLTF('/myScene-transformed.glb', (loader) => {
    console.log('coucou')
    ktxLoader.setTranscoderPath('three/examples/js/libs/basis/')
    ktxLoader.detectSupport(state.gl)
    loader.setKTX2Loader(ktxLoader)
  })
  return (
    <group {...props} dispose={null}> 
...

but it doesn't work. I don't even see my "coucou" debug test in console.

reported error is :

THREE.GLTFLoader: setKTX2Loader must be called before loading KTX2 textures)

I don't understand ho to achieve same behaviour as in vanilla THREE.js

I also don't want to use useKTX2() as, if I understand well, need to explicit textures URIs and than apply one by one to materials...

for sure there is a way to pass the KTX2Loader to the GLTFLoader no ?

Thanks for your help.

[aronanol45]

Hello, did you found one solution ? I have the same issue.

[silqwer]

The extensionLoader setting must be set in the fourth parameter of useGLTF

export declare function useGLTF<T extends string | string[]>(path: T, useDraco?: boolean | string, useMeshOpt?: boolean, extendLoader?: (loader: GLTFLoader) => void): T extends any[] ? GLTF[] : GLTF;

I referenced gltf-viewer.

import { useGLTF } from '@react-three/drei'
import { REVISION } from 'three'
import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader'
import { useThree } from '@react-three/fiber'

 const { gl } = useThree()

const { scene } = useGLTF('/myScene-transformed.glb', false, false, (loader) => {
    const THREE_PATH = `https://unpkg.com/three@0.${REVISION}.x`
    const ktx2Loader = new KTX2Loader().setTranscoderPath(`${THREE_PATH}/examples/jsm/libs/basis/`)
    loader.setKTX2Loader(ktx2Loader.detectSupport(gl))
})

[jereloh]

Thank you!

replacing import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader'
with import { KTX2Loader } from 'three-stdlib' works well too if u have three-stdlib installed

[abernier]

EDIT: now added into the doc

import { KTX2Loader } from "three-stdlib";
import { Canvas, useThree } from "@react-three/fiber";
import { Gltf } from "@react-three/drei";

import facecap from "./facecap.glb?url";

const ktx2Loader = new KTX2Loader();
ktx2Loader.setTranscoderPath(
  `https://unpkg.com/three@0.168.0/examples/jsm/libs/basis/`
);

function App() {
  return (
    <Canvas>
      <Scene />
    </Canvas>
  );
}

function Scene() {
  const { gl } = useThree();

  return (
    <>
      <Gltf
        src={facecap}
        extendLoader={(loader) => {
          loader.setKTX2Loader(ktx2Loader.detectSupport(gl));
        }}
      />
    </>
  );
}

see: https://github.com/abernier/poc-facecap/blob/main/src/App.tsx

[lujeff]

I'm having a similar issue right now, I extended the loader to KTX2Loader but console seems to spit out "texture could not be loaded".

I've converted the texture via command line with toktx, should I be using a different method to convert it?