2d grafikus rendszerek
DESCRIPTION
2D grafikus rendszerek. Szirmay-Kalos László. 2D grafikus editor: GUI, use-case, dinamikus modell. L. LD. L. LU. L. R. MouseLDown első pont MouseLDown második ... MouseLDown n. MouseRDown utolsó. MouseLDownpick? MouseMovemozgat MouseLUpletesz. - PowerPoint PPT PresentationTRANSCRIPT
2D grafikus rendszerek2D grafikus rendszerek
Szirmay-Kalos László
2D grafikus editor: 2D grafikus editor: GUI, use-case, dinamikus modellGUI, use-case, dinamikus modell
L
L
L
R
LD
LU
MouseLDown első pontMouseLDown második...MouseLDown n.MouseRDown utolsó
MouseLDown pick?MouseMove mozgatMouseLUp letesz
Funkcionális modellFunkcionális modell
Kép frissités
rasztertár Pixelműveletek
Raszteri-záció
VágásVilág-képtér
Modellezésitranszf.
Világ-lokális mod.
Képtér-világ
Eszköz-képtér
Virtuális világ
TV-1 TM
-1
TV TM
Kurzor(xp, yp)
Kimeneti csővezeték
Bemeneti csővezeték
Eszköz koord.(xe, ye)
kamera
vektorizáció
OsztOsztálydiagramálydiagramWindow
stateMouseLD()MouseLU()
MouseMov()PutPixel()
Camerawindowviewport
ClipWindow()ViewTransform()
Objecttransform
AddPrimitive()GetPrimitive()
Primitivecolor
AddPoint()Vectorize()
Pointx,y
PolylineVectorize()
Curver(t)
Vectorize()
PolygonVectorize()
RenderPrimitiveTransform()
Clip()Draw()
RPointsClip()
Draw()
RPolylineClip()
Draw()
RPolygonClip()
Draw()Bezier
r(t)B-Spline
r(t)
Sceneactobject
InputPipe()
Pick()Render()
tároló
tároló
táro
ló
Op.rendszerfüggő
Controller +View
Colorfloat R, G, B
Rectx,y,w,h
Transformfloat m[3][3]
Kimeneti csővezeték: RenderKimeneti csővezeték: Render
Scene :: Render ( ) { Transform Tv = camera.ViewTransform( ); for each object obj { // prioritás
Transform Tm = obj -> Transform( );Transform Tc = Tm * Tv;for each primitive p of object obj { // prioritás RenderPrimitive * rp = p -> Vectorize( ); rp -> Transform( Tc ); if ( rp -> Clip( camera.ClipWindow ) ) rp -> Draw( );}
}}
Ablak-nézet transzformációAblak-nézet transzformációclass Camera {
Rect Viewport, Window;
Transform ViewTransform( ) {
Transform t =
return t; } Rect ClipWindow( ) { return Viewport; }};
(x, y)w
h
vw/ww 0 0
vh/wh 0
vx-wxvw/ww vy-wyvh/wh 1
VektorizációVektorizáció
class Curve : Primitive {
virtual Point r( float t ) = 0;
RenderPrimitive Vectorize( ) {RPolyLine * polyline = new RPolyLine();for(int i = 0; i <= NVECTOR; i++) { float t = (float)i / NVECTOR; polyline -> AddPoint( r( t ) );}return polyline;
}};
r(ti)
t1= 0, t2 , ... , tn =1
Bezier görbeBezier görbe: : r(t)r(t)
class Bezier : Curve {Point r( float t ) { Point rr(0, 0); int n = npoints – 1;
for(int i = 0; i < npoints; i++) { float Bi = 1; for(int j = 1; j <= i; j++) Bi *= (float)(n-j+1)/j;
Bi *= pow(t, i) * pow(1-t, n-i); rr += points[i] * Bi; } return rr; }};
Bi(t) = t i (1-t)n-i( )n
i
r(t) = Bi(t) ri
RenderPrimitiveRenderPrimitiveclass RenderPrimitive { Point * points; Color color; void Transform( Transform T ) {
for each point i do points[i].Transform( T ); } virtual Bool Clip( Rect cliprect ) = 0; virtual void Draw( ) = 0;};
class RPolyLine : public RenderPrimitive { Bool Clip( Rect cliprect ) { Cohen-Sutherland vágás } void Draw( ) { Szakaszrajzoló algoritmus: PutPixel(X, Y, color) }};class RPolygon : public RenderPrimitive { Bool Clip( Rect cliprect ) { Sutherland-Hodgeman vágás } void Draw( ) { Területkitöltő algoritmus: PutPixel(X, Y, color) }};
Bemeneti csővezeték: pontok Bemeneti csővezeték: pontok beépítése a virtuális világbabeépítése a virtuális világba
Scene :: InputPipeline( int X, int Y ) { if ( !actobject ) actobject = AddObject( ); Transform Tm = actobject -> Transform( ); Transform Tv = camera.ViewTransform( ); Transform Tci = (Tm * Tv).Invert( ); Point p = Point(X, Y).Transform( Tci ); actobject -> GetPrimitive( ) -> AddPoint(p);}
Window :: MouseLD( int X, int Y ) { ... ha az állapot szerint a pontot be kell építeni
scene.InputPipeline( X, Y );scene.Render(); // visszacsatolás
}
Primitív (objektum) kiválasztásaPrimitív (objektum) kiválasztásaScene :: Pick( int X, int Y ) { Rect pickw( X-5, Y-5, X+5, Y+5 ); fordown each object obj { // vissza prioritás
Transform Tm = obj -> Transform( );Transform Tv = camera.ViewTransform( );Transform Tc = Tm * Tv;fordown each primitive p of object obj { RenderPrimitive * rp = p -> Vectorize( ); rp -> Transform( Tc ); if ( rp -> Clip( pickw ) ) { actobj = obj; return; }}
}}
Window :: MouseLD( X, Y ) { ... ha az állapot szerint kiválasztás: scene.Pick( X, Y );}
OpenGL
OperOperációs rendszer illesztésációs rendszer illesztés
transzform Rasztertár
Operációsés ablakozó
rendszer(Windows)
vágás
MouseLD()MouseLU()MouseMov()
PutPixel()
Alkalmazás
raszterizáció
GLUT
GLUT/OpenGLGLUT/OpenGL
Rasztertár
Operációsés ablakozó
rendszer(Windows)
GLUT
OpenGLgrafikushardver
main
DisplayFunc
KeyboadFunc
IdleFunc
alkalmazás
SpecialFunc
ReshapeFunc
MouseFunc
MotionFunc
Ablak létrehozáscallback regisztráció
callback-ek
kimeneti csővezeték
OpenGL szintaxisOpenGL szintaxis
glVertex3dv( … )
Paraméterszám2 - (x, y)3 - (x, y, z), (R, G, B)4 - (x, y, z, h) (R, G, B, A)
Adattípus b - byteub - unsigned bytes - shorti - intf - floatd - double
Vektor vagy skalárv - vektor - skalár
gl könyvtár része
glX, wgl glu
Ablakozó – OpenGL – alkalmazás Ablakozó – OpenGL – alkalmazás elhelyezkedéseelhelyezkedése
hw
applikáció
gl
GLUT
X v. MS-Win
Ablak-kezeléswidgetek
Ablakozó-gl híd
Utility-k,tesszellátorok
Window menedzsment
OpenGL transzformációkOpenGL transzformációk (2D-s (2D-s utánérzés)utánérzés)
xy
z=0h=1
Modelviewmátrix
Projectionmátrix
Homogénosztás
Viewporttranszf.
képernyő
Normalizáltképernyő
-1,-1
1,1TVTM
vágás raszterizáció
OpenGL mOpenGL mátrixátrix OpenGL specifikáció:
Mi:
h
z
y
x
TTTT
TTTT
TTTT
TTTT
h
z
y
x
151173
141062
13951
12840
'
'
'
'
15141312
111098
7654
3210
''''
TTTT
TTTT
TTTT
TTTT
hzyxhzyx
OpenGL/ OpenGL/ GLUT GLUT
inicializálásinicializálás
#include <GL/gl.h>#include <GL/glu.h>#include <GL/glut.h> // 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();}
ablak
(0,0)
(100,100)
(100,100)
200
200
Eseménykezelés és rajzolásEseménykezelés és rajzolásvoid 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)ablak
Ablak újrarajzoláskor elveszik!
(0,0)
(200,200)
A háromszög A háromszög újrarajzoláskor újrarajzoláskor
megmaradmegmarad
bool haromszog = false;
void ReDraw( ) { glClearColor(0, 0, 0, 0); glClear(GL_COLOR_BUFFER_BIT); if ( haromszog ) {
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( );}
void Keyboard(unsigned char key, int x, int y) { if (key == 'd') { haromszog = true; ReDraw( ); }}
Nem rajzol Nem rajzol feleslegesenfeleslegesen
sokszorsokszor
bool haromszog = false;
void ReDraw( ) { glClearColor(0, 0, 0, 0); glClear(GL_COLOR_BUFFER_BIT); if ( haromszog ) {
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( );}
void Keyboard(unsigned char key, int x, int y) { if (key == 'd') { haromszog = true;
glutPostRedisplay(); }}
2D grafikus editor GLUT/OpenGL-lel2D grafikus editor GLUT/OpenGL-lel
transzformvágás
raszterizációRaszter
műveletekRasztertár
RGB
Operációsés ablakozó
rendszer
GLUTmain
Redraw
MouseDown
MouseMove
DisplayFunc
MouseFunc
MotionFunc
OpenGL
OsztOsztálydiagramálydiagramWindow
stateMouseLD()MouseLU()
MouseMov()PutPixel()
Sceneactobject
InputPipe()Pick()
Render()
CameraClipWindow()
ViewTransform()windowviewport
Objecttransform
AddPrimitive()GetPrimitive()
Primitivecolor
AddPoint()Draw()
Pointx,y
PolylineDraw()
Curver(t)
Draw()
PolygonDraw()
RenderPrimitiveTransform()
Clip()Draw()
RPointListClip()
Draw()
RPolyLineClip()
Draw()
RPolygonClip()
Draw()Bezier
r(t)B-Spline
r(t)
GLUT: inicializálásGLUT: inicializálásmain(argc, argv) { glutInitWindowSize(200, 200); glutInitWindowPosition(100, 100); glutInit(&argc, argv); glutInitDisplayMode( GLUT_RGB );
glutCreateWindow("2D graphics editor");
glutMouseFunc(MouseDown); // callback glutMotionFunc(MouseMove); glutDisplayFunc(ReDraw);
glutMainLoop(); // fő hurok}
GLUT: eseménykezelésGLUT: eseménykezelésvoid ReDraw( ) { glClearColor(0.0, 0.0, 0.0, 0.0); glClear(GL_COLOR_BUFFER_BIT); window.scene.Render( );}
void MouseDown( int button, int state, int x, int y ) { if (button == GLUT_LEFT && state == GLUT_DOWN)
window.MouseLD(x, y); …}
void MouseMove( int x, int y ) { window.MouseMov(x, y);}
OpenGL RenderOpenGL RenderScene :: Render ( ) { glViewport(camera.viewport.Left(), camera.viewport.Bottom(),
camera.viewport.Width(), camera.viewport.Height());
glMatrixMode( GL_PROJECTION ); glLoadIdentity(); gluOrtho2D(camera.window.Left(), camera.window.Right(), camera.window.Bottom(), camera.window.Top()); glMatrixMode( GL_MODELVIEW ); for each object obj { glLoadIdentity(); // 4x4 matrix
glMultMatrixf(obj->Transform());
for each primitive p of object obj { p -> Draw( ); // OpenGL-nek}
}}
ux uy 0vx vy 0ox oy 1
ux uy 0 0vx vy 0 0
0 0 1 0
ox oy 0 1[x, y, 0, 1]
[x, y, 1]
Curve rajzolCurve rajzolás ás
class Curve : Primitive { void Draw( ) { glColor3d( color.R, color.G, color.B );
glBegin( GL_LINE_STRIP );for(int i = 0; i <= NVECTOR; i++) { float t = (float)i / NVECTOR;
Point p = r( t );glVertex2d(p.x, p.y);
}glEnd( );
}};
OpenGL: primitívekOpenGL: primitívek
GL_POINTSGL_LINES
GL_LINE_STRIP
GL_LINE_LOOP GL_POLYGON
GL_TRIANGLE_STRIP
GL_TRIANGLES
GL_TRIANGLE_FAN
GL_QUADS
GL_QUAD_STRIP
HHáziázi//================================================================================// Szamitogepes grafika hazi feladat keret. Ervenyes 2010-tol. // A //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~// sorokon beluli reszben celszeru garazdalkodni, mert a tobbit ugyis toroljuk. // A Hazi feladat csak ebben a fajlban lehet. // Tilos:// - mast "beincludolni", illetve mas konyvtarat hasznalni// - faljmuveleteket vegezni (printf is fajlmuvelet!)// ---------------------------------------------------------// Csak az órán elhangzott gl/glu/glut fuggvenyek hasznalhatok: // glBegin, glVertex[2|3]f, glColor3f, glNormal3f, glTexCoord2f, glEnd, glDrawPixels// glViewport, glMatrixMode, glLoadIdentity, glMultMatrixf, gluOrtho2D, // glTranslatef, glRotatef, glScalef, gluLookAt, gluPerspective, // glPushMatrix,glPopMatrix,// glMaterialfv, glMaterialfv, glMaterialf, glLightfv// glGenTextures, glBindTexture, glTexParameteri, glTexImage2D, glTexEnvi, // glShadeModel, // glEnable/Disable a kovetkezokre: GL_LIGHT[0..7],// GL_LIGHTING, GL_NORMALIZE, GL_DEPTH_TEST, GL_CULL_FACE, GL_TEXTURE_2D, GL_BLEND,// // A házi feladat felesleges programsorokat NEM tartalmazhat! //================================================================================
HáziHázi
#include <math.h>#include <stdlib.h>#include <windows.h> #include <GL/gl.h>#include <GL/glu.h>#include <GL/glut.h> // A GLUT-ot le kell tolteni//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~// Innentol modosithatod...// Nev : <VEZETEKNEV(EK)> <KERESZTNEV(EK)>, Neptun : <NEPTUN KOD>//--------------------------------------------------------void onInitialization( ) { } // Inicializacio, void onDisplay( ) {// Rajzolas glClearColor(0.1f, 0.2f, 0.3f, 1.0f); // torlesi szin beallitasa glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // kepernyo torles // ... glutSwapBuffers(); // Buffercsere: rajzolas vege}void onKeyboard(unsigned char key, int x, int y) { // Billentyuzet esemeny if (key == 'd') glutPostRedisplay( ); // d beture rajzold ujra a kepet}void onMouse(int button, int state, int x, int y) {// Eger esemeny if (button == GLUT_LEFT && state == GLUT_DOWN); }
void onIdle( ) {// `Idle' esemenykezelo, jelzi, hogy az ido telik long time = glutGet(GLUT_ELAPSED_TIME); // program inditasa ota eltelt ido
}// ...Idaig modosithatod//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Még mindigMég mindig h háziázi// A C++ program belepesi pontja, nem bántani!int main(int argc, char **argv) { glutInit(&argc, argv); // GLUT inicializalasa glutInitWindowSize(600, 600); glutInitWindowPosition(100, 100);
// 8 bites R,G,B,A + dupla buffer + melyseg buffer glutInitDisplayMode(GLUT_RGBA | GLUT_DOUBLE | GLUT_DEPTH); glutCreateWindow("Grafika hazi feladat");
glMatrixMode(GL_MODELVIEW); // A MODELVIEW egysegmatrix glLoadIdentity(); glMatrixMode(GL_PROJECTION); // A PROJECTION egysegmatrix glLoadIdentity();
onInitialization(); // Az altalad irt inicializalas
glutDisplayFunc(onDisplay); // Esemenykezelok regisztralasa glutMouseFunc(onMouse); glutIdleFunc(onIdle); glutKeyboardFunc(onKeyboard); glutMainLoop(); // Esemenykezelo hurok return 0;}