{"id":319984,"date":"2021-03-21T15:00:39","date_gmt":"2021-03-21T15:00:39","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=319984"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=319984","title":{"rendered":"\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0434\u043b\u044f WebGL \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0438\u043d\u0441\u0442\u0443\u043c\u0435\u043d\u0442\u0430 msdf-bmfont-xml \u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 MSDF"},"content":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440:<\/strong> <a href=\"https:\/\/openglobus.org\/examples\/fonts\/fonts.html\" rel=\"noopener noreferrer nofollow\">https:\/\/openglobus.org\/examples\/fonts\/fonts.html<\/a><\/p>\n<p><em>18\/3\/2021<\/em> \u041d\u0430\u043a\u043e\u043d\u0435\u0446-\u0442\u043e \u0431\u044b\u043b\u0430 \u0437\u0430\u043a\u043e\u043d\u0447\u0435\u043d\u0430 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 <a href=\"https:\/\/github.com\/soimy\/msdf-bmfont-xml\" rel=\"noopener noreferrer nofollow\">msdf-bmfont-xml<\/a> \u0434\u043b\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 <a href=\"https:\/\/openglobus.org\/\" rel=\"noopener noreferrer nofollow\">openglobus<\/a>. \u0422\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u043c\u0435\u0442\u043a\u0438 \u0441\u0442\u0430\u043b\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043a\u0440\u0430\u0441\u0438\u0432\u0435\u0435! \u041c\u043d\u0435 \u043f\u043e\u043c\u043e\u0433 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 <a href=\"https:\/\/github.com\/soimy\/msdf-bmfont-xml\" rel=\"noopener noreferrer nofollow\">msdf-bmfont-xml<\/a> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u0442\u043b\u0430\u0441\u043e\u0432 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0442\u0435\u043a\u0441\u0442\u0443\u0440 \u0434\u043b\u044f (multichannel signed distance fields) MSDF.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7e6\/fb2\/870\/7e6fb28707105ef2bdb83139ab753f8d.png\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435: https:\/\/openglobus.org\/examples\/fonts\/fonts.html\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435: https:\/\/openglobus.org\/examples\/fonts\/fonts.html\" width=\"962\" height=\"509\"><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435: https:\/\/openglobus.org\/examples\/fonts\/fonts.html<\/figcaption><\/figure>\n<p><a href=\"https:\/\/github.com\/soimy\/msdf-bmfont-xml\" rel=\"noopener noreferrer nofollow\">msdf-bmfont-xml<\/a> \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0448\u0438\u0440\u043e\u043a\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0445 \u0430\u0442\u043b\u0430\u0441\u043e\u0432 \u0438\u0437 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 ttf. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0430 \u0430\u0442\u043b\u0430\u0441\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f \u043c\u043d\u043e\u0433\u043e\u043a\u0430\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u0443 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0439 (multichannel signed distance fields), \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043e\u0441\u0442\u0440\u044b\u0435 \u0443\u0433\u043b\u044b \u0431\u0443\u043a\u0432, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0438 \u043e\u0442 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e signed distance field.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0445\u043e\u0447\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0442\u044c, \u0447\u0442\u043e \u0438\u0437 \u0441\u0435\u0431\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0430\u0442\u043b\u0430\u0441 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0431\u0443\u043a\u0432, \u0438 \u043a\u0430\u043a \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 WebGL.&nbsp;<\/p>\n<h2>\u0422\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0439 \u0430\u0442\u043b\u0430\u0441 msdf-bmfont-xml<\/h2>\n<p>\u0422\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0439 \u0430\u0442\u043b\u0430\u0441 \u0448\u0440\u0438\u0444\u0442\u0430, \u044d\u0442\u043e \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0430 \u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u043c\u0438 \u043d\u0430 \u043d\u0435\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432. \u041a\u0430\u0436\u0434\u0430\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u0438\u043c\u0435\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b.&nbsp;<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/275\/a31\/adc\/275a31adcf25a054e1ac3e00ffb735c5.png\" alt=\"\u0422\u0435\u043a\u0441\u0442\u0443\u0440\u0430 512x512 \u0434\u043b\u044f \u0430\u0442\u043b\u0430\u0441\u0430 \u0448\u0440\u0438\u0444\u0442\u0430 Roboto-Regular\" title=\"\u0422\u0435\u043a\u0441\u0442\u0443\u0440\u0430 512x512 \u0434\u043b\u044f \u0430\u0442\u043b\u0430\u0441\u0430 \u0448\u0440\u0438\u0444\u0442\u0430 Roboto-Regular\" width=\"512\" height=\"512\"><figcaption>\u0422\u0435\u043a\u0441\u0442\u0443\u0440\u0430 512&#215;512 \u0434\u043b\u044f \u0430\u0442\u043b\u0430\u0441\u0430 \u0448\u0440\u0438\u0444\u0442\u0430 Roboto-Regular<\/figcaption><\/figure>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u0442\u043b\u0430\u0441\u0430 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code class=\"cs\">msdf-bmfont.cmd - reuse -i .\\charset.txt -m 512,512 -f json -o %1.png -s 32 -r 8 -p 1 -t msdf %1<\/code><\/pre>\n<p>\u0433\u0434\u0435 %1\u200a\u2014\u200a\u0438\u043c\u044f \u0444\u0430\u0439\u043b\u0430 \u0448\u0440\u0438\u0444\u0442\u0430 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 ttf, charset.txt\u200a\u2014\u200a\u044d\u0442\u043e \u0444\u0430\u0439\u043b \u0441 \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u0430\u0442\u043b\u0430\u0441, \u043f\u0440\u043e \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043c\u043e\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0435 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f <a href=\"https:\/\/github.com\/soimy\/msdf-bmfont-xml\" rel=\"noopener noreferrer nofollow\">msdf-bmfont-xml<\/a>:<\/p>\n<p>\u041f\u0440\u0438 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b\u043e\u0432, \u043d\u0430\u0441 \u0431\u0443\u0434\u0443\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0430 \u0430\u0442\u043b\u0430\u0441\u0430 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 png \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0430\u0442\u043b\u0430\u0441\u0430 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 json.<\/p>\n<p>\u0412 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f json \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043f\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u0430\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 chars. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440,   \u0441\u0438\u043c\u0432\u043e\u043b <strong><em>\u2018q\u2019<\/em> <\/strong>\u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435 \u0430\u0442\u043b\u0430\u0441\u0430 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d \u0432 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u0445 <strong><em>x = 131, y = 356, width = 22, height = 32<\/em><\/strong>. \u0442.\u0435. \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043b\u0435\u0432\u043e\u0433\u043e \u043f\u0440\u0430\u0432\u043e\u0433\u043e \u0443\u0433\u043e\u043b\u0430 <strong><em>[131, 356]<\/em><\/strong> \u0438 \u043f\u0440\u0430\u0432\u043e\u0433\u043e \u043d\u0438\u0436\u043d\u0435\u0433\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e <strong><em>[131+22, 356+32]<\/em><\/strong>. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0435\u0441\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u0430\u0442\u043b\u0430\u0441\u0430 \u0440\u0430\u0432\u0435\u043d 512 \u043d\u0430 512 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u0437\u043d\u0430\u0447\u0438\u0442 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0441\u043e\u043c\u0432\u043e\u043b\u0430 <strong><em>\u2018q\u2019<\/em><\/strong> \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0432\u043d\u044b <strong><em>[131\/512, 356\/512 ]<\/em><\/strong> \u0438 <strong><em>[153\/512, 388\/512]<\/em><\/strong>. \u0415\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u044d\u0442\u0438 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0432 \u0448\u0435\u0439\u0434\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0438\u0441\u0443\u0435\u0442 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a, \u0442\u043e \u043c\u044b \u0443\u0432\u0438\u0434\u0435\u043c \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0435 \u043d\u0430\u0448 \u0441\u0438\u043c\u0432\u043e\u043b. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 \u0441\u0438\u043c\u0432\u043e\u043b\u0430, \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u044d\u0442\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u043c \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430, \u0447\u0442\u043e\u0431\u044b \u0441\u0438\u043c\u0432\u043e\u043b \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c. <\/p>\n<pre><code class=\"json\">{     id: 113,     char: \"q\",     width: 22,     height: 32,     xoffset: -3,     yoffset: 11,     xadvance: 18,     x: 131,     y: 356,     ... }<\/code><\/pre>\n<p>\u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0432\u0430\u0436\u043d\u044b\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 \u0434\u043b\u044f \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f:<\/p>\n<p><strong>xoffs\u0435t\u200a<\/strong>\u2014\u200a\u0421\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438<\/p>\n<p><strong>yoffset\u200a<\/strong>\u2014\u200a\u0421\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438<\/p>\n<p><strong>xadvance\u200a<\/strong>\u2014\u200a\u0428\u0438\u0440\u0438\u043d\u0430 \u0441\u0438\u043c\u0432\u043e\u043b\u0430; \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0442 \u043b\u0435\u0432\u043e\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u0434\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435.<\/p>\n<p>\u0410 \u0442\u0430\u043a\u0436\u0435 <strong>id <\/strong>\u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0438\u043c\u0432\u043e\u043b \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u0435\u0440\u043d\u0438\u043d\u0433\u043e\u0432. \u041a\u0435\u0440\u043d\u0438\u043d\u0433\u200a\u2014\u200a\u044d\u0442\u043e \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0441\u0438\u043c\u0432\u043e\u043b\u0430\u043c\u0438.<\/p>\n<h2>\u041f\u0440\u0438\u043c\u0435\u0440: \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u043e\u043a\u0438 \u201cWg!\u201d \u0448\u0440\u0438\u0444\u0442 Arial<\/h2>\n<p>\u041f\u0430\u0440\u043c\u0435\u0442\u0440\u044b \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432:<\/p>\n<pre><code class=\"javascript\">W: width: 37, height: 31, xoffset: -4, yoffset: 4, xadvance: 30 g: width: 23, height: 32, xoffset: -3, yoffset: 10, xadvance: 18 ! : width: 11, height: 31, xoffset: -1, yoffset: 4, xadvance: 9<\/code><\/pre>\n<p>\u0426\u0435\u043d\u0442\u0440\u043e\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0435\u0432\u044b\u0439 \u0432\u0435\u0440\u043d\u0438\u0439 \u0443\u0433\u043e\u043b, \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u044b \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u043f\u0440\u044f\u043c\u043e\u0439 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0437\u0435\u043b\u0435\u043d\u043e\u0439 \u043b\u0438\u043d\u0438\u0438 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043b\u0435\u0432\u043e\u0439 \u0437\u0435\u043b\u0435\u043d\u043e\u0439 \u043b\u0438\u043d\u0438\u0438 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u0438 \u0438\u043c\u0435\u044e\u0442 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c <strong>width<\/strong>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4bc\/c88\/6e4\/4bcc886e4ca6d12d8d45e49812cb7996.png\" width=\"914\" height=\"450\"><figcaption><\/figcaption><\/figure>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 (\u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u0439) \u043e\u0441\u0438 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438, \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <strong>yoffsset<\/strong>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0b9\/6e6\/b8b\/0b96e6b8b2748b765851a1c684e7d3af.png\" width=\"916\" height=\"532\"><figcaption><\/figcaption><\/figure>\n<p>\u0413\u043e\u043b\u0443\u0431\u044b\u043c\u0438 \u043b\u0438\u043d\u0438\u044f\u043c\u0438 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <strong>xadvance <\/strong>(\u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u0430), \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u0438\u043c\u0432\u043e\u043b \u0441\u043c\u0435\u0449\u0435\u043d \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0443 <strong>xoffset<\/strong>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9d8\/83e\/a5c\/9d883ea5c195dbebb9a5f07dbf55b874.png\" width=\"756\" height=\"532\"><figcaption><\/figcaption><\/figure>\n<p>\u0422\u0435\u043a\u0443\u0449\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043c\u043e\u0436\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u043c, \u043e\u0434\u043d\u0430\u043a\u043e \u0434\u043b\u044f \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0434\u043b\u044f \u043a\u0435\u0440\u043d\u0438\u043d\u0433\u0430, \u0442.\u0435. \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430 \u0434\u0432\u0443\u0445 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432. \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044f \u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043a\u0435\u0440\u043d\u0438\u043d\u0433\u0438; \u043a\u0435\u0440\u043d\u0438\u043d\u0433 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0435 <strong>xoffset <\/strong>\u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0430.<\/p>\n<h2>\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0442\u0435\u043a\u0441\u0442\u0430 MSDF<\/h2>\n<p>\u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0432\u0435\u0440\u0448\u0438\u043d \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u043e\u043c gl.drawArrays, \u0433\u0434\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u0431\u0443\u0444\u0444\u0435\u0440\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u0443\u0444\u0444\u0435\u0440 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0432\u0435\u0440\u0448\u0438\u043d \u0434\u043b\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 a_vertices:<\/p>\n<pre><code class=\"cpp\">vec2 a_vertices = [0, 0, 0, -1, 1, -1, 1, -1, 1, 0, 0, 0]<\/code><\/pre>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0443\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0438 \u0430\u0442\u043b\u0430\u0441\u0430 \u0448\u0440\u0438\u0444\u0442\u0430:<\/p>\n<pre><code class=\"cpp\">imageSize = 512; \/\/\u0440\u0430\u0437\u043c\u0435\u0440 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u0430\u0442\u043b\u0430\u0441\u0430 nWidth = width \/ imageSize; \/\/\u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u0441\u0438\u043c\u0432\u043e\u043b\u0430 nHeight = height \/ imageSize; \/\/\u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430 \u0433\u043b\u0438\u0444\u0430 nAdvance = xadvance \/ imageSize; \/\/\u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0433\u043b\u0438\u0444\u0430 \u0434\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 nXOffset = xoffset \/ imageSize; \/\/\u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 nYOffset = 1.0 - yoffset \/ imageSize; \/\/\u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438<\/code><\/pre>\n<h2>\u0428\u0435\u0439\u0434\u0435\u0440 GLSL<\/h2>\n<p>\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a: <a href=\"https:\/\/github.com\/openglobus\/openglobus\/blob\/master\/src\/og\/shaders\/label.js\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/openglobus\/openglobus\/blob\/master\/src\/og\/shaders\/label.js<\/a><\/p>\n<pre><code class=\"cpp\">\/\/ Vertex shader: \/\/ ... vec2 v = screenPos + (a_vertices * a_gliphParam.xy + a_gliphParam.zw + vec2(advanceOffset, 0.0)) * a_size;  \/\/ \u0413\u0434\u0435: \/\/ screenPos - \u044d\u043a\u0440\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0441\u0442\u0440\u043e\u043a\u0438 \/\/ a_vertices - \u041a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0432\u0435\u0440\u0448\u0438\u043d \/\/ a_gliphParam - \u0432\u0435\u043a\u0442\u043e\u0440 \u0441 \u043c\u0435\u0442\u0440\u0438\u043a\u0430\u043c\u0438 \u0441\u0438\u043c\u0432\u043e\u043b\u0430, \u0433\u0434\u0435: \/\/ x - nWidth, y - nHeight, z - nXOffset, w - nYOffset \/\/ advanceOffset - \u0441\u0443\u043c\u0430\u0440\u043d\u043e\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043f\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0443 nAdvance, \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u043e\u043c\u0432\u043e\u043b\u0430 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 \/\/ a_size - \u044d\u043a\u0440\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0441\u0442\u0440\u043e\u043a\u0438 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445   \/\/ Fragment shader: \/\/ ... const float imageSize = 512.0; const float distanceRange = 8.0;  layout(location = 0) out vec4 outScreen;  float median(float r, float g, float b) {     return max(min(r, g), min(max(r, g), b)); } float getDistance() {     vec3 msdf = texture(fontTexture, v_uv).rgb;     return median(msdf.r, msdf.g, msdf.b); } void main () {     vec2 dxdy = fwidth(v_uv) * vec2(imageSize);     float dist = getDistance() + min(v_weight, 0.5 \u2013 1.0 \/ DIST_RANGE) - 0.5;     float opacity = clamp(dist * distanceRange \/ length(dxdy) + 0.5, 0.0, 1.0);      outScreen = vec4(v_rgba.rgb, opacity * v_rgba.a); } \/\/ \u0413\u0434\u0435: \/\/ fontTexture - \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0430 \u0430\u0442\u043b\u0430\u0441\u0430 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \/\/ v_weight - \u0448\u0438\u0440\u0438\u043d\u0430 \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u043e\u0442 0 \u0434\u043e 1, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u043a\u0430\u043d\u0442\u043e\u0432\u043a\u0438, \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0430\u0432\u0435\u043d 0. \/\/ \u041e\u043a\u0430\u043d\u0442\u043e\u0432\u043a\u0430 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u041f\u0415\u0420\u0412\u042b\u041c \u043f\u0440\u043e\u0445\u043e\u0434\u043e\u043c \u0441 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c v_weight. \/\/ v_uv - \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u0432 \u0430\u0442\u043b\u0430\u0441\u0435 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \/\/ v_rgba - \u0446\u0432\u0435\u0442 \u0441\u0438\u043c\u0432\u043e\u043b\u0430, \u0438\u043b\u0438 \u043e\u043a\u0430\u043d\u0442\u043e\u0432\u043a\u0438 \/\/ ...<\/code><\/pre>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u043b, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0430\u0442\u043b\u0430\u0441\u0430\u043c\u0438 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0438 \u043a\u0430\u043a \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <a href=\"https:\/\/github.com\/soimy\/msdf-bmfont-xml\" rel=\"noopener noreferrer nofollow\"><strong>msdf-bmfont-xml<\/strong><\/a><strong> <\/strong>\u0434\u043b\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u042d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u043b \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u043c\u0435\u0442\u043e\u043a \u043d\u0430 \u043a\u0430\u0440\u0442\u0435. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6a4\/cd3\/33b\/6a4cd333b67018054b6c469ad2a7520f.png\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u0430 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 \u0411\u041f\u041b\u0410 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 Microavia c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Openglobus\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u0430 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 \u0411\u041f\u041b\u0410 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 Microavia c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Openglobus\" width=\"1310\" height=\"544\"><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u0430 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 \u0411\u041f\u041b\u0410 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 Microavia c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Openglobus<\/figcaption><\/figure>\n<p>\u041f\u0438\u0448\u0438\u0442\u0435 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445, \u0447\u0435\u043c \u0432\u044b \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435\u0441\u044c, \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0448\u0440\u0438\u0444\u0442\u043e\u0432, \u0438 \u043a\u0430\u043a \u043d\u0430 \u0432\u0430\u0448 \u0432\u0437\u0433\u043b\u044f\u0434 \u043c\u043e\u0436\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u043c\u0435\u0442\u043e\u043a?<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043f\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044e \u043c\u043e\u0435\u0439 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u0434\u0430\u0442\u044c \u0438\u0445 \u043d\u0430 <a href=\"https:\/\/openglobus.org\" rel=\"noopener noreferrer nofollow\">openglobus <\/a>\u0444\u043e\u0440\u0443\u043c\u0435 <a href=\"https:\/\/groups.google.com\/forum\/#!forum\/openglobus\" rel=\"noopener noreferrer nofollow\">https:\/\/groups.google.com\/forum\/#!forum\/openglobus<\/a>, \u0438 \u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u0432\u0435\u0447\u0443!<\/p>\n<p>\u0416\u0435\u043b\u0430\u044e \u0412\u0430\u043c \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f!<\/p>\n<h2>\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438<\/h2>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/Chlumsky\/msdfgen\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/Chlumsky\/msdfgen<\/a> &#8212; <em>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0442\u0435\u043a\u0441\u0442\u0430<\/em><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/soimy\/msdf-bmfont-xml\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/soimy\/msdf-bmfont-xml<\/a> &#8212; <em>\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u0442\u043b\u0430\u0441\u0430 \u0448\u0440\u0438\u0444\u0442\u043e\u0432<\/em><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/learnopengl.com\/In-Practice\/Text-Rendering\" rel=\"noopener noreferrer nofollow\">https:\/\/learnopengl.com\/In-Practice\/Text-Rendering<\/a> &#8212; <em>\u041e\u0441\u043d\u043e\u0432\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0442\u0435\u043a\u0441\u0442\u0430<\/em><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/openglobus\/openglobus\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/openglobus\/openglobus<\/a> &#8212; <em>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 openglobus<\/em><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/openglobus\/openglobus\/blob\/master\/src\/og\/utils\/FontAtlas.js\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/openglobus\/openglobus\/blob\/master\/src\/og\/utils\/FontAtlas.js<\/a> &#8212; <em>\u0417\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u0430\u0442\u043b\u0430\u0441\u0430 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0431\u0438\u043b\u0438\u043e\u0442\u0435\u043a\u0438 openglobus<\/em><\/p>\n<\/li>\n<\/ul>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/548088\/\"> https:\/\/habr.com\/ru\/post\/548088\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440:<\/strong> <a href=\"https:\/\/openglobus.org\/examples\/fonts\/fonts.html\" rel=\"noopener noreferrer nofollow\">https:\/\/openglobus.org\/examples\/fonts\/fonts.html<\/a><\/p>\n<p><em>18\/3\/2021<\/em> \u041d\u0430\u043a\u043e\u043d\u0435\u0446-\u0442\u043e \u0431\u044b\u043b\u0430 \u0437\u0430\u043a\u043e\u043d\u0447\u0435\u043d\u0430 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 <a href=\"https:\/\/github.com\/soimy\/msdf-bmfont-xml\" rel=\"noopener noreferrer nofollow\">msdf-bmfont-xml<\/a> \u0434\u043b\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 <a href=\"https:\/\/openglobus.org\/\" rel=\"noopener noreferrer nofollow\">openglobus<\/a>. \u0422\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u043c\u0435\u0442\u043a\u0438 \u0441\u0442\u0430\u043b\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043a\u0440\u0430\u0441\u0438\u0432\u0435\u0435! \u041c\u043d\u0435 \u043f\u043e\u043c\u043e\u0433 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 <a href=\"https:\/\/github.com\/soimy\/msdf-bmfont-xml\" rel=\"noopener noreferrer nofollow\">msdf-bmfont-xml<\/a> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u0442\u043b\u0430\u0441\u043e\u0432 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0442\u0435\u043a\u0441\u0442\u0443\u0440 \u0434\u043b\u044f (multichannel signed distance fields) MSDF.<\/p>\n<figure class=\"full-width\"><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435: https:\/\/openglobus.org\/examples\/fonts\/fonts.html<\/figcaption><\/figure>\n<p><a href=\"https:\/\/github.com\/soimy\/msdf-bmfont-xml\" rel=\"noopener noreferrer nofollow\">msdf-bmfont-xml<\/a> \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0448\u0438\u0440\u043e\u043a\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0445 \u0430\u0442\u043b\u0430\u0441\u043e\u0432 \u0438\u0437 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 ttf. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0430 \u0430\u0442\u043b\u0430\u0441\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f \u043c\u043d\u043e\u0433\u043e\u043a\u0430\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u0443 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0439 (multichannel signed distance fields), \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043e\u0441\u0442\u0440\u044b\u0435 \u0443\u0433\u043b\u044b \u0431\u0443\u043a\u0432, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0438 \u043e\u0442 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e signed distance field.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0445\u043e\u0447\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0442\u044c, \u0447\u0442\u043e \u0438\u0437 \u0441\u0435\u0431\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0430\u0442\u043b\u0430\u0441 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0431\u0443\u043a\u0432, \u0438 \u043a\u0430\u043a \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 WebGL.&nbsp;<\/p>\n<h2>\u0422\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0439 \u0430\u0442\u043b\u0430\u0441 msdf-bmfont-xml<\/h2>\n<p>\u0422\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0439 \u0430\u0442\u043b\u0430\u0441 \u0448\u0440\u0438\u0444\u0442\u0430, \u044d\u0442\u043e \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0430 \u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u043c\u0438 \u043d\u0430 \u043d\u0435\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432. \u041a\u0430\u0436\u0434\u0430\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u0438\u043c\u0435\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b.&nbsp;<\/p>\n<figure class=\"\"><figcaption>\u0422\u0435\u043a\u0441\u0442\u0443\u0440\u0430 512&#215;512 \u0434\u043b\u044f \u0430\u0442\u043b\u0430\u0441\u0430 \u0448\u0440\u0438\u0444\u0442\u0430 Roboto-Regular<\/figcaption><\/figure>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u0442\u043b\u0430\u0441\u0430 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<pre><code class=\"cs\">msdf-bmfont.cmd - reuse -i .\\charset.txt -m 512,512 -f json -o %1.png -s 32 -r 8 -p 1 -t msdf %1<\/code><\/pre>\n<p>\u0433\u0434\u0435 %1\u200a\u2014\u200a\u0438\u043c\u044f \u0444\u0430\u0439\u043b\u0430 \u0448\u0440\u0438\u0444\u0442\u0430 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 ttf, charset.txt\u200a\u2014\u200a\u044d\u0442\u043e \u0444\u0430\u0439\u043b \u0441 \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u0430\u0442\u043b\u0430\u0441, \u043f\u0440\u043e \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043c\u043e\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0435 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f <a href=\"https:\/\/github.com\/soimy\/msdf-bmfont-xml\" rel=\"noopener noreferrer nofollow\">msdf-bmfont-xml<\/a>:<\/p>\n<p>\u041f\u0440\u0438 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b\u043e\u0432, \u043d\u0430\u0441 \u0431\u0443\u0434\u0443\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0430 \u0430\u0442\u043b\u0430\u0441\u0430 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 png \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0430\u0442\u043b\u0430\u0441\u0430 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 json.<\/p>\n<p>\u0412 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f json \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043f\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u0430\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 chars. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440,   \u0441\u0438\u043c\u0432\u043e\u043b <strong><em>\u2018q\u2019<\/em> <\/strong>\u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435 \u0430\u0442\u043b\u0430\u0441\u0430 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d \u0432 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u0445 <strong><em>x = 131, y = 356, width = 22, height = 32<\/em><\/strong>. \u0442.\u0435. \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043b\u0435\u0432\u043e\u0433\u043e \u043f\u0440\u0430\u0432\u043e\u0433\u043e \u0443\u0433\u043e\u043b\u0430 <strong><em>[131, 356]<\/em><\/strong> \u0438 \u043f\u0440\u0430\u0432\u043e\u0433\u043e \u043d\u0438\u0436\u043d\u0435\u0433\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e <strong><em>[131+22, 356+32]<\/em><\/strong>. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0435\u0441\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u0430\u0442\u043b\u0430\u0441\u0430 \u0440\u0430\u0432\u0435\u043d 512 \u043d\u0430 512 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u0437\u043d\u0430\u0447\u0438\u0442 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0441\u043e\u043c\u0432\u043e\u043b\u0430 <strong><em>\u2018q\u2019<\/em><\/strong> \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0432\u043d\u044b <strong><em>[131\/512, 356\/512 ]<\/em><\/strong> \u0438 <strong><em>[153\/512, 388\/512]<\/em><\/strong>. \u0415\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u044d\u0442\u0438 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0432 \u0448\u0435\u0439\u0434\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0438\u0441\u0443\u0435\u0442 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a, \u0442\u043e \u043c\u044b \u0443\u0432\u0438\u0434\u0435\u043c \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0435 \u043d\u0430\u0448 \u0441\u0438\u043c\u0432\u043e\u043b. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 \u0441\u0438\u043c\u0432\u043e\u043b\u0430, \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u044d\u0442\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u043c \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430, \u0447\u0442\u043e\u0431\u044b \u0441\u0438\u043c\u0432\u043e\u043b \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c. <\/p>\n<pre><code class=\"json\">{     id: 113,     char: \"q\",     width: 22,     height: 32,     xoffset: -3,     yoffset: 11,     xadvance: 18,     x: 131,     y: 356,     ... }<\/code><\/pre>\n<p>\u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0432\u0430\u0436\u043d\u044b\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 \u0434\u043b\u044f \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f:<\/p>\n<p><strong>xoffs\u0435t\u200a<\/strong>\u2014\u200a\u0421\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438<\/p>\n<p><strong>yoffset\u200a<\/strong>\u2014\u200a\u0421\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438<\/p>\n<p><strong>xadvance\u200a<\/strong>\u2014\u200a\u0428\u0438\u0440\u0438\u043d\u0430 \u0441\u0438\u043c\u0432\u043e\u043b\u0430; \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0442 \u043b\u0435\u0432\u043e\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u0434\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435.<\/p>\n<p>\u0410 \u0442\u0430\u043a\u0436\u0435 <strong>id <\/strong>\u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0438\u043c\u0432\u043e\u043b \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u0435\u0440\u043d\u0438\u043d\u0433\u043e\u0432. \u041a\u0435\u0440\u043d\u0438\u043d\u0433\u200a\u2014\u200a\u044d\u0442\u043e \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0441\u0438\u043c\u0432\u043e\u043b\u0430\u043c\u0438.<\/p>\n<h2>\u041f\u0440\u0438\u043c\u0435\u0440: \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u043e\u043a\u0438 \u201cWg!\u201d \u0448\u0440\u0438\u0444\u0442 Arial<\/h2>\n<p>\u041f\u0430\u0440\u043c\u0435\u0442\u0440\u044b \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432:<\/p>\n<pre><code class=\"javascript\">W: width: 37, height: 31, xoffset: -4, yoffset: 4, xadvance: 30 g: width: 23, height: 32, xoffset: -3, yoffset: 10, xadvance: 18 ! : width: 11, height: 31, xoffset: -1, yoffset: 4, xadvance: 9<\/code><\/pre>\n<p>\u0426\u0435\u043d\u0442\u0440\u043e\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0435\u0432\u044b\u0439 \u0432\u0435\u0440\u043d\u0438\u0439 \u0443\u0433\u043e\u043b, \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u044b \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u043f\u0440\u044f\u043c\u043e\u0439 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0437\u0435\u043b\u0435\u043d\u043e\u0439 \u043b\u0438\u043d\u0438\u0438 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043b\u0435\u0432\u043e\u0439 \u0437\u0435\u043b\u0435\u043d\u043e\u0439 \u043b\u0438\u043d\u0438\u0438 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438, \u0438 \u0438\u043c\u0435\u044e\u0442 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c <strong>width<\/strong>.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 (\u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u0439) \u043e\u0441\u0438 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438, \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <strong>yoffsset<\/strong>.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0413\u043e\u043b\u0443\u0431\u044b\u043c\u0438 \u043b\u0438\u043d\u0438\u044f\u043c\u0438 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <strong>xadvance <\/strong>(\u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u0430), \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u0438\u043c\u0432\u043e\u043b \u0441\u043c\u0435\u0449\u0435\u043d \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0443 <strong>xoffset<\/strong>.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0422\u0435\u043a\u0443\u0449\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043c\u043e\u0436\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u043c, \u043e\u0434\u043d\u0430\u043a\u043e \u0434\u043b\u044f \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0434\u043b\u044f \u043a\u0435\u0440\u043d\u0438\u043d\u0433\u0430, \u0442.\u0435. \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430 \u0434\u0432\u0443\u0445 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432. \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044f \u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043a\u0435\u0440\u043d\u0438\u043d\u0433\u0438; \u043a\u0435\u0440\u043d\u0438\u043d\u0433 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0435 <strong>xoffset <\/strong>\u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0430.<\/p>\n<h2>\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0442\u0435\u043a\u0441\u0442\u0430 MSDF<\/h2>\n<p>\u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0432\u0435\u0440\u0448\u0438\u043d \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u043e\u043c gl.drawArrays, \u0433\u0434\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u0431\u0443\u0444\u0444\u0435\u0440\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u0443\u0444\u0444\u0435\u0440 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0432\u0435\u0440\u0448\u0438\u043d \u0434\u043b\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 a_vertices:<\/p>\n<pre><code class=\"cpp\">vec2 a_vertices = [0, 0, 0, -1, 1, -1, 1, -1, 1, 0, 0, 0]<\/code><\/pre>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0443\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0438 \u0430\u0442\u043b\u0430\u0441\u0430 \u0448\u0440\u0438\u0444\u0442\u0430:<\/p>\n<pre><code class=\"cpp\">imageSize = 512; \/\/\u0440\u0430\u0437\u043c\u0435\u0440 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u0430\u0442\u043b\u0430\u0441\u0430 nWidth = width \/ imageSize; \/\/\u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u0441\u0438\u043c\u0432\u043e\u043b\u0430 nHeight = height \/ imageSize; \/\/\u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430 \u0433\u043b\u0438\u0444\u0430 nAdvance = xadvance \/ imageSize; \/\/\u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0433\u043b\u0438\u0444\u0430 \u0434\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 nXOffset = xoffset \/ imageSize; \/\/\u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 nYOffset = 1.0 - yoffset \/ imageSize; \/\/\u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438<\/code><\/pre>\n<h2>\u0428\u0435\u0439\u0434\u0435\u0440 GLSL<\/h2>\n<p>\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a: <a href=\"https:\/\/github.com\/openglobus\/openglobus\/blob\/master\/src\/og\/shaders\/label.js\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/openglobus\/openglobus\/blob\/master\/src\/og\/shaders\/label.js<\/a><\/p>\n<pre><code class=\"cpp\">\/\/ Vertex shader: \/\/ ... vec2 v = screenPos + (a_vertices * a_gliphParam.xy + a_gliphParam.zw + vec2(advanceOffset, 0.0)) * a_size;  \/\/ \u0413\u0434\u0435: \/\/ screenPos - \u044d\u043a\u0440\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0441\u0442\u0440\u043e\u043a\u0438 \/\/ a_vertices - \u041a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0432\u0435\u0440\u0448\u0438\u043d \/\/ a_gliphParam - \u0432\u0435\u043a\u0442\u043e\u0440 \u0441 \u043c\u0435\u0442\u0440\u0438\u043a\u0430\u043c\u0438 \u0441\u0438\u043c\u0432\u043e\u043b\u0430, \u0433\u0434\u0435: \/\/ x - nWidth, y - nHeight, z - nXOffset, w - nYOffset \/\/ advanceOffset - \u0441\u0443\u043c\u0430\u0440\u043d\u043e\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043f\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0443 nAdvance, \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u043e\u043c\u0432\u043e\u043b\u0430 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 \/\/ a_size - \u044d\u043a\u0440\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0441\u0442\u0440\u043e\u043a\u0438 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445   \/\/ Fragment shader: \/\/ ... const float imageSize = 512.0; const float distanceRange = 8.0;  layout(location = 0) out vec4 outScreen;  float median(float r, float g, float b) {     return max(min(r, g), min(max(r, g), b)); } float getDistance() {     vec3 msdf = texture(fontTexture, v_uv).rgb;     return median(msdf.r, msdf.g, msdf.b); } void main () {     vec2 dxdy = fwidth(v_uv) * vec2(imageSize);     float dist = getDistance() + min(v_weight, 0.5 \u2013 1.0 \/ DIST_RANGE) - 0.5;     float opacity = clamp(dist * distanceRange \/ length(dxdy) + 0.5, 0.0, 1.0);      outScreen = vec4(v_rgba.rgb, opacity * v_rgba.a); } \/\/ \u0413\u0434\u0435: \/\/ fontTexture - \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0430 \u0430\u0442\u043b\u0430\u0441\u0430 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \/\/ v_weight - \u0448\u0438\u0440\u0438\u043d\u0430 \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u043e\u0442 0 \u0434\u043e 1, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u043a\u0430\u043d\u0442\u043e\u0432\u043a\u0438, \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0430\u0432\u0435\u043d 0. \/\/ \u041e\u043a\u0430\u043d\u0442\u043e\u0432\u043a\u0430 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u041f\u0415\u0420\u0412\u042b\u041c \u043f\u0440\u043e\u0445\u043e\u0434\u043e\u043c \u0441 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c v_weight. \/\/ v_uv - \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u0432 \u0430\u0442\u043b\u0430\u0441\u0435 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \/\/ v_rgba - \u0446\u0432\u0435\u0442 \u0441\u0438\u043c\u0432\u043e\u043b\u0430, \u0438\u043b\u0438 \u043e\u043a\u0430\u043d\u0442\u043e\u0432\u043a\u0438 \/\/ ...<\/code><\/pre>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u043b, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0430\u0442\u043b\u0430\u0441\u0430\u043c\u0438 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0438 \u043a\u0430\u043a \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <a href=\"https:\/\/github.com\/soimy\/msdf-bmfont-xml\" rel=\"noopener noreferrer nofollow\"><strong>msdf-bmfont-xml<\/strong><\/a><strong> <\/strong>\u0434\u043b\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u042d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u043b \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u043c\u0435\u0442\u043e\u043a \u043d\u0430 \u043a\u0430\u0440\u0442\u0435. <\/p>\n<figure class=\"full-width\"><figcaption>\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u0430 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 \u0411\u041f\u041b\u0410 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 Microavia c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Openglobus<\/figcaption><\/figure>\n<p>\u041f\u0438\u0448\u0438\u0442\u0435 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445, \u0447\u0435\u043c \u0432\u044b \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435\u0441\u044c, \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0448\u0440\u0438\u0444\u0442\u043e\u0432, \u0438 \u043a\u0430\u043a \u043d\u0430 \u0432\u0430\u0448 \u0432\u0437\u0433\u043b\u044f\u0434 \u043c\u043e\u0436\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u043c\u0435\u0442\u043e\u043a?<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043f\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044e \u043c\u043e\u0435\u0439 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u0434\u0430\u0442\u044c \u0438\u0445 \u043d\u0430 <a href=\"https:\/\/openglobus.org\" rel=\"noopener noreferrer nofollow\">openglobus <\/a>\u0444\u043e\u0440\u0443\u043c\u0435 <a href=\"https:\/\/groups.google.com\/forum\/#!forum\/openglobus\" rel=\"noopener noreferrer nofollow\">https:\/\/groups.google.com\/forum\/#!forum\/openglobus<\/a>, \u0438 \u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u0432\u0435\u0447\u0443!<\/p>\n<p>\u0416\u0435\u043b\u0430\u044e \u0412\u0430\u043c \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f!<\/p>\n<h2>\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438<\/h2>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/Chlumsky\/msdfgen\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/Chlumsky\/msdfgen<\/a> &#8212; <em>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0442\u0435\u043a\u0441\u0442\u0430<\/em><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/soimy\/msdf-bmfont-xml\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/soimy\/msdf-bmfont-xml<\/a> &#8212; <em>\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u0442\u043b\u0430\u0441\u0430 \u0448\u0440\u0438\u0444\u0442\u043e\u0432<\/em><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/learnopengl.com\/In-Practice\/Text-Rendering\" rel=\"noopener noreferrer nofollow\">https:\/\/learnopengl.com\/In-Practice\/Text-Rendering<\/a> &#8212; <em>\u041e\u0441\u043d\u043e\u0432\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0442\u0435\u043a\u0441\u0442\u0430<\/em><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/openglobus\/openglobus\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/openglobus\/openglobus<\/a> &#8212; <em>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 openglobus<\/em><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/openglobus\/openglobus\/blob\/master\/src\/og\/utils\/FontAtlas.js\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/openglobus\/openglobus\/blob\/master\/src\/og\/utils\/FontAtlas.js<\/a> &#8212; <em>\u0417\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u0430\u0442\u043b\u0430\u0441\u0430 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0431\u0438\u043b\u0438\u043e\u0442\u0435\u043a\u0438 openglobus<\/em><\/p>\n<\/li>\n<\/ul>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/548088\/\"> https:\/\/habr.com\/ru\/post\/548088\/<\/a><br \/><\/br><\/br><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-319984","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/319984","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=319984"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/319984\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=319984"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=319984"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=319984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}