{"id":2267,"date":"2018-03-01T00:16:56","date_gmt":"2018-03-01T04:16:56","guid":{"rendered":"http:\/\/wizardwalk.com\/newblather\/?p=2267"},"modified":"2018-03-01T00:16:56","modified_gmt":"2018-03-01T04:16:56","slug":"font-rendering-stb-oversampling-vs-nv-path-rendering","status":"publish","type":"post","link":"https:\/\/wizardwalk.com\/newblather\/?p=2267","title":{"rendered":"Font rendering: stb oversampling vs NV path rendering"},"content":{"rendered":"<p>I told you I wanted to try stb oversampling in my last post, and I did! Here is the result (stb 2&#215;2 oversampling on top, nanovg in middle (which is based on stb anyway, but no oversampling), and NV path rendering on bottom, screen size then 5x zoom):<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-2271\" src=\"http:\/\/wizardwalk.com\/newblather\/wp-content\/uploads\/2018\/03\/fonts-small.png\" alt=\"\" width=\"108\" height=\"60\" \/><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-2270\" src=\"http:\/\/wizardwalk.com\/newblather\/wp-content\/uploads\/2018\/03\/fonts-zoomin.png\" alt=\"\" width=\"540\" height=\"300\" srcset=\"https:\/\/wizardwalk.com\/newblather\/wp-content\/uploads\/2018\/03\/fonts-zoomin.png 540w, https:\/\/wizardwalk.com\/newblather\/wp-content\/uploads\/2018\/03\/fonts-zoomin-300x167.png 300w\" sizes=\"(max-width: 540px) 100vw, 540px\" \/><\/p>\n<p>So stb oversampling definitely looks the best, although it is still pretty fuzzy. And moving it around by subpixels looks very decent; it doesn&#8217;t get very much of the &#8220;shimmer&#8221; effect. (Still a bit, but not much to be bothersome.)<\/p>\n<p>Here&#8217;s stb oversampling (top) vs NV path rendering (bottom) with a bigger font size (screen size then 2x zoom):<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-2269\" src=\"http:\/\/wizardwalk.com\/newblather\/wp-content\/uploads\/2018\/03\/bigText.png\" alt=\"\" width=\"303\" height=\"90\" srcset=\"https:\/\/wizardwalk.com\/newblather\/wp-content\/uploads\/2018\/03\/bigText.png 303w, https:\/\/wizardwalk.com\/newblather\/wp-content\/uploads\/2018\/03\/bigText-300x89.png 300w\" sizes=\"(max-width: 303px) 100vw, 303px\" \/><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-2268\" src=\"http:\/\/wizardwalk.com\/newblather\/wp-content\/uploads\/2018\/03\/bigText-2.png\" alt=\"\" width=\"606\" height=\"180\" srcset=\"https:\/\/wizardwalk.com\/newblather\/wp-content\/uploads\/2018\/03\/bigText-2.png 606w, https:\/\/wizardwalk.com\/newblather\/wp-content\/uploads\/2018\/03\/bigText-2-300x89.png 300w\" sizes=\"(max-width: 606px) 100vw, 606px\" \/><\/p>\n<p>Here, I think NV path rendering looks better; it&#8217;s definitely less fuzzy. (The trade-off is that it does suffer from more &#8220;shimmer&#8221; when translated by subpixels, but it doesn&#8217;t bother me too much.)<\/p>\n<p>You can also see that NV path rendering is able to utilize proper kerning: the &#8216;e&#8217; is slightly below the capital &#8216;T&#8217;, as it should be. Each letter isn&#8217;t being drawn on a textured quad, so overlapping is trivial. (Well, for the end library user, at least.)<\/p>\n<p>So, I think that completes my foray into font rendering for now. I&#8217;m too lazy to make bitmap fonts at the moment; stb oversampling will work for smaller fonts for now. Time to continue on to other GUI elements. I will try to design the GUI system in such a way that it will be able to utilize any font rendering system should I wish to create bitmap font support in the future.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I told you I wanted to try stb oversampling in my last post, and I did! Here is the result (stb 2&#215;2 oversampling on top, nanovg in middle (which is based on stb anyway, but no oversampling), and NV path rendering on bottom, screen size then 5x zoom): So stb [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true},"categories":[19],"tags":[780,779,778],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p7gI4B-Az","_links":{"self":[{"href":"https:\/\/wizardwalk.com\/newblather\/index.php?rest_route=\/wp\/v2\/posts\/2267"}],"collection":[{"href":"https:\/\/wizardwalk.com\/newblather\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wizardwalk.com\/newblather\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wizardwalk.com\/newblather\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wizardwalk.com\/newblather\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2267"}],"version-history":[{"count":1,"href":"https:\/\/wizardwalk.com\/newblather\/index.php?rest_route=\/wp\/v2\/posts\/2267\/revisions"}],"predecessor-version":[{"id":2272,"href":"https:\/\/wizardwalk.com\/newblather\/index.php?rest_route=\/wp\/v2\/posts\/2267\/revisions\/2272"}],"wp:attachment":[{"href":"https:\/\/wizardwalk.com\/newblather\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wizardwalk.com\/newblather\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wizardwalk.com\/newblather\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}