Download pdf - OpenGL L02-Transformations

Mohammad Shaker

mohammadshaker.com

@ZGTRShaker

2014

OpenGL Graphics

L02 –TRANSFORMATIONS

Last Class, We Talked AboutOpenGL Program Structure

OpenGL Program Structure

• Application Structure

– Configure and open window

– Initialize OpenGL state

– Register input callback functions

• render

• resize

• input: keyboard, mouse, etc.

– Enter event processing loop

OpenGL Program Structure

• Application Structure

– Configure and open window

– Initialize OpenGL state

– Register input callback functions

• render

• resize

• input: keyboard, mouse, etc.

– Enter event processing loop

void main( int argc, char** argv ){int mode = GLUT_RGB|GLUT_DOUBLE;

glutInitDisplayMode( mode );glutCreateWindow( argv[0] );

init();

glutDisplayFunc( display );glutReshapeFunc( resize ); glutKeyboardFunc( key );glutIdleFunc( idle );

glutMainLoop();}

OpenGL Initialization

• Set up whatever state you’re going to use

void init( void ){

glClearColor( 0.0, 0.0, 0.0, 1.0 );glClearDepth( 1.0 );

glEnable( GL_LIGHT0 );glEnable( GL_LIGHTING );glEnable( GL_DEPTH_TEST );

}

GLUT Callback Functions

• Routine to call when something happens

– window resize or redraw

– user input

– animation

• “Register” callbacks with GLUT

glutDisplayFunc( display );

glutIdleFunc( idle );

glutKeyboardFunc( keyboard );

Rendering Callback

• Do all of your drawing here

glutDisplayFunc(DrawGLScene);

void DrawGLScene( void )

{

glClear( GL_COLOR_BUFFER_BIT );

glBegin( GL_TRIANGLE_STRIP );

glVertex3fv( v[0] );




glEnd();

glutSwapBuffers();

}

Rendering Callback

• Process user input

glutKeyboardFunc( keyboard );

void keyboard( char key, int x, int y )

{

switch( key ) {

case ‘q’ : case ‘Q’ :

exit( EXIT_SUCCESS );

break;

case ‘r’ : case ‘R’ :

rotate = GL_TRUE;

break;

}

}

Matrices in OpenGL, 4x4

151173

141062

13951

12840

mmmm

mmmm

mmmm

mmmm

M

RULE

RULETO SEE A 3D SCENE YOU SHOULD SET UP:


CAMERA


CAMERA

PROJECTION


CAMERA

PROJECTION

WORLD MATRIX


CAMERA (Singleton, for all objects)

PROJECTION (Singleton, for all objects)

WORLD MATRIX (For each object separately)

















Camera (View) Matrix


void gluLookAt(GLdouble eyeX, GLdouble eyeY, GLdouble eyeZ, GLdouble centerX, GLdouble centerY, GLdouble centerZ, GLdouble upX, GLdouble upY, GLdouble upZ);







Camera Movement

Set the View (Camera) Matrix

• For example, in ReSizeGLScene method

GLvoid ReSizeGLScene(GLsizei width, GLsizei height)

{

if (height==0) { height=1; }

glViewport(0,0,width,height);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(45.0f,(GLfloat)width/(GLfloat)height,0.1f,100.0f);

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

gluLookAt( 0.0, 0.0, 5.0,

0.0, 0.0, 0.0, 0.0, 1.0, 0.0 );

}









Projection Matrix

Projection

Projection Matrices

Perspective Projection

Projection Matrices

The Difference?!

Projection Matrices

The Difference?!perspective

Projection Matrices

The Difference?!perspective orthographic

Projection Matrices

Realistic?perspective orthographic

Projection Matrices

Realistic?perspective orthographic

Projection Matrices

Architecture?perspective orthographic

Projection Matrices

Architecture?perspective orthographic

Projection Matrices

Usability?perspective orthographic

Projection Matrices

Usability?perspective orthographic

Perspective Projection

• void gluPerspective(GLdouble fovy, GLdouble aspect, GLdouble zNear, GLdouble zFar)

• void glFrustum(GLdouble left, GLdouble right, GLdouble bottom, GLdouble top,

GLdouble znear, GLdouble zfar);

Orthographic Projection

• void gluOrtho(GLdouble left, GLdouble right, GLdouble bottom, GLdouble top,

GLdouble near, GLdouble far)

Orthographic Projection

Near and Far Clipping Planes

• Wrong Near and Far clipping planes can cause problems.

Set the Projection Matrix

• For example, in ReSizeGLScene method


{




glLoadIdentity();



glLoadIdentity();

gluLookAt( 0.0, 0.0, 5.0,

0.0, 0.0, 0.0, 0.0, 1.0, 0.0 );

}









World MatrixEach Object in 3D Has Its Own World Matrix

World Matrix

World Matrix

• Example

• Let’s assume that the coordinates of the triangle vertices are as follows:

World Matrix

• Example

• To translate 40 units over the y axis’s positive direction,all you need to do is to add 40

toeach y position, and you have the new coordinates for the vertices:

World Matrix

Many Transformation?

Many Transformation?Always Use I.S.R.O.T

Identity

Scale

Rotate

Orbit

Translate

World Matrices

• glScalef(x, y, z);

• glTranslatef(x, y, z);

• glRotatef(angle, x, y, z);

World Matrices

• glScalef(x, y, z);

• glTranslatef(x, y, z);

• glRotatef(angle, x, y, z);

÷÷÷÷÷÷

ø

ö

çççççç

è

æ

=

1000

100

010

001

),,(

z

y

x

zyx

t

t

t

tttT

÷÷÷÷÷÷

ø

ö

çççççç

è

æ

=

1000

000

000

000

),,(

z

y

x

zyx

s

s

s

sssS

World Matrices

• glLoadIdentity();

N E W

RULE Remember, Remember?

OpenGL programming is state-machine based

N E W



Changing State Without you knowing you’re

changing the state is a very big deal/Problem

N E W







EXAMPLE



EXAMPLE

Primitive and Transformation

Primitive and Transformation Example


int DrawGLScene(GLvoid) // Here's Where We Do All The Drawing{

// Clear The Screen And The Depth Buffer glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

glLoadIdentity(); // Reset The View

glTranslatef(-1.5f,0.0f,-6.0f); // Move Left 1.5 Units And Into The Screen 6.0glBegin(GL_TRIANGLES); // Drawing Using Triangles

glVertex3f( 0.0f, 1.0f, 0.0f); // Top glVertex3f(-1.0f,-1.0f, 0.0f); // Bottom Left glVertex3f( 1.0f,-1.0f, 0.0f); // Bottom Right

glEnd(); // Finished Drawing The Triangle

glTranslatef(3.0f,0.0f,0.0f); // Move Right 3 UnitsglBegin(GL_QUADS); // Draw A Quad

glVertex3f(-1.0f, 1.0f, 0.0f); // Top Left glVertex3f( 1.0f, 1.0f, 0.0f); // Top Right glVertex3f( 1.0f,-1.0f, 0.0f); // Bottom Right glVertex3f(-1.0f,-1.0f, 0.0f); // Bottom Left

glEnd(); // Done Drawing The Quad return TRUE; // Keep Going

}











}











}











}











}











}











}











}











}











}











}











}











}

What would you doif you have 100 objects?!

Matrix Stack

Matrix StackglPushMatrix();

// A Body Transformation

glPopMatrix();

Using Matrix Stack










}

We left our code like this:

Using Matrix Stack


glPushMatrix();glLoadIdentity();glTranslatef(-1.5f,0.0f,-6.0f); // Move Left 1.5 Units And Into The Screen 6.0

glBegin(GL_TRIANGLES); // Drawing Using Triangles glVertex3f( 0.0f, 1.0f, 0.0f); // Top glVertex3f(-1.0f,-1.0f, 0.0f); // Bottom Left glVertex3f( 1.0f,-1.0f, 0.0f); // Bottom Right glEnd(); // Finished Drawing The TriangleglPopMatrix();

glPushMatrix();glLoadIdentity();glTranslatef(1.5f,0.0f,-6.0f); // Move Right 1.5 Units And Into The Screen 6.0

glBegin(GL_QUADS); // Draw A Quad glVertex3f(-1.0f, 1.0f, 0.0f); // Top Left glVertex3f( 1.0f, 1.0f, 0.0f); // Top Right glVertex3f( 1.0f,-1.0f, 0.0f); // Bottom Right glVertex3f(-1.0f,-1.0f, 0.0f); // Bottom Left glEnd(); // Done Drawing The Quad glPopMatrix();

Now, it will look like this:

Using Matrix Stack







Using Matrix Stack







Applying I.S.R.O.T

Applying I.S.R.O.T

Using Matrix Stack






The result is exactly the same

Adding Some Colors

Using Matrix Stack






Our code is like this:

Using Matrix Stack



glBegin(GL_TRIANGLES); // Drawing Using TrianglesglColor3f(1.0f,0.0f,0.0f); // Set The Color To RedglVertex3f( 0.0f, 1.0f, 0.0f); // TopglColor3f(0.0f,1.0f,0.0f); // Set The Color To GreenglVertex3f(-1.0f,-1.0f, 0.0f); // Bottom LeftglColor3f(0.0f,0.0f,1.0f); // Set The Color To BlueglVertex3f( 1.0f,-1.0f, 0.0f); // Bottom RightglEnd(); // Finished Drawing The TriangleglPopMatrix();



Applying Some Animation(Transformation)



glBegin(GL_TRIANGLES); // Drawing Using TrianglesglColor3f(1.0f,0.0f,0.0f); // Set The Color To RedglVertex3f( 0.0f, 1.0f, 0.0f); // TopglColor3f(0.0f,1.0f,0.0f); // Set The Color To GreenglVertex3f(-1.0f,-1.0f, 0.0f); // Bottom LeftglColor3f(0.0f,0.0f,1.0f); // Set The Color To BlueglVertex3f( 1.0f,-1.0f, 0.0f); // Bottom Right

glEnd(); // Finished Drawing The TriangleglPopMatrix();


glBegin(GL_QUADS); // Draw A Quad glVertex3f(-1.0f, 1.0f, 0.0f); // Top Left glVertex3f( 1.0f, 1.0f, 0.0f); // Top Right glVertex3f( 1.0f,-1.0f, 0.0f); // Bottom Right glVertex3f(-1.0f,-1.0f, 0.0f); // Bottom Left

glEnd(); // Done Drawing The Quad glPopMatrix();

We have this code:



glBegin(GL_TRIANGLES); // Drawing Using TrianglesglColor3f(1.0f,0.0f,0.0f); // Set The Color To RedglVertex3f( 0.0f, 1.0f, 0.0f); // TopglColor3f(0.0f,1.0f,0.0f); // Set The Color To GreenglVertex3f(-1.0f,-1.0f, 0.0f); // Bottom LeftglColor3f(0.0f,0.0f,1.0f); // Set The Color To BlueglVertex3f( 1.0f,-1.0f, 0.0f); // Bottom Right

glEnd(); // Finished Drawing The TriangleglPopMatrix();




We have this code:

rtri+=0.2f;rquad-=0.15f;// Clear The Screen And The Depth Buffer glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glLoadIdentity();

glPushMatrix();glLoadIdentity();glTranslatef(-1.5f,0.0f,-6.0f); // Move Left 1.5 Units And Into The Screen 6.0glRotatef(rtri, 0, 1, 0); // Rotate around the Y axis with the rtri parameter

glBegin(GL_TRIANGLES); // Drawing Using TrianglesglColor3f(1.0f,0.0f,0.0f); // Set The Color To RedglVertex3f( 0.0f, 1.0f, 0.0f); // TopglColor3f(0.0f,1.0f,0.0f); // Set The Color To GreenglVertex3f(-1.0f,-1.0f, 0.0f); // Bottom LeftglColor3f(0.0f,0.0f,1.0f); // Set The Color To BlueglVertex3f( 1.0f,-1.0f, 0.0f); // Bottom RightglEnd(); // Finished Drawing The Triangle

glPopMatrix();

glPushMatrix();glLoadIdentity();glTranslatef(1.5f,0.0f,-6.0f); // Move Right 1.5 UnitsglRotatef(rquad, 1,0, 0);



Change it to this:

Applying I.S.R.O.T




glPopMatrix();

glPushMatrix();glLoadIdentity();glTranslatef(1.5f,0.0f,-6.0f); // Move Right 1.5 UnitsglRotatef(rquad, 1,0, 0); // Rotate around the X axis with the rquad parameter



Change it to this:

Applying I.S.R.O.T

Applying I.S.R.O.T




glPopMatrix();

glPushMatrix();glLoadIdentity();glTranslatef(1.5f,0.0f,-6.0f); // Move Right 1.5 UnitsglRotatef(rquad, 1,0, 0); // Rotate around the X axis with the rquad parameter



Change it to this:

Let’s Clean the Code a Bit..(You can find it in L02-Sol01)

Transformation Example

void DrawTriangle(){

rtri+=0.2f;glPushMatrix();glLoadIdentity();glTranslatef(-1.5f,0.0f,-6.0f); glRotatef(rtri, 0, 1, 0);

glBegin(GL_TRIANGLES);glColor3f(1.0f,0.0f,0.0f);glVertex3f( 0.0f, 1.0f, 0.0f); glColor3f(0.0f,1.0f,0.0f);glVertex3f(-1.0f,-1.0f, 0.0f);glColor3f(0.0f,0.0f,1.0f);glVertex3f( 1.0f,-1.0f, 0.0f); glEnd();glPopMatrix();

}

void DrawQuad(){

rquad-=0.15f;glPushMatrix();glLoadIdentity();glTranslatef(1.5f,0.0f,-6.0f)glRotatef(rquad, 1,0, 0);

glBegin(GL_QUADS);glVertex3f(-1.0f, 1.0f, 0.0f); glVertex3f( 1.0f, 1.0f, 0.0f); glVertex3f( 1.0f,-1.0f, 0.0f); glVertex3f(-1.0f,-1.0f, 0.0f); glEnd();glPopMatrix();

}

int DrawGLScene(GLvoid){

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glLoadIdentity();

DrawTriangle();DrawQuad();

return TRUE;}





}

void DrawQuad(){



}




return TRUE;}





}

void DrawQuad(){



}




return TRUE;}

Viewports

Viewports

• glViewport(x, y, width, height)

• glViewport(0, 0, window_width, window_height);– Will use all the window for drawing

Viewports

• Here is it, in ReSizeGLScene method.


{




glLoadIdentity();



glLoadIdentity();

}

So let’s wrap up!Transformation Pipeline

OpenGL Architecture

DisplayList

PolynomialEvaluator

Per VertexOperations &

PrimitiveAssembly

RasterizationPer Fragment

OperationsFrameBuffer

TextureMemory

CPU

PixelOperations

OpenGL Architecture

DisplayList

PolynomialEvaluator

Per VertexOperations &

PrimitiveAssembly

RasterizationPer Fragment

OperationsFrameBuffer

TextureMemory

CPU

PixelOperations

We are here, Let’s zoom in!

vertex

ModelviewMatrix

ProjectionMatrix

PerspectiveDivision

ViewportTransform

Modelview

Modelview

Projection

lll

object eye clip normalizeddevice

window

• other calculations here– material and color– shade model (flat)– polygon rendering mode– polygon culling– clipping

Transformation Pipeline

vertex

ModelviewMatrix

ProjectionMatrix

PerspectiveDivision

ViewportTransform

Modelview

Modelview

Projection

lll


window



vertex

ModelviewMatrix

ProjectionMatrix

PerspectiveDivision

ViewportTransform

Modelview

Modelview

Projection

lll


window



vertex

ModelviewMatrix

ProjectionMatrix

PerspectiveDivision

ViewportTransform

Modelview

Modelview

Projection

lll


window



vertex

ModelviewMatrix

ProjectionMatrix

PerspectiveDivision

ViewportTransform

Modelview

Modelview

Projection

lll


window

