How to scale objects to be same physical size on any device?

Help & Support
,
1

Hi everyone,

So here is what I’m trying to do,
I want to scale an object to be the same visual size across any device, like, I want it to be x cm in size no matter what the screen size/dpi/resolution is.

Currently, I’m using the following code

PointToUnit.convert = function (point) {
  var value = point * window.devicePixelRatio;

  var camera = pc.app.root.findByName('Camera').camera;
  var a = camera.screenToWorld(0 ,0 ,0);
  var b = camera.screenToWorld(value ,0 ,0);

  return b.x - a.x;
};

But it’s ever-so-slightly off, it’s particularly visible between high and low DPI devices.
Is there a way to do what I want ?

Oh and I must use 3D objects, it can’t be a UI or 2D element, and I use a Camera in orthographic projection.

Thanks in advance !

2

I’ve not done this before but what I imagine I would have to do is get the DPI of the screen which is dots per inch and scale the entity based on that.

Device Pixel Ratio is not relative to real world measurements.

Unfortunately, there is no way to get the DPI of the screen from the browser from a quick search. The best I’ve found is a library that tries to infer it: https://github.com/jorgegilramos/screen-dpi-detector

3

Thanks for the answer,

I already found and tested this solution, but it still doesn’t scale well.
Maybe my calculations are wrong ?

4

Maybe. At the same time because you cant get the DPI directly from the device, this is unlikely to be 100% right all the time

5

Yeah I understand that, but I have an device (Iphone) where it is scaled 3 to 4 time too big with this new method. It shouldn’t be this much off.

6

If the new method is inaccurate or even just plain wrong, this is completely possible

The first problem to solve is to ensure you are getting accurate DPIs to the device.

If you don’t, then nothing else from that point is going to be right.