Cannot dynamically switch between builds with dynamic URLs in unityConfig

[kroussea]

Please avoid duplicates

• [X] I checked all open issues and discussions and none of them matched my problem.

Language and Compiler

Babel and WebPack JavaScript

What environment are you using?

Server Side Renderering

When does your problem occur?

When the Unity App is running

What does your problem relate to?

I don't know

React-Unity-WebGL Version

9.4.0

React Version

18.2.0

Unity Version

2022.2.9f1

What happened?

Hello!

We are trying to add build versions (debug, release) of our player to our NextJS app. Essentially, we want to be able to toggle between builds on a staging or even production environment for debugging purposes, but without reloading the page if possible.

We have put our versions in the public folder like stated and both versions are able to load when the URLs are hardcoded in the useUnityContext params.

Though, it seems that we are unable to dynamically change the values after the player has loaded.

Here's a simplified example of what we're trying to achieve (just a proof of concept for now)

  const [isDebugMode, setIsDebugMode] = useState(false);

  const playerVersion = isDebugMode ? 'debug' : 'release';
  const playerCompression = isDebugMode ? '' : '.br';
  
  const {
    unityProvider,
  } = useUnityContext({
    loaderUrl: `/player/${playerVersion}/Build/${playerVersion}.loader.js`,
    dataUrl: `/player/${playerVersion}/Build/${playerVersion}.data${playerCompression}`,
    frameworkUrl: `/player/${playerVersion}/Build/${playerVersion}.framework.js${playerCompression}`,
    codeUrl: `/player/${playerVersion}/Build/${playerVersion}.wasm${playerCompression}`,
    streamingAssetsUrl: `/player/${playerVersion}/StreamingAssets`,
  });

// ... 

return (
    <div>
      <button onClick={() => setIsDebugMode(!isDebugMode)}>TOGGLE</button>

      <div className={styles.unityContainer}>
        <Unity
          unityProvider={unityProvider}
        />
        <UnityLoading
          isLoading={!isReadyToStart}
          value={loadingPercentage}
        />
      </div>
    </div>
  );

We can see that the values changes, but nothing in the unityProvider.unityConfig prop changes

Is this expected? Is there a way to toggle between players without reloading the page?

Thanks!

Reproducible test case

No response

Would you be interested in contributing a fix?

• [ ] yes, I would like to contribute a fix

[qld-cf]

same issue @jeffreylanters

[qld-cf]

@kroussea i fixed that; try this:

  const _unityProvider = useDeepCompareMemo(() => {
    return {
      ...unityProvider,
      unityConfig: {
        loaderUrl: `/player/${playerVersion}/Build/${playerVersion}.loader.js`,
        dataUrl: `/player/${playerVersion}/Build/${playerVersion}.data${playerCompression}`,
        frameworkUrl: `/player/${playerVersion}/Build/${playerVersion}.framework.js${playerCompression}`,
        codeUrl: `/player/${playerVersion}/Build/${playerVersion}.wasm${playerCompression}`,
        streamingAssetsUrl: `/player/${playerVersion}/StreamingAssets`,
      },
    };
  }, [unityProvider, playerVersion,playerCompression]);

  return (
   
    <Unity
      ...
        unityProvider={_unityProvider}
      />

[qld-cf]

@kroussea

[kroussea]

Here's what I have with your suggestion (quick and dirty for now). I don't have useDeepCompareMemo, but I figure a simple useMemo would suffice just to try it out.

...
const [isDebugMode, setIsDebugMode] = useState(false);
const context = useMemo(() => ({
    loaderUrl: `${playerHost}/vSpacePlayer/${playerVersion}/Build/${playerVersion}.loader.js`,
    dataUrl: `${playerHost}/vSpacePlayer/${playerVersion}/Build/${playerVersion}.data${playerCompression}`,
    frameworkUrl: `${playerHost}/vSpacePlayer/${playerVersion}/Build/${playerVersion}.framework.js${playerCompression}`,
    codeUrl: `${playerHost}/vSpacePlayer/${playerVersion}/Build/${playerVersion}.wasm${playerCompression}`,
    streamingAssetsUrl: `${playerHost}/vSpacePlayer/${playerVersion}/StreamingAssets`,
  }), [playerHost, playerVersion, playerCompression]);

  const {
    unityProvider,
    loadingProgression,
    addEventListener,
    removeEventListener,
    sendMessage,
    UNSAFE__detachAndUnloadImmediate,
    UNSAFE__unityInstance,
  } = useUnityContext(context);

  const _unityProvider = useMemo(() => {
    return {
      ...unityProvider,
      unityConfig: {
        loaderUrl: `${playerHost}/vSpacePlayer/${playerVersion}/Build/${playerVersion}.loader.js`,
        dataUrl: `${playerHost}/vSpacePlayer/${playerVersion}/Build/${playerVersion}.data${playerCompression}`,
        frameworkUrl: `${playerHost}/vSpacePlayer/${playerVersion}/Build/${playerVersion}.framework.js${playerCompression}`,
        codeUrl: `${playerHost}/vSpacePlayer/${playerVersion}/Build/${playerVersion}.wasm${playerCompression}`,
        streamingAssetsUrl: `${playerHost}/vSpacePlayer/${playerVersion}/StreamingAssets`,
      },
    };
  }, [unityProvider, playerVersion, playerCompression, playerHost]);
...

return (
    <div>
      <button onClick={() => setIsDebugMode(!isDebugMode)}>TOGGLE</button>

      <div className={styles.unityContainer}>
        <Unity
          unityProvider={_unityProvider}
        />
        <UnityLoading
          isLoading={!isReadyToStart}
          value={loadingPercentage}
        />
      </div>
    </div>
  );

When I toggle the debug state, it seems to reload the player, though at some point the canvas goes all black and it gives me this error:

I'm using react-unity-webgl v9.4.0, and not sure I could upgrade since I'm using UNSAFE__detachAndUnloadImmediate which I see has been removed in the latest version...