useLoader with KTX2Loader in native throws error: "Cannot create URL for blob!"

[kbhokray]

I'm trying to load a ktx2 file as a texture. But, the loading step fails with the error: "Cannot create URL for blob!". Code is reproduced below

import React, { Suspense, useRef } from 'react';
import { View } from 'react-native';
import { Canvas, useLoader, useThree } from '@react-three/fiber/native';
import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader';
import useWindowDimensions from 'react-native/Libraries/Utilities/useWindowDimensions';
import localKtxPath from './assets/duck_texture.ktx2'


function Plane() {
  const ref = useRef();
  const gl = useThree(state => state.gl)
  // const textureUrl = 'https://cdntest.metatube.studio/public/duck_texture.ktx2'
  const textureUrl = localKtxPath
  const texture = useLoader(KTX2Loader, textureUrl, (loader) => {
    loader.setTranscoderPath(`https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/basis/`)
    .detectSupport(gl);
  })
  return(
    <mesh>
      <planeBufferGeometry attach="geometry" args={[3, 3]} />
      <meshStandardMaterial ref={ref} attach="material" color="orange" map={texture} />
    </mesh>
  )
}

export default function App() {
  const { width, height } = useWindowDimensions();
  return (
    <View
      style={{
        height,
        width,
        backgroundColor: '#FFA000',
      }}
    >
      <Canvas
        onCreated={(s) => {
          s.setSize(width, height);
        }}
        gl={{ physicallyCorrectLights: true }}
        camera={{ position: [-6, 0, 16], fov: 36 }}
      >
        <color attach="background" args={[0xe2f4df]} />
        <ambientLight />
        <directionalLight intensity={1.1} position={[0.5, 0, 0.866]} />
        <directionalLight intensity={0.8} position={[-6, 2, 2]} />
        <Suspense>
          <Plane />
        </Suspense>
      </Canvas>
    </View>
  );
}

The error appears to be coming from somewhere inside KTX2Loader. Is there a workaround for this ?

The versions of relevant libraries are as below:

"@react-three/fiber": "^8.0.21",
"expo": "~45.0.0",
"expo-gl": "~11.3.0",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-native": "^0.69.0-rc.6",
"three": "^0.141.0"

[drcmda]

That error comes from the threejs loader being unable to load the asset in some way, broken path, missing asset, broken file, whatever it may be.

[CodyJasonBennett]

This is emitted from react-native, which hints at a deeper issue: https://github.com/facebook/react-native/blob/0035cc9292aca15f07a9d2c51e3e340d5162d5e0/Libraries/Blob/URL.js#L128

I'm not sure how you're able to get into that state, but the loader's reliance on web workers is no good. You can use https://github.com/mrousavy/react-native-multithreading if the parsing process is expensive but this would need a worker polyfill or be refactored accordingly.

[kbhokray]

The below is what I get with a console.log(body) in the KTX2Loader class

/* constants */
let _EngineFormat = {"RGBAFormat":1023,"RGBA_ASTC_4x4_Format":37808,"RGBA_BPTC_Format":36492,"RGBA_ETC2_EAC_Format":37496,"RGBA_PVRTC_4BPPV1_Format":35842,"RGBA_S3TC_DXT5_Format":33779,"RGB_ETC1_Format":36196,"RGB_ETC2_Format":37492,"RGB_PVRTC_4BPPV1_Format":35840,"RGB_S3TC_DXT1_Format":33776}
let _TranscoderFormat = {"ETC1":0,"ETC2":1,"BC1":2,"BC3":3,"BC4":4,"BC5":5,"BC7_M6_OPAQUE_ONLY":6,"BC7_M5":7,"PVRTC1_4_RGB":8,"PVRTC1_4_RGBA":9,"ASTC_4x4":10,"ATC_RGB":11,"ATC_RGBA_INTERPOLATED_ALPHA":12,"RGBA32":13,"RGB565":14,"BGR565":15,"RGBA4444":16}
let _BasisFormat = {"ETC1S":0,"UASTC_4x4":1}
/* basis_transcoder.js */
var BASIS = (function () {
  var _scriptDir = typeof document !== 'undefined' && document.currentScript ? document.currentScript.src : undefined
  if (typeof __filename !== 'undefined') _scriptDir = _scriptDir || __filename
  return function (BASIS) {
    BASIS = BASIS || {}

    var Module = typeof BASIS !== 'undefined' ? BASIS : {}
    var readyPromiseResolve, readyPromiseReject
    Module['ready'] = new Promise(function (resolve, reject) {
      readyPromiseResolve = resolve
      readyPromiseReject = reject
    })
    var moduleOverrides = {}
    var key
    for (key in Module) {
      if (Module.hasOwnProperty(key)) {
        moduleOverrides[key] = Module[key]
      }
    }
    var arguments_ = []
    var thisProgram = './this.program'
    var quit_ = function (status, toThrow) {
      throw toThrow
     ...

I uploaded the ktx2 file online to check it in Babylon playground. The texture is loading fine there. If it helps, I added a repro in this repository

https://github.com/kbhokray/r3f-ktx2

It is a simple expo application with react versions updated. Does that mean that I need to revert back to react 17 for it to work ?

[CodyJasonBennett]

No, this is an issue with react-native. You will likely need to create a THREE.CompressedTexture yourself if there's no way to use the loader without web workers or polyfill it.