Solve KTX2Loader performance issues with Singleton Loaders

[umar-ahmed]

Some of the loaders provided by Three in the examples folder assume that only one instance of a loader is ever created (ex. KTX2Loader). But useLoader instantiates a new loader instance whenever the arguments change and this can cause some major performance issues.

To workaround this limitation, I created a factory function called createSingletonLoader that returns a new Loader constructor that makes sure that there is only at most 1 instance of the underlying loader:

import type { Loader } from "@react-three/fiber";

type LoaderResult<T> = T extends any[] ? Loader<T[number]> : Loader<T>;

const createSingletonLoader = <
  T,
  L extends new (...args: any[]) => LoaderResult<T>
>(
  LoaderConstructor: L
) => {
  let loader: THREE.Loader | null = null;
  return new Proxy(LoaderConstructor, {
    construct(target, args) {
      if (!loader) {
        loader = new target(...args);
      }
      return loader;
    },
  });
};

You can use it like so:

const OptimizedKTX2Loader = createSingletonLoader(KTX2Loader);

Hopefully this is useful for others that run into this issue