Date post: | 21-Apr-2015 |
Category: |
Documents |
Upload: | thai-bao-ly |
View: | 54 times |
Download: | 2 times |
C++
Download “Microsoft Visual Studio Professional” 2008 Not Express!
l d h k Please do it this week
h // d 70 http://msdn70.e-academy.com/elms/Storefront/Home.aspx?campus=socnusingapore csampus socnusingapore_cs
ObjectivesObjectives Draw nice picture in 2D
Geometry, linear algebra OpenGL primers
N di i l h Not a traditional approach Teach‐on‐demand approach
Problem driven Problem driven, or I will rather say motivation driven
With the help of GLUT library
Approach Not top‐down
Abstract/overall > details Bottoms‐up !!
Intuition/motivation firstB f Be arty‐farty
OpenGL and GLUT In the old days, the first library for programming window system is called X‐windows You need to program two pages of code to open 1 single window…. with nothing.
OpenGL From the GL library (1992) from Silicon Graphics Handle graphics routine and window events handling
GLUT ‐ The OpenGL Utility Toolkitp y pronounced like the glut in gluttony
In a word, save you a lot of trouble by API: Application Programming InterfaceAPI: Application Programming Interface
Setup GLUT Library Download Glut (from the link in the course website) If you are using MS Windows, follow the README file Copy the files:
glut32.dll to %WinDir%\System, \ d glut32.lib to %your vc directory%\lib, and
glut.h to %your vc directory%\include\GL
DONE! DONE!
First OpenGL ProgramFirst OpenGL Program#include <GL/glut.h>
void mydisplay(){glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_POLYGON);
l 2f( 0 5 0 5)glVertex2f(-0.5, -0.5); glVertex2f(0, 0.5); glVertex2f(0.5, -0.5);
glEnd();glEnd();glFlush();
}
int main(){
glutCreateWindow("CS3241: Hello OpenGL!"); l tDi l F ( di l )glutDisplayFunc(mydisplay);
glutMainLoop();}
First OpenGL Program May sound weird to you: passing a “function” as a int main()
{glutCreateWindow("CS3241: Hello OpenGL!");
// simply create a window
function as a parameter
// p y// with title
glutDisplayFunc(mydisplay); // “register” the function
(0,+1)
// “register” the function // “mydisplay” for display
glutMainLoop();( 1 0) (+1 0)// starts the window loop
}
Default window size:
(‐1,0) (+1,0)
(‐1,‐1) to (+1,+1) (0,‐1)
First OpenGL ProgramFirst OpenGL Program#include <GL/glut.h>
void mydisplay(){glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_POLYGON);
l 2f( 0 5 0 5)glVertex2f(-0.5, -0.5); glVertex2f(0, 0.5); glVertex2f(0.5, -0.5);
glEnd();glEnd();glFlush();
}
Clear a kind of buffer (now it is the color buffer)
Note: the default colors for Note: the default colors for Note: the default colors for background and drawing are black and white respectively
Note: the default colors for background and drawing are black and white respectively
OpenGL Function Formatfunction name dimensions
glVertex3f(x,y,z)belongs to GL library
function name
x,y,z are floatsglVertex3fv(p)
For example: p is a pointer to an array
GLfloat p[2] = {-0.5,0.5};glBegin(GL_POLYGON);glvertex2fv(p);…
OpenGL Primitives
GL POINTSGL POINTS GL_POLYGONGL_POLYGONGL_POINTSGL_POINTS
GL_LINESGL_LINES GL_LINE_STRIPGL_LINE_STRIP
GL_LINE_LOOPGL_LINE_LOOP
GL TRIANGLESGL TRIANGLES
GL_QUAD_STRIPGL_QUAD_STRIP
GL_TRIANGLE_STRIPGL_TRIANGLE_STRIP GL_TRIANGLE_FANGL_TRIANGLE_FAN
__
See: http://www.opengl.org/sdk/docs/man/ [click glBegin()]
Polygon Issues OpenGL will only display polygons correctly if they are
Simple: edges cannot cross Convex: All points on line segment between two points in a polygon Convex: All points on line segment between two points in a polygon
are also in the polygon Flat: all vertices are in the same plane (in 3D)
OpenGL may or may not produce desired output if these OpenGL may or may not produce desired output if these conditions are violated
The best is to use triangles
non‐simple polygon non‐convex polygon
Changing Colorsvoid mydisplay(){
glClearColor(1.0,1.0,1.0,1.0);glClear(GL_COLOR_BUFFER_BIT); lB i (GL POLYGON)
Set Clear color to be white(But nothing changed until
glClear is called)glBegin(GL_POLYGON);
glColor3f(1.0,0.0,0.0);glVertex2f(-0.5, -0.5); glColor3f(0.0,1.0,0.0);g Co o 3 (0.0, .0,0.0);glVertex2f(0, 0.5); glColor3f(0.0,0.0,1.0);glVertex2f(0.5, -0.5); Set this
glEnd();glFlush();
}
vertex to be red
Here comes the mathematicsHere comes the mathematics
2D Transformation Vectors Reference Frame Transformation
Translationi Rotation
Scaling
Vector/Matrix Representations A vector (x,y) can be represented by a column or row matrices:
or
yx
1yxor
Which is called Homogeneous coordinates Wh t if th l t di t i t ?
1y 1yx
What if the last coordinate is not 1?
),(wy
wxwyx
If w=0, the point is at infinity in the direction (x,y) E.g. (0,1,0) is the point the “north” most
In this course, we will use the column matrix representation, p
L t’ St t F ThiLet’s Start From Thisvoid drawASmallTri(){
glBegin(GL_POLYGON); glColor3f(1.0,0.0,0.0);glVertex2f(-0.2, -0.2); lC l 3f(0 0 1 0 0 0)glColor3f(0.0,1.0,0.0);glVertex2f(0, 0.2); glColor3f(0.0,0.0,1.0);glVertex2f(0.2, -0.2);glVertex2f(0.2, 0.2);
glEnd();}void mydisplay(){
glClearColor(1.0,1.0,1.0,1.0);glClear(GL_COLOR_BUFFER_BIT); drawASmallTri();lFl h()glFlush();
}
How Do I Draw This? The left triangle is the original
a: (-0.2,-0.2) b: (0.2,-0.2) c: (0,0.2)
Th i ht i The right one is (0.2,-0.2) = a + (0.4,0) (0 6 -0 2) = b + (0 4 0) (0.6, 0.2) b + (0.4,0) (0.4,-0.2) = c + (0.4,0)
Translation t = (0.4,0)
We called this kind of movement a translationwith a translation vector
I h i ),( yx ttt
)040( In the previous case Every vertex of the triangle adds the vector t With h di t t ( ) ill
)0,4.0(t
With homogeneous coordinates, every vertex (x,y) will be moved to a new position (x’,y’) by
01' tt
111001001
1''
y
x
y
x
tytx
yx
tt
yx
111001
Old positionNew position
glTranslate(x,y,z)void mydisplay(){glClearColor(1.0,1.0,1.0,1.0);glClear(GL_COLOR_BUFFER_BIT);
glLoadIdentity();drawASmallTri(); Original
Triangle
glTranslatef(0.4,0,0);drawASmallTri(); New
TriangleglFlush();
}
g
Reference Frame For every coordinates, there is a reference frame E.g. p=(2,4) meaning p is 2 units right of and 4 units
b h i i f fabove the origin reference frame
p=(2,4)
R f FReference Frame By applying a translation, it means moving the
f f i ireference frame to a new position For example glTranslatef(4.0,4.0,0) Th h d t (2 4) ith t t th Then when we draw p at (2,4) with respect to the NEW reference frame
It finally becomes p’=(6 0 8 0) with respect to the It finally becomes p (6.0, 8.0) with respect to the original frame
p=(2,4)p
p’=(6,8)
t=(4,4)
Reference Frame
glTranslate(x,y,z)void mydisplay(){glClearColor(1.0,1.0,1.0,1.0);glClear(GL_COLOR_BUFFER_BIT);
glLoadIdentity();drawASmallTri();
glTranslatef(0.4,0,0);drawASmallTri();
glFlush(); }
Translation Moving the reference frame by a vector
01' xx txxtx
1110010
1' y
x
y
x
tyyty ),(' yx tytxp
By a translation matrix
),( yxp
1001
)(x
tt
ttT),( yx ttt
100
10),( yyx tttT
glRotatef(angle,x,y,z)void mydisplay(){glClearColor(1.0,1.0,1.0,1.0);glClear(GL_COLOR_BUFFER_BIT);
glLoadIdentity();drawASmallTri();
glRotatef(60,0,0,1);drawASmallTri();
glFlush(); }
Rotation Rotation all vertices around the origin Anti‐clockwise Old points
cossinsincos
0cossin0sincos
''
yxyx
yx
yx
111001
yyy
New points By a rotational matrix
0sincos
1000cossin)( R
Rotation Before rotation For any point p = (x,y), we can represent p in the polar
dicoordinates
cosrx
22 yxr
1
sin1
ryp
p (x y)
sinrr
p=(x,y)
cosr
Rotation Rotate by an angle
)cos( r
The new point
1
)sin(' rpp’
r
p
Rotation
sincoscossinsinsincoscos
)sin()cos(
'
rrrr
rr
p 11
sincos
rr
yx
p
11
yp
cossinsincos
)sin()cos(
'
yxyx
rr
p 11
Rotation Rotation all vertices around the origin Anti‐clockwise
cossinsincos
0cossin0sincos
''
yxyx
yx
yx
111001
yyy
By a rotational matrix
0sincos
1000cossin)( R
Reference Frame By applying a rotation, it means rotating the reference frame to a new orientation
l For example glRotatef(60.0,0,0,1) Rotating 60 degree around the vector (0,0,1)
60
glRotatef(angle,x,y,z)void mydisplay(){glClearColor(1.0,1.0,1.0,1.0);glClear(GL_COLOR_BUFFER_BIT);
glLoadIdentity();drawASmallTri();
glRotatef(60,0,0,1);drawASmallTri();
glFlush(); }
Scaling Shrink or grow Simply
xax
1),(
1' y
xbaSby
axp
a and b could be ‐ve
11
00a
By a scaling matrix
OpenGL function:
10000),( bbaS
p glScalef(x,y,z);
Why Matrices?? Because we can combine many transformations into one matrix
)5.0,0(T )45( R
pRTp )45()5.0,0('' pp )(),(
Mpp '' Mpp
Composite Transformation Note that you can do as many transformation as you can
pRTSRTp )45()...3,2()20,5.0()10()1,0(''
first
And also note the “order”
first
first
Composite Transformation Whenever you add a new transformation, you add it to the RIGHT of the matrices
pTp )5.0,0('pRTp )45()500('' pRTp )45()5.0,0(
In OpenGLvoid drawLine(){
glBegin(GL_LINES);glVertex2f(0,0);lV t 2f(0 0 5)glVertex2f(0,0.5);
glEnd();}
void mydisplay(){
Clear the transformation matrix to void mydisplay(){
…
glLoadIdentity();
matrix to identity
drawLine();glTranslatef(0,0.5,0);glRotatef(-45,0,0,1);drawLine();glFlush();
}
What if I want to draw this Draw the first vertical line Do two transformations and d h i h lidraw the right line:
R t th t f ti)45()5.0,0( RT
Reset the transformation Do another two transformations to draw the left lineto draw the left line
)45()5.0,0( RT
Transformation Stack in OpenGL You can save the transformation in any moment into a stackmoment into a stack
From there you can “resume” or “save” at anytime and add or save at anytime and add on new transformation
Save a matrix glPushMatrix()
Retrieve a matrix glPopMatrix()
In OpenGLvoid drawFork(){
drawLine();glPushMatrix();
glTranslatef(0,0.5,0);glPushMatrix();glPushMatrix();
glRotatef(-45,0,0,1);drawLine();
glPopMatrix();glPushMatrix();
glRotatef(45,0,0,1);
Resume to T(0,0.5)
glRotatef(45,0,0,1);drawLine();
glPopMatrix();glPopMatrix();
}
Resume to nothing
void mydisplay(){glClear(GL_COLOR_BUFFER_BIT); glColor3f(0,0,0);glMatrixMode(GL_MODELVIEW);drawFork();glFlush();glFlush();
}
You can mess up the
A Nicer “Y”transformation within a pair of Push/Pop
void drawFork(){
drawLine();glPushMatrix();
glTranslatef(0,0.5,0);glPushMatrix();
glRotatef(-45,0,0,1);glScalef(0.5,0.5,0.5);g ( , , )drawLine();
glPopMatrix();glPushMatrix();
glRotatef(45,0,0,1);glRotatef(45,0,0,1);glScalef(0.5,0.5,0.5);drawLine();
glPopMatrix();glPopMatrix();glPopMatrix();
}
A Fractal Treevoid drawFork(int n){
drawLine();if (n==0) return;lP hM t i ()glPushMatrix();
glTranslatef(0,0.5,0);glPushMatrix();
glRotatef(-45,0,0,1);glScalef(0 5 0 5 0 5);glScalef(0.5,0.5,0.5);drawFork(n-1);
glPopMatrix();glPushMatrix();
glRotatef(45,0,0,1);gglScalef(0.5,0.5,0.5);drawFork(n-1);
glPopMatrix();glPopMatrix();
}
A Fractal Treevoid drawFork(int n){
drawLine();if (n==0) return;lP hM t i ()glPushMatrix();
glTranslatef(0,0.2,0);glPushMatrix();
glRotatef(-30,0,0,1);glScalef(0 7 0 7 0 7);glScalef(0.7,0.7,0.7);drawFork(n-1);
glPopMatrix();glPushMatrix();
glRotatef(60,0,0,1);gglScalef(0.4,0.4,0.4);drawFork(n-1);
glPopMatrix();glPopMatrix();
}
Finally
Vector/Matrix Representations
In this course, we will use a column matrix to represent ia point
yx
p pRTp )45()5.0,0(''
H t i l k
1
However, row matrices also work
Tpyxq 1 TTT pTqRq )''()5.0,0()45(''
Finally, all the math make y,sense!!!