ThorVG 1.0

Il 31 gennaio, dopo un anno e mezzo di sviluppo continuo, è stata rilasciata la versione 1.0 di ThorVG, una leggera e portatile libreria cross-platform per la grafica vettoriale. ThorVG, progettata per visualizzare scene e animazioni vettoriali. Supporta il caricamento di file nei formati Lottie e SVG Tiny 1.2 (l'elenco delle funzionalità implementate di SVG Tiny nel Wiki del progetto).

La libreria offre API intuitive per importare, creare e visualizzare grafiche vettoriali, nonché esportarle in vari formati grafici, il che la rende versatile per l'uso su diverse piattaforme software e applicazioni di visualizzazione dei contenuti grafici. Sono anche fornuti strumenti da console lottie2gif e svg2png.

ThorVG viene utilizzato per il rendering della grafica vettoriale in progetti come Tizen OS, Godot Engine, LVGL e lettori dotLottie.

Il progetto è scritto in C++ (standard C++14) e distribuito con licenza MIT.

Non si tratta semplicemente di un aggiornamento: è una base ricostruita per grafica vettoriale bidimensionale ad alte prestazioni, scalabile e portatile su tutte le piattaforme e dispositivi. Durante lo sviluppo, ThorVG è diventato un motore grafico maturo, pronto per la produzione e ha dimostrato qualità e prestazioni comprovate in applicazioni reali.

ThorVG ha rapidamente guadagnato popolarità e suscitato un crescente interesse da parte della comunità, riflettendo la sua evoluzione da progetto iniziale a motore grafico vettoriale ampiamente riconosciuto e praticamente utilizzato, pronto per un utilizzo cross-platform reale.

Elenco delle modifiche:

• Funzionalità avanzate di rendering del testo, effetti visivi ricchi e supporto per sovrapposizioni precise per un'espressione grafica migliorata
  • Supporto per l'allineamento orizzontale e verticale, consentendo un controllo preciso della posizione del testo in vari contesti dell'interfaccia utente.
  • Interruzione automatica delle righe con opzioni di modalità: per caratteri, per parole, interruzione intelligente e troncamento con i puntini di sospensione per gestire il traboccamento.
  • Supporto per interruzioni di linea manuali, consentendo agli sviluppatori di controllare esplicitamente le interruzioni di riga utilizzando caratteri di nuova linea, come \n. Ciò consente di formattare con precisione i blocchi di testo su più righe, specialmente in layout dinamici o animazioni di testo.
  • Supporto per la regolazione della distanza tra i caratteri, consentendo regolazioni precise per migliorare la leggibilità o per ottenere determinati stili tipografici.
  • Supporto per il contorno del testo, che consente di creare effetti stilistici e migliorare il contrasto su diversi sfondi (screenshot 1).
  • Introdotto un sistema di modalità di sovrapposizione più complesso e coerente, migliorando significativamente il comportamento delle modalità di sovrapposizione e allineando le formule e la logica di composizione agli standard del settore come Lottie, SVG e la specifica W3C "Compositing and Blending". Questi miglioramenti forniscono una maggiore coerenza visiva e compatibilità cross-platform, specialmente nei flussi di lavoro web e di animazione.
  • Sono implementate e supportate le seguenti modalità di sovrapposizione: "Tinta", "Saturazione", "Colore" e "Luminosità" utilizzando la composizione dello spazio colore HSL. Queste modalità migliorano la compatibilità con gli effetti dei livelli Lottie e la futura supporto per la miscelazione SVG (screenshot 2).
  • Miglioramenti e ampliamenti significativi degli effetti visivi a livello di scena, rendendo la grafica vettoriale più espressiva e visivamente ricca:
    • L'effetto ombra con filtro di sfocatura gaussiana (video dimostrativo).
    • Metodi di sostituzione dei colori che modificano l'aspetto della grafica ridefinendo il modo in cui i colori vengono applicati, miscelati o confrontati in base alla tonalità (video dimostrativo).
  • Aggiunte nuove funzioni ausiliarie per espandere le capacità interattive. Queste includono il supporto per le richieste di informazioni spaziali (dimostrazione) e il rilevamento delle collisioni sugli oggetti visualizzati (video dimostrativo).
• Funzionalità di animazione Lottie avanzate per la riproduzione cross-platform, comprese le preset modulari del Web Player ottimizzate per dimensioni, prestazioni e modalità di rendering (CPU/GPU)
  • Miglioramenti significativi nel supporto delle animazioni Lottie con miglioramenti nella compatibilità, flessibilità e interattività su tutte le piattaforme. Non solo è stata ampliata la gamma di funzionalità e espressioni Lottie supportate, ma sono stati forniti strumenti per gli sviluppatori per controllare dinamicamente il comportamento delle animazioni durante il runtime, rendendo ThorVG una delle librerie di riproduzione Lottie più potenti disponibili sul mercato. Elenco delle funzionalità implementate nel progetto Wiki.
  • Fino ad oggi, l'estensione del file .lot è il nuovo standard ufficiale IANA per i file Lottie. ThorVG supporta ora ufficialmente .lot come formato standard per i file Lottie, oltre all'estensione tradizionale .json.
  • Tweening
    • È stata aggiunta la supporto per l'interpolazione tra fotogrammi chiave non linearmente adiacenti, consentendo transizioni più fluide e un controllo temporale più preciso. Questo miglioramento è particolarmente efficace quando si utilizza la riproduzione di animazioni basate su stati (noto anche come riproduzione basata su marker) in Lottie. In molti casi, le animazioni sono progettate per passare tra stati in modi complessi e non lineari. La tradizionale Lottie, con la sua rigida struttura temporale sequenziale, ha difficoltà a gestire tali scenari, il che spesso porta a brusche interruzioni o salti imbarazzanti durante le transizioni tra fotogrammi chiave non coerenti: video dimostrativo 1, video dimostrativo 2.
    • Con il tweening, gli sviluppatori possono ora effettuare interpolazioni direttamente tra due fotogrammi chiave distinti, anche se non sono linearmente adiacenti sulla timeline. Ciò consente di ottenere effetti visivi più naturali e fluidi durante le transizioni tra stati, aumentando notevolmente la flessibilità e il realismo delle animazioni interattive: video dimostrativo 1, video dimostrativo 2.
  • Ora (come funzione sperimentale) è supportata la sovrascrittura dei valori delle variabili espressive durante il runtime, consentendo di eseguire dinamicamente la logica dello script in base all'input dell'utente. Questo lo rende uno strumento particolarmente potente per creare animazioni interattive utilizzando risorse Lottie, permettendo di generare variazioni personalizzate che vanno oltre il design originale (video dimostrativo).
  • È stato aggiunto un meccanismo di risoluzione degli asset personalizzabile, offrendo maggiore flessibilità nel caricamento di risorse esterne (come immagini) a cui fanno riferimento le animazioni Lottie.
  • Supporto avanzato per la funzione Lottie LayerEffect, che consente miglioramenti visivi ricchi direttamente sui livelli di animazione con effetti descritti sopra.
  • Poiché alcuni effetti possono richiedere molte risorse, è stata proposta un'opzione per regolare la qualità e le prestazioni del rendering degli effetti, perfetta per l'ottimizzazione su piattaforme con risorse CPU limitate. Questo consente agli sviluppatori di controllare la precisione del rendering e ottimizzare le prestazioni in base alla piattaforma target.
  • Il supporto per le espressioni è stato ampliato con l'aggiunta delle seguenti funzionalità e proprietà chiave:
    • wiggle, temporalWiggle: applica un movimento casuale, dipendente dal tempo.
    • pointOnPath: calcola la posizione lungo un percorso.
    • propertyIndex, groupIndex: riferimento all'indice della proprietà o del gruppo.
    • value, property, effect: accesso ai valori delle proprietà e agli effetti esterni.
  • Compatibilità più precisa con le specifiche:
    • TextFollowPath – una nuova specifica che consente al testo di seguire percorsi vettoriali arbitrari (video dimostrativo).
    • Le opzioni di allineamento del testo – visualizzazione più precisa dei livelli di testo basata sulle impostazioni di allineamento orizzontale e verticale (video dimostrativo).
    • Espansione della maschera – una nuova funzione che consente di controllare con maggiore precisione l'impatto della forma della maschera sulla composizione visiva (video dimostrativo).
• SVG
  • ThorVG ora consente l'accesso a singoli elementi SVG e la loro modifica tramite attributi id unici definiti nel file SVG sorgente. Questa funzione consente agli sviluppatori di selezionare e manipolare direttamente specifiche figure vettoriali nella scena SVG importata, perfetta per scenari di utilizzo interattivi o dinamici (ad esempio, tematizzazione, evidenziazione).
  • Supporto effetto sfocatura gaussiana.
• Rendering intelligente
  • Il motore software ThorVG ora supporta il rendering parziale intelligente, che consente flussi di lavoro di rendering più efficienti aggiornando solo le parti della scena vettoriale che sono cambiate. Grazie al tracciamento interno delle aree modificate, minimizza i ridisegni non necessari e ottimizza le prestazioni complessive. Questa funzione offre vantaggi significativi in scenari come il rendering delle interfacce utente, strumenti di progettazione o applicazioni in cui gran parte della scena rimane statica e solo piccoli elementi vengono aggiornati tra i fotogrammi. In questi casi, la rinuncia al rendering completo della scena può ridurre notevolmente il carico computazionale e aumentare l'efficienza energetica, particolarmente preziosa per sistemi mobili e embedded.
  • Per raggiungere questo obiettivo, ThorVG 1.0 applica una combinazione di metodi algoritmici appositamente progettati per il rendering parziale. Di seguito sono riportate le principali strategie alla base di questo sistema:
    • Algoritmo di passaggio lineare: le forme sono ordinate in base alle coordinate x e viene applicata una strategia di passaggio lineare per ridurre i controlli non necessari delle aree “sporche”. Ciò riduce la complessità da O(N × M) a O(N + M + K + N log N), dove N è il numero delle forme, M è il numero delle aree “sporche”, e K è il numero delle sovrapposizioni effettive.
    • Divisione e fusione condizionale: la suddivisione a grana fine delle sottoaree viene equilibrata con una fusione intelligente per evitare la frammentazione. In questo caso si privilegia la fusione orizzontale per un uso più efficiente della cache della memoria.
    • Divisione spaziale (griglia 4×4 per impostazione predefinita): la superficie di rendering è divisa in 16 aree, consentendo di controllare solo le aree “sporche” pertinenti delle forme, riducendo significativamente le spese generali in operazioni di aggiornamento complesse per interfacce utente.
  • Lavorando insieme, queste tecniche assicurano un rendering più fluido e veloce, specialmente in sistemi embedded o sistemi in tempo reale, dove avvengono frequentemente aggiornamenti parziali. Maggiori dettagli saranno pubblicati in un post separato. un blog.
  • Si prega di notare che nel caso di contenuti ad alta dinamicità, come giochi dinamici o animazioni in modalità schermo intero, dove quasi tutti gli oggetti cambiano in ogni fotogramma, il rendering parziale offre pochi o addirittura nessun vantaggio in termini di prestazioni e può anche portare a lievi costi aggiuntivi. In tali casi, è generalmente meglio optare per un rendering completo della scena. Per questo motivo, ThorVG supporta sia la configurazione di rendering parziale che quella completa, offrendo la possibilità di scegliere l'approccio ottimale per il proprio caso d'uso. È possibile analizzare le prestazioni del proprio prodotto e prendere decisioni informate utilizzando l'opzione Meson -Dpartial=[true/false] e l'opzione EngineOption::Smart della classe SwCanvas.

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

• Una nuova era di integrazione delle tecnologie web con WebGL, WebGPU e WebCanvas semplificato per un rendering senza soluzione di continuità nel browser.
  • I backend WebGL e WebGPU sono ora ufficialmente pronti per l'uso in produzione. Questi renderer basati su GPU offrono ora piena compatibilità funzionale con il tradizionale backend CPU, supportando tutte le funzionalità di ThorVG Canvas con la stessa qualità e stabilità dell'immagine. Rispetto alla versione 0.15, le prestazioni di rendering della GPU sono aumentate di oltre il 150%, garantendo un significativo miglioramento nel rendering di grafica vettoriale web in tempo reale.
• Notevole aumento delle prestazioni in ambienti con limitazioni di potenza CPU/GPU e ambienti incorporati.
  • ThorVG 1.0 offre prestazioni migliorate rispetto alla versione 0.15, con un significativo guadagno sia in CPU che in GPU.
  • Ottimizzazioni chiave:
    • Migliore efficienza nel pipeline di rendering.
    • Ridotti costi per l'allocazione del buffer dei fotogrammi.
    • Ottimizzazione dell'analisi delle composizioni Lottie.
    • Miglior rendering batch e caching GPU.
  • ThorVG è ottimizzato per il rastering basato su CPU, con un focus sulla visualizzazione vettoriale in ambienti dove le risorse GPU sono limitate, non disponibili o intenzionalmente non utilizzate. Nei test tipici della CPU, ThorVG dimostra in media una performance superiore di 1.8 volte rispetto al motore grafico vettoriale ampiamente utilizzato Skia durante l'esecuzione di compiti tipici di visualizzazione vettoriale. Il vantaggio è particolarmente evidente in scenari con un alto utilizzo di geometria, come la visualizzazione di rettangoli, tratti, rotazioni e cerchi (screenshot 3).
• ThorVG Janitor
  • Una dimostrazione reale delle prestazioni di rendering di ThorVG può essere vista nel progetto ThorVG Janitor – un gioco interattivo sviluppato per dimostrare le prestazioni della CPU sotto un carico grafico elevato. La scena include centinaia di nemici, creati utilizzando grafica basata su particelle, sfondi multilivello di cieli stellati con immagini raster full-size, effetti visivi in tempo reale come DropShadow e Blur, e fino a 25000 oggetti renderizzati simultaneamente. Anche sotto un carico massimo con risoluzione 2K (2048×1152), il progetto dimostra prestazioni stabili superiori a 120 FPS, evidenziando l'efficacia e l'idoneità di ThorVG per ambienti complessi con un gran numero di effetti (video dimostrativo, screenshot).
• Altre modifiche significative
  • Esempio di integrazione di ThorVG in Godot. In di questa video-dimostrazione ThorVG è integrato con Godot in un ambiente web per il rendering di centinaia di oggetti di animazione Lottie a oltre 120 fotogrammi al secondo. Questa dimostrazione mostra il potenziale di ThorVG in un ambiente web per animazioni fluide e di alta qualità in tempo reale.
  • Aggiunto esempio educativo dell'uso di ThorVG WebCanvas.
  • Aggiunto un interattivo ThorVG Playground.
  • Aggiunto un wrapper ThorVG per il linguaggio Swift: https://github.com/thorvg/thorvg.swift.
  • Esempi di utilizzo di ThorVG trasferiti in un repository separato https://github.com/thorvg/thorvg.example.
  • Pubblicata un'estensione thorvg.vscode per VSCode per creare, modificare e visualizzare risorse ThorVG direttamente nell'ambiente di Visual Studio Code.
  • Nella versione 1.0 è stata effettuata una significativa ristrutturazione dell'API, mirata a migliorare le prestazioni, l'usabilità, la coerenza e la compatibilità con C.
  • Il supporto per il formato TVG Picture (TVG) è stato rimosso. Questa decisione è stata presa per preparare il nuovo formato ThorVG Picture, sviluppato tenendo conto dell'animazione come concetto principale.
  • Numerose correzioni di errori e miglioramenti della stabilità per l'uso in produzione.

Fonte: linux.org.ru