ThorVG 1.0

Am 31. Januar, nach anderthalb Jahren kontinuierlicher Entwicklung, wurde die Version 1.0 der leichten und tragbaren plattformübergreifenden Vektorgraphics-Bibliothek ThorVG, die zur Visualisierung von Vektorszenen und -animationen gedacht ist. Es werden Dateien in den Formaten unterstützt Lottie und SVG Tiny 1.2 (eine Liste der implementierten Funktionen von SVG Tiny im Wiki des Projekts).

Die Bibliothek bietet benutzerfreundliche APIs zum Import, Erstellen und Anzeigen von Vektorgrafiken sowie zum Export in verschiedene Grafikformate, was sie universell für den Einsatz in verschiedenen Softwareplattformen und Anwendungen zur Visualisierung grafischer Inhalte macht. Es werden auch Konsolenutools wie lottie2gif und svg2png bereitgestellt.

ThorVG wird zur Renderung von Vektorgrafiken in Projekten wie Tizen OS, Godot Engine, LVGL und den Playern dotLottie.

Das Projekt ist in C++ (Standard C++14) geschrieben und unterliegt der MIT-Lizenz.

Dies ist nicht nur ein Update, sondern eine neu gestaltete Basis für leistungsstarke, skalierbare und transportable 2D-Vektorgrafiken auf allen Plattformen und Geräten. Im Laufe der Entwicklung hat sich ThorVG zu einer ausgereiften, produktionsbereiten Grafik-Engine entwickelt, die nachweisliche Qualität und Leistung in realen Anwendungen demonstriert hat.

ThorVG hat schnell an Popularität gewonnen und ein wachsendes Interesse in der Community geweckt, was seine Evolution von einem Projekt in der frühen Phase zu einer weithin anerkannten und praktisch genutzten Vektorgrafik-Engine zeigt, die bereit für den Einsatz in plattformübergreifenden Anwendungen ist.

Änderungsprotokoll:

• Erweiterte Text-Rendermöglichkeiten, reiche visuelle Effekte und Unterstützung für genaue Überlagerungen zur Verbesserung des grafischen Ausdrucks.
  • Unterstützung der horizontalen und vertikalen Ausrichtung, die eine präzise Kontrolle über die Platzierung von Text in verschiedenen Kontexten der Benutzeroberfläche ermöglicht.
  • Automatische Zeilenumbruch mit der Möglichkeit, den Modus auszuwählen: nach Zeichen, nach Wörtern, intelligente Umbrüche und Ellipsen zur Behandlung von Überlauf.
  • Unterstützung für manuelles Zeilenumbruch, das es Entwicklern ermöglicht, Zeilenumbrüche explizit mit Hilfe von Zeilenumbruchzeichen wie \n zu steuern. Dadurch wird eine präzise Formatierung mehrzeiliger Textblöcke ermöglicht, insbesondere in dynamischen Layouts oder Textanimationen.
  • Unterstützung für anpassbare Abstände zwischen Zeichen, die eine feine Anpassung zur Verbesserung der Lesbarkeit oder zur Erreichung bestimmter typografischer Stile ermöglicht.
  • Unterstützung für Textumrandungen, die es ermöglicht, stilistische Effekte zu erstellen und den Kontrast auf verschiedenen Hintergründen zu verbessern (Screenshot 1).
  • Ein umfassenderes und konsistenteres System von Überblendmodi wurde eingeführt, das das Verhalten der Überblendmodi erheblich verbessert und Formeln sowie Logik der Komposition an Branchenstandards wie Lottie, SVG und die W3C-Spezifikation "Compositing and Blending" anpasst. Diese Verbesserungen sorgen für eine größere visuelle Konsistenz und plattformübergreifende Kompatibilität, insbesondere in Web- und Animations-Workflows.
  • Die folgenden Überblendmodi wurden implementiert und unterstützt: "Farbton", "Sättigung", "Farbe" und "Helligkeit" unter Verwendung der HSL-Farbkompositionsmethode. Diese Modi verbessern die Kompatibilität mit Lottie-Schichteffekten und zukünftiger SVG-Mischunterstützung (Screenshot 2).
  • Bedeutende Verbesserungen und Erweiterungen in visuellen Effekten auf der Szenenebene, die Vektorgrafik ausdrucksvoller und visuell ansprechender machen:
    • Schatteneffekt mit Gaußschem Weichzeichnerfilter (Video-Demonstration).
    • Farbersetzungsmethoden, die das Erscheinungsbild von Grafiken verändern, indem sie die Art und Weise, wie Farben auf Basis des Farbtons angewendet, gemischt oder zugeordnet werden, neu definieren (Video-Demonstration).
  • Neue Hilfsfunktionen wurden hinzugefügt, um die interaktiven Möglichkeiten zu erweitern. Dazu gehört die Unterstützung von Abfragen zur räumlichen Information (Demonstration) und die Erkennung von Treffer auf angezeigte Objekte (Video-Demonstration).
• Erweiterte Lottie-Animationsfunktionen für plattformübergreifende Wiedergabe, einschließlich modularer Web Player-Vorlagen, die hinsichtlich Größe, Leistung und Rendering-Modus (CPU/GPU) optimiert sind.
  • Bedeutende Verbesserungen in der Unterstützung von Lottie-Animationen mit verbesserter Kompatibilität, Flexibilität und Interaktivität auf allen Plattformen. Das Spektrum der unterstützten Lottie-Funktionen und -Ausdrücke wurde nicht nur erweitert, sondern es wurden auch Werkzeuge für Entwickler bereitgestellt, mit denen sich das Verhalten von Animationen zur Laufzeit dynamisch steuern lässt, was ThorVG zu einer der leistungsstärksten Lottie-Wiedergabebibliotheken auf dem Markt macht. Liste der implementierten Funktionen im Projekt-Wiki.
  • Das .lot-Dateiformat ist mittlerweile der neue offizielle Standard der IANA für Lottie-Dateien. ThorVG unterstützt jetzt offiziell .lot als Standarddateiformat für Lottie-Dateien zusätzlich zur traditionellen Erweiterung .json.
  • Tweening
    • Die Unterstützung für die Interpolation zwischen nicht linear benachbarten Schlüsselbildern wurde hinzugefügt, was glattere Übergänge und präzisere Zeitkontrolle ermöglicht. Diese Verbesserung ist besonders wirksam bei der Wiedergabe von animationsbasierten Zuständen (auch bekannt als Marker-basiertes Playback) in Lottie. In vielen Fällen sind Animationen darauf ausgelegt, auf komplexe, nicht lineare Weise zwischen Zuständen zu wechseln. Traditionelles Lottie mit seiner streng sequentiellen Zeitstruktur hat oft Schwierigkeiten mit solchen Szenarien, was häufig zu abrupten Rückschlägen oder unbeholfenen Sprüngen beim Übergang zwischen nicht aufeinanderfolgenden Schlüsselbildern führt. Video-Demonstration 1, Video-Demonstration 2.
    • Mit Tweening können Entwickler jetzt die Interpolation direkt zwischen zwei einzelnen Schlüsselbildern durchführen, auch wenn diese nicht linear benachbart auf der Zeitachse sind. Dies ermöglicht natürlichere und flüssigere visuelle Effekte bei Übergängen zwischen Zuständen und erhöht erheblich die Flexibilität und Realitätsnähe interaktiver Animationen. Video-Demonstration 1, Video-Demonstration 2.
  • Jetzt (als experimentelle Funktion) wird die Überschreibung von Werten von Ausdrucksvariablen zur Laufzeit unterstützt, was die dynamische Ausführung von Skriptlogik basierend auf Benutzereingaben ermöglicht. Dies macht es zu einem besonders leistungsstarken Werkzeug zur Erstellung interaktiver Animationen mit Lottie-Ressourcen, mit dem individuelle Variationen über das ursprüngliche Design hinaus erstellt werden können.Video-Demonstration).
  • Ein anpassbarer Asset Resolver wurde hinzugefügt, der mehr Flexibilität beim Laden externer Ressourcen (z. B. Bilder), auf die von Lottie-Animationen verwiesen wird, bietet.
  • Erweiterte Unterstützung für die Funktion Lottie LayerEffect, die reichhaltige visuelle Verbesserungen direkt auf den Animationsebenen ermöglicht, mit den oben beschriebenen Effekten.
  • Da einige Effekte ressourcenintensiv sein können, wurde eine Option zur Anpassung der Qualität und Leistung beim Rendern von Effekten angeboten, die sich ideal für die Optimierung auf Plattformen mit eingeschränkten CPU-Ressourcen eignet. Dies ermöglicht Entwicklern, die Genauigkeit des Renderings zu steuern und die Leistung je nach Zielplattform zu optimieren.
  • Die Unterstützung für Ausdrücke wurde durch die Hinzufügung der folgenden Schlüsselmerkmale und Eigenschaften erweitert:
    • wiggle, temporalWiggle: Anwendung zufälliger Bewegungen, die von der Zeit abhängen.
    • pointOnPath: Berechnung der Position entlang eines Pfades.
    • propertyIndex, groupIndex: Verweis auf den Index der Eigenschaft oder Gruppe.
    • value, property, effect: Zugriff auf die Werte von Eigenschaften und externen Effekten.
  • Genauere Übereinstimmung mit den Spezifikationen:
    • TextFollowPath – eine neue Spezifikation, die es dem Text ermöglicht, willkürlichen Vektorpfladen zu folgen (Video-Demonstration).
    • Textausrichtungsparameter – genauere Darstellung von Textebenen basierend auf den Einstellungen ihrer horizontalen und vertikalen Ausrichtung (Video-Demonstration).
    • Maskenerweiterung – eine neue Funktion, die eine genauere Kontrolle über den Einfluss der Maskenform auf die visuelle Komposition ermöglicht (Video-Demonstration).
• SVG
  • ThorVG ermöglicht jetzt den Zugriff auf einzelne SVG-Elemente und deren Änderungen durch eindeutige id-Attribute, die in der Original-SVG-Datei definiert sind. Diese Funktion ermöglicht Entwicklern, spezifische Vektorgrafiken in der importierten SVG-Szene direkt auszuwählen und zu manipulieren, was sich ideal für interaktive oder dynamische Nutzungsszenarien eignet (z. B. thematische Gestaltung, Hervorhebung).
  • Support Effekt der Gaußschen Unschärfe.
• Intelligentes Rendern
  • Der Software-Engine ThorVG unterstützt jetzt intelligentes partielles Rendering, das effizientere Rendering-Workflows ermöglicht, indem nur die Teile der Vektorszene aktualisiert werden, die sich geändert haben. Durch das interne Verfolgen von geänderten Bereichen minimiert es unnötige Neudarstellungen und optimiert die Gesamtleistung. Diese Funktion bietet erhebliche Vorteile in Szenarien wie UI-Rendering, Gestaltungstools oder Anwendungen, in denen der Großteil der Szene statisch bleibt und zwischen den Frames nur kleine Elemente aktualisiert werden. In solchen Fällen kann der Verzicht auf ein vollständiges Rendering der Szene die Rechenlast erheblich reduzieren und die energieeffizienz steigern, was insbesondere für mobile und eingebettete Systeme von großer Bedeutung ist.
  • Um dieses Ziel zu erreichen, verwendet ThorVG 1.0 eine Kombination aus algorithmischen Methoden, die speziell für partielles Rendering entwickelt wurden. Im Folgenden sind die Hauptstrategien, die dieser System zugrunde liegen:
    • Algorithmus des linearen Durchgangs: Die Formen werden nach den x-Koordinaten sortiert und eine Strategie des linearen Durchgangs wird angewendet, um unnötige Überprüfungen der "schmutzigen" Bereiche zu reduzieren. Dies reduziert die Komplexität von O(N × M) auf O(N + M + K + N log N), wobei N die Anzahl der Formen, M die Anzahl der "schmutzigen" Bereiche und K die Anzahl der tatsächlichen Überschneidungen ist.
    • Teilung und bedingte Zusammenführung: Eine feingliedrige Teilung der Teilbereiche wird mit einer intelligenten Zusammenführung ausgewogen, um Fragmentierung zu vermeiden. Dabei wird dem horizontalen Zusammenführen Priorität eingeräumt, um die Speichercache-Nutzung effizienter zu gestalten.
    • Räumliche Teilung (Standard 4×4 Raster): Die Renderoberfläche ist in 16 Bereiche unterteilt, wodurch nur die entsprechenden "schmutzigen" Bereiche der Formen überprüft werden, was die Kosten bei komplexen Updates der Benutzeroberfläche erheblich reduziert.
  • Durch die Zusammenarbeit dieser Techniken wird ein flüssigeres und schnelleres Rendering gewährleistet, insbesondere in eingebetteten Systemen oder Echtzeitsystemen, in denen häufig partielle Aktualisierungen stattfinden. Detailliertere Informationen werden in einem separaten Beitrag veröffentlicht. Blogs.
  • Bitte beachten Sie, dass bei hochdynamischen Inhalten, wie dynamischen Spielen oder Vollbildanimationen, bei denen nahezu alle Objekte in jedem Frame verändert werden, eine partielle Darstellung wenig oder gar keinen Leistungsgewinn bringt und sogar zu geringen Overheads führen kann. In solchen Fällen ist es häufig besser, eine vollständige Szenendarstellung zu wählen. Aus diesem Grund unterstützt ThorVG sowohl partielle als auch vollständige Renderkonfigurationen, was Ihnen die Möglichkeit gibt, den optimalen Ansatz für Ihr Anwendungsbeispiel auszuwählen. Sie können die Leistung Ihres Produkts analysieren und eine fundierte Entscheidung treffen, indem Sie die Option Meson -Dpartial=[true/false] und die Option EngineOption::Smart der Klasse SwCanvas verwenden.

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

• Eine neue Ära der Integration von Webtechnologien mit WebGL, WebGPU und leichtgewichtigem WebCanvas für nahtloses Rendering im Browser
  • Die Backends WebGL und WebGPU sind jetzt offiziell für den Produktionsgebrauch bereit. Diese GPU-basierten Renderer bieten jetzt volle funktionale Kompatibilität mit dem traditionellen CPU-Backend und unterstützen alle Funktionen des ThorVG Canvas mit der gleichen Bildqualität und -stabilität. Im Vergleich zur Version 0.15 hat sich die Rendering-Leistung der GPU um mehr als 150 % erhöht, was eine deutliche Verbesserung beim Rendering von Web-Vektorgrafiken in Echtzeit gewährleistet.
• Deutliche Leistungssteigerung in Umgebungen mit strengen CPU/GPU-Leistungsanforderungen und eingebetteten Umgebungen
  • ThorVG 1.0 bietet verbesserte Leistungen im Vergleich zur Version 0.15, mit einer merklichen Steigerung sowohl bei CPU als auch bei GPU.
  • Schlüsseloptimierungen:
    • Verbesserte Effizienz der Rendering-Pipeline.
    • Reduzierte Overheads bei der Zuweisung von Frame-Puffern.
    • Optimierte Analyse von Lottie-Kompositionen.
    • Verbessertes Batch-Rendering und GPU-Caching.
  • ThorVG ist für die Rasterung auf CPU-Basis optimiert und legt den Schwerpunkt auf vektorielle Visualisierung in Umgebungen, in denen die GPU-Ressourcen begrenzt, nicht verfügbar oder absichtlich nicht genutzt werden. In typischen CPU-Tests zeigt ThorVG eine im Durchschnitt 1,8-mal höhere Leistung im Vergleich zur weit verbreiteten Vektorgrafik-Engine Skia bei der Durchführung typischer Aufgaben der vektoriellen Visualisierung. Der Vorteil ist besonders offensichtlich in Szenarien mit intensiver geometrischer Nutzung, wie der Visualisierung von Rechtecken, Strichen, Drehungen und Kreisen (Screenshot 3).
• ThorVG Janitor
  • Eine echte Leistungsdemonstration des Renderings von ThorVG kann im Projekt gesehen werden ThorVG Janitor – einem interaktiven Spiel, das entwickelt wurde, um die CPU-Leistung bei hoher grafischer Belastung zu demonstrieren. Die Szene enthält Hunderte von Feinden, die mit Partikelgrafiken erstellt wurden, mehrschichtige Hintergründe des Sternenhimmels mit vollwertigen Rasterbildern, Echtzeit-Visuelleffekte wie DropShadow und Blur sowie bis zu 25.000 Objekte, die gleichzeitig gerendert werden. Selbst bei maximaler Auslastung mit einer 2K-Auflösung (2048×1152) zeigt das Projekt eine stabile Leistung über 120 FPS, was die Effizienz und Eignung von ThorVG für komplexe Umgebungen mit vielen Effekten unterstreicht (Video-Demonstration, Screenshot).
• Andere bedeutende Änderungen
  • Beispiel für die Integration von ThorVG in Godot. In dieser Video-Demonstration ThorVG ist in Godot in einer Webumgebung integriert, um Hunderte von Lottie-Animationsobjekten mit mehr als 120 Frames pro Sekunde zu rendern. Diese Demonstration zeigt das Potenzial von ThorVG in Webumgebungen für flüssige und qualitativ hochwertige Animationen zur Laufzeit.
  • Hinzugefügt Lernbeispiel Verwendung von ThorVG WebCanvas.
  • Interaktive hinzugefügt ThorVG Playground.
  • Ein Wrapper für ThorVG für die Sprache Swift hinzugefügt: https://github.com/thorvg/thorvg.swift.
  • Beispiele zur Verwendung von ThorVG wurden in ein separates Repository übertragen https://github.com/thorvg/thorvg.example.
  • Eine Erweiterung veröffentlicht thorvg.vscode für VSCode zur Erstellung, Bearbeitung und Vorschau von ThorVG-Ressourcen direkt in der Umgebung von Visual Studio Code.
  • In Version 1.0 wurde die API erheblich umstrukturiert, um die Leistung, Benutzerfreundlichkeit, Konsistenz und Kompatibilität mit C zu verbessern.
  • Die Unterstützung für das TVG Picture-Format (TVG) wurde eingestellt. Diese Entscheidung wurde getroffen, um das neue ThorVG Picture-Format vorzubereiten, das mit Animationen als Hauptkonzept entwickelt wurde.
  • Zahlreiche Fehlerbehebungen und Stabilitätsverbesserungen für den produktiven Einsatz.

Quelle: linux.org.ru