Demo on Retina display

[memononen]

Demo on Retina display

[memononen]

I did that intentionally, but you have a good point.

Your suggested solution does not handle font rendering and tesselation properly. If you look the second image carefully you'll see that the fonts are blurry and the tesselation especially on the small blue dots is quite coarse.

I wonder if the proper solution would pass in scale to nvgBeginFrame(), or whether we would expect the user to do the scaling manually. I'm slightly in favor of adding scale to nvgBeginFrame(), what do you think?

The implementation would be something like:

in example code:

int winWidth, winHeight;
glfwGetWindowSize(window, &winWidth, &winHeight);
nvgBeginFrame(vg, width, height, (float)width/(float)winWidth, (float)height/(float)winHeight);

in nvgBeginFrame:

void nvgBeginFrame(struct NVGcontext* ctx, int width, int height, float sx, float sy)
{
...
vg->nstates = 0;  // probably should add state reset there anyways...
nvgSave(vg);
nvgReset(vg);
nvgScale(vg, sx, sy);
}

Maybe the retina scaling could be part of initialization too.

[andrewcorrigan]

As a user, I would definitely not want to do it manually, so adding sx, sy to nvgBeginFrame would work best for me.

[memononen]

Do you know how other libraries do it? glfw seems to have window size vs. framebuffer size. That is one option. HTML5 has devicePixelRatio [1].

[1] http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html

[andrewcorrigan]

SDL2 is the same as GLFW, just with different names: SDL_GetWindowSize and SDL_GL_GetDrawableSize

[andrewcorrigan]

With Anttweakbar you call TwWindowSize with the window size reported by glfwGetWindowSize, rather than framebuffer size, but then there is a fontscaling option. I forgot the logic of this, but it works seamlessly across retina and non-retina displays.

            window_container.get_window_size(&w, &h);
            window_container.get_framebuffer_size(&fb_w, &fb_h);
            int scale = (fb_w <= w) ? 1 : fb_w / w;
            if(scale > 1)
            {
                std::stringstream s;
                s << " GLOBAL fontscaling=" << scale << " ";
                TwDefine(s.str().c_str());
            }

[memononen]

CoreGraphics seems to use some sort of scale value:
http://stackoverflow.com/questions/5414631/retina-display-core-graphics-font-quality

I think one scale value is probably the best. A name like contentScale, pixelRatio or devicePixelRatio could work, it would at least be consistent what is being used out there. Probably makes sense to put that as parameter in nvgBeginFrame since we pass the frame buffer size there too (vs. passing it on init).

Whether we should pass frame buffer or window size to nvgBeginFrame is good question too. HTML canvas and CoreGraphics [1] both seem to use window coordinates in this kind of case too, maybe that is the correct option.

Going this route, I think the best way to implement pixel scaling is to store the device pixel ration in to the context and then scale ctx->tessTol and ctx->distTol with pixel ratio before use (or make a function which calculates them based in pixel ratio, call in init too), in addition multiply 'scale' in nvgText() by pixel ration too.

Note to self, nvgTextBounds and nvgVertMetrics need scaling too.

[1] http://stackoverflow.com/questions/4779221/in-iphone-app-how-to-detect-the-screen-resolution-of-the-device

[memononen]

Would you like to make a PR about these retina support or should I go ahead and implement it?

[andrewcorrigan]

PR (purchase request?). Please do go ahead :)

[memononen]

PR = pull request, I'll implement that.

[andrewcorrigan]

Regarding PR, I swear I knew that.

Regarding adding scale support, I was just looking at your comments again and I just realized how simple it would be from your first response, I was previously under the impression that it would require further changes deeper in NanoVG (e.g. to how tessellation is handled). Sorry about that.

[memononen]

no worries, it's almost done :)

[memononen]

This is implemented now, can you try it out? One thing left to do is to up the cache size too based on retina display. The implementation did not end up being as simple as I hoped, while working on this I also found a couple of bugs in my demo code which were not showing up on non-retina displays :)

[andrewcorrigan]

It works. It looks absolutely stunning too.