jeffreylanters / react-unity-webgl

React Unity WebGL provides a modern solution for embedding Unity WebGL builds in your React Application while providing advanced APIs for two way communication and interaction between Unity and React.
https://react-unity-webgl.dev
Apache License 2.0
1.73k stars 163 forks source link

Unity loading percentage is behaving strangely #473

Open freithmaier opened 1 year ago

freithmaier commented 1 year ago

Please avoid duplicates

Language and Compiler

TypeScript's built-in Compiler

What environment are you using?

Local Development Server

When does your problem occur?

While the Unity App is loading

What does your problem relate to?

The problem seems Unity related

React-Unity-WebGL Version

9.2.1

React Version

18.2.0

Unity Version

2021.3.16f1

What happened?

I want to create a loading bar that goes from 0 to 100 percent. Unfortunately, it loads from 0 to 36 percent, then jumps to 90 percent and loads the game.

I already found a workaround for the problem. Unfortunately, this still doesn't satisfy me.

In addition I also logged and append the the loading percentages.

console.log

Reproducible test case

simplefied code of my problem:

import { Unity, useUnityContext } from "react-unity-webgl";

export default function Frame() {
  const framewidth = 1920; // fullhd
  const dataUrl = "files.company.de"; // here is some code to fetch my files from a file server

  const { unityProvider, isLoaded, loadingProgression } = useUnityContext({
    loaderUrl: `${dataUrl}.loader.js`,
    dataUrl: `${dataUrl}.data.br`,
    frameworkUrl: `${dataUrl}.framework.js.br`,
    codeUrl: `${dataUrl}.wasm.br`,
  });

  return (
    <>
      {isLoaded ? null : (
        <div className="border-2">
          <div
            className="bg-black"
            style={{
              width: Math.round(loadingProgression * 100) + "%",
            }}
          />
        </div>
      )}
      <Unity
        unityProvider={unityProvider}
        matchWebGLToCanvasSize={true}
        style={{
          width: framewidth,
          height: framewidth * 0.5625,
        }}
      />
    </>
  );
}

my workaround for calculation the percentage:

(loadingProgression < 0.4 ? loadingProgression * 2.5 : 1) * 100

Would you be interested in contributing a fix?

capofalcone commented 1 year ago

Same problem here, but it ends at 26%

mark-wff commented 1 year ago

Same problem here, but it shows 90% while still loading.

QBGROUP commented 1 year ago

Same problem here, but it ends at 26%

In doing further investigation I realized that this behavior happens when the build in unity is compressed. if in the options it is not compressed then the loading percentage works better. for me it goes up to 90% and then the application is loaded, it is still much better than when it stopped at 26%. maybe I can solve it by compressing the data at the http protocol level between server and client, in theory it should be transparent to the loading library. I will do some testing. also check that you have not compressed the build