changes to devicePixelRatio in Unity, React Reloading..

[devilofdev]

Hi! I'm changing rendering setting through the settings window on the web.

const [renderQuality, setRenderQuality] = useState<number>(devicePixelRatio);
const getRenderQuality = useSelector(
  (state: any) => state.space.renderQuality
);

useEffect(() => {
  if (getRenderQuality !== "Default") {
    switch (getRenderQuality) {
      case "Auto":
        setRenderQuality(devicePixelRatio);
        break;
      case "Low":
        setRenderQuality(devicePixelRatio * 0.8);
        break;
      case "Normal":
        setRenderQuality(devicePixelRatio * 1.2);
        break;
      case "High":
        setRenderQuality(devicePixelRatio * 1.5);
        break;
    }
  }
}, [getRenderQuality, devicePixelRatio]);

<Unity
    unityProvider={unityProvider}
    style={{ border: "1px solid red", width: "100vw", height: "100vh" }}
    ref={canvasRef}
    devicePixelRatio={
      renderQuality === Infinity ? devicePixelRatio : renderQuality
    }
  />

above is my code.

this code changes the rendering quality very very well.
but, unity is restarting.. (react rerender?)

i run start (not dev).. somebody help me! 🥹

[jeffreylanters]

Hi there! I suggest not changing the device pixel ratio like this. Especially not with fractional numbers since the monitor cannot display half pixels anyway. I recommend keeping the pixel ratio in sync with the windows pixel ratio and add an option for the user to switch to a device pixel ratio of 1, for low end devices.

Read more: https://react-unity-webgl.dev/docs/api/canvas-device-pixel-ratio

Another way to change the render size is changing the internal canvas size using the Canvas' reference. This is not documented in the 9.x documentation yet, but it can be applied in the latest version as well.

Read more: https://react-unity-webgl.dev/docs/8.x.x/api/match-webgl-to-canvas-size

I hope this helps, happy coding!

[devilofdev]

thank you! :->