Why isn't it rendering?

[Rohcode]

Can anyone please advise how to resolve what's going wrong here?

From Unity 2021, 'Build and Run' serves the files in a browser and works fine.
I import Unity's Build files to a basic React app, set paths (/public/) and used the demo code. Yet the webgl component stays black and throws some errors.

Prior error - WebGL-0x7fd8d3df0800]GL ERROR :GL_INVALID_VALUE : glTexStorage2D: dimensions out of range -

[jeffreylanters]

Hi. Can you validate your canvas is actually being displayed on your screen?

[Rohcode]

Hi Jeffrey
Yes sir. When I start the App the canvas is white (as seen in image 1). The console then logs that the loader.js has served .framework.js and the canvas turns black (2) as the console keeps logging various issues (3).
It seems to be running but not rendering correctly (just shows black instead of the correct rendering - which Unity serves on 'Build and Run' from a Unity project. Please let me know if you can recommend ways to approach troubleshooting such an issue.
Thanks

[jeffreylanters]

Hi. Could you try providing a width and height for the canvas using styles or a className? Looking at your inspector, I think I know what's going wrong haha. The canvas should not scale itself to these enormous values. I will look into this, which browser and OS are you using?

Let me know if setting the dimensions solves your problem.

[Rohcode]

Ok thanks, I'm using Brave, Chrome, Safari, Firefox and OSX on a Macbook.

I tried wrapping with width and height (not sure if there's a better way?), by returning:
<canvas width="1000" height="330"> <Unity unityContext={unityContext} /> </canvas>
Don't think this wrapped correctly (given the nested canvas in screenshot). It throws a size error (screenshot).


Am trying to learn more now about styles and what the defaults are for how sizing and scaling. Please lmk if you have any ideas.

[jeffreylanters]

No, I meant adding these style properties to the Unity component itself. More like this:

(See the documentation for further details)

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

const unityContext = new UnityContext({
  loaderUrl: "build/myunityapp.loader.js",
  dataUrl: "build/myunityapp.data",
  frameworkUrl: "build/myunityapp.framework.js",
  codeUrl: "build/myunityapp.wasm",
});

function App() {
  return (
    <Unity
      unityContext={unityContext}
      style={{
        height: 600,
        width: 950,
      }}
    />
  );
}

[jeffreylanters]

@Rohcode Were you able to test this solution? I'd like to hear if it worked.

[Rohcode]

Yes, thank you @jeffreylanters. It worked in the demo project.
I've yet to get it working however in my TS production project, which throws the error:
app.js:56454 A problem occurred while mounting Unable to load Build/1.loader.js [object Event]
Thought it was a paths issue so reworked my demo project code to match the paths of my prod, tested and the demo works but prod not. I do recall prior issues using using a public TS folder so learning more about this now. Please lmk if you have any suggestions because I'm keen to learn of any.
Thanks again