11. diel - XNA tvorba v 3D - vykreslenie trojuholníka

Zatiaľ sa na tomto servri objavovali len návody s 2D grafikou v XNA. Pre vykreslenie bola používaná SpriteBatch. Hoci sa to nezdá aj SpriteBatch vlastne pracuje v 3D. Grafická karta ani inak pracovať nedokáže. Ale to je iný príbeh. Skúsime si na takú primitívnu SpriteBatch zahrať. Najprv si skúsime vykresliť trojuholník s farbami. Len by som rád podotkol, že všetko o čom tu píšem som iba vypozoroval a mnohokrát sa len myslím že to tak asi funguje. Ak by to tak nebolo, prosím dajte mi vedieť, vďaka. Ako východiskový bod budem používať tento tutoriál, nie je to nič iné ako čistý XNA projekt, jediné čo som v ňom zmenil je že som všade umázl SpriteBatch.

Základné vecí, ktorú je potrebné poznať a pochopiť, sú takzvané vertexy. Vertex nie je nič iného (alebo ja ho tak aspoň chápem) než bod. Body sa neskôr dajú spájať do trojuholníkov a tie nám grafická karta vykreslí. Vertexy nám v XNA reprezentujú triedy Vertex* kde si za hviezdičku dosadíte čo aké jednotlivé zložky obsahujú, napríklad triedy VertexPositionColor (obsahuje pozíciu vertexu a jeho farbu) a alebo VertexPositionColorTexture (pozícia, farba, súradnice pre textúru). Možností je nám ponúkané veľa. Pre začiatok nám vystačí obyčajný VertexPositionColor. Vytvoríme teda pole tohto typu:

VertexPositionColor[] vert;

A v metóde Intialize ho inicalizujeme a naplníme nejakými hodnotami:

vert = new VertexPositionColor[3];
vert[0] = new VertexPositionColor(new Vector3(0,0,0), Color.Red);
vert[1] = new VertexPositionColor(new Vector3(10,10,0), Color.Green);
vert[2] = new VertexPositionColor(new Vector3(20,0,0), Color.Blue);

Tu je dobré poznamenať, že hodnoty musia byť zoradené v určitom poradí a to v smere hodinových ručičiek. Prečo? O tom zas niekedy inokedy. Ďalej si vytvoríme premennú effect. A opäť v metóde Initialize ju nastavíme:

effect = new BasicEffect(GraphicsDevice);

Bolo by asi dobré povedať k čomu BasicEffect je. Jedným slovom by sa dalo povedať že to je shader. Čo je to shader? To je akýsi predpis pre grafickú kartu ako má pri vykresľovaní postupovať. Pre začiatočníkov to je dosť nepriehľadná a mýty opradená záhada, ale ako časom uvidíte, shadery sú našimi kamarátmi a bez nich sa pri tvorbe pokročilých grafických efektov nezaobídeme. BasicEffect je základným shadery, ktorý je súčasťou XNA. Dovedie obslúžiť základné vykreslenie a pár jednoduchých efektov ako treba hmla. Shader ako taký je potrebné nastaviť. Prakticky každý obsahuje 3 matice. World, View a Projection. Tieto matice určujú ako bude náš objekt vykreslený. Matica World umiestňuje objekt do sveta. Posúva s ním, rotuje ním, mení jeho mierka. Matica View určuje parametre kamery. Odkiaľ a kam sa pozerá. A posledná matica Projection nám udáva ako má byť všetko vykreslené na obrazovku. Nastavme si teda opäť v metóde Initialize tieto základné matice. Budú potrebné len dve, lebo nebudeme s našim objektom nijako manipulovať:

effect.View = Matrix.CreateLookAt(new Vector3(20, 0, 20), new Vector3(10,10,0)
, Vector3.Up);
effect.Projection = Matrix.CreatePerspectiveFieldOfView(MathHelper.PiOver2, GraphicsDevice.DisplayMode.AspectRatio, 1, 1000);

Naša kamera sa pozerá z miesta (20,0,20) do bodu (10,10,0) a tiež sme nastavili vykresľovanie na obyčajnú perspektívu. Teraz máme všetko pripravené a môžeme sa konečne vrhnúť na vykreslenie. Budeme teda teraz pracovať v metóde Draw. Prvá vec, čo sa v tejto metóde odohráva, je vyčistenie obrazovky na moju celkom obľúbenú modrú farbu (aj keď skôr preferujem Orandžová, ale niekedy je vidieť túto farbu dosť pozitívna správa, obzvlášť ak sa pohybujete vo väčšom projekte). Dôležité je všetko teraz písať POD tento riadok, inak neuvidíte zhola nič, pretože všetko vykreslené bude hneď premaľované na modro. Najprv je nutné poslať náš shader do grafickej karty a to sa postará tento Radecek:

effect.CurrentTechnique.Passes[0].Apply();

Čo sú to techniky a tak ďalej nie je zatiaľ pre nás dôležité. Hlavné je, že teraz máme všetko pre vykreslenie pripravené. Budete mi musieť veriť. Samotné vykreslenie má na starosti tento Radecek:

GraphicsDevice.DrawUserPrimitives<VertexPositionColor>(PrimitiveType.TriangleStrip, vert, 0, 1);

Ten pošle nami nadefinované vertexy do grafickej karty a urobí z nich jeden trojuholník a ten vykreslí s pomocou nahraného shader. PrimitiveType je enum, ktorý nám určuje, ako má vertexy pospájať. Vert nie je nič iné ako naše polia. 0 je offset alebo ak je určenie začiatku v našom poli a jednička je počet v tomto prípade trojuholníkov, ktoré sa budú vykresľovať. Tu je dôležité nepliesť si to s počtom vertexov, je to častá chyba. Teraz je všetko na svojich miestach. Ak program spustíte, mali by ste vidieť niečo ako je na nasledujúcom obrázku:

Že nevidíte? Áno nevidíte. Váš trojuholník je biely a môj hrá farbami. Prečo to tak je? Na to si každý skúste prísť sami. Napovieme, že chýba niečo u nastavenia shader. Ale ak ste leniví to hľadať, tak pozrite do kódu, ktorý je u článku.

A na záver pár pojmov ktoré by ste sa mali naučiť ak to mienite vážne:

• Vertex - jedná sa o akýsi bod v 3D priestore, sám o sebe význam nemá, je to taky vrchol nejakého útvaru.
• Shader - hovorí grafickej karte ako má dané vertexy vykresliť
• Matica - maticami je celé 3D prešpikované a vôbec počítačová grafika sa bez nich nezaobíde, najlepšie je naštudovať si ich z nejakej učebnice matematiky V našom prípade sa jedná o matice 4x4.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.