English | German | French | Mandarin

• Introduzione
• Iniziare con DirectX
• Sistema di coordinate
• Applicazione di Texture
• Spreading
• Fusione
• 3-D
• Depth-Buffering
• La GirlPower SoftImageTM Camera

Introduzione

DirectX è una tecnologia di Windows che offre grafica ad elevate prestazioni per personal computer. DirectX offre velocità consentendo l'accesso diretto al sofisticato hardware per rendering 3d delle schede grafiche di ultima generazione. vvvv è progettato per utilizzare almeno DirectX9.

vvvv offre generatori di forme che eseguono il rendering di oggetti grafici, come quadrati, griglie, linee, ecc; contiene anche i nodi per trasformare questi elementi grafici utilizzando le classiche trasformazioni di matrice (traslazione, scala, rotazione, modifica delle proporzioni, inversione e proiezione prospettica). Possono essere generate gerarchie di movimento complesse aggiungendo più nodi di trasformazione.

Le schede grafiche moderne sono state create con una forte attenzione al texture mapping, e vvvv dispone di funzionalità per la mappatura di immagini sui poligoni. Siccome i calcoli per la mappatura delle immagini vengono eseguiti dalla scheda grafica, vvvv gestisce molto velocemente gli oggetti grafici con texture.
vvvv è in grado di importare i formati standard per le immagini, come ad esempio BMP, JPEG, PNG. Le texture possono essere trasformate (ridimensionate, traslate, ecc.) nello stesso modo delle forme geometriche. Con la sua capacità di leggere i dati di trasparenza (alpha) dall'immagine, vvvv può utilizzare file di texture per creare maschere e canali alfa.

La modalità a schermo intero di DirectX essenzialmente assume il controllo della macchina, lasciando che generi l'output grafico alla più alta frequenza di fotogrammi possibile (frame rate). Questa modalità è progettata per essere eseguita senza alcuna interruzione o variazione - il movimento è sempre accurato e rappresentato esattamente in corrispondenza alla frequenza dei fotogrammi. Questo permette di ottenere i migliori risultati possibili, adattandosi al meglio alle applicazioni grafiche.

Gli oggetti (nodi) di vvvv possono accedere a funzioni low-level e parametri che offrono un controllo preciso sui circuiti hardware utilizzati per il rendering. vvvv è progettato per hardware specifico - alcune caratteristiche funzionano meglio con i componenti hardware di alcune schede grafiche. Questo può essere inusuale per gli utenti di programmi tradizionali, ma consente di ottenere rendering ad alte prestazioni, come nei giochi per computer di ultima generazione.

Iniziare con DirectX

Nell'esercitazione seguente vogliamo creare una semplice scena con il Renderer (EX9).

Innanzitutto, aprire una nuova patch:
Prima di tutto, abbiamo bisogno di un Renderer (EX9). Assicurarsi di aver creato la versione DX9 e non GDI o TTY. Il computer può non rispondere per alcuni secondi durante il caricamento di DirectX. Ora è apparsa una seconda finestra nera, intitolata "DirectX Renderer".

Quindi abbiamo bisogno di qualcosa di cui fare il rendering: selezioniamo Quad (DX9) dal menu.

Si noti che solo i nodi DX9 e EX9 appariranno nel Renderer (EX9): I sistemi di rendering GDI, SVG e DX11 sono indipendenti l'uno dall'altro e dal sistema di rendering DX9 – non è possibile mescolare e connettere sistemi di rendering diversi. Si può tuttavia usare i nodi GDITexture (EX9.Texture) o SVGTexture (EX9.Texture) per utilizzare il contenuto di una finestra GDI o SVG come una texture in una finestra DX9.

Il quadrato verrà visualizzato nel Renderer come un rettangolo bianco, mostrato con una dimensione e posizione predefinita. Per spostare gli oggetti saranno necessari uno o più nodi di trasformazione. Create un nodo Scale (Transform), un Translate (Transform), un Rotate (Transform), un Transform (Transform 2D) ed un Trapeze (Transform):

Collegare l'output del nodo Scale (Transform) al nodo Quad (DX9) e cambiare i valori dei pin di input X e Y del nodo Scale (Transform) . Vedrete la larghezza e l'altezza che verranno modificate. Ora eliminate il collegamento e vedrete il quad che torna alla posizione precedente.

Provate ora i nodi Translate (Transform) e Rotate (Transform). Si vedrà che è possibile spostare o ruotare il quad con questi nodi. Mentre sperimentate con i pin di input potreste chiedervi perché alcuni sembrano non funzionanti - questo è perché questi nodi lavorano fondamentalmente in 3D, ma noi non abbiamo ancora collegato una camera; per ora, quindi, ignorate questi pin di input e concentratevi sui pin che funzionano.

Collegate più nodi di trasformazione:

Che cosa vuol dire? È importante comprendere che si tratta di una sequenza di operazioni. Prima facciamo un ridimensionamento, quindi una traslazione, quindi una rotazione. Quando sperimenterete e ci penserete un po', noterete che la sequenza di solito è importante ed è importante fare le cose nella giusta sequenza.

Quindi provate il nodo Transform (Transform 2D):

Il nodo Transform (Transform 2D) dispone di tutti i parametri che sono necessari per lavorare in 2d. Questo nodo è semplicemente un collegamento per le operazioni più comuni. Così, se si desidera inserire un oggetto da qualche parte sul renderer, non dovrete usare singolarmente i nodi Scale (Transform), Rotate (Transform) e (Translate (Transform) )) - potrete fare tutte le trasformazioni 2d di base con il nodo Transform (Transform 2D).

C'è un'altra versione di questo nodo, chiamato Transform (Transform 3D) . Questo nodo ha molti più pin di input e consentirà di inserire l'oggetto in 3D. Ma aspettate, senza una camera non si ottiene il giusto effetto 3D.

Ora, è possibile provare il nodo Trapeze (Transform). Questo nodo deformerà il Quad (DX9) in un trapezio.

Ora rimuovete tutte le trasformazioni: perché questo nodo viene chiamato un quad (quadrato)? Si noterà che nell'immagine non c'è un quadrato: il nodo quad non disegna un quadrato, ma un rettangolo. Perché questo accade?

Sistema di coordinate

Per capirlo dobbiamo dare un'occhiata al sistema di coordinate del renderer:

L'area della finestra è rappresentabile con coordinate i cui valori spaziano da -1 a 1, per entrambe le dimensioni X e Y. L'origine di questo sistema di coordinate (0, 0) è quindi al centro della finestra.

Un quad standard ha la larghezza e l'altezza di 1 con il centro a (0, 0). Pertanto il quad si estende da -0.5 a + 0,5 su entrambe gli assi X e Y.

Ora ridimensionate la finestra del renderer in un rettangolo stretto e lungo

Si vedrà il quad dilatarsi, perché il sistema di coordinate si allunga allo stesso modo della finestra.

Le proporzioni del rendering dipendono dalla dimensione della finestra: se ridimensionate in una forma quadrata la finestra di rendering, anche il quad diventerà quadrato.

Ma come possiamo rendere il quad quadrato? Con il renderer in modalità finestra, windowed, è molto facile; ma quando si passa in modalità a schermo intero, il renderer avrà molto probabilmente il rapporto di formato 4:3 e quindi il quad non apparirà quadrato. Una soluzione a questo problema potrebbe essere quella di utilizzare un nodo Scale (Transform) sul quad. Provate: dopo aver ristabilito un rapporto di 4:3 per la finestra del renderer (come lo schermo di un normale computer), collegate un nodo Scale (Transform) al quad:

Le proporzioni della finestra di rendering sono 4: 3, quindi se ridimensioniamo l'oggetto in direzione X di 0,75 l'oggetto dovrebbe apparire quadrato.

Ma questo è noioso — applicare l'operazione di ridimensionamento ad ogni oggetto da renderizzare che abbiamo nella patch. La soluzione è quella di utilizzare il pin di trasformazione del renderer: se si connette il Transform (Transform 2d) al pin View Trasform del nodo Renderer (EX9), questo influenzerà tutti gli oggetti collegati al renderer; collegare un nodo di trasformazione al pin View Trasform è come collegare tanti nodi di trasformazione ad ognuno dei nodi collegati al renderer.

Abbastanza interessante, il quad sembra esattamente lo stesso di prima. Ma che cosa avviene dietro le quinte? Osservate il diagramma riportato di seguito: se colleghiamo il nodo Scale (Transform) al renderer, trasformiamo il sistema di coordinate. Il punto (x = 1, y = 1) che era precedentemente l'angolo in alto a sinistra nel diagramma del renderer è ora all'interno dell'area di visualizzazione.

Ora connettete un nodo Translate (Transform) al nodo Scale (Transform) : vedrete il quad muoversi. È possibile assimilare i nodi Scale (Transform) e Translate (Transform) connessi al pin Viewport come una basilare camera per la scena. Se connettete qualcosa a quel pin, non si sta modificando l'oggetto, ma la camera con la quale gli oggetti vengono visualizzati.

Vedere anche il video tutorial per informazioni sul sistema di assi (in inglese).

Applicazione di Texture

Armati di questi concetti astratti, ora metteremo un'immagine più interessante sullo schermo. Pulite prima la patch mantenendo il nodo Scale (Transform) collegato al renderer.

Quindi generiamo un nodo FileTexture (EX9.Texture) e connettiamolo al quad. Fare clic con il pulsante destro del mouse sul pin d'input FileName del nodo FileTexture (EX9.Texture) e selezioniamo un'immagine dal disco. Il nodo FileTexture (EX9.Texture) può caricare in memoria i file BMP o JPG, TIF e TGA — in questo esempio utilizzeremo il file "flower four.jpg" dalla cartella lib/assets/images.

Se desiderate creare le vostre texture, date un occhiata a HowTo Prepare Textures (Inglese).

Connettete un nodo di trasformazione al pin Texture Transform sul quad. Vedrete che è possibile utilizzare la trasformazione per spostare e ridurre l'immagine sul quad.

Allo stesso modo, è possibile eseguire lo zoom della texture verso l'esterno e avere più ripetizioni della texture sul quad. Impostare ScaleX e ScaleY a un valore come 5:

Successivamente, generate un nodo Address (EX9.SamplerState) e collegatelo al quad. La serie di nodi SamplerState controllano le proprietà del processo di texturing. Per impostare queste proprietà, basta collegare il SamplerState all'oggetto. Se si desidera applicare più parametri multipli, collegate diversi nodi SamplerState in serie.

Ora provate le diverse impostazioni del nodo Address (EX9.SamplerState) . Verranno visualizzati motivi diversi a seconda della modalità di mappatura:

Spreading

Naturalmente possiamo fare tutte le cose che abbiamo fatto con gli spreads anche per gli oggetti 3D. Ricreate la seguente patch:

Impostare lo SpreadCount del LinearSpread a 6 e giocate con i pin di input dell'nodo Translate (Transform). Si vedranno i quad spostarsi fuori dal centro.

Fusione

Notare che se più oggetti sono uno sopra l'altro, i loro colori vengono sommati, in modo simile a come sarebbero sovrapposte le immagini di più proiettori di diapositive. Questo è diverso dal sistema di rendering GDI, dove tutti gli oggetti si può dire che si ignorino reciprocamente.

Generate un nodo Blend (EX9.RenderState) e collegatelo al quad. (Assicurarsi di non selezionare la versione advanced del nodo). Con il pin d'input è possibile selezionare diversi metodi di fusione. Questi metodi sono simili alle operazioni sui livelli in programmi come Adobe Photoshop. Provare i diversi modi e selezionarne uno a piacere. La serie di nodi RenderState è simile alla serie di nodi SamplerState.

Un'altra opzione interessante è la possibilità di dare un colore al quad. L'effetto ottenuto è simile a mettere un filtro colorato su una lampada.

3-D

Fino ad ora non abbiamo davvero esplorato il 3D. Abbiamo incontrato vari pin che trattano i valori z, ma fino ad ora non hanno fatto davvero nulla di spettacolare. Abbiamo visto anche come utilizzare il pin ViewPort per modificare il nostro sistema di coordinate.

In questa sezione vogliamo esplorare come questo pin possa essere utilizzato per creare una vista prospettica. Il sistema di coordinate verrà ora distorta ancor più, ma questo ci permetterà una vista tridimensionale sulla nostra scena. Nel diagramma qui sotto è riportato un esempio di un tipico sistema di coordinate.

Creare un nodo Perspective (Transform). Questa è una trasformazione speciale che molto semplicemente implementa la funzione interna della prospettiva di una fotocamera:

Non appena si connette il nodo Perspective (Transform) vedremo la finestra diventare nera. Perché questo? È una semplice conseguenza della funzione base della camera: gli oggetti diventano più grandi quando sono più vicini. Non abbiamo ancora specificato una distanza tra gli oggetti e la camera. Quando abbiamo creato il nodo Perspective (Transform), abbiamo posizionato la camera proprio nel nostro oggetto. Pertanto l'oggetto è infinitamente grande e nulla viene mostrato.

Quindi, impostiamo una piccola distanza: inserite un nodo Translate (Transform) e impostate il pin Z su circa 1. Si noterà che, non appena si modifica il valore, che l'immagine riappare e cambiano le dimensioni. Questo succede perché spostiamo la camera nella nostra scena virtuale.

Provare a cambiare i valori dei nodi Rotate (Transform) e Translate (Transform) del quad; si vedrà gli oggetti che si spostano in uno spazio 3D.

A questo punto questa struttura è un po' noiosa in 3D, perchè è solo un semplice disco bidimensionale. Per rendere tutto più eccitante, inserite un nodo Rotate (Transform) tra Translate (Transform) e il quad. L'inserimento del nodo Rotate (Transform) in questa posizione implica che gli oggetti vengano ruotati dopo essere stati diffusi, spreaded, ruotati e trasformati.

Impostate a 0.3 il pin d'input X del nodo Rotate (Transform) che avete appena creato e vedrete i singoli quad ruotare.

Depth-Buffering

Qualcosa è sbagliato in questa immagine. Non è chiaro quali siano gli oggetti davanti e quali dietro. Ovviamente gli oggetti non si occludono reciprocamente nel modo aspettato.

Perché questo? Di solito in vvvv gli oggetti vengono disegnati nell'ordine in che cui sono collegati a un nodo Group (EX9). L'oggetto collegato al pin più a sinistra viene disegnato prima, un oggetto collegato al pin più a destra viene disegnato per ultimo e apparirà sopra a tutti gli altri.
Nel nostro esempio, la spread genera un tot di quad: le prime slices vengono disegnate per prime e le ultime per ultime. Purtroppo la nostra struttura costituisce un cerchio in cui non vengono distinti chiaramente fronte e retro, quindi gli oggetti disegnati per ultimi occludono le cose che dovrebbero essere visibili.

Per risolvere questo problema, c'è una tecnica denominata Depth Buffering, buffer di profondità. Per attivarlo, selezionare Renderer (EX9) e vedere i pin di input con un Inspektor. Notate i pin Windowed DepthBuffer e Fullscreen DepthBuffer: impostate il pin ad un valore diverso da None, attivando così il Depth Buffering. Il valore 16, 24, 32 nella scelta definisce la precisione del depthbuffer. Tipicamente sceglierete 24. Appena si attiva il Depth Buffering noterete che la gestione dell'occlusione sarà corretta.

L'oggetto è molto strano, ma è assolutamente plausibile.

La GirlPower SoftImageTM Camera

Il controllo della telecamera tende ad essere piuttosto complicato e certe volte probabilmente non volete programmare una fotocamera, ma piuttosto trattare con gli oggetti che state creando. Pertanto viene fornito un modulo, che è simile al controllo della telecamera nel programma di modellazione 3d SoftImage.

Per utilizzare questo modulo, è sufficiente creare un nuovo nodo facendo doppio clic nella patch e selezionando Camera (Transform Softimage) dall'elenco.

Per controllare la camera è necessario premere alcuni tasti e trascinare il mouse allo stesso tempo.
Sono implementati i seguenti comandi:

Potrebbe essere interessante includere la patch "modules\AxisAndGrids.v4p" al vostro progetto. Questa consentirà altri 2 comandi utili con la tastiera :