C OMPUTER G RAPHICS Thursday - PDF Free Download

C OMPUTER G RAPHICS 2017.04.27 Thursday Professor s original PPT http://calab.hanyang.ac.kr/ Courses Computer Graphics practice3.pdf TA s current PPT not uploaded yet

GRAPHICS PIPELINE What is Graphics Pipeline? the process to express a 3D image into 2D raster image also called rendering pipeline pixels arrayed in grid pattern VERTEX PROCESSING BLENDING RASTERIZING FRAGMENT PROCESSING 3D image 2D raster image PIPELINE

GRAPHICS PIPELINE VERTEX PROCESSING RASTERIZING FRAGMENT PROCESSING BLENDING Vertex Processing converts 3D image s 3D vertices into 2D vertices fit into screen needs multiple to get final 2D vertices from original 3D vertices

GRAPHICS PIPELINE VERTEX PROCESSING RASTERIZING FRAGMENT PROCESSING BLENDING Vertex Processing performed by multiplying vertex by matrices for efficient computation, 3D vertices start in homogeneous coordinate system

GRAPHICS PIPELINE VERTEX PROCESSING RASTERIZING FRAGMENT PROCESSING BLENDING Vertex Processing Q. Isn t it too much pressure to compute for 4~5 s per one vertex? A. Rendering time is barely affected by the number of transforming steps. Actually, it is much affected by the number of vertices.

MATRIX & OpenGL X Y = viewport perspective division projection modelview X 0 Y 0 Z 0 W 0 finally converted 2D vertex original 3D vertex (homogeneous)

MATRIX & OpenGL X Y = viewport perspective division projection modelview X 0 Y 0 Z 0 W 0 finally converted 2D vertex Matrix Handling OpenGL Functions void glmatrixmode (GLenum mode) choose which to operate GL_MODELVIEW: operate on modelview GL_PROJECTION: operate on projection GL_TEXTURE: operate on texture void glloadidentity () call identity as currently operating void glloadmatrixf (const GLfloat *M1) call M1 as currently operating void glmultmatirxf (const GLfloat *M2) multiply M2 to currently operating operates this part original 3D vertex (homogeneous)

MATRIX & OpenGL X Y = viewport perspective division projection modelview X 0 Y 0 Z 0 W 0 finally converted 2D vertex Matrix Operating in OpenGL Programming operates this part original 3D vertex (homogeneous) glloadidentity(); glsomething1(); glsomething2(); OpenGL command lines work between modelview and original 3D vertex in order. X Y = projection perspective viewport modelview identity something1 something2 X 0 Y 0 Z 0 W 0

OpenGL 1: TRANSFORMATION Main Transforming OpenGL Functions void gltranslatef (GLfloat dx, GLfloat dy, GLfloat dz) translate the crayon dx/dy/dz: translating dx/dy/dz by x/y/z axis void glscalef (GLfloat sx, GLfloat sy, GLfloat sz) scale the crayon sx/sy/sz: translating sx/sy/sz by x/y/z axis void glrotatef (GLfloat angle, GLfloat x, GLfloat y, GLfloat z) Rotating the crayon angle: rotating angle x/y/z: rotating axis (0.0 if not rotating, 1.0 if rotating) example: glrotatef (45, 0.0, 0.0, 1.0); rotating 45 by z-axis

OpenGL 1: TRANSFORMATION Two Ways to Draw at Proper Position on Paper DESK PAPER OR draw like this move crayon move paper

OpenGL 1: TRANSFORMATION Two Ways to Draw at Proper Position on Paper DESK PAPER OR draw like this move crayon move paper 1 moving crayon = translate rotate scale usual MCS to WCS idea X Y = projection perspective viewport modelview translation rotation scale X 0 Y 0 Z 0 W 0 2 moving paper = scale rotate translate usual opengl programming idea X Y = projection perspective viewport modelview scale rotation translation X 0 Y 0 Z 0 W 0

OpenGL 1: TRANSFORMATION Two Ways to Draw at Proper Position on Paper glloadidentity(); gltranslatef(0.707, 0.0, 0.0); glrotatef(45.0, 0.0, 0.0, 1.0); glutsolidcube(0.3); glloadidentity(); glrotatef(45.0, 0.0, 0.0, 1.0); gltranslatef(0.5, -0.5, 0.0); glutsolidcube(0.3); 1 moving crayon = translate rotate scale usual MCS to WCS idea X Y = projection perspective viewport modelview translation rotation scale X 0 Y 0 Z 0 W 0 2 moving paper = scale rotate translate usual opengl programming idea X Y = projection perspective viewport modelview scale rotation translation X 0 Y 0 Z 0 W 0

OpenGL 1: TRANSFORMATION EXAMPLE: Three Rectangles (differ by transforming order) void MyDisplay() glclear(gl_color_buffer_bit); glviewport(0, 0, 300, 300); // red rectangle glcolor3f(1.0, 0.0, 0.0); glloadidentity(); glutsolidcube(0.3); // green rectangle glcolor3f(0.0, 1.0, 0.0); glloadidentity(); glrotatef(45.0, 0.0, 0.0, 1.0); gltranslatef(0.6, 0.0, 0.0); glutsolidcube(0.3); // blue rectangle glcolor3f(0.0, 0.0, 1.0); glloadidentity(); gltranslatef(0.6, 0.0, 0.0); glrotatef(45.0, 0.0, 0.0, 1.0); glutsolidcube(0.3); int main(int argc, char** argv) glutinitdisplaymode(glut_rgba); glutinitwindowsize(300, 300); glutcreatewindow("opengl Sample Drawing"); glclearcolor(1.0, 1.0, 1.0, 1.0); glmatrixmode(gl_projection); glloadidentity(); glortho(-1.0, 1.0, -1.0, 1.0, -1.0, 1.0); glutdisplayfunc(mydisplay); glutmainloop(); return 0; glflush();

OpenGL 2: VIEWPORT SKIP!!

OpenGL 3: INTERACTION Interacting With Users (Callback Functions) OpenGL provides Callback Functions to let users interact with program Keyboard Callback: reacts when user pushes some keys Special Key Callback: reacts when user pushes special keys (like F1, F2 keys) Mouse Callback: reacts when user start to push mouse button Motion Callback: reacts when user drags the mouse and take off the finger Menu Callback: shows menu above the window Timer Callback: reacts at every specific time intervals EXAMPLE: Change Rectangle Size by Mouse Dragging

OpenGL 3: INTERACTION #include <gl/glut.h> GLint TopLeftX, TopLeftY, BottomRightX, BottomRightY; void MyDisplay() glviewport(0, 0, 300, 300); glclear(gl_color_buffer_bit); glcolor3f(0.5, 0.5, 0.5); glbegin(gl_polygon); glvertex3f(topleftx / 300.0, (300 - TopLeftY) / 300.0, 0.0); glvertex3f(topleftx / 300.0, (300 - BottomRightY) / 300.0, 0.0); glvertex3f(bottomrightx / 300.0, (300 - BottomRightY) / 300.0, 0.0); glvertex3f(bottomrightx / 300.0, (300 - TopLeftY) / 300.0, 0.0); glend(); glflush(); EXAMPLE: Changing Rectangle Size by Mouse Dragging void MyMouseClick(GLint Button, GLint State, GLint X, GLint Y) if(button == GLUT_LEFT_BUTTON && State == GLUT_DOWN) TopLeftX = X; TopLeftY = Y; void MyMouseMove(GLint X, GLint Y) BottomRightX = X; BottomRightY = Y; glutpostredisplay(); // marks the current window as needing to be redisplayed. int main(int argc, char** argv) glutinitwindowsize(300, 300); glutcreatewindow("opengl Drawing Example"); glclearcolor(1.0, 1.0, 1.0, 1.0); glmatrixmode(gl_projection); glloadidentity(); glortho(0.0, 1.0, 0.0, 1.0, -1.0, 1.0); glutdisplayfunc(mydisplay); glutmousefunc(mymouseclick); glutmotionfunc(mymousemove); glutmainloop(); return 0;

OpenGL 3: INTERACTION Difference Between OpenGL s drawing field and Window v1x = TopLeftX / 300; v1y = (300 - TopLeftY) / 300; v2x = TopLeftX / 300; v2y = (300 - BottomRightY) / 300; v3x = BottomRightX / 300; v3y = (300 - BottomRightY) / 300; v4x = BottomRightX / 300; v4y = (300 - TopLeftY) / 300;

OpenGL 4: MATRIX STACKS Save Transformed Coordinate with Stacks void glpushmatrix () save current position in the stack no matter how many times you transform and transform coordinates, you can come back to this saved coordinate position void glpopmatrix () load the most currently saved position once loaded position is removed from the stack

OpenGL 4: MATRIX STACKS EXAMPLE 1: Solar System

OpenGL 4: MATRIX STACKS #include <gl/freeglut.h> #include <gl/glu.h> #include <gl/gl.h> EXAMPLE 1: Solar System static int Day = 0, Time = 0; void MyDisplay() glclear(gl_color_buffer_bit GL_DEPTH_BUFFER_BIT); glenable(gl_depth_test); glloadidentity(); gltranslatef(0.0, 0.0, -2.0); /***The earth***/ glpushmatrix(); // 지구의공전 glrotatef((float)day, 0.0, 1.0, 0.0); gltranslatef(0.7, 0.0, 0.0); // 지구의자전 glrotatef((float)time, 0.0, 1.0, 0.0); glcolor3f(0.5, 0.6, 0.7); glutsolidsphere(0.1, 30, 8); /***The moon***/ glpushmatrix(); // 달의공전 glrotatef((float)time, 0.0, 1.0, 0.0); gltranslatef(0.2, 0.0, 0.0); glcolor3f(0.9, 0.8, 0.2); glutsolidsphere(0.04, 30, 8); glpopmatrix(); glpopmatrix(); /***The sun***/ glcolor3f(1.0, 0.3, 0.4); glutsolidsphere(0.2, 30, 16); glutswapbuffers(); void MyTimer(int value) Day = (Day + 10) % 360; Time = (Time + 5) % 360; gluttimerfunc(100, MyTimer, 1); glutpostredisplay(); int main(int argc, char** argv) glutinit(&argc, argv); glutinitdisplaymode(glut_double GLUT_RGB GLUT_DEPTH); glutinitwindowsize(500, 500); glutcreatewindow("solar system"); glclearcolor(0.0, 0.0, 0.0, 0.0); glmatrixmode(gl_projection); glloadidentity(); glortho(-1.0, 1.0, -1.0, 1.0, -1.0, 3.0); glutdisplayfunc(mydisplay); gluttimerfunc(100, MyTimer, 1); glutmainloop(); return 0;

OpenGL 4: MATRIX STACKS EXAMPLE 2: Rotating Teapot with Mouse

OpenGL 4: MATRIX STACKS #include <gl/glut.h> bool bdrag = false; float g_fdistance = -300.0f; float g_fspinx = 0.0f; float g_fspiny = 0.0f; int ptlastmousepositx, ptlastmouseposity; int ptcurrentmousepositx, ptcurrentmouseposity; EXAMPLE 2: Rotating Teapot with Mouse (1/2) void ChangeSize(GLsizei width, GLsizei height) GLfloat faspect = (GLfloat)width/(GLfloat)height; GLfloat nrange = height/4.0; if(height == 0) height = 1; glviewport(0, 0, width, height); glmatrixmode(gl_projection); glloadidentity(); if (width <= height) glortho (-nrange, nrange, -nrange/faspect, nrange/faspect, -nrange*4.0f, nrange*4.0f); else glortho (-nrange*faspect, nrange*faspect, -nrange, nrange, -nrange*4.0f, nrange*4.0f); glloadidentity(); void MyMouseClick(GLint Button, GLint State, GLint X, GLint Y) if(button == GLUT_LEFT_BUTTON ) if (State == GLUT_DOWN) ptlastmousepositx = ptcurrentmousepositx = X; ptlastmouseposity = ptcurrentmouseposity = Y; bdrag = true; else if (State == GLUT_UP) bdrag = false;

OpenGL 4: MATRIX STACKS void MyMouseMove(GLint X, GLint Y) ptcurrentmousepositx = X; ptcurrentmouseposity = Y; EXAMPLE 2: Rotating Teapot with Mouse (2/2) if( bdrag ) g_fspinx -= (ptcurrentmousepositx - ptlastmousepositx); g_fspiny -= (ptcurrentmouseposity - ptlastmouseposity); ptlastmousepositx = ptcurrentmousepositx; ptlastmouseposity = ptcurrentmouseposity; glutpostredisplay(); void RenderScene(void) glclear(gl_color_buffer_bit GL_DEPTH_BUFFER_BIT); glpushmatrix(); gltranslatef(0.0f, 0.0f, g_fdistance); glrotatef( -g_fspiny, 1.0f, 0.0f, 0.0f ); glrotatef( -g_fspinx, 0.0f, 1.0f, 0.0f ); glcolor3f(0.0f, 1.0f, 0.0f); glutwireteapot(100.0); glpopmatrix(); glutswapbuffers(); int main(int argc, char *argv[]) glutinit(&argc, argv); glutinitdisplaymode(glut_double GLUT_RGB GLUT_DEPTH); glutinitwindowsize(600, 600); glutcreatewindow( Rotate an object using mouse"); glutreshapefunc(changesize); glutmousefunc(mymouseclick); glutmotionfunc(mymousemove); glutdisplayfunc(renderscene); glutmainloop(); return 0;

PRACTICE ASSIGNMENT: Advanced Solar System What to do Create solar system with SUN, EARTH, MOON, MARS! SUN is yellow, and it stays firm EARTH is blue, and it revolves around SUN while it also self-rotates MOON is green, and it revolves around EARTH without self-rotation SUN, EARTH, MOON are almost implemented in practice3_2.cpp What you have to do 1: modify SUN, EARTH, MOON s color in pratice3_2.cpp What you have to do 2: add MARS to practice3_2.cpp MARS is red and it revolves around SUN while it also self-rotates MARS is as twice far from SUN as the EARTH is far from the SUN MARS has two times longer orbital period than EARTH MARS self-rotates twice faster than EARTH MARS has the same size with EARTH Submission Send e-mail to teddysiah@gmail.com attaching practice3_2.cpp only Due: not decided yet