CSS3DRenderer: Force canvas size to be even

[WestLangley]

Possible approach to addressing #19854. Posting as a DRAFT.

CSS3DRenderer translates by half-width, so this PR prevents fractional pixels.

It appears to work for every example I have tried.

Note that there is no three.js requirement that the passed-in canvas dimensions are whole numbers. This can happen, for example, if the user splits the screen.

/ping @JohannesDeml Can you please test this PR on all your examples?

[JohannesDeml]

Yes, making everything even does work, that's also the route I took in my project, since it also fixes the perspective camera problem (which I had). I went on to have the same resolution for the webgl renderer and the css renderer (so both would always be even). I'm not sure if that is necessary, but I think it might help with having cutouts fitting to the css renderer as clean as possible (so the antialiased line of the webgl renderer matching the css element).

I think it is a good solution for now, since it consistently fixes the problem, but it still would be interesting to understand why the problem occurs in the first place.

[WestLangley]

In CSS3DRenderer, when replacing

var style = cameraCSSMatrix + 'translate(' +  _widthHalf + 'px,' +  _heightHalf + 'px)';

with

var style = cameraCSSMatrix + 'translate(' + Math.round( _widthHalf ) + 'px,' + Math.round( _heightHalf ) + 'px)';

I observe the same artifacts in Chrome and Firefox as appear in Safari.

Consequently, my hypothesis is Safari is rounding during the "translate" step, but in fact, should be rounding only after the entire matrix expression is evaluated.

//

I think I would prefer to not worry about this, and assume Safari will fix it at some point.

In the mean time, users can pass in even-valued canvas dimensions at the app level and avoid these artifacts.

//

EDIT: macOS Safari 13.1.2 test case: https://threejs.org/examples/css3d_sandbox.html.

1. scroll the mouse to zoom in
2. resize the window

[yomotsu]

users can pass in even-valued canvas dimensions at the app level

Should we notice it in the documentation?

[JohannesDeml]

Consequently, my hypothesis is Safari is rounding during the "translate" step, but in fact, should be rounding only after the entire matrix expression is evaluated.

Ah, that does make a lot of sense! Thanks for your in depth analysis!

users can pass in even-valued canvas dimensions at the app level

Should we notice it in the documentation?

I think that would be the best solution. What do you think @WestLangley ?

[WestLangley]

Should we notice it in the documentation?

We do not document browser bugs in the documentation.

I suggest we do nothing unless this becomes a serious user issue.

[mrdoob]

https://bugs.webkit.org/show_bug.cgi?id=215590