ThorVG 1.0

31 gennaio, dopo un anno e mezzo di sviluppo continuo, è stata rilasciata la versione 1.0 di una leggera e portatile libreria cross-platform per la grafica vettoriale ThorVG, destinata alla visualizzazione di 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 è disponibile nella Wiki del progetto).

La libreria offre API intuitive per importare, creare e visualizzare grafica vettoriale, nonché per esportarla in vari formati grafici, rendendola versatile per l'uso su diverse piattaforme software e applicazioni per la visualizzazione di contenuti grafici. Sono anche fornuti strumenti da console lottie2gif e svg2png.

ThorVG è utilizzato per il rendering di 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 solo di un aggiornamento: è una base riprogettata per una grafica vettoriale bidimensionale ad alte prestazioni, scalabile e portatile su tutte le piattaforme e dispositivi. Durante lo sviluppo, ThorVG si è trasformato in un motore grafico maturo, pronto per la produzione, che 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 un motore grafico vettoriale ampiamente riconosciuto e praticamente utilizzato, pronto per un uso 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, che consente un controllo preciso della posizione del testo in vari contesti dell'interfaccia utente.
  • Suddivisione automatica delle righe con possibilità di scegliere la modalità: per caratteri, per parole, suddivisione intelligente e troncamento con punti di sospensione per gestire il sovraccarico.
  • Supporto per interruzioni di riga manuali, consentendo agli sviluppatori di controllare esplicitamente le interruzioni di riga utilizzando caratteri di nuova linea come \n. Questo consente di formattare con precisione i blocchi di testo su più righe, specialmente nei layout dinamici o nelle animazioni di testo.
  • Supporto per la personalizzazione della distanza tra i caratteri, che consente una regolazione precisa per migliorare la leggibilità o raggiungere determinati stili tipografici.
  • Supporto per la contouring del testo, permettendo di creare effetti stilistici e migliorare il contrasto su diversi sfondi (screenshot 1).
  • È stata presentata una sistema di modalità di sovrapposizione più complessa e coerente, che migliora notevolmente il comportamento delle modalità di sovrapposizione, allineando formule e logiche di composizione agli standard del settore, come Lottie, SVG e la specifica W3C "Compositing and Blending". Questi miglioramenti garantiscono una maggiore coerenza visiva e compatibilità cross-platform, specialmente nei flussi di lavoro web e di animazione.
  • Sono stati implementati e supportati i seguenti modi 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 supportano future integrazioni di miscelazione SVG (screenshot 2).
  • Miglioramenti e ampliamenti significativi negli effetti visivi a livello di scena, rendendo la grafica vettoriale più espressiva e visivamente ricca:
    • Effetto ombra con filtro di sfocatura gaussiana (video dimostrativo).
    • Metodi per la sostituzione dei colori, che cambiano l'aspetto della grafica modificando il modo in cui i colori vengono applicati, mescolati o abbinati in base alla tonalità (video dimostrativo).
  • Sono state aggiunte nuove funzionalità ausiliarie per ampliare le capacità interattive. Queste includono il supporto per le richieste di informazioni spaziali (demonstration) e il rilevamento delle collisioni con gli oggetti visualizzati (video dimostrativo).
• Miglioramenti significativi nelle capacità di animazione Lottie per la riproduzione cross-platform, inclusi preset modulari ottimizzati in termini di dimensioni, prestazioni e modalità di rendering (CPU/GPU)
  • Miglioramenti notevoli nel supporto per l'animazione Lottie con un aumento della compatibilità, flessibilità e interattività su tutte le piattaforme. Non solo è stato ampliato il numero di funzionalità e espressioni Lottie supportate, ma sono stati forniti strumenti per gli sviluppatori per controllare dinamicamente il comportamento dell'animazione durante l'esecuzione, rendendo ThorVG una delle librerie di riproduzione Lottie più potenti disponibili sul mercato. Elenco delle funzionalità implementate nella Wiki del progetto.
  • Ad oggi, l'estensione del file .lot è il nuovo standard ufficiale IANA per i file Lottie. ThorVG ora supporta ufficialmente .lot come formato standard per i file Lottie oltre all'estensione tradizionale .json.
  • Twining
    • È stata aggiunta la supporto per l'interpolazione tra fotogrammi chiave non linearmente adiacenti, garantendo transizioni più fluide e un controllo temporale più preciso. Questo miglioramento è particolarmente efficace quando si utilizza la riproduzione di animazioni basate sugli stati (nota 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 struttura temporale rigorosamente sequenziale, ha difficoltà a gestire tali scenari, il che porta spesso a bruschi salti o a transizioni imbarazzanti tra fotogrammi chiave incoerenti: video-dimostrazione 1, video-dimostrazione 2.
    • Con il tweening, gli sviluppatori possono ora eseguire l'interpolazione direttamente tra due singoli fotogrammi chiave, anche se non sono adiacenti linearmente sulla timeline. Questo 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-dimostrazione 1, video-dimostrazione 2.
  • Ora (come funzionalità sperimentale) è supportata la riscrittura dei valori delle variabili di espressione durante l'esecuzione, il che consente 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 le risorse Lottie, consentendo di creare variazioni personalizzate che vanno oltre il design originale.video dimostrativo).
  • Aggiunto un meccanismo di Asset Resolver personalizzabile, che offre maggiore flessibilità nel caricamento delle risorse esterne (ad esempio, immagini) a cui fanno riferimento le animazioni Lottie.
  • Supporto avanzato della funzione Lottie LayerEffect, che consente di effettuare miglioramenti visivi ricchi direttamente sui livelli di animazione con effetti descritti in precedenza.
  • Poiché alcuni effetti possono richiedere molte risorse, è stata proposta un'opzione per impostare qualità e prestazioni per il rendering degli effetti, ideale 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: applicazione di movimento casuale basato sul tempo.
    • pointOnPath: calcolo della 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.
  • Maggiore conformità alle specifiche:
    • TextFollowPath – 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 – nuova funzione che consente di controllare più precisamente l'influenza 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 originale. Questa funzionalità consente agli sviluppatori di selezionare e manipolare direttamente forme vettoriali specifiche nella scena SVG importata, ideale per scenari d'uso interattivi o dinamici (come design tematici, evidenziazione).
  • Supporto effetto sfocatura di Gauss.
• Rendering intelligente
  • Il motore grafico ThorVG ora supporta il rendering parziale intelligente, che garantisce flussi di lavoro di rendering più efficienti aggiornando solo le parti della scena vettoriale che sono cambiate. Grazie al tracciamento interno delle aree modificate, riduce al minimo i ridisegni non necessari e ottimizza le prestazioni complessive. Questa funzione offre vantaggi significativi in scenari come il rendering dell'interfaccia utente, strumenti di progettazione o applicazioni in cui gran parte della scena rimane statica, mentre solo piccoli elementi vengono aggiornati tra i fotogrammi. In questi casi, l'abbandono del rendering completo della scena può ridurre notevolmente il carico computazionale e migliorare l'efficienza energetica, un aspetto particolarmente importante per sistemi mobili e integrati.
  • Per raggiungere questo obiettivo, ThorVG 1.0 applica una combinazione di metodi algoritmici progettati specificamente per il rendering parziale. Di seguito sono riportate le principali strategie alla base di questo sistema:
    • Algoritmo di passaggio lineare: le forme vengono ordinate in base alle coordinate x e viene applicata una strategia di passaggio lineare per ridurre i controlli non necessari delle aree "sporche". Questo riduce la complessità da O(N × M) a O(N + M + K + N log N), dove N è il numero di forme, M è il numero di aree "sporche", K è il numero di sovrapposizioni reali.
    • Divisione e fusione condizionale: la suddivisione a grana fine delle sottoaree è bilanciata da una fusione intelligente per evitare la frammentazione. In questo caso, si dà priorità alla fusione orizzontale per un utilizzo più efficiente della cache di memoria.
    • Divisione spaziale (griglia predefinita 4×4): la superficie di rendering è suddivisa in 16 aree, consentendo di controllare solo le aree "sporche" corrispondenti delle forme, riducendo significativamente i costi nell'aggiornamento complesso dell'interfaccia utente.
  • Lavorando insieme, queste tecniche assicurano un rendering più fluido e veloce, specialmente nei sistemi embedded o nei sistemi in tempo reale, dove si verificano frequentemente aggiornamenti parziali. Maggiori dettagli saranno pubblicati in un post separato. blog.
  • Si prega di notare che nel caso di contenuti ad alta dinamicità, come giochi dinamici o animazioni a schermo intero, dove quasi tutti gli oggetti cambiano in ogni fotogramma, il rendering parziale offre pochi o nessun vantaggio in termini di prestazioni e può anche comportare un leggero sovraccarico. 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, dandovi la possibilità di scegliere l'approccio ottimale per il vostro caso d'uso. Potete analizzare le prestazioni del vostro prodotto e prendere una decisione informata 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 fluido nel browser.
  • I backend WebGL e WebGPU sono ora ufficialmente pronti per l'uso in produzione. Questi renderer basati su GPU offrono ora una completa compatibilità funzionale con il tradizionale backend CPU, supportando tutte le capacità 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 notevole miglioramento del rendering della grafica vettoriale web in tempo reale.
• Un significativo aumento delle prestazioni in ambienti con risorse limitate di CPU/GPU e in ambienti integrati.
  • ThorVG 1.0 offre prestazioni migliorate rispetto alla versione 0.15, con un notevole incremento sia per CPU che per GPU.
  • Ottimizzazioni chiave:
    • Maggiore efficienza del pipeline di rendering.
    • Riduzione dei costi di allocazione del buffer dei fotogrammi.
    • Analisi ottimizzata delle composizioni Lottie.
    • Rendering batch e caching GPU migliorati.
  • 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 volutamente non utilizzate. Nei test tipici sulla CPU, ThorVG mostra in media prestazioni superiori di 1,8 volte rispetto al noto motore di grafica vettoriale Skia nell'esecuzione di compiti tipici di visualizzazione vettoriale. Il vantaggio è particolarmente evidente in scenari con un utilizzo intensivo della geometria, come la visualizzazione di rettangoli, tratti, rotazioni e cerchi (screenshot 3).
• ThorVG Janitor
  • Una dimostrazione reale delle prestazioni di rendering di ThorVG è visibile nel progetto ThorVG Janitor – un gioco interattivo progettato per dimostrare le prestazioni della CPU sotto carico grafico elevato. La scena include centinaia di nemici creati con grafica basata su particelle, sfondi stellati multilivello con immagini raster a grandezza naturale, effetti visivi in tempo reale come DropShadow e Blur, e fino a 25000 oggetti renderizzati simultaneamente. Anche sotto carico massimo a risoluzione 2K (2048×1152), il progetto mostra prestazioni stabili superiori a 120 FPS, evidenziando l'efficienza e l'idoneità di ThorVG per ambienti complessi con numerosi effetti.video dimostrativo, screenshot).
• Altre modifiche significative
  • Esempio di integrazione di ThorVG in Godot. In questo video dimostrativo ThorVG è integrato in 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à durante l'esecuzione.
  • Aggiunto esempio didattico utilizzo di ThorVG WebCanvas.
  • Aggiunta di un'interfaccia interattiva ThorVG Playground.
  • Aggiunto un wrapper ThorVG per il linguaggio Swift: https://github.com/thorvg/thorvg.swift.
  • Gli esempi di utilizzo di ThorVG sono stati trasferiti in un repository separato https://github.com/thorvg/thorvg.example.
  • È stata pubblicata un'estensione thorvg.vscode per VSCode per creare, modificare e visualizzare le risorse ThorVG direttamente nell'ambiente di Visual Studio Code.
  • Nella versione 1.0 è stata effettuata una sostanziale ristrutturazione dell'API, mirata a migliorare le prestazioni, la facilità d'uso, la coerenza e la compatibilità con C.
  • È stata rimossa la supporto per il formato TVG Picture (TVG). Questa decisione è stata presa per preparare un nuovo formato ThorVG Picture, progettato tenendo conto dell'animazione come concetto principale.
  • Numerose correzioni di bug e miglioramenti della stabilità per un utilizzo in produzione.

Fonte: linux.org.ru