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

5

Infografiche interattive ed elementi di interfaccia manipolabiliQGE

6

Elementi grafici di controllo di strumentazioni remote QGE

7

Geolocalizzazione delle informazioniQGE

8

Layer di visualizzazione elaboratiQGE

9

Navigazione grafica di informazioni complesseQGE

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.

28

LAVORARE CON QGEEsempio di chiamata asincrona per caricare dati ed aggiornare la vista

29

LAVORARE CON QGEEsempio di implementazione gestures su un oggetto grafico del QGE

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

31

QGE - DESIGN DELLE INTERFACCEEsempio di definizione di un pannello di login con QGML e CSS

32

QGE - DESIGN DELLE INTERFACCERisultato Finale

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

www.nivigroup.com PRES PYTHON IT 04 17© 2017 NiviGroup S.p.A. All rights reserved.