Creazione ed Evoluzione di un Framework - pycon.it · Creazione ed Evoluzione di un Framework ......
Transcript of Creazione ed Evoluzione di un Framework - pycon.it · Creazione ed Evoluzione di un Framework ......
www.nivigroup.com
Creazione ed Evoluzione di un Framework
per Interfacce Grafiche Multi-Touch con OpenGL
Tiziano Carotti - Firenze 07/04/2017
2
R&D Software Engineer @ Quantic Research - Nivi Group
• Coordinamento attività R&D
• Progettazione e sviluppo nuove funzionalità per i prodotti core business aziendali
• Definizione dei processi di sviluppo del software
CHI SONO
3
Cos’è QGE?
Framework per interfacce interattive multi-touch realizzate mediante accelerazione grafica su tecnologia OpenGL
• Costruito per trattare molteplici flussi di dati asincroni contemporanei
• Rappresentazioni efficaci delle informazioni
• Alta qualità di rendering delle interfacce
• Basso Time To Market dei prodotti in rapporto alla qualità finale
QGE
4
Quando nasce e perchè?
Inizio degli studi di fattibilità: Gennaio 2015.Prima alpha: Maggio 2015.
• Rappresentare interfacce grafiche con elementi dinamici ed interattivi mediante accelerazione tramite GPU.
• Pensato per il mercato enterprise con attenzione particolare alle performance del processamento di molti dati.
QGE
10
• Game engine più focalizzati sulla renderizzazione della scena centrale che delle interfacce a contorno
• Necessità di un’attenzione specifica sulla rappresentazioni di elementi 2D soprattutto per forme e testi.
• Necessità di ottime performance nel trattare interfacce complesse e ricche di dati.
• Necessità di un livello elevato di astrazione dei componenti grafici per ridurre la complessità del codice degli applicativi
QGE - ANALISI
11
Kivy - https://kivy.org/
• Architettura non abbastanza sofisticata
• No budget di tempi in fase di caricamento delle risorse
• Troppa libertà lasciata agli sviluppatori con ripercussioni sulle performance di esecuzione
• Poca qualità e performance nella gestione dei testi e delle forme di base
QGE - ANALISIANALISI SU FRAMEWORK ESISTENTI
12
Qt - https://www.qt.io/
• Ottimo framework per interfacce 2D
• Una gestione del multi-touch non molto avanzata per gestire casi complessi
• Poca flessibilità per creare effetti grafici personalizzati oltre i paradigmi definiti. Ad esempio post-processing OpenGL tramite rendering multi passo su Framebuffer separati.
QGE - ANALISI
13
Progettazione from scratch
• Studio delle architetture di rendering engine moderni
• Studio dei principi di disegno di interfacce grafiche
• Studio dei meccanismi moderni di anti-aliasing
• Studio delle interazioni degli utenti su grandi superfici multi-touch con interfacce complesse
QGE - ANALISI
14
Ambito Enterprise permette di realizzare soluzioni su hardware selezionato
• OpenGL 4.5
• Bindless Texture
• Direct State Access API
• Asynchronous Buffer Transfers
• Scelta di utilizzare un solo vendor (NVIDIA) di schede video per ridurre al minimo problemi di implementazione dei driver
• Multipiattaforma Windows/Linux
QGE - ANALISI
15
Rendering in gamma lineare massima qualità di composizione di elementi testuali e gradienti
Correzione di gamma:
• Codificare le informazioni sulla lumi-nanza o sul colore (RGB)
• Inizialmente implementata per bilanciare la risposta non lineare degli schermi CRT
• Utilizzata per codificare i canali RGB in 8 bit mantenendo un uniforme variazione di luminosità percepita dall’occhio umano medio
QGE - RENDERING
16
• Differenze di gradienti
• Coppie di gradienti realizzati dagli stessi colori di partenza
• Sopra Interpolazione in gamma lineare
• Sotto Interpolazione in gamma corretta
QGE - RENDERING
Immagine da https://github.com/johnnovak/johnnovak.site
17
Immagine da https://github.com/johnnovak/johnnovak.site
QGE - RENDERING
Blending in gamma lineare Blending con correzione di gamma
18
QGE - RENDERING
• Composizione di colori (blending) con correzione di gamma provoca colori in uscita non voluti soprattutto con trasparenze e gradienti.
• I moderni videogiochi effettuano oramai composizione in gamma lineare per avere massima accuratezza ad esempio nelle luci.
• Abilitando la gamma lineare si deve utilizzare un framebuffer a 16 o 32 bit per canale più memoria.
• I colori e le texture vanno linearizzati più computazione lato GPU e CPU
19
L’anti-aliasing RGB del testo permette di aumentare la risoluzione a disposizione soprattutto in caso di glifi piccoli ma dipende dalla gamma lineare.
Linux composizione con correzione di gamma → frange di colori marcate nell’output grafico prodotto.
Microsoft (ClearType), Apple (Core Text) composizione in gamma lineare -------- qualità visiva ottimale dei glifi
Schermi con bassi DPI esagerano il problema.
QGE - RENDERING
20
Gestione di grandi superfici con controlli annidati può diventare complessa.La risoluzione dei conflitti non deve essere lasciata allo sviluppatore.
Esempio: Slider orizzontale dentro una lista verticale.
• Entrambi definiscono una gesture Drag- Approccio semplice → dare precedenza a quello disegnato per ultimo
Se la lista si popola di slider non si riesce a trovare un punto dove scorrerla
- Approccio corretto se il drag è verticale va alla lista altrimenti agli sliderL’interazione dell’utente risulta più naturale
Che succede se l’utente mette più di un dito sulla lista?Potrebbero scatenarsi più gesture
QGE - MULTI-TOUCH
21
Risoluzione del problema
API di alto livello che permette agli elementi grafici di registrarsi su un elenco predefinito di gesture di alto livello specificandone i parametri (es. direzione)
Engine centralizzato di regole per decidere a quale elemento grafico inviare le gesture:
• Disambiguazione di gesture su componenti innestati
• Raggruppamento di più tocchi sugli stessi elementi
• Calcolo preciso delle componenti di trasformazione in caso di manipolazione a più di un dito (pinch, rotate e pan)
QGE - MULTI-TOUCH
22
Goal iniziali ambiziosi, ma team di sviluppo poco numeroso: 2 persone
Approccio di implementazione ibrido (basso e alto livello):
• Core di funzionalità a basso livello implementato in C++
• API di alto livello e sottosistemi periferici prototipati in Python
• Analisi dei bottleneck sui prototipi per decidere quali sottosistemi necessitano il passaggio ad un’implementazione in puro C++ o un ibrido C++ / Python attraverso Cython
QGE - SVILUPPO
23
Perchè Python?
• Applicazioni che gestiscono molteplici flussi dati da sistemi eterogenei → con Python ottima flessibilità e varietà di librerie di interpretazione formato dati con poche linee di codice
• Le applicazioni devono solo occuparsi di interpretare i formati dati e orchestrare logicamente le schermate ed i pannelli.
• Tutte le logiche di upload sulla GPU e ottimizzazione sono effettuate in background dal QGE.
QGE - SVILUPPO
24
Componenti critiche asincrone interne al framework in puro C++, a causa del problema col GIL di Python sul multithreading.
• Caricamento e processamento delle risorse immagini al fine di prepararle per upload sulla GPU.
• Caricamento e gestione di thread per la decodifica video e upload asincrono sulla GPU.
• Produzione layout, geometrie e glifi per elementi testuali.
• Eliminazione delle geometrie fuori dallo schermo o rese non visibili da maschere di ritaglio.
QGE - SVILUPPO
25
Applicazioni con componenti asincrone usano multiprocessing con delle astrazioni già implementate dal framework per casi d’uso ricorrenti.
Realizzate librerie ad-hoc basate su QGE per gestire processamento dati da:
• Chiamare REST
• WebSocket
• Redis
Manipolazione dei dati su processo esterno per evitare di rallentare il thread di disegno.
LAVORARE CON QGE
26
LAVORARE CON QGEWorkflow di esempio di gestione chiamata REST e aggiornamento dell’interfaccia
1. Richiesta
2. Dispatching
3. Richiesta HTTP
5. Dispatching
6. Invio risultato
7. Creazione/ Aggiornamento Interfaccia
4. Risposta HTTP
QGEProcesso Principale
QGEProcesso Secondario
Controller
Vista Grafica
Servizio Rest
Worker Rest
API Rest esterna
27
LAVORARE CON QGE
3. Invio risultato
2. Dispatching
1. Invio di un nuovo messaggio
4. Creazione/ Aggiornamento Interfaccia
QGEProcesso Principale
QGEProcesso Secondario
Controller
Vista Grafica
Servizio REDIS
Worker REDIS
Server REDIS
Workflow di esempio di gestione ricezione messaggio da canale asincrono su tecnologia REDIS.
30
• Due linguaggi dati di alto livello utilizzati:
- QGML - Approccio simile all’HTML per definire gerarchie di elementi grafici arbitrariamente complesse
- CSS - Compliant in parte con CSS, con alcune funzionalità aggiuntive personalizzate
• Il team di grafici può partecipare attivamente allo sviluppo delle applicazioni
• Realizzazione di stub veloci che poi possono essere utilizzati dagli sviluppatori
QGE - DESIGN DELLE INTERFACCE
33
• Componenti del QGE che interpretano QGML e CSS utilizzano librerie python per il parsing del formato dati:
- lxml per il parsing della sintassi XML
- tinycss per il parsing della sintassi CSS
• Tutti gli asset QGML e CSS sono caricati all’avvio ed indicizzati dai loro sottosistemi
• Massimizzazione delle performance in fase di utilizzo a run-time
QGE - DESIGN DELLE INTERFACCE
34
Sviluppati all’interno dei singoli progetti come contenuto centrale Esempi:
• Visualizzatori CAD interattivi
• Mappe vettoriali con gestione allarmi
• Scene 3D
Solitamente composti da:
• Chiamate OpenGL a basso livello per caricamento e rendering di geometrie
• Modello di camera della scena con supporto a gesture multi-touch
• Effetti avanzati di post processing e antialiasing
COMPONENTI SPECIALI
35
In Python sono anche sviluppati molti degli strumenti di ausilio agli sviluppatori e grafici:
• Processatore degli asset grafici in fase di rilascio del software
• Inspector dell’interfaccia con visualizzazione gerarchia e proprietà di stile dei singoli elementi (simile ai DOM inspector dei browser)
• Creatore di pacchetti di installazione automatici
• Editor di mappe vettoriali per personalizzare layer e stili grafici
STRUMENTI A SUPPORTO DELLO SVILUPPO
36
Standardizzazione di alcuni effetti di post processing delle interfacce utilizzati in molti progetti come ad esempio il Blur
Espansione delle primitive di disegno vettoriale per dare sempre maggiore potenza alle capacità di disegno
Introdurre un Designer delle interfacce di tipo grafico che produce XML e CSS attraverso drag & drop di elementi (stile QtCreator)
SVILUPPI FUTURI
37
Game Engine Architecture Jason Gregory - 2009
OpenGL Insights Patrick Cozzi, Christophe Riccio - 2012
Approaching Zero Driver Overhead Cass Everitt, Graham Sellers, John McDonald, Tim Foley - GDC 2015
Doing Math with RGB (and A) Jim Van Verth - GDC 2015
High Quality 2D Font Renderer Nicolas P. Rougier - Journal of Computer Graphics Techniques 2013
Uncharted 2: HDR Lighting John Hable - GDC 2010
A Screen-Space Formulation for 2D and 3D Direct Manipulation Jason L. Reisman, Philip L. Davidson, Jefferson Y. Han - UIST 2009
RIFERIMENTI