Войти
ПрограммированиеФорумГрафика

WebGL - как выводить текст?

#0
22:45, 1 мая 2016

2 типа задач про текст на WebGL канвасе:

1) 100 разных, но редко меняющихся между кадрами надписей (подписей под игровыми объектами, ники движущихся персонажей). Могут появляться новые, но редко - раз в неск. секунд.
2) 100 очень часто меняющиеся надписей (например 500 объектов в игре стоят у источника радиации и нужно рисовать их плавно убывающее здоровье в процентах, т.е. на каждый кадр 100 новых строк).


1) Решается HTML-оверлеями (идея дебильная), т.е. рисуем HTML-DOM-объекты с абсолютными координатами поверх canvas. Тормоза и костыли. Не хочу. Фтопку.
Лучше: завести теневой canvas, там нафигачить надписей (упаковать чтобы влезли в 1024x1024), и юзать результат как текстуру, фрагменты которой использовать для текстурирования специально предназначенных для вывода надписей прямоугольников. Проблема: может кончиться место в текстуре, когда надписей станет овердофига, но это маловероятно. Какие ещё варианты?

2) По второму решений не вижу, за исключением такого: отрендерить все символы, а потом выводить надпись по принципу печатной машинки, каждую букву рисуя отдельным прямоугольником. Реализуемо, некоторый гимор, но, думаю, быстрее, чем запускать настоящий движок шрифтов, которого в WebGL вроде бы и нету. Как ещё можно?

#1
23:36, 1 мая 2016

2.

3. а еще можно отрендерить в текстуру через canvas текст из html5 а затем его выводить уже из webgl

#2
23:40, 1 мая 2016

Frankinshtein
> 3. а еще можно отрендерить в текстуру через canvas текст из html5 а затем его
> выводить уже из webgl
По-моему я этот способ описываю в первом пункте.

#3
0:13, 2 мая 2016

pavelkolodin
Второй вариант везде.

Называется bitmap fonts.
Рендерилка вот, например: http://www.angelcode.com/products/bmfont/
Или любую другую, их много.

#4
7:49, 2 мая 2016

1. варриант самый правильный по скорости, только я делаю немного под другому, а точнее как советуют разработчики браузера chrome:
поверх твоей webgl canvas ставишь один в один еще одну канву, прозрачную, 2d, и в ней стандартными средствами рисуешь надписи.
да и еще, для первой канвы которая webgl отключи прозрачность, выйграешь немного производительности.

#5
20:53, 6 мая 2016

robotcity
> 1. варриант самый правильный по скорости, только я делаю немного под другому,
> а точнее как советуют разработчики браузера chrome:
> поверх твоей webgl canvas ставишь один в один еще одну канву, прозрачную, 2d, и
> в ней стандартными средствами рисуешь надписи.
> да и еще, для первой канвы которая webgl отключи прозрачность, выйграешь
> немного производительности.
Вывести текст как цепочку текстурированных прямоугольников получается тормознее?

#6
23:36, 6 мая 2016

в дополнение к вышеупомянутым способам:

Signed Distance Field
Multi-channel Signed Distance Field
vector textures
GPU quadratic curve evaluation

#7
10:24, 18 мая 2016

Опять же в дополнение, точнее в полный дубляж wombatkin – https://events.yandex.ru/lib/talks/3344/

ПрограммированиеФорумГрафика

Тема в архиве.