My app was using the fullscreen mode of the GUI to display annotations in a 3D scene but
linkWithMesh was causing heavy performance degradation on Safari and Firefox (all fine on Chrome). After a quick test I realised the billboard (texture) mode of the GUI was doing much better. So I tried to get a billboard annotation going that would adapt its scale to the zoom to get a bit of the fullscreen UI experience (consistent display size). The basics are simple but getting it right with retina displays, conserving aspect ratio, etc. has been a fight. I thought this might be useful to others so here goes a PG containing the gist of what I do: https://playground.babylonjs.com/#ZI9AK7#1543.
const DPR = window.devicePixelRatio engine.setHardwareScalingLevel(1 / DPR) // or set adaptToDeviceRatio to true in new Engine() call // increase renderScale to avoid blur annotations (more antialiasing) ui.renderScale = 2 // renderScale seems to screw the aspect ratio of the UI, fix it with 3 lines below const sceneSize = Math.min(sceneWidth, sceneHeight) ui.rootContainer.scaleX = sceneWidth / sceneSize ui.rootContainer.scaleY = sceneHeight / sceneSize
The rest of the code in the playground is to resize the UI controls when the camera stops moving and zoom has changed (arc rotate camera).
One issue I’m still not able to fix is if you drop to WebGL 1 (or use Safari basically),
renderScale = 2 seems to not be supported. Any idea why?
Edit: Another issue I just realised – the rescaling is super slow on Firefox (probably their canvas engine which is notoriously slow) and is blocking the interaction. This is particularly obvious on a scene with 10ish annotations, 2-3s to rescale. Any thoughts on getting around this?
Cross linking a post that was super useful to get this working: Proper way to support HDPI/Retina display at full resolution and scaled properly? - #6 by Deltakosh