XNA

WPF e il 3D (quinta parte)

Leonardo — Tue, 07 Apr 2009 23:06:32 GMT

Dopo aver acquisito manualità con triangoli e quadrati nello spazio 3D è giunto il momento di creare una geometria che renda finalmente “giustizia” al 3D, costruiremo un cubo e aggiungeremo al nostro programma la possibilità di navigare all’interno dello spazio tridimensionale ingrandendo/rimpicciolendo e ruotando la scena col mouse.

Costruiamo un Cubo

Come visto nel precedente articolo per costruire un quadrato occorrono 2 triangoli, in un cubo sono presenti 6 quadrati (uno per ogni faccia) ma non serviranno 6x4=24 punti distinti ma solamente 8 punti visto che molti punti saranno condivisi da più facce.

Di seguito uno schema dei punti essenziali necessari per costruire il nostro cubo:

Ogni faccia necessiterà di due triangoli come evidenziato nella seguente immagine:

Come per il singolo quadrato basterà inserire tutti i punti univoci nella collezione Positions e inserire gli indici per creare i triangoli desiderati uno dopo l’altro. WPF ogni 3 indici creerà un triangolo (in XNA questa modalità di disegno in cui ogni gruppo di tre vertici definisce un triangolo è detta TriangleList).

Volendo centrare la base del cubo nell’origine i punti univoci sono:

Positions
0	(0.5, 0, 0.5)
1	(0.5, 1, 0.5)
2	(-0.5, 1, 0.5)
3	(-0.5, 0, 0.5)
4	(0.5, 0, -0.5)
5	(0.5, 1, -0.5)
6	(-0.5, 1, -0.5)
7	( -0.5, 0, -0.5)

Gli indici dei triangoli invece sono rappresentati dalla seguente tabella:

TriangleIndices
Index	Value	Index	Value	Index	Value
0	0	12	1	24	6
1	1	13	5	25	7
2	3	14	2	26	2
3	1	15	5	27	3
4	2	16	6	28	2
5	3	17	2	29	7
6	5	18	5	30	4
7	1	19	4	31	0
8	0	20	7	32	3
9	4	21	6	33	7
10	5	22	5	34	4
11	0	23	7	35	3
Ogni triangolo nella tabella ha un colore diverso e la tabella è suddivisa in 3 colonne per visualizzare i 12 triangoli necessari per rappresentare i 6 quadrati costituenti le facce del cubo

Il codice XAML per creare il modello 3D (di materiale rosso) sarà dunque:

Aggiungendo il codice al programma visto negli articoli precedenti avremmo il nostro Cubo 3D renderizzato nella nostra applicazione.

Aggiungiamo il supporto alla navigazione delle nostre scene 3D

Per rendere maggiormente accattivante la sensazione di profondità della scena è necessario aggiungere il supporto alla “personalizzazione” della telecamera da parte dell’utente per poter visualizzare come meglio crede gli oggetti 3D. Per aggiungere questa funzionalità in modo rapido ed efficace utilizzeremo la libreria open-source (creata da Microsoft) 3D Tools for the Windows Presentation Foundation che fornisce utili classi per estendere il supporto 3D di WPF.

Dopo aver scaricato la libreria in formato binario dal sito CodePlex all’indirizzo http://www.codeplex.com/3DTools procediamo ad aggiungere un riferimento nel file nostro progetto tramite il menù Project/Add reference/Browse e indicando il file 3DTools.dll scaricato.

Per poter usare nella nostra applicazione la libreria dovremmo aggiungere un namespace come evidenziato dalla prima riga cerchiata in rosso nel codice (sotto).
Per aggiungere la funzionalità di navigazione 3D basterà ora decorare il controllo ViewPort3D col TrackballDecorator fornito dai 3D Tools.

Il risultato è immediato e avviando l’applicazione sarà possibile ruotare il cubo tenendo premuto il tasto sinistro del mouse e ingrandire/rimpicciolire trascinando avanti e indietro il mouse tenendo il tasto destro premuto.

Scarica il codice sorgente dell’articolo

Nel prossimo articolo vedremo come “dipingere” sul cubo ed entreremo nelle problematiche relative all’applicazione di più materiali ad un singolo GeometryModel3D. Queste conoscenze ci torneranno utili per colorare di diversi colori ogni faccia e costruire una riproduzione fedele del Cubo di Rubiks.

WPF e il 3D (quarta parte)

Leonardo — Sun, 05 Apr 2009 16:05:02 GMT

Indice degli articoli su WPF e il 3D

Dopo aver visto alcuni concetti fondamentali passiamo alla costruzione di geometrie più complicate per realizzare applicazioni più interessanti.

Il nostro scopo finale è costruire un Cubo di Rubiks che può essere visto come un insieme di 27 cubi ma abbiamo scoperto negli articoli precedenti che l’elemento base del 3D è il triangolo. Vedremo in questo articolo come costruire attraverso dei triangoli dei quadrati che ci serviranno per realizzare dei cubi con cui realizzeremo il nostro progetto.

Costruiamo un Quadrato

Per poter creare un quadrato occorrono due triangoli (come abbiamo visto l’elemento fondamentale della grafica 3D è il triangolo), per ogni triangolo servono 3 punti quindi in tutto dovrebbero servire 6 punti ma effettivamente i punti distinti sono solo 4 come mostrato nella seguente schematizzazione:

Come possiamo allora non ripetere i punti (0,0,0) e (1,1,0) per ogni triangolo e definirli invece una sola volta risparmiando memoria?

Per fare questo basta definire tutti i punti “essenziali” in una lista (chiamata in XNA “Vertex Buffer” mentre in WPF è rappresentata dalla proprietà Positions) e definire i vari triangoli facendo riferimento alla posizione nella lista tramite una lista di indici (chiamata in XNA “Index Buffer” mentre in WPF è rappresentata dalla proprietà TriangleIndices).

Nella proprietà Positions, che è di fatto una collezione di punti Point3D, basterà inserire i punti univoci per tutta la geometria

	Positions (Vertex Buffer)
0	(0,0,0)
1	(1,0,0)
2	(1,1,0)
3	(0,1,0)

mentre nella proprietà TriangleIndices, che è di fatto una collezione di indici interi, bisognerà definire i triangoli veri e propri facendo riferimento alla posizione dei punti nella proprietà Positions

TriangleIndices (Index Buffer)
0	0
1	1
2	2
3	0
4	2
5	3

Nella tabella le righe colorate in blu serviranno a definire il triangolo blu mentre quelle colorate in rosso definiranno il triangolo rosso. Definendo entrambi i triangoli si costruisce di fatto un quadrato.

Ricordiamo che l’ordine in cui si definiscono i punti è molto importante per via del Back-face Culling visto nella prima parte.

Adesso proviamo a mettere insieme quello che abbiamo visto tramite un po' di codice XAML:

Definiamo la nostra geometria all’interno di un GeometryModel3D che permette di specificare oltre alla geometria vera e propria altre proprietà come il materiale (in questo caso è stato scelto un DiffuseMaterial o materiale uniforme rosso).

Inseriamo ora il nostro GeometryModel3D all’interno del contenuto del ModelVisual3D del nostro Viewport assieme ad una telecamera e ad una luce come visto nell’articolo precedente per visualizzare il tutto.

Aggiungendo il quarto punto e gli indici dei triangoli al programma sviluppato nella parte precedente abbiamo visualizzato un quadrato (tutto rosso poiché il Materiale della geometria 3D è impostato al colore rosso). Visual Studio 2008 permette di ottenere un anteprima in tempo reale delle geometrie descritte tramite XAML.

Scarica il codice sorgente dell’articolo

WPF e il 3D (seconda parte)

Leonardo — Thu, 08 Jan 2009 01:50:47 GMT

Indice degli articoli su WPF e il 3D

Prima di addentrarci nella realizzazione del nostro Cubo di Rubiks tridimensionale diamo uno sguardo alle basi del 3D partendo dalla creazione di triangoli nello spazio con WPF.

Precedentemente abbiamo detto che i punti, nel sistema di coordinate 3D, sono rappresentati da strutture di tipo Point3D.

Per poter utilizzare le classi e le strutture relative al 3D nel nostro codice dobbiamo assicurarci di aver definito il namespace System.Windows.Media.Media3D tramite l’istruzione using:

Creare un punto e definirne le coordinate (di tipo double) è semplice grazie al costruttore della struttura Point3D:

NB: Il punto verrà solamente creato in memoria ma non sarà visualizzato

Costruiamo un Triangolo

Per poter definire un triangolo occorrono 3 punti, un insieme di punti è rappresentato dalla collezione ordinata Point3DCollection (in XNA si usano array di Vertici).

Per creare un triangolo rettangolo definiamo i punti (1,0,0), (1,1,0) e (0,0,0):

E’ possibile farlo attraverso il seguente codice C#:

o sfruttando una sintassi più compatta e meno prolissa è possibile scrivere:

E’ possibile migliorare ulteriormente tale codice indicando nel costruttore della classe Point3DCollection la capacità iniziale corrispondente al numero dei nostri punti (in questo caso 3). Eviteremo di ridimensionare la collezione mano a mano che aggiungiamo punti rendendo più efficiente il nostro codice.

NB: Questa piccola ottimizzazione è valida in generale per la maggior parte delle collezioni (anche per i Generics) ed è maggiormente “tangibile” all’interno di cicli eseguiti molte volte.

E’ anche possibile definire i punti direttamente nello XAML (nell’esempio i punti sono definiti come risorsa dalla chiave “triangle”)

WPF e Back-face Culling

L’ordine di aggiunta dei punti è particolarmente importante perché permette a WPF di determinare correttamente le superfici visibili tramite il Back-face culling. In parole povere le superfici visibili dall’osservatore (nelle immagini seguenti una telecamera) sono quelle create in senso antiorario mentre quelle create in senso orario restano nascoste.

Per chiarire questi concetto proviamo ad immaginare un triangolo con scritto davanti “Front” e dietro “Back”. Creandolo in senso antiorario otterremmo il risultato aspettato e la faccia “Back” non sarà visibile dalla telecamera perché sul retro del triangolo.

La faccia “Front” del triangolo è visibile frontalmente dalla telecamera perché creata in senso antiorario.

La faccia “Back” del triangolo rappresenta il retro del triangolo e non è visibile dalla telecamera.

Creando invece il triangolo in senso orario indicheremo a WPF che la faccia con la scritta “Back” è quella frontale e quella con la scritta “Front” è quella sul retro.

UPDATE: E' disponibile il laboratorio per questo articolo (Richiede Internet Explorer e il supporto applicazioni XBAP abilitato, per abilitarlo andare su Opzioni/Sicurezza/Livello Personalizzato/Applicazioni browser XAML e scegliere Chiedi conferma).

Vedremo nella prossima parte come visualizzare il triangolo e altri oggetti 3D nella nostra applicazione

WPF e il 3D (prima parte)

Leonardo — Sun, 28 Dec 2008 23:30:09 GMT

Indice degli articoli su WPF e il 3D

Una delle grandi novità del .NET Framework 3.0 è Windows Presentation Foundation (WPF).

Inizialmente usato da pochi coraggiosi programmatori, con l'avvento del .NET Framework 3.5 e del successivo SP1 è diventato un ambiente più maturo ed imparare ad utilizzarlo sta diventando un must se non si vuole perdere il “treno della tecnologia”.

Vedremo in questa serie di articoli come e quando utilizzare le sue capacità grafiche 3D sviluppando passo passo un cubo di Rubiks programmabile in 3D.

Halo 4 in WPF?

Il supporto grafico 3D di WPF non è pensato per videogiochi all’ultimo grido o per altri programmi che fanno pesantemente uso di grafica tridimensionale, sebbene sia basato su DirectX e si avantaggi dell’accelerazione grafica delle recenti schede video.
Per creare videogiochi con codice gestito (come C#) è possibile utilizzare XNA, un buon punto di partenza per impararlo è il sito XnaLearners, negli articoli saranno comunque evidenziate le differenze tra WPF e XNA per facilitare la “transizione” da un framework all’altro.
Con WPF è possibile creare visualizzazioni tridimensionali come grafici e modelli di oggetti/prodotti per rendere più usabile e accattivante il proprio programma.

In principio furono… i triangoli!

Alla base di tutti i modelli tridimensionali (anche i più complessi) ci sono solamente triangoli. Una sfera ad esempio è formata solamente da triangoli, più triangoli ci sono e più la sfera è definita.


Sfera con pochi triangoli	Sfera con molti triangoli

NB: Esistono diverse tecniche per “far sembrare” più definito un modello composto da pochi triangoli (Texture Mapping, Bump mapping, etc..).

Sistema di coordinate 3D di WPF

Per poter definire i triangoli occorrono dei punti che hanno determinate coordinate, il sistema di riferimento per i punti nello spazio tridimensionale (a differenza del sistema di riferimento bidimensionale) è mostrato dalla seguente figura:

I punti sono formalmente oggetti di tipo Point3D che contengono le coordinate X,Y e Z, in XNA i punti sono chiamati Vertici (Vertex) e possono essere rappresentati dal tipo Vector3.