Skip to content

High DPI, Retina Mac #3757

@cmaughan

Description

@cmaughan

Version/Branch of Dear ImGui:
Version: 1.80
Branch: docking

Back-ends: imgui_impl_opengl3.cpp + imgui_impl_sdl.cpp
Operating System: Mac/Win

My Issue/Question:

On Windows, with a 4K display, using SDL + GL3 backends, I get a tiny view of ImGui. This is easily fixed by getting the DPI scale of the monitor (SDL_GetDisplayDPI(....) / 96.0f), and using this value to scale the font:

`io.Fonts->AddFontFromFileTTF(..., 16.0f * dpi_scale);`

Note that on Windows, you also need to add the manifest file to make sure that the app is DPI aware.
Calling SDL_GetWindowSize with this configuration returns the same values as SDL_GetDrawableSize:

SDL_GetWindowSize = 100, 100
SDL_GetDrawableSize = 100, 100
DisplayFramebufferScale = 1

So, for example, a 100x100 window, will have a drawable of 100x100 and a window size on screen of 100x100, and although SDL_GetDisplayDPI returns 2, our DisplayFramebufferScale is now 1: everything is rendered at high DPI and we are happy, with 1:1 pixels on the screen.

Removing the manifest and using OS DPI scaling, our window is now visibly twice the size on screen, but our values for window size and drawable size are the same. Our DisplayFramebufferScale is still 1, but SDL_GetDisplayDPI scales 1, because the OS is lying to us and scaling everything up under the covers. Our fonts are blurry because we are technically scaling them up from a 100 to a 200 sized window. All good, as expected.

Here's the problem. On MacOS, with the same scenario, including a valid plist, and setting NSHighResolutionCapable, etc. the numbers that come back from SDL are different. This time, we get:

SDL_GetWindowSize = 100, 100
SDL_GetDrawableSize = 200, 200
Get_DisplayDPI / 96 = 2 (actually 2.5 on my MBP 16" system, but lets keep it simple...)
FrameBufferScale = 2
io.DisplaySize = 100, 100

And later in glViewport we set the size to io.DisplaySize. This is a problem because now, although we created a high DPI framebuffer, the viewport is rendering to 1/4 of it. And later we are zooming it up from 100x100 to 200x200 (the real size of the window). Blurry fonts.

Adding a hack to NewFrame to set DisplaySize = DrawableSize will fix the rendering, give me high resolution fonts as long as I scale the font size by DPI. But now something about the mouse logic is confused and I can't move viewports around/interact with the UI.

At this point, I'm stuck as to how to fix the mouse logic; and how to fix this in a universal way that makes sense. This behavior must have been seen before; I hope my explanation of what's going on here helps....

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions