OpenGL L02-Transformations

Mohammad Shaker

mohammadshaker.com

@ZGTRShaker

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

RULETO SEE A 3D SCENE YOU SHOULD SET UP:

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();

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

• 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

Rotate

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);

÷÷÷÷÷÷

çççççç

÷÷÷÷÷÷

çççççç

World Matrices

• glLoadIdentity();

RULE Remember, Remember?

OpenGL programming is state-machine based

Changing State Without you knowing you’re

changing the state is a very big deal/Problem

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

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

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

• 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();

So let’s wrap up!Transformation Pipeline

OpenGL Architecture

DisplayList

PolynomialEvaluator

Per VertexOperations &

PrimitiveAssembly

RasterizationPer Fragment

OperationsFrameBuffer

TextureMemory

PixelOperations

OpenGL Architecture

DisplayList

PolynomialEvaluator

Per VertexOperations &

PrimitiveAssembly

RasterizationPer Fragment

OperationsFrameBuffer

TextureMemory

PixelOperations

We are here, Let’s zoom in!

vertex

ModelviewMatrix

ProjectionMatrix

PerspectiveDivision

ViewportTransform

Modelview

Projection

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

Projection

window

vertex

ModelviewMatrix

ProjectionMatrix

PerspectiveDivision

ViewportTransform

Modelview

Projection

window

vertex

ModelviewMatrix

ProjectionMatrix

PerspectiveDivision

ViewportTransform

Modelview

Projection

window

vertex

ModelviewMatrix

ProjectionMatrix

PerspectiveDivision

ViewportTransform

Modelview

Projection

window

OpenGL L02-Transformations

Software

L02 Page 1lapchi/cs860/notes/L02.pdf · L02 Page 5 . L02 Page 6 . L02 Page 7 . L02 Page 8 . Created Date: 5/8/2019 2:57:46 PM

Transformations & Matricesedeleastar.github.io/opengl-programming/topic05/... · OpenGL. Learning Outcomes • Have a deeper insight into the functioning of the Transformation Pipeline

Computer Graphics 2016 6. Geometric Transformations Computer Graphics 2016, ZJU Programming Transformations • In OpenGL, the transformation matrices are part of the state, they must

OpenGL Transformations

Transformations de scène avec OpenGlberu.univ-brest.fr/~singhoff/ENS/UE_Animation/CM/trans.pdf · 2018. 3. 2. · Transformations de scène avec OpenGl Frank Singhoff Bureau C-203

l02 - brown.edu

Chapter 7 2D Geometric Transformations - SJTUshengbin/course/cg/lecture notes/CG8_(ch7-III... · Chapter 7 Two-Dimensional Geometric Transformations 2 Part III. • OpenGL Functions

L02 Architecture

Open Standards for Today’s Gaming Industry€¦ · Accelerating OpenGL Innovation DirectX 10.1 OpenGL 2.0 OpenGL 2.1 OpenGL 3.0 OpenGL 3.1 DirectX 9.0c DirectX 10.0 DirectX 11 OpenGL

L02 - 2D Graphics and OpenGL Primer

Image Processing and Computer Graphics Projections and Transformations … · · 2016-01-13Image Processing and Computer Graphics Projections and Transformations in OpenGL.

Transformations in OpenGL - Duke University · 2015. 2. 5. · OpenGL Functions •Transformations in OpenGL are not drawing commands. They are retained as part of the graphics state

L02 History

1 Lecture 7 Geometrical Transformations: 2D transformations 3D transformations Matrix representation OpenGL functions

lecture 3 view transformations model transformations GL ...langer/557/3-slides.pdf · As a programmer using OpenGL, you don't have to compute these vectors. Instead you just define:

Intro to OpenGL Transformations CS 445/645 Introduction to Computer Graphics David Luebke, Spring 2003

1 Modeling Transformations 2D Transformations 3D Transformations OpenGL Transformation

Transformations in OpenGL - cs.duke.edu · OpenGL Functions •Transformations in OpenGL are not drawing commands. They are retained as part of the graphics state. •When drawing

2D Transformations 3D Transformations OpenGL Transformationsabbirsaleh.weebly.com/.../1/0/4510327/4_transformations.pdf · 2018. 9. 6. · 3D Transformations OpenGL Transformation

L02 Lecture