Error when trying to load Ktx textures with GLTFLoader and KTX2Loader

Questions
,
1

I’m trying to use ktx textures with the GLTFLoader but I’m getting errors on my page when using the KTX2Loader:

Uncaught (in promise) ReferenceError: MSC_TRANSCODER is not defined

Here’s how I’m implementing it, am I doing something wrong here?
I can’t find any mention of other requirements for this setup, and there’s no function to “setTranscoderPath” of the ktx2loader, from what I understand it does this itself on init().

import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader';
...
loader = new GLTFLoader();
var ktx2Loader = new KTX2Loader();
loader.setKTX2Loader(ktx2Loader);

Thanks for any help,
Joe.

2

It seems you are missing the following line which is present in the official example.

<script src="./js/libs/basis/msc_basis_transcoder.js"></script>
3

Hi Mugen,
Just a note - My project uses node & modules so I’m not sure I can use the transcoder in the same way as the example.
I’ve tried a few couple of different ways of including the transcoder, in my index.html:

<div id="WebGL"></div>
<script src="./Static/js/basis/msc_basis_transcoder.js"></script>
<script src="main.js"></script>

Or importing into main.js:

import { MSC_TRANSCODER } from 'three/examples/js/libs/basis/msc_basis_transcoder.js';

The file exists in both cases but I still get the same issue as before.

4

the msc basis transcoder is not a module, and cannot be imported, but can be added as a static <script/> tag in your HTML, as shown in the official example (which uses modules for everything else). If that is still not working for you, I think you’ll need to share a demo to debug.

5

Hi Don,

We’ve created a simplified repo example Here

Excuse any bad practices, we’re generally not web devs, at the end of the readme I’ve noted the key lines involving the KTX2Loading, the model can be found here.
Note - The model does seem to load perfectly on your gltf viewer so there’s nothing inherently wrong there.

Let me know if you can see anything wrong with our KTX2 implementation, cheers :slightly_smiling_face:

6

Parcel.js doesn’t like scripts with global exports, and (for the moment) msc_basis_transcoder.js really requires that. I had to do a small hack to work around this in my own viewer:

… also note that Parcel.js also requires some configuration for static files, and in this case the msc_basis_transcode is being treated as a static file. Here’s how I set that up:

7

^I expect this will work more like a normal script in future versions of the transcoder, by the way.

8

This solved the problem for us, thanks for the help guys!
Just for reference if anyone else comes here with the same problem as the repo may not stay public, we had to replace the script tag in the original example’s index.html with:

<script>
// Appended programmatically, to avoid letting Parcel compile this.
const scriptEl = document.createElement('script');
scriptEl.src = 'assets/msc_basis_transcoder.js';
document.head.appendChild(scriptEl);
</script>

For this to work we had to include the files msc_basis_transcoder.js and msc_basis_transcoder.wasm in our static/assets/ folder for parcel - for us these files were located in this folder node_modules\three\examples\js\libs\basis

We do still occasionally get the “MSC_TRANSCODER is not defined” error but to me that seems like an order of operations issue and we may just have to delay our model load until the msc_transcoder in index has fully been loaded in.

For everything else the example worked as expected.

1 Like