Blurry scene when dimensions contain fraction of pixels

[loichuder]

Sorry if this is a dumb question but I thought asking people that are more aware of the rendering process may be the easiest way to solve/understand this.

So: I noticed that when I set the Canvas component to a width or height that contains a fraction of pixel (e.g. 500.5px), the scene gets blurry. Setting back to integer pixel values removes the blur.

I reproduced this in a simple sandbox to toggle on/off this behaviour: https://codesandbox.io/s/blur-half-pixel-bzzlz. The shapes look blurry when the width is at 500.5px but looks fine when it is at 500px.

Any insight on this problem ?

What would be the best course of action to avoid such blurry scenes ? Should I fiddle with dpr ?

[CodyJasonBennett]

I'm assuming you're on a relatively pixel-dense monitor. I'd try setting dpr={[1, 2]} to increase clarity.

[loichuder]

I'm assuming you're on a relatively pixel-dense monitor.

Not particularly (1920x1080).

I'd try setting dpr={[1, 2]} to increase clarity.

Thanks for the suggestion but it didn't solve the problem 😞. I observed originally this blur in a Canvas where we had dpr={[1, 3]} (https://github.com/silx-kit/h5web/blob/main/packages/lib/src/vis/shared/VisCanvas.tsx#L62).

Could there be a mismatch between the canvas and renderer sizes ?

[drcmda]

canvases behave different than dom elements because they have pixel ratio. the amount of raw pixels does not correspond with the amount of pixels the canvas renders, which is dependent on its pixel ratio, a setting on the threejs webglrenderer. it behaves like an image and the browser scales it accordingly. dpr={[1, 3]} is fatal, i would not recommend, it would yield way too many pixels to render (in the canvas off buffer) which the browser then has to scale down again.

[drcmda]

i don't see a difference on my laptop. though, i guess like cody mentioned you're on a low res monitor, and i think that's just how the browser scales it in your case. i don't think there is a solution?

[loichuder]

Thanks for the additional info.

Yes, I think you are right. I will try to see if I can alleviate this somehow.