Fix mouse event on high resolution screens

[kapythone]

It doesn't handle cases for high resolution screens such as Retina,

You can test it by running tests in plotly.js:

npm run test-jasmine -- gl_plot_interact

[rreusser]

I don't know the full structure of these libs, but is it possible or desirable to get the pixel ratio from the scene instead of the window? Seems it's possible to set a device pixel ratio that might differ from the window device pixel ratio: https://github.com/gl-vis/gl-plot3d/blob/e573384c1302f8c4358e85faf5293c74447dc25f/scene.js#L150

[etpinard]

@dfcreative what do you think about think?

[kapythone]

I checked the relevant codes again and found it's more complicated than I think.

First, pickBuffer was initiated with ViewShape (whose size is in the unit of physical pixels):
https://github.com/gl-vis/gl-plot3d/blob/master/scene.js#L241

Then it is somehow resized to the CSS pixel (which could represent more than one physical pixel for high DPI screens):
https://github.com/gl-vis/gl-plot3d/blob/master/scene.js#L442
I don't quite understand the logic here, since the buffer is still initiated with previous physical pixels.

In addition, the objects including this mesh seem to be attached an attribute pixelRatio:
https://github.com/gl-vis/gl-plot3d/blob/master/scene.js#L491

I don't think if we can just use that variable in mesh.js, because it is only initiated in:
https://github.com/gl-vis/gl-plot3d/blob/master/scene.js#L491

As far as I know, we should convert the position of x and y, not using another pickShape, the commits related to pickShape such as this one are not necessary:

gl-vis/gl-plot3d@b5c06ad

Let me know if I misunderstand anything, thanks!

FYI, these are some links might be helpful:

w3c/pointerevents#602

https://www.khronos.org/webgl/wiki/HandlingHighDPI

[dy]

@etpinard I think we have to address this issue with a test case, as it seems more complicated than just passing pixelRatio from options.