ThorVG 1.0

31 января, после полутора лет непрерывной разработки, состоялся выпуск 1.0 лёгкой и портативной кроссплатформенной библиотеки векторной графики ThorVG, предназначенной для визуализации векторных сцен и анимаций. Поддерживается загрузка файлов в форматах Lottie и SVG Tiny 1.2 (список реализованных возможностей SVG Tiny в Wiki проекта).
Библиотекой предоставляются удобные API для импорта, создания и отображения векторной графики, а также для её экспорта в различные графические форматы, что делает её универсальной для использования в различных программных платформах и приложениях для визуализации графического контента.
Также поставляются консольные утилиты lottie2gif и svg2png.
ThorVG используется для рендеринга векторной графики в таких проектах, как Tizen OS, Godot Engine, LVGL и плееров dotLottie.
Проект написан на языке C++ (стандарт C++14) и распространяется по лицензии MIT.
Это не просто обновление — это перестроенная основа для высокопроизводительной, масштабируемой и переносимой двумерной векторной графики на всех платформах и устройствах. За время разработки ThorVG превратился в зрелый, готовый к производству графический движок, продемонстрировавший проверенное качество и производительность в реальных приложениях.
ThorVG быстро завоевал популярность и вызвал растущий интерес со стороны сообщества, что отражает его эволюцию от проекта на ранней стадии до широко признанного и практически используемого векторного графического движка, готового к реальному кроссплатформенному использованию.
Список изменений:
- Расширенные возможности рендеринга текста, богатые визуальные эффекты и поддержка точного наложения для улучшенного графического выражения
- Поддержка горизонтального и вертикального выравнивания, позволяющая точно контролировать расположение текста в различных контекстах пользовательского интерфейса.
- Автоматическая разбивка строк с возможностью выбора режима: по символам, по словам, интеллектуальная разбивка и усечение многоточием для обработки переполнения.
- Поддержка ручного разрыва строк, позволяя разработчикам явно контролировать разрывы строк с помощью символов новой строки, таких как
\\n. Это позволяет точно форматировать многострочные текстовые блоки, особенно в динамических макетах или текстовых анимациях. - Поддержка настраиваемого расстояния между символами, что позволяет выполнять точную настройку для улучшения читаемости или достижения определенных типографских стилей.
- Поддержка обведения текста, позволяющая создавать стилистические эффекты и улучшать контраст на различных фонах (скриншот 2).
- Представлена более комплексная и согласованная система режимов наложения, значительно улучшающая поведение режимов наложения и приводя формулы и логику композиции в соответствие с отраслевыми стандартами, такими как Lottie, SVG и спецификация W3C «Compositing and Blending». Эти улучшения обеспечивают большую визуальную согласованность и кроссплатформенную совместимость, особенно в веб- и анимационных рабочих процессах.
- Реализованы и поддерживаются следующие режимы наложения: «Оттенок», «Насыщенность», «Цвет» и «Яркость» с использованием композиции цветового пространства HSL. Эти режимы улучшают совместимость с эффектами слоев Lottie и будущей поддержкой смешивания SVG (скриншот 3).
- Значительные улучшения и расширения в визуальных эффектах на уровне сцены, делая векторную графику более выразительной и визуально насыщенной:
- Эффект тени с фильтром Гауссового размытия (видео-демонстрация).
- Методы замены цветов, которые изменяют внешний вид графики путём переопределения способа применения, смешивания или сопоставления цветов на основе оттенка (видео-демонстрация).
- Добавлены новые вспомогательные функции для расширения интерактивных возможностей. К ним относятся поддержка запросов пространственной информации (демонстрация) и обнаружение попаданий по отображаемым объектам (видео-демонстрация).
- Расширенные возможности анимации Lottie для кроссплатформенного воспроизведения, включая модульные пресеты Web Player, оптимизированные по размеру, производительности и режиму рендеринга (CPU/GPU)
- Значительные улучшения в поддержке анимации Lottie с улучшением совместимости, гибкости и интерактивности на всех платформах. Расширен не только спектр поддерживаемых функций и выражений Lottie, но и предоставлены инструменты для разработчиков, позволяющие динамически контролировать поведение анимации во время выполнения, что делает ThorVG одной из самых мощных библиотек воспроизведения Lottie из доступных на рынке. Список реализованных возможностей в Wiki проекта.
- На сегодняшний день расширение файла
.lotявляется новым официальным стандартом IANA для файлов Lottie. ThorVG теперь официально поддерживает.lotв качестве стандартного формата файлов Lottie в дополнение к традиционному расширению.json. - Твининг
- Добавлена поддержка интерполяции между нелинейно смежными ключевыми кадрами, что обеспечивает более плавные переходы и более точное управление временем. Это улучшение особенно эффективно при использовании с воспроизведением анимации на основе состояний (также известном как воспроизведение на основе маркеров) в Lottie. Во многих случаях анимации предназначены для перехода между состояниями сложными, нелинейными способами. Традиционная Lottie с ее строго последовательной временной структурой с трудом справляется с такими сценариями, что часто приводит к резким сбросам или неловким скачкам при переходе между непоследовательными ключевыми кадрами: видео-демонстрация 1, видео-демонстрация 2.
- С помощью твининга разработчики теперь могут выполнять интерполяцию непосредственно между двумя отдельными ключевыми кадрами, даже если они не являются линейно смежными на временной шкале. Это позволяет добиться более естественных и плавных визуальных эффектов при переходах между состояниями, что значительно повышает гибкость и реалистичность интерактивных анимаций: видео-демонстрация 1, видео-демонстрация 2.
- Теперь (в качестве экспериментальной функции) поддерживается перезапись значений переменных выражений во время выполнения, что позволяет динамически выполнять логику скрипта на основе ввода пользователя. Это делает его особенно мощным инструментом для создания интерактивных анимаций с использованием ресурсов Lottie, позволяя создавать индивидуальные вариации, выходящие за рамки оригинального дизайна (видео-демонстрация).
- Добавлен настраиваемый механизм Asset Resolver, обеспечивающий большую гибкость при загрузке внешних ресурсов (например, изображений), на которые ссылаются анимации Lottie.
- Расширенная поддержка функции Lottie
LayerEffect, позволяющей осуществлять богатые визуальные улучшения непосредственно на слоях анимации с эффектами, описанными выше. - Поскольку некоторые эффекты могут быть ресурсоемкими, предложена опция настройки качества и производительности для рендеринга эффектов, что идеально подходит для оптимизации на платформах с ограниченными ресурсами CPU. Это позволяет разработчикам контролировать точность рендеринга и оптимизировать производительность в зависимости от целевой платформы.
- Поддержка выражений была расширена за счет добавления следующих ключевых функций и свойств:
wiggle,temporalWiggle: применение случайного движения, зависящего от времени.pointOnPath: вычисление положения вдоль пути.propertyIndex,groupIndex: ссылка на индекс свойства или группы.value,property,effect: доступ к значениям свойств и внешним эффектам.
- Более точное соответствие спецификациям:
- TextFollowPath — новая спецификация, позволяющая тексту следовать произвольным векторным путям (видео-демонстрация).
- Параметры выравнивания текста — более точное отображение текстовых слоев на основе настроек их горизонтального и вертикального выравнивания (видео-демонстрация).
- Расширение маски — новая функция, позволяющая более точно контролировать влияние формы маски на визуальную композицию (видео-демонстрация).
- SVG
- ThorVG теперь позволяет получать доступ к отдельным элементам SVG и изменять их с помощью уникальных атрибутов id, определенных в исходном файле SVG. Эта функция позволяет разработчикам напрямую выбирать и манипулировать конкретными векторными фигурами в импортированной сцене SVG, что идеально подходит для интерактивных или динамических сценариев использования (например, тематическое оформление, выделение).
- Поддержка эффекта размытия по Гауссу.
- Интеллектуальный рендеринг
- Программный движок ThorVG теперь поддерживает интеллектуальный частичный рендеринг, который обеспечивает более эффективные рабочие процессы рендеринга за счёт обновления только тех частей векторной сцены, которые изменились. Благодаря внутреннему отслеживанию изменённых областей, он сводит к минимуму ненужные перерисовки и оптимизирует общую производительность. Эта функция обеспечивает значительные преимущества в таких сценариях, как рендеринг пользовательского интерфейса, инструменты проектирования или приложения, в которых большая часть сцены остаётся статичной, а между кадрами обновляются только небольшие элементы. В таких случаях отказ от полного рендеринга сцены может значительно снизить вычислительную нагрузку и повысить энергоэффективность, что особенно ценно для мобильных и встроенных систем.
- Для достижения этой цели ThorVG 1.0 применяет комбинацию алгоритмических методов, специально разработанных для частичного рендеринга. Ниже приведены основные стратегии, лежащие в основе этой системы:
- Алгоритм линейного прохода: фигуры сортируются по координатам
x, и применяется стратегия линейного прохода для уменьшения ненужных проверок «грязных» областей. Это снижает сложность сO(N × M)доO(N + M + K + N log N), гдеN— количество фигур,M— количество «грязных» областей,K— количество фактических перекрытий. - Разделение и условное слияние: мелкозернистое разделение субобластей уравновешивается интеллектуальным слиянием для избежания фрагментации. При этом приоритет отдается горизонтальному слиянию для более эффективного использования кэша памяти.
- Пространственное разделение (по умолчанию сетка 4×4): поверхность рендеринга разделена на 16 областей, что позволяет проверять только соответствующие «грязные» области фигур, значительно сокращая накладные расходы при сложных обновлениях пользовательского интерфейса.
- Алгоритм линейного прохода: фигуры сортируются по координатам
- Работая вместе, эти техники обеспечивают более плавный и быстрый рендеринг, особенно во встроенных системах или системах реального времени, где часто происходят частичные обновления. Более подробная информация будет опубликована в отдельном посте блога.
- Обратите внимание, что в случае высокодинамичного контента, такого как динамичные игры или полноэкранные анимации, где почти все объекты меняются в каждом кадре, частичный рендеринг даёт мало или вообще не даёт преимуществ в производительности и может даже привести к небольшим накладным расходам. В таких случаях обычно лучше выбирать полный рендеринг сцены. По этой причине ThorVG поддерживает как частичную, так и полную конфигурацию рендеринга, что даёт вам возможность выбрать оптимальный подход для вашего случая использования. Вы можете проанализировать производительность вашего продукта и принять обоснованное решение, используя опцию Meson
-Dpartial=[true/false]и опциюEngineOption::SmartклассаSwCanvas:
auto canvas = SwCanvas::gen(EngineOption::Smart); - Новая эра интеграции веб-технологий с WebGL, WebGPU и облегчённым WebCanvas для бесшовного рендеринга в браузере
- Бэкэнды WebGL и WebGPU теперь официально готовы к производственному использованию. Эти рендереры на базе GPU теперь предлагают полную функциональную совместимость с традиционным бэкэндом CPU, поддерживая все возможности ThorVG Canvas с таким же качеством и стабильностью изображения. По сравнению с версией 0.15, производительность рендеринга GPU увеличилась более чем на 150%, что обеспечивает значительное улучшение рендеринга web-векторной графики в реальном времени.
- Значительное повышение производительности в средах с ограничениями по мощности CPU/GPU и встроенных средах
- ThorVG 1.0 предлагает улучшенную производительность по сравнению с версией 0.15, с заметным приростом как по CPU, так и по GPU.
- Ключевые оптимизации:
- Улучшенная эффективность конвейера рендеринга.
- Сниженные накладные расходы на выделение буфера кадров.
- Оптимизированный анализ композиций Lottie.
- Улучшенный пакетный рендеринг и кэширование GPU.
- ThorVG оптимизирован для растрирования на базе CPU, с упором на векторную визуализацию в средах, где ресурсы GPU ограничены, недоступны или намеренно не используются. В типичных тестах ЦП ThorVG демонстрирует в среднем в 1.8 раза более высокую производительность по сравнению с широко используемым движком векторной графики Skia при выполнении типичных задач векторной визуализации. Преимущество особенно очевидно в сценариях с интенсивным использованием геометрии, таких как визуализация прямоугольников, штрихов, вращений и окружностей (скриншот 4).
- ThorVG Janitor
- Реальную демонстрацию производительности рендеринга ThorVG можно увидеть в проекте ThorVG Janitor — интерактивной игре, разработанной для демонстрации производительности процессора при высокой графической нагрузке. Сцена включает в себя сотни врагов, созданных с помощью графики на основе частиц, многослойные фоны звездного неба с полноразмерными растровыми изображениями, визуальные эффекты в реальном времени, такие как DropShadow и Blur, а также до 25000 объектов, рендерируемых одновременно. Даже при пиковой нагрузке с разрешением 2K (2048×1152) проект демонстрирует стабильную производительность выше 120 FPS, что подчёркивает эффективность и пригодность ThorVG для сложных сред с большим количеством эффектов (видео-демонстрация).
- Другие значительные изменения
- Пример интеграции ThorVG в Godot. В этой видео-демонстрации ThorVG интегрирован с Godot в веб-среде для рендеринга сотен объектов анимации Lottie со скоростью более 120 кадров в секунду. Эта демонстрация показывает потенциал ThorVG в веб-среде для плавной и высококачественной анимации во время выполнения.
- Добавлен обучающий пример использования ThorVG WebCanvas.
- Добавлена интерактивный ThorVG Playground.
- Добавлен враппер ThorVG для языка Swift: https://github.com/thorvg/thorvg.swift.
- Примеры использования ThorVG перенесены в отдельный репозиторий https://github.com/thorvg/thorvg.example.
- Опубликовано расширение thorvg.vscode для VSCode для создания, редактирования и предварительного просмотра ресурсов ThorVG непосредственно в среде Visual Studio Code.
- В версии 1.0 произведена существенная реструктуризация API, направленная на повышение производительности, удобство использования, согласованности и совместимости с C.
- Удалена поддержка формата TVG Picture (TVG). Это решение было принято для подготовки нового формата ThorVG Picture, разработанного с учётом анимации, как основной концепции.
- Многочисленные исправления ошибок и улучшение стабильности для производственного использования.
>>> Подробности на thorvg.org
