[SOLVED] Include devicePixelRatio for screenspace to worldspace conversion

Help & Support
1

So I am trying to display a screenspace UI entity directly over a world space entity.

I am using this conversion to do so:

var screenSpacePos = new pc.Vec3();
this.entity.camera.worldToScreen(pickedEntity.getPosition(), screenSpacePos);
var convertedPos = new pc.Vec3(screenSpacePos.x - (this.canvas.screen.resolution.x * 0.5), screenSpacePos.y - (this.canvas.screen.resolution.y * 0.5), screenSpacePos.z);
pickedEntity.parent.parent.script.point.showCard(convertedPos);

It works perfectly but it does not take window.devicePixelRatio into account. How would I go about doing this?

Build link: https://playcanv.as/p/UO8N0xeC/

Hover over an “X”, the UI card that appears is the entity I am trying to center on the X for all devices.

2

I’ve done the opposite here (canvas to world): Trouble mapping back 3D model position to 2D screen position

Perhaps that can help you do the reverse?

Edit: Dave also has a sample project that does world to canvas: https://playcanvas.com/editor/project/558460

3

I solved it by dividing by maxPixelRatio:

var convertedPos = new pc.Vec3(screenSpacePos.x - ((this.canvas.screen.resolution.x / this.app.graphicsDevice.maxPixelRatio) * 0.5), 
                                       screenSpacePos.y - ((this.canvas.screen.resolution.y / this.app.graphicsDevice.maxPixelRatio) * 0.5), 0);