Canvas PixelRatio auto change onScroll

[Melvynx]

I'm create a react-three-fiber app that is just a header, so it's possible to scroll to see rest of page.

I'm updating the pixel ratio on resize to match screen with this code:

export const getDevicePixelRatio = () => Math.min(window.devicePixelRatio, 2);

I change the gl pixelration when:

• on created
• on screen resize

I put console on each case, but the pixel ratio auto change with not my console has you can see in this exemple:

The pixel ration switch from 2 to 1, and I created a Hook to see this in console:

  setInterval(() => {
      const pr = gl.getPixelRatio();
      console.log(pr);

      if (pr !== getDevicePixelRatio()) {
        console.log('ERROR-pixel ratio has change');
        gl.setPixelRatio(getDevicePixelRatio());
      }
    }, 1000);

Do you have an idee why the pixel ratio change and HOW stop this thing append.

I'll check the source code to find anything.

Thanks.

[Melvynx]

Ok I found the solution to handle pixel ratio using react-three-fiber with : dpr={[1, 2]} the problem is solved.

But If exist a way to get the pixelratio of GL when the pixelratio change, like "add an event" ?

[drcmda]

It's part of the state model and reactive. You can watch dpr with useState, you'll be notified when it changes, though why would it ever change? Dpr is normally fixed.

[Melvynx]

DPR change when you switch between screen with 2 DPR and screen with 1 DPR, and my particules's size is based on the DRP so I need to get the value modified on change. (like the GIF)

Thanks for your answer.