WebGL in mobile browsers


#1

Hi,

i’m happy to build fast stuff using webGL with lime, but all mobile browsers seem to cut in half the screen resolution. It’s ok for high resolution smart phones, but with 720p it is hard to read any text…

Is there anything we can do?


#2

Try setting <window allow-high-dpi="true" />, it may cut your performance in 1/4 (at least in canvas), but it should make things clearer :slight_smile:


#3

Oh, i thought it was a default browser handling^^

What does it excactly do? With that option my game is quite small in the left bottom corner. yet i don’t now where to start checking what is wrong :smiley:


#4

Try handling window.onResize, and render your content at a higher resolution. Also, you’ll want to consider window.scale on some platforms (potentially) as the window coordinates may be scaled (that’s how iOS works)


#5

window.scale did the trick.

Performance was cut in half, but now it looks brilliant :smiley:


#6

Wow could this be done dynamically? E.g. allow-high-dpi for mac & iPhone 8 and above, but not for most of the android devices?


#7

Yes, if you override your ApplicationMain file, you can control how the window is created. Before creating the window (but after starting the application) I think it might be possible to poll the DPI of the device. I haven’t tried this before, but in theory it would be possible.

If you did it only for specific platforms, that’s easy, as you can handle that from XML only