Számítógépes grafika, PPKE-ITK, Benedek Csaba, 2010 Grafikus szoftver alrendszer, OpenGL alapok 1. előadás (2.rész)

Az előadások a következő témára: "Számítógépes grafika, PPKE-ITK, Benedek Csaba, 2010 Grafikus szoftver alrendszer, OpenGL alapok 1. előadás (2.rész)"— Előadás másolata:

1 Számítógépes grafika, PPKE-ITK, Benedek Csaba, 2010 Grafikus szoftver alrendszer, OpenGL alapok 1. előadás (2.rész)

2 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Kitenkintő MTA SZTAKI Elosztott Események Elemzése Kutatócsoport http://web.eee.sztaki.hu/ Önálló labor, TDK témák képfeldolgozás + grafika témákban…

3 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Önlab, tdk… Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba videofelügyelet

4 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba önlab, tdk… Távérzékelés

5 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Épületek és változásaik detekciója changed, new or demolished building unchanged building Budapest aerial image 2008 ® András Görög Budapest aerial image 2005 ® András Görög Beijing Quickbird image 2002 ® Liama CAS András Görög Beijing Quickbird image 2003 ® Liama CAS András Görög

6 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Vissza a grafikához!

7 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Interaktív program struktúra billentyűzet botkormány egér alkalmazásmegjelenítő

8 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Programvezérelt vs eseményvezérelt programozás

9 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Interaktív program struktúra

10 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba 2D grafikus rendszerek (funkcionális modell) Kép frissités rasztertár Pixel műveletek Raszteri- záció Vágás Világ- képtér Modellezési transzf. Világ- lokális mod. Képtér- világ Eszköz- képtér Virtuális világ T V -1 T M -1 TVTV TMTM Kurzor (xp, yp) Kimeneti csővezeték Bemeneti csővezeték Eszköz koord. (xe, ye) kamera

11 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Grafikus hardver illesztése, programozása Grafikus könyvtárak A grafikus hardver szolgáltatásait ezen keresztül lehet elérni Hierarchikus rétegek, szabványosított interfészek Fő irányelvek: eszközfüggetlenség rajzolási állapot 2-D példák: Ablak, menü, egér: Win32 API Rajzolás: Ms-Windows GDI, GDI+, DirectDraw 3-D példák: OpenGL (platformfüggetlen), DirectX (csak MS-Windows)

12 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba OpenGL Értelmező szótár: Open = hardver és szoftver platform független GL = Graphics Language Szül: 1992 Silicon Graphics (SG), GL néven OpenGL: közös specifikáció SG, IBM, Intel, MS stb Elérhetőség: Futtatható verzió Windows operációs rendszer része Ingyenes fejlesztői verzió Végfelhasználói verzió: videokártya gyártók illesztő programjaiban implementált Szintaxis: gl{FunctionName}, pl glClearColor()

13 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba GLU (OpenGL Utilities) OpenGL-hez kapcsolódó szabványos kiegészítő csomag Pl: hasznos programozást könnyítő rutinok transzformációs mátrixok beállítására, felületek teszcellációjára Szintaxis: glu{FunctionName}, pl gluPerspective()

14 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba DirectX OpenGL alternatívája Számítógépes játékok többsége ezt használja a színtér megjelenítésére Csak Windows platformon használható, Windows XP-től kezdve az operációs rendszer szerves része C++, C#, VB stb támogatja az API szintű programozását

15 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba OpenGL vs DirectX Összehasonlítás: állandó vitaforrás Melyik a gyorsabb - ez sokszor a gyártók által implementált illesztő programtól függ. Melyik az egyszerűbben kezelhető – felhasználó és alkalmazás függő Tények: OpenGL platformfüggetlen, DirectX nem Számítógépes játékok 90%-a DirectX-t használ DOOM III-at OpenGL-ben írták

16 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Mit NE várjunk el az OpenGL-től? Az OpenGL NEM geometriai modellező rendszer bemeneti eszközkezelő, ablakozó interaktív rajzoló vagy grafikus rendszer Viszont IGEN alkalmas különböző modellező, rajzoló rendszerek grafikai igényeinek a kielégítésére

17 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Alkalmazás: OpenGL „csak” megjelenítést támogat, kell hozzá ablakozó, eseménykezelő rendszer Az OpenGL platformfüggetlen, de az alkalmazás ettől még nem! billentyűzet botkormány egér alkalmazásmegjelenítő Eseménykezelés: „operációs rendszer” pl Ms-Windows vagy XWindow Ablakozás: „operációs rendszer” pl Ms- Windows vagy XWindow 3-D grafikus ábrázolás: OpenGL

18 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Ablakkezelés Windows-ban (részlet) //------------------------------------------------------------------- void InitWindowClass( HANDLE hInstance, HANDLE hPrevInstance ) { //------------------------------------------------------------------- WNDCLASS wndclass; strcpy(szClassName, "grafika"); if ( !hPrevInstance ) { wndclass.style = CS_HREDRAW | CS_VREDRAW; wndclass.lpfnWndProc = WndProc; // ablakkezel˝o f¨uggv´eny wndclass.hInstance = hInstance; // program azonos´ıt´o wndclass.hIcon = LoadIcon( hInstance, IDI_APPLICATION ); wndclass.hCursor = LoadCursor( NULL, IDC_ARROW ); wndclass.hbrBackground = GetStockObject( WHITE_BRUSH ); wndclass.lpszMenuName = "windowsmenu"; // men¨un´ev az er˝oforr´as f´ajlban wndclass.lpszClassName = szClassName; // oszt´alyn´ev wndclass.cbClsExtra = 0; wndclass.cbWndExtra = 0; if ( !RegisterClass( &wndclass ) ) exit( -1 ); } //------------------------------------------------------------------- void InitWindow( HANDLE hInstance, int nCmdShow ) { //------------------------------------------------------------------- HWND hwnd = CreateWindow( szClassName, WS_OVERLAPPEDWINDOW, CW_USEDEFAULT, CW_USEDEFAULT, CW_USEDEFAULT, CW_USEDEFAULT, NULL, NULL, hInstance, NULL ); if ( ! hwnd ) exit( -1 ); ShowWindow(hwnd, nCmdShow ); // ablak megjelen´ıt´ese UpdateWindow( hwnd ); // ´erv´enytelen´ıt´es } // egy Windows program itt indul int PASCAL WinMain( HANDLE hInstance, HANDLE hPrevInstance, LPSTR lpszCmdLine, int nCmdShow ) { //------------------------------------------------------------------- InitWindowClass(hInstance, hPrevInstance); InitWindow( hInstance, nCmdShow ); AppStart( ); return 0; }

19 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba GLUT= OpenGL Utility Toolkit platformfüggetlen eseménykezelés és ablakozás egyszerű inteface használja az MS-Windows vagy XWindow rutinokat, de erről az alkalmazás nem kell, hogy tudjon csak kis méretű, egyszerű programok megírására alkalmas  Laboron ezt fogjuk használni!

20 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Input/Output kezelés OpenGL MS-Window Alkalmazás OpenGL XWindow Alkalmazás DirectX MS-Window Alkalmazás OpenGL MS-Window v. XWindow Alkalmazás GLUT

21 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba GLUT jellemzői egyszerre több ablak callback függvény alapú eseménykezelés időzítő (timer) üresjárat (idle) kezelés számos előre definiált tömör és drótváz test (pl teáskanna = glutWireTeapot() parancs) egyszerű menük

22 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Input/Output kezelés Operating system Windows GLUT main DisplayFunc KeyboadFunc IdleFunc OpenGL grafikus hardver applikáció init. callback regisztráció callback-ek SpecialFunc Reshape MousePress MouseMotion

23 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba GLUT-OpenGL OpenGL: kimeneti csővezeték tesszelláció (GLU), transzformáció, vágás, pick! raszterizáció GLUT Op. Rendszer, Ablakozó rendszer illesztés ablak létrehozás bemeneti események elkapása

24 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba glX, wglglu Ablakozó – OpenGL – alkalmazás elhelyezkedése hw applikáció gl GLUT X v. MS-Win Ablak-kezelés widgetek Ablakozó- gl híd Utility-k, tesszellátorok Window menedzsment

25 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba OpenGL szintaxis glVertex3dv( … ) Paraméterszám 2 - (x, y) 3 - (x, y, z), (R, G, B) 4 - (x, y, z, h) (R, G, B, A) Adattípus b - byte ub - unsigned byte s - short i - int f - float d - double Vektor vagy skalár v - vektor - skalár gl könyvtár része

26 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Veremkezelés Állapotváltozók („rajzolási állapot” elv) tárolása veremben glPushAttrib(): kurrens állapotváltozók elmentése az aktuális veremben glPopAttrib(): a verem tetején lévő változók visszatöltése

27 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba OpenGL: GLUT inicializálás #include #include // download!!! main( int argc, char *argv[] ) { glutInitWindowSize(200, 200); glutInitWindowPosition(100, 100); glutInit(&argc, argv); glutInitDisplayMode( GLUT_RGB ); glutCreateWindow("Sample Window"); // callback függvények glutKeyboardFunc( Keyboard ); glutDisplayFunc( ReDraw ); // transzformáció glViewport(0, 0, 200, 200); glMatrixMode(GL_MODELVIEW); glLoadIdentity( ); glMatrixMode(GL_PROJECTION); glLoadIdentity( ); gluOrtho2D(0., 100., 0., 100.); // fő hurok glutMainLoop(); } windowviewport (0,0) (100,100) (0,0) (200,200) KeyPress WM_KEYDOWN Expose WM_PAINT

28 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba GLUT: eseménykezelés main( int argc, char *argv[] ) { … glutKeyboardFunc( Keyboard ); glutDisplayFunc( ReDraw ); glutMouseFunc( MousePress ); glutMotionFunc( MouseMotion );…… } void Keyboard(unsigned char key, int x, int y) { if (key == ‘d’) myPressedKey_d(x, y); } void ReDraw( ) { glClearColor(0.0, 0.0, 0.0, 0.0); glClear(GL_COLOR_BUFFER_BIT); myRender( ); } void MousePress( int button, int state, int x, int y ) { if (button == GLUT_LEFT && state == GLUT_DOWN) myMouseLD(x, y); } void MouseMotion( int x, int y ) { myMouseMov(x, y); }

29 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Vetítés (párhuzamos) void gluOrtho2D(GLdouble left, GLdouble right, GLdouble bottom, GLdouble top); Koordinátarendzser definíciója: left, right: bal- és jobboldali vágási sík (az ablak pixel koordinátáiban, ami a bal felső sarokhoz viszonyít) bottom, top: alsó és felső vágási sík window 0 200 100 0 gluOrtho2D(.0,200.0,100.0,.0)

30 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Rajzolás az OpenGL-ben ablak törlése geometriai objektumok rajzolása raszteres objektumok rajzolása

31 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Ablak törlése void glClearColor(GLclampf red, GLclampf green, GLclampf blue, GLclampf alpha); háttérszín beállítása színkomponensek: [0 1] intervallumon belül void glClear(GLbitfield mask); GL_COLOR_BUFFER_BIT színpuffer GL_DEPTH_BUFFER_BIT mélységpuffer (lásd később...) GL_ACCUM_BUFFER_BIT gyűjtőpuffer (lk...) GL_STENCIL_BUFFER_BIT stencilpuffer (lk...)

32 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba A rajzolás befejezéséne kikényszerítése Teljes megjelenítési lánc: a rajzolási parancs és az objektum megjelenés között a kirajzolás késhet... void glFlush() kikényszeríti a korábban kiadott OpenGL parancsok azonnali végrehajtását

33 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Geometriai alapelemek megadása Csúcspont = vertex void glVertex[234]{sifd}(TYPE coords); void glVertex[234]{sifd}v(const TYPE* coords); Példák: glVertex2s(2, 3); glVertex3d(0.0, 0.0, 3.1415926535898); glVertex4f(2.3, 1.0, -2.2, 2.0); GLdouble dvect[3] = {5.0, 9.0, 1992.0}; glVertex3dv(dvect); glBegin() és glEnd() között kell kiadni

34 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Normálvektor void glNormal3{bsidf}(TYPE nx, TYPE ny, TYPE nz); void glNormal3{bsidf}v(const TYPE *v); Adott (3D) pontban megjelenítendő felület normálvektora Árnyalási, megvilágítási feladatokhoz szükséges Felületek közelítése poligonokkal: csúcsponthoz a pontban találkozó lapok normálisának átlagát rendeljük – így az élek nem fognak látszani

35 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Geometriai alapelemek Csúcspontok -> pont, szakasz, poligon Téglalap: külön függvény (mert gyalkori) void glRect{sifd}(TYPE x1, TYPE y1, TYPE x2, TYPE y2); void glRect{sifd}v(const TYPE *v1, const TYPE *v2);

36 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Geometriai alapelemek Poligon: zárt törött vonallal határolt KONVEX terület csak egyszerű (nem lyukas) alakzatok mindig síkbeli tetszőleges felület = háromszögek egyesítése Nem egyszerű poligon helyett általában a konvex burok jelenik meg:

37 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Geometriai alapelemek felsorolása Geometriai elemek felsorolása: glBegin() és glEnd() parancsok között void glBegin(GLenum mode); void glEnd(void); „mode” adja meg az alapelem típusát, pl háromszög rajzolás példa: glBegin(GL_TRIANGLES); glVertex2d(10.0, 10.0); glVertex2d(20.0, 100.0); glVertex2d(90.0, 30.0); glEnd( );

38 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba OpenGL: primitívek GL_POINTS GL_LINES GL_LINE_STRIP GL_LINE_LOOP GL_POLYGON GL_TRIANGLE_STRIP GL_TRIANGLES GL_TRIANGLE_FAN GL_QUADS GL_QUAD_STRIP p3p3 p2p2 p1p1 p3p3 p2p2 p1p1 p4p4 p3p3 p2p2 p1p1 p4p4 p5p5

39 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Eseménykezelés és rajzolás void ReDraw( ) { glClearColor(0, 0, 0, 0); glClear(GL_COLOR_BUFFER_BIT); } void Keyboard(unsigned char key, int x, int y) { if (key == ‘d’) { glColor3d( 0.0, 1.0, 0.0 ); glBegin(GL_TRIANGLES); glVertex2d(10.0, 10.0); glVertex2d(20.0, 100.0); glVertex2d(90.0, 30.0); glEnd( ); glFlush( ); } (100,100) (0,0) (200,200) (0,0) window viewport

40 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Primitívek rajzolása A glBegin() és glEnd() között kiadható még: szín glColor*() normális: glNormal*() textúra: glTexCoord*() lásd később... stb

41 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Geometriai alapelemek megjelenését befolyásoló tényezők void glPointSize(GLfloat size); pontot reprezentáló pixeltömb mérete void glLineWidth(GLfloat width); szakasz szélessége

42 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Szaggatott szakaszok Szaggatottság be-kikapcsolása glEnable(GL_LINE_STIPPLE); glDisable(GL_LINE_STIPPLE); void glLineStipple(GLint factor, GLushort pattern); szaggatottság egységének (factor) és mintájának (pattern) beállítása

43 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Szín megadása void glColor3{bsifdu}(TYPE r, TYPE g, TYPE b) void glColor3{bsifdu} (TYPE r, TYPE g, TYPE b, TYPE a) void glColor{3,4} {bsifdu}(const TYPE *v)

44 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Árnyalás void glShadeModel(GLenum mode); mode GL_FLAT: a teljes objektumot egy meghatározott csúcspont színével színezi ki. A kiválasztott csúcspont objektumtípusonként változik, pl törött vonal esetén a végpont, GL_POLYGON esetén az első csúcspont GL_SMOOTH a csúcspontok színéből lineárisan interpolálja a belső pontok színét

45 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Gouroud árnyalás

46 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Flat vs. smooth árnyalás

47 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Egyéb alapvető GLUT funciók: Mintaobjektumok rajzolása teszteléshez: void glutSolidTeapot(GLdouble size); void glutWireTeapot(GLdouble size);

48 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Mintaobjektumok rajzolása teszteléshez void glutSolidCube(GLdouble size); void glutWireCube(GLdouble size); void glutSolidIcosahedron(void); void glutWireIcosahedron(void); void glutSolidTetrahedron(void); void glutWireTetrahedron(void); Stb…

49 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Egyéb alapvető GLUT funciók: Menükezelés int glutCreateMenu(void (*func)(int value)); Létrehoz egy új menüt (vagy almenüt) Callback függvényt regisztrál a menühöz Visszatérési érték: egyedi azonosító A program aktuális menüjének az új menüt állítja void glutAddMenuEntry(char *name, int value); Új menübejegyzést ad az aktuális menühöz. Ha majd ráklikkelünk a bejegyzésre az aktuális menü Callback-je „value” paraméterrel hívódik meg

50 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Menükezelés void glutAddSubMenu(char *name, int submenuID); Almenüt ad az aktuális menühöz. Az almenüt korábban létre kellet hozni, és az azonosítóját eltárolni void glutAttachMenu(int button); Az aktuális menüt a „button” egérgombhoz rendeli, azaz azzal lehet majd előhívni

51 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Minta: menürendszer létrehozása int submenu=glutCreateMenu(MenuFunc); glutAddMenuEntry("ElsoFunkcio",0); glutAddMenuEntry("MasodikFunkcio",1); glutAddMenuEntry("HarmadikFunkcio",2); glutAddMenuEntry("NegyedikFuncio",3); glutCreateMenu(MenuFunc); glutAddSubMenu("Type",submenu); glutAddMenuEntry("Exit",4); glutAddMenuEntry("About",5); glutAttachMenu(GLUT_RIGHT_BUTTON);

52 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Minta: menücallback implementációja void MenuFunc(int menuItemIndex) { switch(menuItemIndex) { case 0: … ; break; case 1: … ; break; case 2: … ; break; case 3: … ; break; case 4: exit(0); case 5: MessageBox(NULL,"Hello Glut","About",MB_OK); break; } glutPostRedisplay(); }

53 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba 2D grafikus editor L L L R MouseLDown első pont MouseLDown második... MouseLDown n. MouseRDown utolsó

54 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba 2D grafikus editor: GUI, use-case, dinamikus modell L L L R LD LU MouseLDown első pont MouseLDown második... MouseLDown n. MouseRDown utolsó MouseLDownpick? MouseMovemozgat MouseLUpletesz

55 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Glut/OpenGL program architektúra transzform vágás raszterizáció Raszter műveletek Color buffer: RGB API Operating system Windows GLUT main Redraw MousePress MouseMotion

56 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba Osztálydiagram Window state MouseLD() MouseLU() MouseMov() PutPixel() Scene actobj actprim InputPipe() Pick() Render() Camera ClipWindow() ViewTransform() window viewport VirtualWorld AddObject() GetObject() Object transform AddPrimitive() GetPrimitive() Primitive color AddPoint() Vectorize() Point x,y Polyline Vectorize() Curve Interpolate() Vectorize() Polygon Vectorize() Bezier Interpolate() B-Spline Interpolate() RenderPrimitive Transform() Clip() Draw() PointList Clip() Draw() LineList Clip() Draw() Polygon Clip() Draw()

57 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba GLUT: inicializálás main(argc, argv) { glutInitWindowSize(200, 200); glutInitWindowPosition(100, 100); glutInit(&argc, argv); glutInitDisplayMode( GLUT_RGB ); glutCreateWindow("2D graphics editor"); glutMouseFunc(MousePress); // callback glutMotionFunc(MouseMotion); glutDisplayFunc(ReDraw); glutMainLoop(); // fő hurok }

58 Számítógépes Grafika 2010, PPKE ITK, Benedek Csaba OpenGL LineList void Draw( ) { glColor3d( color.R, color.G, color.B ); glBegin( GL_LINE_STRIP ); for( i = 0; i < npoints; i++ ) glVertex2d(points[i].x, points[i].y); glEnd( ); glFlush( ); }