Blurring issues due to canvas dimension rounding

[bcairns]

We are seeing a (fairly subtle) blurring of the final output, most noticeable on edges, and it seems to be due to non-round pixel dimensions of the canvas.

It looks like this (or a similar) issue has been discussed before:

• Model-Viewer sometimes renders blurry (wrong res?) on some devices when some sort of zoom is used #1503
• round canvas size #1506
• Fix further canvas rounding issues #1542

Details:

As reported by our client, we observe the rendering doesn't look as sharp as a fixed-size viewer that uses round numbers. (This is using latest Chrome, on a Mac, with current 1.12.0 model-viewer)

We are using model-viewer inside a css grid system, which uses percentages for column widths, leading to non-round pixel values for the container and canvas elements:

If we set the parent container to a fixed size (using round pixels values), the blurring issue immediately goes away.

An adequate workaround may be to use (via injected stylesheet):

canvas.show { width: auto !important; height: auto !important; }

This overrides the inline CSS styles and causes the canvas to use the integer width/height attributes for its dimensions (eg width="691" height="533"). This does cause some resizing weirdness however, so it's not ideal.

tl;dr

It seems to us that the integer canvas width/height attributes (eg width="691" height="533") should be precisely the same for the inline CSS styles for the canvas dimensions.

Otherwise having numbers like (eg) 691.6 and 533.6 can lead to "off-by-1" discrepancy on the canvas dimensions, causing scaling to occur which impacts visual quality.

[elalish]

Can you add some screenshots? I'd like to make sure I understand the blurring you mean. Also, this is made trickier due to devicePixelRatio != 1 (it's 2 for retina displays, and e.g. 3.5 for some mobiles).

Also, can you repro on browsers other than Chrome or devices other than Mac? This could be a browser bug of some kind too.

[bcairns]

Thanks so much for the response. I'm not sure I can publicly post screenshots/URLs/models right now (that's actually why I started a discussion instead of creating a ticket). Is there a way I could share them with you directly?

[elalish]

Perhaps you could make a minimal repro with our Glitch from the issue template and some free models?

[bcairns]

Here is a side-by-side screenshot. As you can see the left one is just a tiny bit blurry, like it's a hair out of focus, while the right one is nice and sharp.

I can see a difference in Chrome, Firefox, and Safari. All on DPR 1.

The difference is small enough that on DPR 2+ it's basically invisible.

I suspect it's literally just the canvas image being rendered at (in my example) 691px x 533px (per the canvas width/height attribs), and then the browser scaling that 2D canvas output to 692 x 534 (the fractional inline width/height styles being rounded up to physical display pixels). In other words, it's not a browser bug, it's just doing precisely what it's being told to do, scaling the canvas image bigger by a single pixel?

I can't say for sure, but if true, this would explain everything we're seeing including why the workaround resolves this.

[elalish]

Yeah, I think you're probably right. I'd like to fix this kind of thing automatically - I wonder if we just need to add a floor or ceil here? https://github.com/google/model-viewer/blob/master/packages/model-viewer/src/three-components/ModelScene.ts#L308

I think you'd need multiply by the dpr before rounding, then divide it out again. Would you like to give it a try in a PR? You're in a better position to test this and ensure it's solving your problem.

[bcairns]

I created an issue and a PR: #3555