I am looking for help figuring out the proper way to support HDPI/Retina displays with the BabylonJS engine and a fullscreen ui.
I understand that I can use the
adaptToDeviceRatio parameter when constructing the engine to render at the full resolution of the display. This is a very easy and simple feature work with and the output looks stellar on high DPI displays!
Where I’m getting stuck is in the GUI. When the engine is adapting to the device’s pixelRatio, the GUI gets smaller which is not desired. My current monitors have a pixelRatio of 2, making the GUI half the size it should be.
I created a playground example with a button that toggles the engine’s hardwareScalingLevel between 1 and your device’s pixelRatio to demonstrate this. Note that if your display’s pixel density is 1 you won’t see a difference when you toggle.
How can I use
adaptToDeviceRatio without the UI shrinking?