11. díl - XNA tvorba ve 3D - vykreslení trojúhelníku

C# .NET XNA game studio 3D grafika XNA tvorba ve 3D - vykreslení trojúhelníku

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

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

Ž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.

 

Stáhnout

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

 

  Aktivity (1)

Článek pro vás napsal vodacek
Avatar
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.

Jak se ti líbí článek?
Celkem (3 hlasů) :
4.666674.666674.666674.666674.66667


 


Miniatura
Všechny články v sekci
Základy 3D grafiky a tvorba enginu
Miniatura
Následující článek
Částicový systém v XNA

 

 

Komentáře

Avatar
Petr Nymsa
Redaktor
Avatar
Petr Nymsa:

Pokud dovolíš kritiku. Tutoriál mě přijde takový napůl hotový. Nebylo by špatné třeba i popsat Vector3. Trochu popsat fungování 3D prostoru, souřadnice. S Vertexy máš pravdu. Nepracoval jsem s nimi sice jako programátor ale jako "grafik". Přesněji řečeno hokus pokud v Blenderu. Celkově to není špatný článek, ale občas se mi nezdálo jeho pojetí :)

Odpovědět 1.12.2012 21:52
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
vodacek
Redaktor
Avatar
vodacek:

Kritizujte to byl taky jeden z důvodů proč sem to sepsal. :) Ano pojetí je mírně netradiční a je to tak schválně. Líbit se všem nemusí to mi bylo jasný už když jsem to psal. Všechny návody začínají touto hutnou teorií (prostory, transformace, souřadnicové systémy...) bez které to asi opravdu nejde ano opravdu je to tak. Většinu lidí ale toto odradí, což mi příde škoda. (sám sem tydle kapitoly přeskakoval a pak se k nim zpětně vracel) Snažil sem se taky navázat na to co tady již je :) a taky aby to nebylo moc násilné. Jestli se mi to povedlo a nebo taky třeba ne musíte posoudit vy, čtenáři ;)

 
Odpovědět 1.12.2012 22:05
Avatar
David Jančík [sczdavos]:

Přesně to jsem potřeboval! Líbí se mi tvůj způsob výkladu.
Spíš, než položit otázku a pak na ní odpovědět, že se to dozvíme později "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" by bylo lepší odpověď zjednodušit nebo nepokládat otázku proč to tak je. Já jsem hrozně zvídaví a pak mě to odvádí k hledání odpovědi.
Jakožto čtenář, který se chce do této problematiky zasvětit bych ocenil občas nějaké poznámky (tipy) - co si mám vyzkoušet, co je dobré atd. Možná i nějaké dovysvětlení, jak si představit rozložení jednotlivých prvků a pozicovat tak například kameru.
Co se kompozice textu týče, já mám takový zlozvyk, že čtu mezi řádky a zaměřuji se na to tučné a pak si z toho skládám zbytek, abych to měl rychleji přečtené. Což si myslím, že dělá více čtenářů. Dát důležité termíny nebo klíčová slova tučně.

Jinak skvělá práce, těším se na další díl! :)

Odpovědět  +1 1.12.2012 23:21
Čím více času dostaneš, tím méně ho máš.
Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

Je super, že se našel někdo, kdo rozumí XNA na vyšší úrovni :) Článek je pěkný, jen bych o vertexu mluvíl spíše jako o vrcholu než o bodu. Když jsem zkoušel něco s 3D grafikou, měl jsem problém s importem modelů, plánuješ o tom také něco napsat?

Odpovědět 2.12.2012 11:21
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
vodacek
Redaktor
Avatar
vodacek:

No to se teprve uvidí, možná tomu rozumím a možná si žiju jen ve vlastním světě a ve skutečnosti tomu je jinak (smutná zkušenost autora). Modely ano, není to nic těžkého:) ale opět myjí svůj čas, nic by se nemělo uspěchat, je to ale lákavé ale je dobré mít potuchy jak to asi funguje

 
Odpovědět  +1 2.12.2012 11:44
Avatar
Michael Olšavský:

Promiň za blbou otázku, ale kde je začátek vektoru? Ty tam nastavujes hodnoty 0, 10, 0, 0, 20... A ono se to vykresli do stredu! Vlastne ty hodnoty js pochopil, jen nevim kde je zacatek pozice.

 
Odpovědět 11.2.2013 21:45
Avatar
vodacek
Redaktor
Avatar
Odpovídá na Michael Olšavský
vodacek:

on je vektor takovej dvojatej, jednou je to jen bod v prostoru (to je nyní) jednou je to vektor jako takový s počátkem v [0,0,0] to je ve výpočtech a jindy je to barva kdy jednotlivé složky jsou RGB :-) Je to mírně matoucí ze začátku je to jedna třída pro všecko se ale pak pozdějc docela i hodí

 
Odpovědět 11.2.2013 21:51
Avatar
Michael Olšavský:

Ted jaem si procetl ctvrty tutorial o souradnicovem systemu a jestli jsem to spravne pochopil, zacatek je ve stredu, ale zalezi i na nastaveni pohledu

 
Odpovědět 11.2.2013 21:52
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 8 zpráv z 8.