ThorVG 1.0

El 31 de enero, después de un año y medio de desarrollo continuo, se lanzó la versión 1.0 de la biblioteca ligera y portátil de gráficos vectoriales multiplataforma. ThorVG, diseñada para la visualización de escenas y animaciones vectoriales. Se admite la carga de archivos en formatos Lottie y SVG Tiny 1.2 (la lista de características implementadas de SVG Tiny se encuentra en la Wiki del proyecto.).

La biblioteca ofrece API convenientes para importar, crear y mostrar gráficos vectoriales, así como para exportarlos en diversos formatos gráficos, lo que la hace versátil para su uso en diversas plataformas y aplicaciones de visualización de contenido gráfico. También se suministran utilidades de consola lottie2gif y svg2png.

ThorVG se utiliza para renderizar gráficos vectoriales en proyectos como Tizen OS, Godot Engine, LVGL y reproductores dotLottie.

El proyecto está escrito en C++ (estándar C++14) y se distribuye bajo la licencia MIT.

No es solo una actualización: es una base reconstruida para gráficos vectoriales bidimensionales de alto rendimiento, escalables y portátiles en todas las plataformas y dispositivos. Durante el desarrollo, ThorVG se ha convertido en un motor gráfico maduro, listo para producción, que ha demostrado su calidad y rendimiento en aplicaciones reales.

ThorVG ha ganado rápidamente popularidad y ha despertado un creciente interés dentro de la comunidad, reflejando su evolución de un proyecto en etapa temprana a un motor gráfico vectorial ampliamente reconocido y prácticamente utilizado, preparado para un uso real multiplataforma.

Lista de cambios:

• Capacidades avanzadas de renderizado de texto, efectos visuales ricos y soporte para superposición precisa para una mejor expresión gráfica.
  • Soporte para alineación horizontal y vertical, permitiendo un control preciso sobre la ubicación del texto en diversos contextos de interfaz de usuario.
  • División automática de líneas con opción de seleccionar el modo: por caracteres, por palabras, división inteligente y truncamiento con puntos suspensivos para manejar el desbordamiento.
  • Soporte para salto de línea manual, permitiendo a los desarrolladores controlar explícitamente los saltos de línea utilizando caracteres de nueva línea, como \n. Esto permite formatear con precisión bloques de texto multilínea, especialmente en diseños dinámicos o animaciones de texto.
  • Soporte para espacio entre caracteres personalizado, lo que permite ajustes precisos para mejorar la legibilidad o lograr ciertos estilos tipográficos.
  • Soporte para contornear texto, permitiendo crear efectos estilísticos y mejorar el contraste sobre diversos fondos (captura de pantalla 1).
  • Presentada una sistema de modos de superposición más complejo y cohesivo, mejorando significativamente el comportamiento de los modos de superposición y alineando las fórmulas y lógicas de composición con estándares de la industria como Lottie, SVG y la especificación W3C 'Compositing and Blending'. Estas mejoras garantizan mayor cohesión visual y compatibilidad multiplataforma, especialmente en flujos de trabajo web y de animación.
  • Se implementan y mantienen los siguientes modos de superposición: 'Tono', 'Saturación', 'Color' y 'Brillo' utilizando la composición del espacio de color HSL. Estos modos mejoran la compatibilidad con los efectos de capas de Lottie y el futuro soporte para la mezcla de SVG (captura de pantalla 2).
  • Mejoras y extensiones significativas en efectos visuales a nivel de escena, haciendo que la gráfica vectorial sea más expresiva y visualmente rica:
    • Efecto de sombra con filtro de desenfoque gaussiano (demostración en video).
    • Métodos de reemplazo de colores que cambian la apariencia de la gráfica redefiniendo la forma en que se aplican, mezclan o mapean los colores basados en el tono (demostración en video).
  • Se han añadido nuevas funciones auxiliares para ampliar las capacidades interactivas. Esto incluye soporte para solicitudes de información espacial (demostración) y detección de impactos sobre los objetos visualizados (demostración en video).
• Mejoras avanzadas de animación de Lottie para reproducción multiplataforma, incluyendo presets modulares del Reproductor Web, optimizados en tamaño, rendimiento y modo de renderización (CPU/GPU)
  • Mejoras significativas en el soporte de animaciones Lottie con mejoras en compatibilidad, flexibilidad e interactividad en todas las plataformas. No solo se ha ampliado el rango de funciones y expresiones de Lottie compatibles, sino que también se han proporcionado herramientas para desarrolladores que permiten controlar dinámicamente el comportamiento de la animación en tiempo real, lo que hace de ThorVG una de las bibliotecas de reproducción de Lottie más potentes disponibles en el mercado. Lista de funcionalidades implementadas en el proyecto Wiki.
  • Hasta la fecha, la extensión de archivo .lot es el nuevo estándar oficial de IANA para archivos Lottie. ThorVG ahora admite oficialmente .lot como formato estándar de archivos Lottie además de la tradicional extensión .json.
  • Tweening
    • Se ha añadido soporte para la interpolación entre fotogramas clave no linealmente adyacentes, lo que proporciona transiciones más suaves y un control más preciso del tiempo. Esta mejora es especialmente eficaz cuando se utiliza con la reproducción de animaciones basada en estados (también conocida como reproducción basada en marcadores) en Lottie. En muchos casos, las animaciones están destinadas a transitar entre estados de maneras complejas y no lineales. La Lottie tradicional, con su estricta estructura temporal secuencial, enfrenta dificultades en tales escenarios, lo que a menudo resulta en saltos bruscos o transiciones incómodas entre fotogramas clave inconsistentes: video demostración 1, video demostración 2.
    • Con el tweening, los desarrolladores ahora pueden realizar interpolaciones directamente entre dos fotogramas clave separados, incluso si no son linealmente adyacentes en la línea de tiempo. Esto permite lograr efectos visuales más naturales y suaves al pasar entre estados, mejorando significativamente la flexibilidad y realismo de las animaciones interactivas: video demostración 1, video demostración 2.
  • Ahora (como una función experimental) se soporta la sobrescritura de los valores de las variables de las expresiones en tiempo de ejecución, lo que permite ejecutar lógicas de script dinámicamente en función de la entrada del usuario. Esto lo convierte en una herramienta especialmente poderosa para crear animaciones interactivas utilizando recursos de Lottie, permitiendo crear variaciones personalizadas que van más allá del diseño original.demostración en video).
  • Se ha añadido un mecanismo de resolución de activos personalizable que proporciona mayor flexibilidad al cargar recursos externos (por ejemplo, imágenes) a los que se hace referencia en las animaciones Lottie.
  • Soporte mejorado para la función Lottie LayerEffect, lo que permite realizar ricas mejoras visuales directamente en las capas de animación con efectos descritos anteriormente.
  • Dado que algunos efectos pueden ser intensivos en recursos, se ha propuesto una opción para ajustar la calidad y el rendimiento de la renderización de efectos, lo que es ideal para optimizar en plataformas con recursos de CPU limitados. Esto permite a los desarrolladores controlar la precisión de la renderización y optimizar el rendimiento según la plataforma de destino.
  • El soporte para expresiones se ha ampliado con la adición de las siguientes funciones y propiedades clave:
    • wiggle, temporalWiggle: aplicación de movimiento aleatorio dependiente del tiempo.
    • pointOnPath: cálculo de la posición a lo largo de un camino.
    • propertyIndex, groupIndex: referencia al índice de la propiedad o del grupo.
    • value, property, effect: acceso a los valores de propiedades y efectos externos.
  • Mayor coincidencia con las especificaciones:
    • TextFollowPath: nueva especificación que permite que el texto siga caminos vectoriales arbitrarios (demostración en video).
    • Alineación de texto: representación más precisa de las capas de texto basada en la configuración de su alineación horizontal y vertical (demostración en video).
    • Expansión de la máscara: nueva función que permite controlar de manera más precisa el impacto de la forma de la máscara en la composición visual (demostración en video).
• SVG
  • ThorVG ahora permite acceder a elementos individuales de SVG y modificarlos utilizando atributos únicos id definidos en el archivo SVG fuente. Esta función permite a los desarrolladores seleccionar y manipular directamente figuras vectoriales específicas en la escena SVG importada, lo que es ideal para escenarios de uso interactivos o dinámicos (por ejemplo, decoración temática, resaltado).
  • Soporte efecto de desenfoque gaussiano.
• renderizado inteligente
  • El motor de software ThorVG ahora admite el renderizado parcial inteligente, que garantiza flujos de trabajo de renderizado más eficientes al actualizar solo las partes de la escena vectorial que han cambiado. Gracias al seguimiento interno de las áreas modificadas, minimiza las redibujadas innecesarias y optimiza el rendimiento general. Esta función proporciona ventajas significativas en escenarios como el renderizado de interfaces de usuario, herramientas de diseño o aplicaciones en las que gran parte de la escena permanece estática, mientras que solo se actualizan pequeños elementos entre fotogramas. En tales casos, renunciar al renderizado completo de la escena puede reducir significativamente la carga computacional y mejorar la eficiencia energética, lo que es especialmente valioso para sistemas móviles y embebidos.
  • Para lograr este objetivo, ThorVG 1.0 aplica una combinación de métodos algorítmicos diseñados específicamente para el renderizado parcial. A continuación, se presentan las estrategias clave que sustentan este sistema:
    • Algoritmo de paso lineal: las figuras se ordenan por coordenadas x, y se aplica una estrategia de paso lineal para reducir las verificaciones innecesarias de áreas 'sucias'. Esto reduce la complejidad de O(N × M) a O(N + M + K + N log N), donde N es el número de figuras, M es el número de áreas 'sucias', K es el número de superposiciones reales.
    • División y fusión condicional: la división de subáreas de grano fino se equilibra con la fusión inteligente para evitar la fragmentación. Se da prioridad a la fusión horizontal para un uso más eficiente de la caché de memoria.
    • División espacial (malla predeterminada de 4×4): la superficie de renderizado se divide en 16 áreas, lo que permite verificar solo las áreas 'sucias' relevantes de las figuras, reduciendo significativamente los costos en actualizaciones complejas de la interfaz de usuario.
  • Trabajando en conjunto, estas técnicas proporcionan un renderizado más suave y rápido, especialmente en sistemas embebidos o en tiempo real, donde los actualizaciones parciales son frecuentes. Se publicará información más detallada en una entrada separada. del blog.
  • Tenga en cuenta que en el caso de contenido de alta dinámica, como juegos dinámicos o animaciones de pantalla completa, donde casi todos los objetos cambian en cada fotograma, el renderizado parcial ofrece poco o ningún beneficio en el rendimiento y puede incluso resultar en un ligero costo adicional. En tales casos, generalmente es mejor optar por un renderizado completo de la escena. Por esta razón, ThorVG admite tanto la configuración de renderizado parcial como la completa, lo que le brinda la oportunidad de elegir el enfoque óptimo para su caso de uso. Puede analizar el rendimiento de su producto y tomar decisiones fundamentadas utilizando la opción Meson -Dpartial=[true/false] y la opción EngineOption::Smart de la clase SwCanvas:

  auto canvas = SwCanvas::gen(EngineOption::Smart);

• Una nueva era de integración de tecnologías web con WebGL, WebGPU y un WebCanvas ligero para un renderizado continuo en navegador
  • Los backends de WebGL y WebGPU ahora están oficialmente listos para uso en producción. Estos renderizadores basados en GPU ahora ofrecen compatibilidad funcional completa con el backend tradicional de CPU, soportando todas las capacidades de ThorVG Canvas con la misma calidad y estabilidad de imagen. En comparación con la versión 0.15, el rendimiento del renderizado GPU ha aumentado más del 150%, lo que proporciona una mejora significativa en el renderizado de gráficos vectoriales web en tiempo real.
• Aumento significativo del rendimiento en entornos con limitaciones de potencia de CPU/GPU y entornos embebidos
  • ThorVG 1.0 ofrece un rendimiento mejorado en comparación con la versión 0.15, con un aumento notable tanto en CPU como en GPU.
  • Optimizaciones clave:
    • Efectividad mejorada del pipeline de renderizado.
    • Reducción de los costos adicionales de asignación de buffer de fotogramas.
    • Análisis de composiciones de Lottie optimizado.
    • Renderizado por lotes mejorado y almacenamiento en caché de GPU.
  • ThorVG está optimizado para el rastreo basado en CPU, enfocándose en la visualización vectorial en entornos donde los recursos de GPU son limitados, inaccesibles o intencionalmente no utilizados. En pruebas típicas de CPU, ThorVG muestra un rendimiento promedio 1.8 veces mayor en comparación con el ampliamente utilizado motor de gráficos vectoriales Skia al realizar tareas típicas de visualización vectorial. La ventaja es especialmente evidente en escenarios con un uso intensivo de geometría, como la visualización de rectángulos, tramas, rotaciones y círculos (captura de pantalla 3).
• ThorVG Janitor
  • Una demostración real del rendimiento de renderizado de ThorVG se puede ver en el proyecto ThorVG Janitor – un juego interactivo desarrollado para mostrar el rendimiento del procesador bajo una alta carga gráfica. La escena incluye cientos de enemigos creados con gráficos basados en partículas, fondos estrellados en capas con imágenes rasterizadas de tamaño completo, efectos visuales en tiempo real como DropShadow y Blur, y hasta 25000 objetos renderizándose al mismo tiempo. Incluso en condiciones de carga máxima con resolución 2K (2048×1152), el proyecto muestra un rendimiento estable de más de 120 FPS, lo que destaca la eficiencia y veracidad de ThorVG para entornos complejos con muchos efectos (demostración en video, captura de pantalla).
• Otros cambios significativos
  • Ejemplo de integración de ThorVG en Godot. Hay esta demostración en video ThorVG se integra con Godot en un entorno web para renderizar cientos de objetos de animación Lottie a más de 120 fotogramas por segundo. Esta demostración muestra el potencial de ThorVG en un entorno web para animaciones fluidas y de alta calidad en tiempo de ejecución.
  • Se añadió ejemplo tutorial de uso de ThorVG WebCanvas.
  • Añadido el interactivo ThorVG Playground.
  • Se ha añadido un wrapper de ThorVG para el lenguaje Swift: https://github.com/thorvg/thorvg.swift.
  • Los ejemplos de uso de ThorVG se han trasladado a un repositorio separado https://github.com/thorvg/thorvg.example.
  • Se ha publicado la extensión thorvg.vscode para VSCode para crear, editar y previsualizar recursos de ThorVG directamente en el entorno de Visual Studio Code.
  • En la versión 1.0 se ha llevado a cabo una reestructuración significativa de la API, destinada a mejorar el rendimiento, la facilidad de uso, la coherencia y la compatibilidad con C.
  • Se ha eliminado el soporte para el formato TVG Picture (TVG). Esta decisión se tomó para preparar el nuevo formato ThorVG Picture, diseñado teniendo en cuenta la animación como concepto principal.
  • Numerosas correcciones de errores y mejoras en la estabilidad para su uso en producción.

Fuente: linux.org.ru