Support for 4k/retina displays

[ypujante]

I have been trying to use emscripten to port my c++ desktop project (raylib / glfw / ImGui) to the web using emscripten. Immediately I noticed that on a 4k/retina display, the rendering is really poor as can be seen on this screenshot:

emscripten on the left / native on the right

I submitted an issue on raylib and have been spending a huge amount of time trying to figure out if there is a way to address it.

I believe in the end, it seems that emscripten/glfw does not handle 4k. When I dig in the emscripten code, I can see that the "scale" is computed properly (getting the devicePixelRatio):

  var _glfwInit = () => {
// ...
      GLFW.scale  = _emscripten_get_device_pixel_ratio();
...

Calling glfwGetWindowContentScale from cpp returns the proper 2x value on a retina screen. But it seems that this scale value ends up never being used by the rest of the code.

Is there any plan to add support? Is anybody working on it?

I wouldn't mind adding support for it given the proper guidance. For example, one way to allow for this feature to be turned on would be to use glfwWindowHint(GLFW_SCALE_TO_MONITOR, GLFW_TRUE); otherwise it behaves the same way.

Thank you

[sbc100]

I'm not sure there are in GLFW experts who work on emscripten these days. If you think GLFW_SCALE_TO_MONITOR is best way to make this work feel free to send a PR.

[ypujante]

I am no expert of GLFW either. But I do believe that for emscripten, and correct me if I am wrong, there should be a way to turn the feature on or off since at this moment it doesn't exist. I am absolutely not sure if using this glfw flag would be the best way. Another way I could imagine is using another compilation option (-s xxx).

Since I am not familiar with emscripten internals, I can take a crack at implementing the feature with a (hard-coded) flag to turn it off. How the flag is populated can be ironed out later if I am successful in my endeavor...

[sbc100]

In general I would rather avoid adding new -s settings. If the glfwWindowHint makes sense that would be great.

[ypujante]

After digging into the code, since the canvas size is handled by the Browser class, not by glfw, I ended up adding a isHiDPIAware flag on the Browser that gets set from a member of the Module like this: Browser.isHiDPIAware = Module['isHiDPIAware'] || false

I have a proof of concept running using the imgui / glfw example with 0 code change in the example code besides

Module = {
          isHiDPIAware: true,
// ...
}

in index.html

With no isHiDPIAware defined

With isHiDPIAware=true

The changes may not look dramatic because the ImGui font is pixelated in the first place, but it is pretty obvious for the little triangles.

Just wanted to share where I stand right now before I test more heavily with various scenario and other frameworks.

I am being ultra careful to not introduce any changes if Browser.isHiDPIAware is false

[sbc100]

What would be the downside of just always setting isHiDPIAware to true? i.e. do we need to continue to support non-HiDPI-Aware?

[ypujante]

That is a good question... The one reason I can think of is because you are essentially rendering 4x the number of pixels, I can imagine that for some game oriented code, it could have a dramatic impact on frame rate/performance.

[ypujante]

I just made the proof of concept available (I added a flag which on load, toggle Module.isHiDPIAware so it is easy to test the 2 versions)

To see the difference between the 2, the display must be 4K/Retina

• HiDPI Enabled
• HiDPI Disabled

On another note, I was also able to successfully run a similar proof of concept with raylib (glfw) / imgui.

[ypujante]

I added another proof of concept for raylib which you can find in this raylib discussion. Since this one has an image, it is a lot more obvious how different it is...

[ypujante]

I have submitted a pull request for the work mentioned in this discussion.

Being my first pull request for this project, please let me know if I need to change anything.

Thank you

[ypujante]

Now that I have implemented the changes for GLFW (pending PR approval), I wouldn't mind implementing similar changes for SDL. Since I am not very familiar with SDL, can somebody point me to an example project I can use as a starting point to add 4k support?