Just getting back into Babylon.js development, and I started playing around with BABYLON.GUI. My initial investigations left me with some mixed feelings; I love that it exists, and it’s not nearly as terrible as some of the videogame GUI libs I’ve used in the past. (Unpopular opinion: Crazy Eddie’s GUI, aka CEGUI was terrible.)
For me, the immediate thing I noticed that just seemed plain weird was that it looked rather low-res:
What I didn’t notice at the time (thank you anti-aliasing) was that the rendered sphere is also low-res. See, I’m developing on a MacBook Pro, so I’ve got a nice hdpi (“retina”) screen. These days 95% of the stuff I encounter supports hdpi, so it took me a second to realize what I was actually seeing.
Admittedly, I spent a couple of hours fighting with the AdvancedDynamicTexture to try and overscale and then scale back down, and nothing I did looked right at all. It wasn’t until I realized the entire canvas wasn’t rendering at hdpi that I started stumbling in the right direction.
Here is the final “working” version: https://playground.babylonjs.com/#AI8MIC#1
There’s a couple of issues here that I think should turn into Feature Requests and/or bugs.
engine.setHardwareScalingLevel(1 / window.devicePixelRatio);
This is required to get hdpi rendering from Babylon, but I only cobbled it together with a lot of google searching. Oddly enough, the docs say:
By default, Babylon.js will adapt to device ratio in order to produce the best possible quality even on high-DPI devices. (Source: https://doc.babylonjs.com/how_to/optimizing_your_scene#turning-adapttodeviceratio-off)
That just doesn’t seem to be happening, either locally for me, or on the playground? Regardless, I feel like the docs could use a bit more discussion, since the only forum post I could find talking about enabling hdpi was this one: HTML5 Game Devs Forum - HTML5GameDevs.com
Clearly, things have changed since then. 
button1.cornerRadius = 12 * dpr * dpr;
So, this caught me off guard. Initially I expected everything to scale down when I changed the rendering scale, but thankfully Babylon has a solution that’s pretty well documented, gui.idealWidth/gui.idealHeight. I set idealWidth to the canvas’s bounding rect’s width, and almost everything worked.
What was broken was cornerRadius and thickness. Ok, cool, multiply by dpr, then? Nope. It’s dpr^2. I have no idea why. (I need to investigate device pixel ratios other than 2x, it might be that it’s just a straight x4, or dpr * 2 that’s required and I wouldn’t know.)
So, basically, is there a reason why these values don’t scale with idealWidth, while positioning and text size do? If so, can we make it more clear?
Conclusion
I mean, now that I’ve figured out the secret sauce to get it working, it works great. And I do get that not everyone wants hdpi turned on; but I think we should default to it all working out of the box, and just give users the ability to turn it off. (Which the docs seems to indicate is the intention; as long as it all worked, I would be happy with the method mentioned in the docs.)
So, as long as the docs call out what needs to be done I totally support prioritizing performance over visual quality.
) and make my way through that this week. (Won’t be today, more than likely.)