RenderTexture.Create failed: requested size is too large.

[giggioz]

Hi,

I've just created a Unity WebGL (Unity Version 2020.3.20f1) build with a cube object.

Relevant settings

Then I created a react app with create-react-app, I imported react-unity-webgl 8.6.0

and changed the App.js file:

import logo from './logo.svg';
import './App.css';
import Unity, { UnityContext } from 'react-unity-webgl';

const unityContext = new UnityContext({
  loaderUrl: 'unity-app/Build/unity-app.loader.js',
  dataUrl: 'unity-app/Build/unity-app.data.unityweb',
  frameworkUrl: 'unity-app/Build/unity-app.framework.js.unityweb',
  codeUrl: 'unity-app/Build/unity-app.wasm.unityweb',
});

function App() {
  return (
    <div className='App'>
      <header className='App-header'>
        <img src={logo} className='App-logo' alt='logo' />
        <div>
          <p>UNITY PLAYER HERE</p>
          <Unity style={{border:'1px solid red'}} unityContext={unityContext} />
        </div>
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className='App-link'
          href='https://reactjs.org'
          target='_blank'
          rel='noopener noreferrer'
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

running the app I get a black div

and this looping error

Just an extra info: I tried also with a more complex Unity Project, same issue but I can listen the music I put in the game... so the player is somehow loaded...

Extra info 2: If I build and run from Unity without the React project the WebGL app works

Can you help me on this? Thanks a lot

[giggioz]

Wow, after some trial and error I found a simple solution:

just use maxWidth in the style of the component

I leave the issue open if you want to dig into it, thanks!

import logo from './logo.svg';
import './App.css';
import Unity, { UnityContext } from 'react-unity-webgl';

const unityContext = new UnityContext({
  loaderUrl: 'unity-app/Build/unity-app.loader.js',
  dataUrl: 'unity-app/Build/unity-app.data.unityweb',
  frameworkUrl: 'unity-app/Build/unity-app.framework.js.unityweb',
  codeUrl: 'unity-app/Build/unity-app.wasm.unityweb',
});

function App() {
  return (
    <div className='App'>
      <header className='App-header'>
        <img src={logo} className='App-logo' alt='logo' />
        <div>
          <p>UNITY PLAYER HERE</p>
          <Unity style={{border:'1px solid red', maxWidth:'300px'}} unityContext={unityContext} />
        </div>
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className='App-link'
          href='https://reactjs.org'
          target='_blank'
          rel='noopener noreferrer'
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

[jeffreylanters]

Hi. I'm glad you've found a solution and thanks for your detailed report.

To clarify with actually happens; the height and width provided in Unity have nothing to do with the actual build. All Unity does is place these number in the generated HTML file. But since we're not using this file but only focus on the actual builded JS and Binary files, this data is no longer relevant.

Applying no height and width to the Unity component results in the browser falling back on the default Canvas element height and width. In some browsers this doesn't work the way it should in combination with Unity, and the canvas scales indefinitely, resulting in these specific errors.

TLDR; Providing a simple height and width to the Unity component solves these issues.

Happy coding!