Why are scene.pointerX and scene.pointerY not integers?

Questions
,
1

Hello,

I used to think of the scene.pointerX and scene.pointerY values as the pixel positions of the mouse pointer. But that doesn’t make sense if the values are fractional. So what exactly are these values?

2

They are exactly that, pointer position on the canvas in pixels
x from left to right / 0 to canvas width in pixels
y from top to bottom / 0 to canvas height in pixels

they should be integers, if you’re seeing something else that would be strange

3

That is what is confusing me. Attaching the console screenshot from the playground link you shared. All the values are floating point. This is on Chrome Version 115.0.5790.114 (Official Build) (arm64)

image

4

I have never seen that before :smiley:

Maybe there are some conditions or systems where they can be floats?
Perhaps someone else knows better.

I’ve only ever got integers
pointerXY

Edit
Checking in more browsers, Microsoft Edge shows .5 on pointerX values, no float on Y
Opera, Firefox and Chrome exclusively gives me integers.

pointerXY

1 Like
5

It probably depends on your screen dpi on how well css pixels aligns with your screen pixels.

1 Like
6

in my all case is integer
but when I force the aspect ratio, it shows the following result
I’m guessing it’s something like this.
so if you want to avoid this, you might want to do

Math.round(scene.pointerX), Math.round(scene.pointerY)

22
221732×444 38.6 KB

1 Like
7

I can reproduce it on chrome. Here the scene.PointerX values appear as floats (e.g. 101.5).
It can be influenced when I change the size of the debugging console or the size of the code window. It then changes between integer and float.

Not quite sure what causes this. Browsers often provide coordinates in device-independent pixels (DIPs) and then multiply them by the DPR to get actual pixel values. This can lead to floating-point values. My guess would be:

When the canvas is created, it might have a certain size in logical pixels, but due to the DPR, these logical pixels correspond to fractional physical pixels on high-DPI screens. This is why you see fractional pointer coordinates. :sweat_smile:

If you depent for some reason on integers, consider using Math.round() :nerd_face:

Just an idea:
You can retrieve the DPR using window.devicePixelRatio and use it to adjust the coordinates accordingly.

scene.onBeforeRenderObservable.add(function(){
    var dpr = window.devicePixelRatio || 1;
    var x = Math.round(scene.pointerX * dpr);
    var y = Math.round(scene.pointerY * dpr);
    console.log(x, y)
})