2010. január 30., szombat

Tao Start 01 - Hello Triangle

Már régen írtam bejegyzést az OpenGL topikba. Ennek elsődleges oka az volt, hogy a saját OpenGL tutoriálomat C#-ban az OpenTK v1.0 változatával szerettem volna elkezdeni. De sajnos még mindig béta állapotban van a kedvenc wrapper-em. A türelem rózsát terem, tudom. Kivárjuk. Addig is itt egy rövid igazi kezdőknek szóló Tao tutorial.


TaoGL kezdeti lépések

Első lépésként le kell tölteni és telepíteni kell a gépünkre a Tao Framework-öt. Nyugalom, next-next-finish az egész. A telepítés során minden szükséges Tao könyvtár a gépünkre kerül úgy, ahogy a Windows szereti (bekerülnek a GAC-ba, Global Assembly Cache) vagyis nem nekünk kell a libeket keresgélni, hanem azok fognak minket megtalálni. Következő lépésként indítsuk el a Visual Studio-t és készítsünk egy új Windows Application projektet. Miután megadtuk projekt nevét és helyét, nyomjuk meg az OK gombot.


A Tao tartalmaz egy speciális windows kontrollt aminek a segítségével megjeleníthetjük az OpenGL által készített grafikákat. Ahhoz, hogy ezt megtegyük, ezt a kontrollt hozzá kell adni a VS Toolbox paneljéhez.


A Tao telepítőprogram elég ügyes, de nem annyira amennyire szeretnénk. Ugyanis kézzel kell hozzáadni az OpenGL kontrollt a Toolbox-hoz.


Jobb klikk a meglévő eszközök közül bármelyikre és válasszuk ki a "Choose Item"-et a contex menüből. Keressük ki a .Net komponensek közül a SimpleOpenGLControl nevű elemet, majd nyomjunk OK-t. Ha nem találnánk meg a kontrollt akkor valószínűleg hiba csúszott a telepítésbe, próbáljuk újra.


Most húzzuk az új SimpleOpenGLControlt a Form1-re. Drag&Drop! Menni fog, nyugi!

A form-on megjelenő kis fekete négyzet lesz az a felület ahol az OpenGL varázslatos dolgai elkápráztatják majd a szemünket. Első ránézésre, de még másodikra sem tűnik nagynak. Ez nem túl kellemes dolog, ezért azonnal méretezzük át.


A kontroll Dock tulajdonságánál válasszuk ki a középső elemet, vagyis a kontroll töltse ki teljesen a rendelkezésére álló teret (Fill). Ha most lefordítanánk az alkalmazásunkat, hibaüzenetet kapnánk: "No device or rendering context available". Nyugalom, semmi pánik. Ez a normális! Mindjárt kijavítjuk a „hibát”.


Ennyi elég is volt a klikkelgetésből, ideje már programozni!. Irány a Solution Explorer és jobb klikk a Form1-en majd View Code. Végre kiélhetjük kreativitásunkat és programozhatunk. A névterekhez adjuk hozzá a using Tao.OpenGl sort, majd a Form1-et nevezzük át MainForm-ra és a konstruktorában hívjuk meg az OpenGL kontroll példányának (kis fekete doboz a form-on) InitializeContexts() metódusát. Ezzel kötjük össze valójában az OpenGL-et a Windows ablakkezelő rendszerével. Ha most fordítjuk le a programot, akkor a hibaüzenet eltűnik és egy szép fekete átméretezhető ablakocskát kapunk.


Ahhoz, hogy tudjunk valamit rajzolni, bele kell piszkálnunk a MainForm Paint() metódusába. Ez egyszerűbb, mint gondolnánk, csak klikk az OpenGL kontrollon majd a Properties panelon klikkeljünk a kis sárga villámra. Ilyenkor a kontrollhoz tartozó eseményeket láthatjuk, itt keressük meg a Paint eseményt majd határozott dupla klikk és máris kész a simpleOpenGlControl_Paint rajzoló eseménye. Ide helyezhetjük el saját rajzoló utasításainkat. Ez a metódus kerül meghívásra mindig, amikor az ablak vagy a programozó úgy nem gondolja, hogy rajzolásra van szükség. De hogyan is rajzolhatunk?
A Tao Framework tartalmaz a Gl statikus osztályt, ami az összes OpenGL utasítást elérhetővé teszi. Ahhoz, hogy valóban jó OpenGL programokat készítsünk, ezt az osztályt kell egészen közelről megismernünk. Saját alkalmazásunkban célszerű az OpenGL hívásokat összefogni és egy vagy két osztályban csoportosítani, mert így könnyedén portolhatjuk kódunkat DirectX-alá is, ha úgy hozza kedvünk. Az egységbezárás mindig követendő elv.
A következő példában a „Hello Word” OpenGL-es változatát készítjük el, kirajzolunk egy háromszöget. Először is piros színűre állítjuk a háttérszínt:

Gl.glClearColor(1.0f, 0.0f, 0.0f, 1.0f)

A parancs a piros szín RGBA komponenseit várja, amik 0 és 1 között változhatnak (float). Ilyenkor még nem történik meg semmi sem, a megadott színnel valóban törölni kell a szín puffert:

Gl.glClear(Gl.GL_COLOR_BUFFER_BIT)

Ha most fordítjuk le az alkalmazást, akkor már nem fekete, hanem piros a kontrollunk. Király. Az OpenGL-ben minden objektumot koordinátákkal tudunk megadni. Alapértelmezésként a kontroll bal alsó sarkának a koordinátája -1,-1 míg a jobb felsőé 1,1. A koordináta-rendszer nulla pontja tehát a kontroll közepén helyezkedik el.


Miután ismerjük a vonatkoztatási rendszert máris definiálhatjuk a háromszögünket. Egy háromszögnek három csúcspontja van, a csúcspontokat vertex-eknek nevezik. Vertexet az OpenGL glVertex2d parancsával definiálhatunk. A glVertex parancs végén lévő 2d utótag jelzi a számunkra, hogy kétdimenziós double pontosságú vertexet adunk meg. Ezen felül még létezik számos más pontábrázolás is. Tehát a háromszöget kirajzoló sorozat:

Gl.glBegin(Gl.GL_TRIANGLES);
Gl.glVertex2d(-1, -1);
Gl.glVertex2d( 0,  1);
Gl.glVertex2d(+1, -1);
Gl.glEnd()

Az OpenGl-nek a glBegin(GL_TRIANGLES) paranccsal mondjuk meg, hogy háromszöget akarunk rajzolni. A glEnd() paranccsal pedig a rajzolás végét jelezzük felé. A Begin és End parancsok között elhelyezkedő vertex-ekre fogja értelmezni az OpenGL a GL_TRIANGLES kapcsolót. A rajzolás eredménye itt látható:


Ezzel készen is lennénk. A teljes forrás itt olvasható:

 public partial class MainForm : Form
 {
     public MainForm()
     {
         InitializeComponent();
         {
             this.ClientSize = new Size(800, 600);
             this.Text = "TaoGL - Hello Triangle";
             this.glControl.InitializeContexts();
             this.Focus();
         }
     }

     private void glControl_Paint(object sender, PaintEventArgs e)
     {
         Gl.glClearColor(1.0f, 0.0f, 0.0f, 1.0f);
         Gl.glClear(Gl.GL_COLOR_BUFFER_BIT);

         Gl.glBegin(Gl.GL_TRIANGLES);
         {
             Gl.glVertex2d(-1, -1);
             Gl.glVertex2d( 0, +1);
             Gl.glVertex2d(+1, -1);
         }
         Gl.glEnd();
     }
 }

A példa teljes forrása pedig itt tölthető le:


Később folytatjuk...

0 megjegyzés :

Megjegyzés küldése