Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 11 - XNA tvorba ve 3D - vykreslení trojúhelníku

V minulé lekci, XNA tvorba ve 3D - Model podruhé, jsme si náš model přenesli do herního enginu.

Zatím se na tomto servru objevovaly jen návody s 2D grafikou v XNA. Pro vykreslení byla používána SpriteBatch. Ač se to nezdá i SpriteBatch vlastně pracuje ve 3D. Grafická karta ani jinak pracovat nedovede. Ale to je jiný příběh. Zkusíme si na takovou primitivní SpriteBatch zahrát. Prvně si zkusíme vykreslit trojúhelník s barvami. Jen bych rád podotknul, že vše o čem tady píši jsem pouze vypozoroval a mnohdy se jen domnívám že to tak asi funguje. Pokud by to tak nebylo, prosím dejte mi vědět, díky. Jako výchozí bod budu používat tento tutoriál, není to nic jiného než čistý XNA projekt, jediné co jsem v něm změnil je že jsem všade umázl SpriteBatch.

Základní věcí, kterou je potřeba poznat a pochopit, jsou takzvané vertexy. Vertex není nic jiného (nebo já jej tak alespoň chápu) než bod. Body se posléze dají spojovat do trojúhelníků a ty nám grafická karta vykreslí. Vertexy nám v XNA reprezentují třídy Vertex* kde si za hvězdičku dosadíte co jaké jednotlivé složky obsahují, kupříkladu třídy VertexPositionColor (obsahuje pozici vertexu a jeho barvu) a nebo VertexPositionColorTexture (pozice, barva, souřadnice pro texturu). Možností je nám nabízeno mnoho. Pro začátek nám vystačí obyčejný VertexPositionColor. Vytvoříme tedy pole tohoto typu:

VertexPositionColor[] vert;

A v metodě Intialize jej inicalizujeme a naplníme nějaký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);
Rozměry trojúhelníku - Základy 3D grafiky a tvorba enginu

Zde je dobré poznamenat, že hodnoty musí být seřazeny v určitém pořadí a to po směru hodinových ručiček. Proč? O tom zas někdy jindy. Dále si vytvoříme proměnnou effect. A opět v metodě Initialize ji nastavíme:

effect = new BasicEffect(GraphicsDevice);

Bylo by asi dobré říci k čemu BasicEffect je. Jedním slovem by se dalo říci že to je shader. Co je to shader? To je jakýsi předpis pro grafickou kartu jak má při vykreslování postupovat. Pro začátečníky to je dost neprůhledná a mýty opředená záhada, ale jak časem uvidíte, shadery jsou našimi kamarády a bez nich se při tvorbě pokročilých grafických efektů neobejdeme. BasicEffect je základním shaderem, který je součástí XNA. Dovede obsloužit základní vykreslení a pár snadných efektů jako je třeba mlha. Shader jako takový je potřeba nastavit. Prakticky každý obsahuje 3 matice. World, View a Projection. Tyto matice určují jak bude náš objekt vykreslen. Matice World umisťuje objekt do světa. Posouvá s ním, rotuje jím, mění jeho měřítko. Matice View určuje parametry kamery. Odkud a kam se dívá. A poslední matice Projection nám udává jak má být vše vykresleno na obrazovku. Nastavme si tedy opět v metodě Initialize tyto základní matice. Budou potřeba jen dvě, neboť nebudeme s našim objektem nijak manipulovat:

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še kamera se dívá z místa (20,0,20) do bodu (10,10,0) a také jsme nastavili vykreslování na obyčejnou perspektivu. Nyní máme vše připraveno a můžeme se konečně vrhnout na vykreslení. Budeme tedy nyní pracovat v metodě Draw. První věc, co se v této metodě odehrává, je vyčištění obrazovky na mou docela oblíbenou modrou barvu (i když spíš preferuju orandžovou, ale někdy je vidět tuto barvu dost pozitivní zpráva, obzvláště pokud se pohybujete ve větším projektu). Důležité je vše nyní psát POD tento řádek, jinak neuvidíte zhola nic, protože vše vykreslené bude hned přemalováno na modro. Nejprve je nutné poslat náš shader do grafické karty a to se postará tento řádeček:

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

Co jsou to techniky a tak dále není zatím pro nás důležité. Hlavní je, že nyní máme vše pro vykreslení připraveno. Budete mi muset věřit. Samotné vykreslení má na starosti tento řádeček:

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

Ten pošle námi nadefinované vertexy do grafické karty a udělá z nich jeden troúhelník a ten vykreslí s pomocí nahraného shaderu. PrimitiveType je enum, který nám určuje, jak má vertexy pospojovat. Vert není nic jiného než naše pole. 0 je offset nebo-li určení začátku v našem poli a jednička je počet v tomto případě trojúhelníků, které se budou vykreslovat. Zde je důležité neplést si to s počtem vertexů, je to častá chyba. Nyní je vše na svých místech. Pokud program spustíte, měli byste vidět něco jako je na následujícím obrázku:

Pěkně barený trojúhelník v XNA 3D - Základy 3D grafiky a tvorba enginu

Že nevidíte? Ano nevidíte. Váš trojúhelník je bílý a můj hraje barvami. Proč to tak je? Na to si každý zkuste přijít sami. Napovím, že chybí něco u nastavení shaderu. Ale pokud jste líní to hledat, tak podívejte do kódu, který je u článku.

A na závěr pár pojmů které byste se měli naučit pokud to míníte vážně:

  • Vertex – jedná se o jakýsi bod ve 3D prostoru, sám o sobě význam nemá, je to taky vrchol nějakého útvaru.
  • Shader – říká grafické kartě jak má dané vertexy vykreslit
  • Matice – maticemi je celé 3D prošpikováno a vůbec počítačová grafika se bez nich neobejde, nejlepší je nastudovat si je z nějaké učebnice matematiky :-) V našem případě se jedná o matice 4x4.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 418x (47.39 kB)
Aplikace je včetně zdrojových kódů v jazyce C#

 

Předchozí článek
XNA tvorba ve 3D - Model podruhé
Všechny články v sekci
Základy 3D grafiky a tvorba enginu
Článek pro vás napsal vodacek
Avatar
Uživatelské hodnocení:
3 hlasů
Vodáček dělá že umí C#, naplno se již pět let angažuje v projektu ŽvB. Nyní studuje na FEI Upa informatiku, ikdyž si připadá spíš na ekonomice. Není mu také cizí PHP a SQL. Naopak cizí mu je Java a Python.
Aktivity