Лично мне, больше нравятся такие статьи, такие - которые привязаны не только к теории, но и к языку программирования и с прикольными примерами. И если честно, Шикин, Боресков не так легок для восприятие, особенно для новичка.
Круто! Надо тоже сделать подложку. Если разберетесь c weight, буду признателен, напишите!
Хочу поделиться лайфхаком, добавьте hdr (или делайте символы яркими) шейдер для отображения, с ним получается улучшить качество мелких символов в сценах (как на скриншоте в конце этой статьи) с монотонными цветами.
В основном проблем конечно нет (если не приглядываться), но по правде сказать основная проблема у меня с z fighting'ом, когда рисую текст в два прохода из за больших растояний, но это можно решить интреполяцией относительно координат камеры. Правда это решение больше напоминает костыль, а делать сортировку неоправданно сложно.
Высчитываю тeкстурныe координаты прямоугольника для буквы в атласe и высчитываю world координаты прямоугольника для той жe буквы
Не совсем понимаю про мировые координаты… возможно, если вы про свой генератор атласа, то тут я не могу сказать. Если про использование метрик символа, тогда я рекомендую использовать нормализованные параметры, а экранные значения уже считать в шейдере непосредственно при выводе на экран.
Попробовал для разных размеров. Существенной разницы в пропорциях на экране не вижу. По правде сказать, математику, как генератор высчитывает метрики символа я не знаю. Могу предположить, что на это влияет размер шрифта, а так-же --distance-range для SDF, в моем случае равен восьми.
Окантовку рисую в первом проходе (в примере шейдера параметр weight), вторым проходом рисую тот-же текст с weight=0.01. Естественно включена прозрачность glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA).
Задумка не хитрая, просто пока не понимаю можно ли рисовать окантовку вместе с основным текстом в один проход, разными цветами например.
Пересчитывать не нужно! Разве что, посмотреть ради эксперимента, как изменится качество отрисованного текста. Все параметры(метрики) шрифта нормализуются, скажем для 32 размера некий параметр смещения 16, то для 16 размера этот-же параметр будет равен 8, нормализованное значение параметра соответственно будет равно 0.5. т.к. мы передаем в шейдер единичные размеры то спокойно их умножаем на соответствующие коэфициенты, и масштабируем. Поэтому для одного и того-же шрифта с разными параметрами размера при генерации мы должны получить одни и те-же параметры для шейдера. Единственное на что влияет — это на качество и с этим стоит поиграться. Вобщем мы передаем scaling matrix, c учетом того, что мы используем нормализованные метрики для a_gliphParam и advanceOffset в строке:
Выриант с канвасом мне не подходил, по той простой причине, что в моем случае на карте может отображаться скажем 1000 текстовых меток, которые динамически меняют свои значения, в том числе масштабируются и крутятся в зависимости от расстояния до них. Для статики канвас(билборды), вполне годится я думаю, однако если хочется более качественный шрифт, а меток не сильно много, то еще можно div с текстом проецировать прямо на экран. Этот способ, конечно более затратный.
Случайно незнаете, как создавать нормал мапы, и почему при применении нормалмапы бывают заиемнения в центральных областях треугольника при интерполяции нормали?
Спаибо, за статью, взял шейдер к себе. Немоглибы вы ссылки про реализацию адаптивного hdr?
P/S/
Почему то не найду хорошей статьи, возможно я плохо ищу, в любом случае спасибо! Жаль что мало))
Линию можно представить как нарисованную кисточкой, а можно представить сложенной полоской из бумаги(или полиэтиленового пакета). Мне больше нравится вариант с накапливаемой прозрачностью.
Вы правильно указали на ошибку с обрезанным треугольником внутри сложенных отрезков, я не решил эту проблему. Этот момент легко находится в шейдере, но я посчитал, что такие случаи бывают редко и решил оставить до поры до времени…
Отличный вариант! Этот вариант мне тоже кажется более симпатичным, и даже скорее всего правильнее, потому что удаление от центральной точки становится равномерным.
Лично мне, больше нравятся такие статьи, такие - которые привязаны не только к теории, но и к языку программирования и с прикольными примерами. И если честно, Шикин, Боресков не так легок для восприятие, особенно для новичка.
Фрагментный шейдер для HDR можно глянуть здесь шейдер github.com/openglobus/openglobus/blob/master/src/og/shaders/toneMapping.js
и его вызов (постпроцесс для float текстуры):
github.com/openglobus/openglobus/blob/b2d4c1c581214d1606fb5c2f5dd3bcc9a6f6a318/src/og/renderer/Renderer.js#L708
Хочу поделиться лайфхаком, добавьте hdr (или делайте символы яркими) шейдер для отображения, с ним получается улучшить качество мелких символов в сценах (как на скриншоте в конце этой статьи) с монотонными цветами.
Не совсем понимаю про мировые координаты… возможно, если вы про свой генератор атласа, то тут я не могу сказать. Если про использование метрик символа, тогда я рекомендую использовать нормализованные параметры, а экранные значения уже считать в шейдере непосредственно при выводе на экран.
Покажете, как это выглядит у вас? Очень любопытно:)
Задумка не хитрая, просто пока не понимаю можно ли рисовать окантовку вместе с основным текстом в один проход, разными цветами например.
advanceOffset — так же сумма нормализованных значений xadvance (nAdvance) каждого последующего символа относительно начала координат.
P/S/
Почему то не найду хорошей статьи, возможно я плохо ищу, в любом случае спасибо! Жаль что мало))
Я бы написал это вот так:
«If you want to get shit done use three.js or something like that. If you want to do stuff low-level with WebGL consider using pure WebGL.»
Вы правильно указали на ошибку с обрезанным треугольником внутри сложенных отрезков, я не решил эту проблему. Этот момент легко находится в шейдере, но я посчитал, что такие случаи бывают редко и решил оставить до поры до времени…
П.С.
У меня есть идея, сделать через текстурную маску, и с помощью маски задавать любой стиль штрихования.