Dynamic devicePixelRatio not update resolution

[kacperkurek]

Please avoid duplicates

• I checked all open issues and discussions and none of them matched my problem.

Language and Compiler

TypeScript's built-in Compiler

What environment are you using?

Server Side Renderering

When does your problem occur?

When the Unity App is running

What does your problem relate to?

I don't know

React-Unity-WebGL Version

9.5.2

React Version

18.2.0

Unity Version

2021.3.33f1

What happened?

In game there is function that adjust devicePixelRatio to maintain 60fps, but canvas resolution is not updating after change of devicePixelRatio

Reproducible test case

const UnityGame = ({
  name,
  version,
  setProgress,
  setLoaded,
}: {
  name: string;
  version: string;
  setProgress: (progress: number) => void;
  setLoaded: (loaded: boolean) => void;
}) => {
  const buildUrl = useMemo(
    () =>
      `${process.env.NEXT_PUBLIC_BLOB_STORAGE_URL}/${name
        .toLowerCase()
        .replace(' ', '-')}`,
    [name]
  );
  const {
    unityProvider,
    isLoaded,
    loadingProgression,
    requestFullscreen,
    unload,
    UNSAFE__unityInstance,
    addEventListener,
    removeEventListener,
    sendMessage,
  } = useUnityContext({
    loaderUrl: `${buildUrl}/${version}.loader.js`,
    dataUrl: `${buildUrl}/${version}.data.br`,
    frameworkUrl: `${buildUrl}/${version}.framework.js.br`,
    codeUrl: `${buildUrl}/${version}.wasm.br`,
    companyName: 'Company',
    productName: name,
    productVersion: version,
    streamingAssetsUrl: '.',

    webglContextAttributes: {
      powerPreference: 2,
      premultipliedAlpha: true,
      preserveDrawingBuffer: true,
    },
  });

  useEffect(() => {
    setLoaded(isLoaded);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isLoaded]);

  const enterFullscreen = useCallback(() => {
    requestFullscreen(true);
  }, [requestFullscreen]);

  const [devicePixelRatio, setDevicePixelRatio] = useState(
    window.devicePixelRatio
  );

  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    addEventListener('SetDPR', (dpr: any) => {
      setDevicePixelRatio(dpr);
    });
    return () => {
      removeEventListener('SetDPR', (dpr: any) => {
        setDevicePixelRatio(dpr);
      });
    };
  }, [addEventListener, removeEventListener, setDevicePixelRatio]);
  console.log('devicePixelRatio', devicePixelRatio);
  useEffect(() => {
    sendMessage(
      'DynamicDevicePixelRatioManager',
      'OnDPRUpdate',
      devicePixelRatio
    );
  }, [sendMessage, devicePixelRatio]);

  return (
   
        <div className="flex flex-1 items-center justify-center">
          <Unity
            ref={canvasRef}
            id="unity-canvas"
            tabIndex={1}
            unityProvider={unityProvider}
            className="max-h-full min-h-full min-w-full max-w-full outline-none"
            style={{
              visibility: isLoaded ? 'visible' : 'hidden',
            }}
            devicePixelRatio={devicePixelRatio}
          />
        </div>
  );
};

Would you be interested in contributing a fix?

• yes, I would like to contribute a fix