Setting WebGLContextAttributes doesn't seem to have any effect

[Kottakji]

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?

Static File Serving

When does your problem occur?

When the Unity App is running

What does your problem relate to?

The problem seems related to my project

React-Unity-WebGL Version

9.4.2

React Version

18.2.0

Unity Version

2021.1.25f1

What happened?

I'm creating my unity context as follows:

const {unityProvider, sendMessage, loadingProgression, isLoaded} = useUnityContext({
    loaderUrl: `build/${process.env.NEXT_PUBLIC_APP_NAME}.loader.js`,
    dataUrl: `build/${process.env.NEXT_PUBLIC_APP_NAME}.data.gz`,
    frameworkUrl: `build/${process.env.NEXT_PUBLIC_APP_NAME}.framework.js.gz`,
    codeUrl: `build/${process.env.NEXT_PUBLIC_APP_NAME}.wasm.gz`,
    webglContextAttributes: {
      alpha: true,
      antialias: true,
      depth: true,
      failIfMajorPerformanceCaveat: true,
      powerPreference: "high-performance",
      premultipliedAlpha: true,
      preserveDrawingBuffer: true,
      stencil: true,
      desynchronized: true,
      xrCompatible: true,
    },
  });

But when reading the WebGLContextAttributes from the browser (Chrome / Firefox) it doesn't appear to have changed.

document.getElementById("react-unity-webgl-canvas-1").getContext("webgl2").getContextAttributes(); 

Am I doing something wrong? Or is this an issue?

Reproducible test case

No response

Would you be interested in contributing a fix?

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

[forforfos]

I also have the same issue, did you find anything on this matter? @Kottakji

[Kottakji]

I also have the same issue, did you find anything on this matter? @Kottakji

No unfortunately not.

[forforfos]

Ok, I will investigate as well and let you know! Thanks @jeffreylanters If it turns that it needs changes, is it ok to issue a PR?

[forforfos]

@Kottakji @jeffreylanters Status update until further notice.

Unity in the documentation says that by passing the webglContextAttributes object to their window.createUnityInstance method, they can use it when creating the canvas context. https://docs.unity3d.com/Manual/webgl-graphics.html In terms of the react-unity-webgl this is done right, inside the use-unity-instance.ts

The property displayed in the documentation above, preserveDrawingBuffer, when passed to the unityProvider's unityArguments, is changed as we would expect. None of the rest of the following though:

So, maybe, if this isn't intended behaviour from Unity's part, it is a bug need fixing. So we will report this to Unity and wait for their response.

In any case, I will inform you on how things work out.

[forforfos]

So, after a lot of checks, it turns out the config object for webglContextAttributes was insufficiently documented, and the library, as well as the Unity webgl build works correctly. The issue lies in the type of values that powerPreference accepts.

Specifically, it accepts the following enum:

{
  0: 'default',
  1: 'low-power',
  2: 'high-performance'
}

So, finally, after passing

    useUnityContext({
      codeUrl: filesUrls.codeUrl,
      dataUrl: filesUrls.dataUrl,
      frameworkUrl: filesUrls.frameworkUrl,
      loaderUrl: filesUrls.loaderUrl,
      streamingAssetsUrl: filesUrls.streamingAssetsUrl,
      webglContextAttributes: {
        powerPreference: 2,
        preserveDrawingBuffer: true,
      },
    });

the console returned:

[Kottakji]

@forforfos Nice find <3

Are you making a PR for this? Or should I?

[forforfos]

@Kottakji There is no need for a PR actually, just pass the webglContextAttributes in the useUnityContext like above and it will work. We could maybe update the documentation to display it.

Or do you think we could add a reverse transformation before passing it to window.createUnityInstance? Like, if the user passes

useUnityContext({
      ...,
      webglContextAttributes: {
        powerPreference: 'high-performance',
      },
    });

transform it to { powerPreference: 2 }?

[Kottakji]

@Kottakji There is no need for a PR actually, just pass the webglContextAttributes in the useUnityContext like above and it will work. We could maybe update the documentation to display it.

Or do you think we could add a reverse transformation before passing it to window.createUnityInstance? Like, if the user passes

useUnityContext({
      ...,
      webglContextAttributes: {
        powerPreference: 'high-performance',
      },
    });

transform it to { powerPreference: 2 }?

The docs are in this repo as well. I've made PR with the docs changes: https://github.com/jeffreylanters/react-unity-webgl/pull/543

[forforfos]

@Kottakji Ohh, I missed my chance for my first contribution ever! :P

Nice though! Good that we have an outcome

[jeffreylanters]

Good find @Kottakji and @forforfos, thanks for your research and contribution! The documentation changes look good, but before I merge these - I have some good news for you, @forforfos; you can still make this your first pull request haha! The types are not updated in the PR, which can be found in the link below. Once those changes are published in a release, I'll merge the documentation changes right away.

https://github.com/jeffreylanters/react-unity-webgl/blob/main/module/source/types/webgl-context-attributes.ts

[jeffreylanters]

Also I'll be adding some additional types for a future release where an enum can be used to set the powerPreference setting making it a bit easier to find the correct value.

[forforfos]

Yayyyyyy!! 👯 I issued the additional PR, thank you very much @jeffreylanters and @Kottakji