У меня есть пример использования, когда мне нужно отобразить значительное количество (~ 50 000 глифов) четких, масштабируемых текстовых строк на элементе холста. лучшее решение, которое я пробовал до сих пор, включает в себя триангуляцию текста, нарисованного на элементе холста (текст был нарисован с использованием метода fillText), загрузку форм матрицы и Float32Array треугольников, представляющих эту строку, в графический процессор через WebGL. Используя этот метод, я смог отрендерить 100 000 глифов со скоростью около 30 кадров в секунду. Глифы становятся блочными при очень высоких уровнях масштабирования, но это нормально для моего варианта использования.
Однако этот метод имеет накладные расходы около ~ 250 мс на строку, поскольку я сначала рисую строку в элементе холста в памяти, читаю данные пикселей, превращаю растровое изображение в вектор, а затем триангулирую векторные данные. Поискав в Интернете решения, я наткнулся на два интересных проекта с открытым исходным кодом:
- OpenType.js: https://opentype.js.org/
- Earcut: https://github.com/mapbox/earcut
Итак, теперь я хочу переписать свое первоначальное доказательство концепции, чтобы использовать OpenType и Earcut. OpenType для передачи данных кривой в Earcut и Earcut для триангуляции этих данных и возврата массива, представляющего точку для каждого треугольника.
Моя проблема заключается в том, я не могу понять, как получить данные, предоставляемые OpenType, и преобразовать их в формат, который принимает Earcut. Может ли кто-нибудь оказать помощь в этом?
Дополнительная информация:
В этом вопросе StackOverflow содержится отличная информация, но отсутствуют некоторые детали реализации: Текст лучшего качества в WebGL< /а>. Я полагаю, что я пытаюсь выполнить подход «Шрифт как геометрия», описанный в первом ответе.
