[SOLVED] worldToScreen coordinates gives weird results only in some cases

[JangoH]

Link to example project: https://playcanvas.com/editor/scene/620658

Hi, I’m running into a problem where I convert the position of a 3d object to the anchor position of an image element. (So that that image is always at the objects position). I thought I had it all working and everything seems fine, but only on some browsers or devices it gives a weird result, and I really don’t know why. For example, when I launch it on my phone, you clearly see the position of the red squares is off (see image). Try launching it in your browser and see if the squares are on the spheres: https://launch.playcanvas.com/620658?debug=true.
Am I doing something wrong here that I’m just not aware off? Do I need to take different browser inner workings into account or something like that?

[JangoH]

I figured out that when I set my screen to another percentage then 100% through the windows options, I get the issue that my ui is not positioned properly anymore. How can I account for this so the UI is always positioned correctly?

[yaustar]

Sounds like you are doing something similar to this? https://playcanvas.com/project/558460/overview/tutorial-world-to-element

[JangoH]

I really don’t see why, but I’ve matched the code in the example you provided, but if i set the screen settings in windows to 200% the position is off again in my project. But not in the example project. Everything is the same!

[JangoH]

Ok, I think I found the issue! Under the Project Settings - Rendering you have to turn off ‘Device Pixel Ratio’

[dexter_deluxe]

If you want/need to keep the “Device Pixel Ratio” on, you can also take it in account like this:

    this.entity.setLocalPosition(
        screenPos.x / scale * window.devicePixelRatio, 
        (device.height - screenPos.y * window.devicePixelRatio) / scale, 
        0);    

[JangoH]

I ran into the issue again haha and I instantly remembered my old thread. It was bound to happen that I’d forget to flip the switch on that setting I mentioned. But now I’ve encorporated your code. Works perfectly, thanks!

[JangoH]

Ok, it wasn’t fixed still. It’s hilarious but either of the solutions works only for < 100% zoom in browser or > 100% zoom. So here’s my final solution that always works for anyone wondering:

//We need to base our calculation on the deviceRatio (in browser you can set zoom level for example)
        if (window.devicePixelRatio < 1) {
            this.entity.setLocalPosition(
                this.screenPosition.x / scale * window.devicePixelRatio, 
                (this.device.height - this.screenPosition.y * window.devicePixelRatio) / scale,
                0);
        }
        else {
            //If the zoom is above 100%, we don't want to use that factor
            this.entity.setLocalPosition(
                this.screenPosition.x / scale, 
                (this.device.height - this.screenPosition.y) / scale,
                0);
        }