3D Graphics with OpenGL CSCE 458 Fall 2004

3D Graphics with OpenGL CSCE 458 Fall 2004
Chang-Hun Kim Department of Computer Science Korea University

Reference Books Practical Algorithms for 3D Computer Graphics
R. Stuart Ferguson Introduction of 3D Graphics with OpenGL/DirectX OpenGL Programming Guide 4th Edition Dave Shreiner, Mason Woo, Jackie Neider, Tom Davis OpenGL bible OpenGL Reference Manual 3rd Edition Dave Shreiner

Reference Websites OpenGL website Basic GLUT information/downloads
Basic GLUT information/downloads

Computer Graphics System
Lighting Projection Transformation Shading, Color, Texture mapping Synthetic Camera Viewport Transformation Image Modeling Transformation Coordinate System Viewing Transformation

What is OpenGL? Software interface to graphics hardware Basic features
Drawing primitives Transformations Shading: Color, lighting Advanced features Texture mapping Double buffering Frame buffer manipulation Feedback: Picking, selection

Creating OpenGL Programs in MFC

How to Use It? Include the header files Link the libraries
#include <GL/gl.h> #include <GL/glu.h> #include <GL/glaux.h> Link the libraries ‘opengl32.lib’, ‘glu32.lib’, ‘glaux.lib’ : in MFC -laux -ltk -lGLU -lGL -lXext -lXll -lm : in UNIX

Getting Started – MFC OpenGL Programming Visual C++ 6.0

New – MFC AppWizard (exe)

New – MFC AppWizard (1/7)

Workspace

Execute

Project Settings (1/2)

Project Settings (2/2)

Include Header Files

Member Variables and Functions

Class Wizard (1/2)

Class Wizard (2/2)

OnCreate( ) (1/2)

OnCreate( ) (2/2) int CPracticeView::OnCreate(LPCREATESTRUCT lpCreateStruct) { if (CView::OnCreate(lpCreateStruct) == -1) return -1; // TODO: Add your specialized creation code here m_pDC = new CClientDC(this); // get device context if( m_pDC == NULL ) ::AfxMessageBox( "fail to get device context" ); return FALSE; } if( !SetupPixelFormat() ) // setup pixel format ::AfxMessageBox( "SetupPixelFormat failed" ); // get rendering context if( ( m_hRC = wglCreateContext(m_pDC->GetSafeHdc()) ) == 0 ) ::AfxMessageBox( "wglCreateContext failed" ); // make current rendering context if( wglMakeCurrent(m_pDC->GetSafeHdc(), m_hRC) == FALSE ) ::AfxMessageBox( "wglMakeCurrent failed" ); return 0;

OnDestory( )

OnEraseBkgnd( ), OnSize( )

PreCreateWindow( ), OnDraw( )

SetupPixelFormat( ) (1/2)

SetupPixelFormat( ) (2/2)
BOOL CPracticeView::SetupPixelFormat(PIXELFORMATDESCRIPTOR* pPFD) { PIXELFORMATDESCRIPTOR pfd = { sizeof( PIXELFORMATDESCRIPTOR ), 1, PFD_DRAW_TO_WINDOW | PFD_SUPPORT_OPENGL, PFD_TYPE_RGBA, 24, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 0, 0, PFD_MAIN_PLANE, 0, 0, 0, 0 }; int pixelformat; PIXELFORMATDESCRIPTOR* pPFDtoUse; pPFDtoUse = (0 == pPFD)? &pfd : pPFD; if ( 0 == ( pixelformat = ::ChoosePixelFormat( m_pDC->GetSafeHdc(), pPFDtoUse ) ) ) ::AfxMessageBox( "ChoosePixelFormat failed" ); return FALSE; } if ( FALSE == ::SetPixelFormat( m_pDC->GetSafeHdc(), pixelformat, pPFDtoUse ) ) ::AfxMessageBox( "SetPixelFormat failed" ); return TRUE;

All the drawing commands must be in this function!!!
DrawScene( ) // set the background color // clear screen (with the background color) All the drawing commands must be in this function!!!

Result – Simple Program

Drawing OpenGL Primitives

OpenGL Primitives Points Lines Triangles Quadrilaterals Polygons

DrawScene( ) – 2D Points // A // B // C // D

Result – 2D Points B C A D

DrawScene( ) – 2D Lines (1/3)
// line AB // line CD

Result – 2D Lines (1/3) B C A D

// line AB // line BC // line CD

// line AB // line BC // line CD // line DA

DrawScene( ) – Line Pattern
Pair

Result – Line Pattern

DrawScene( ) – Triangles (1/3)
// triangle ABC // discarded

Result – Triangles (1/3) B C A D

// triangle ABC // triangle BCD

Result – Triangles (2/3) v3 v1 v5 v4 v2 B C A D

// triangle ABC // triangle ACD

Result – Triangles (3/3) v3 v2 v4 v1 B C v5 A D

DrawScene( ) – Polygon Pattern

Result – Polygon Pattern

DrawScene( ) – Quadrilaterals
// quad ABCD // quad EFGH

Result – Quadrilaterals (1)
B C F G A D E H

DrawScene( ) – Quadrilaterals
// quad ABDC // quad CDFE // quad EFHG

Result – Quadrilaterals (2)
B D F H A C E G

DrawScene( ) – Polygons
// polygon ABCDEFGH

Result – Polygons B C D E A H G F

Applications - Interaction by Mouse Event

Mouse Event Handling

New Member Variables

Constructor

Mouse Button Up // call OnDraw()

Mouse Button Down

Mouse Button Move

DrawScene( )

Result – Mouse Dragging

Result – After Dragging

Applications - Animation by Timer

Rotating a Square Four vertices of the square
Four equally spaced points on a circle (-sinθ, cosθ) (cosθ, sinθ) (-cosθ, -sinθ) (sinθ, -cosθ)

Class Wizard

New Variables

Constructor

OnCreate( )

OnSize( )

DrawScene( )

Math Header File

OnTimer( )

Result – Rotating a Square

Double Buffering (1/2)

Double Buffering (2/2)

Interaction by the Keyboard

Key Event Handling

Interaction by the Menu

Resources – Menu (1/2)

Resources – Menu (2/2)

Class Wizard

Reset Function

Basic 3D Programming

Contents Camera and Objects Orthographic Projection Drawing a Cube
Locating the Camera Building Objects Hidden Surface Removal Rotating a Color Cube Exercises

Cameras and Objects (1/3)
Projection Synthetic camera model Projectors, center of projection, projection plane

Projection plane In front of the camera

View frustum 6 parameters Truncated pyramid Clipping volume

Orthographic Projection (1/2)
y void glOrtho(GLdouble left, GLdouble right, GLdouble bottom, GLdouble top, GLdouble near, GLdouble far) x z

Orthographic Projection (2/2)

Drawing a Cube (1/3) GLUT Library
glut.h (include), glut32.lib (lib), glut32.dll (system32) void glutWireCube(GLdouble size) void glutSoildCube(GLdouble size)

Drawing a Cube (2/3)

Drawing a Cube (3/3)

GLUT Objects Sphere, cone, Utah teapot, etc.
void glutWireSphere(GLdouble radius, GLint slices, GLint stacks) void glutSolidSphere(GLdouble radius, GLint slices, void glutWireTorus(GLdouble inner, GLdouble outer, GLint sides, GLint slices) void glutSolidTorus(GLdouble inner, GLdouble outer, void glutWireTeapot(GLdouble size) void glutSolidTeapot(GLdouble size)

Locating Camera (1/3) Position and orientation of the camera
Eye position, target point, up vector void gluLookAt(GLdouble eyex, GLdouble eyey, GLdouble eyez, GLdouble atx, GLdouble aty, GLdouble atz, GLdouble upx, GLdouble upy, GLdouble upz)

Locating Camera (2/3)

Locating Camera (3/3)

Building Objects (1/6)

Building Objects (2/6) GLfloat vertices[8][3] = { { -1, -1, 1 }, { -1, 1, 1 }, { 1, 1, 1 }, { 1, -1, 1 }, { -1, -1, -1 }, { -1, 1, -1 }, { 1, 1, -1 }, { 1, -1, -1 } }; GLfloat colors[8][3] = { { 0, 0, 1 }, { 0, 1, 1 }, { 1, 1, 1 }, { 1, 0, 1 }, { 0, 0, 0 }, { 0, 1, 0 }, { 1, 1, 0 }, { 1, 0, 0 } }; glBegin(GL_QUADS); // quad #1 glColor3fv(colors[0]); glVertex3fv(vertices[0]); glColor3fv(colors[3]); glVertex3fv(vertices[3]); glColor3fv(colors[2]); glVertex3fv(vertices[2]); glColor3fv(colors[1]); glVertex3fv(vertices[1]); // quad #2 glColor3fv(colors[7]); glVertex3fv(vertices[7]); glColor3fv(colors[6]); glVertex3fv(vertices[6]);

Building Objects (3/6) // quad #3
glColor3fv(colors[3]); glVertex3fv(vertices[3]); glColor3fv(colors[0]); glVertex3fv(vertices[0]); glColor3fv(colors[4]); glVertex3fv(vertices[4]); glColor3fv(colors[7]); glVertex3fv(vertices[7]); // quad #4 glColor3fv(colors[1]); glVertex3fv(vertices[1]); glColor3fv(colors[2]); glVertex3fv(vertices[2]); glColor3fv(colors[6]); glVertex3fv(vertices[6]); glColor3fv(colors[5]); glVertex3fv(vertices[5]); // quad #5 // quad #6 glEnd();

Hidden Surface Removal (1/2)
Z-Buffer (depth buffer) Extra storage to store depth information

Hidden Surface Removal (2/2)

Rotating a Cube (1/3)

Transformation

Contents OpenGL Transformation Matrices Translation Rotation Scaling

OpenGL Transformation Matrices
Matrix modes Model-view and projection matrices Three basic functions Translation, rotation, scaling 3D vertices 2D vertices model-view projection CTM (Current Transformation Matrix) glTranslatef(dx, dy, dz); glRotatef(angle, vx, vy, vz); glScalef(sx, sy, sz);

void glTranslate{fd} (TYPE dx, TYPE dy, TYPE dz)
Translation (1/5) Add a displacement to every vertex on the object void glTranslate{fd} (TYPE dx, TYPE dy, TYPE dz) object centered at origin object moved away from the camera

Translation (2/5)

Translation (3/5)

Translation (4/5)

Translation (5/5)

glPushMatrix, glPopMatrix (1/2)
perform a transformation and then return to the same state as before its execution glPushMatrix(); glTranslatef(.....); glRotatef(.....); glScalef(.....); /* draw object here */ glPopMatrix();

glPushMatrix, glPopMatrix (2/2)

void glRotate{fd} (TYPE angle, TYPE ax, TYPE ay, TYPE az)
Rotation Rotate in counterclockwise direction About the given axis with fixed point of the origin void glRotate{fd} (TYPE angle, TYPE ax, TYPE ay, TYPE az) glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glTranslatef(xf, yf, zf); glRotatef(angle, ax, ay, az); glTranslatef(-xf, -yf, -zf) general rotation

void glScale{fd} (TYPE sx, TYPE sy, TYPE sz)
Scaling Make an object bigger or smaller With scale factors and fixed point of the origin void glScale{fd} (TYPE sx, TYPE sy, TYPE sz) scaling with nonuniform scale factors

Viewing

Contents Projections in OpenGL Parallel viewing Perspective viewing
Orthographic projection Perspective viewing Perspective projection Walk through a scene Look-at function Shadow projection

Definition of Eye Position

Initialization of Eye Position

Modification – DrawScene( )

OnKeyDown( )

Result – Walking Though a Scene

Light & Material

Contents Phong reflection model OpenGL lighting
Diffuse, specular, and ambient reflections OpenGL lighting Specifying a light source Point, distant, and spot lights Specifying a material Exercise

DrawScene( ) – WireTeapot

Wired Utah Teapot

Shade Model glShadeModel(GLenum mode) mode Change the shading model
Flat or smooth (Gouraud) Can be called in ... OnSize(), DrawScene() mode GL_FLAT GL_SMOOTH: Default value

Working with Normals (1/2)
Flat shading p0 p1 p2 glShadeModel(GL_FLAT); glBegin(GL_TRIANGLES); glNormal3fv(n); glVertex3fv(p1); glVertex3fv(p2); glVertex3fv(p3); glEnd();

Working with Normals (2/2)
Smooth shading glShadeModel(GL_SMOOTH); glBegin(GL_TRIANGLES); glNormal3fv(n1); glVertex3fv(p1); glNormal3fv(n2); glVertex3fv(p2); glNormal3fv(n3); glVertex3fv(p3); glEnd();

Flat-Shaded Sphere

Smooth-Shaded Sphere

Phong Reflection Model
Simple analytic model: Diffuse reflection + Specular reflection + Emission + “Ambient”

Diffuse Reflection (1/2)
Surface reflects equally in all directions Examples: chalk, clay

Diffuse Reflection (2/2)
How much light is reflected? Depends on angle of incident light dL = dA cos Q Cosine law (dot product)

Specular Reflection (1/3)
Strongest reflection near mirror angle Examples: mirrors, metals

How much light is seen? Depends on ... Angle of incident light and Angle to viewer

Phong model {cos(a)}n

Emission Light emitting directly from polygon Emission ≠ 0

Total Illumination Result
Ambient Reflection of all indirect illumination Total Illumination Result

OpenGL Lighting Target to enable All colors will be assigned based on
“Lighting calculation” mode Each “light source” All colors will be assigned based on Light sources and Material properties not by glColor*( ) glEnable(GL_LIGHTING); glEnable(GL_LIGHT0); glEnable(GL_LIGHT1); . glEnable(GL_LIGHTn);

DrawScene( ) – SolidTeapot

Solid Utah Teapot

Enable Lighting (1/3)

Enable Lighting (2/3)

Specifying a Light Source (1/2)
Defaults for “glEnable(GL_LIGHT0)” No ambient light Diffuse and specular component ex) White (1.0, 1.0, 1.0, 1.0) Position ex) (0.0, 0.0, 1.0, 0.0)  distant light

Specifying a Light Source (2/2)
Create a light source light GL_LIGHT0, GL_LIGHT1, … param GL_POSITION, GL_DIFFUSE, GL_SPECLAR, GL_AMBIENT glLight{if}(GLenum light, GLenum param, TYPE value); glLight{if}v(GLenum light, GLenum param, TYPE *value);

Light Sources Distant light Point light Spot light
GL_POSITION, GL_DIFFUSE, GL_SPECULAR, GL_AMBIENT Point light GL_CONSTANT_ATTENUATION, GL_LINEAR_ATTENUATION, GL_QUADRATIC_ATTENUATION Spot light GL_SPOT_DIRECTION, GL_SPOT_CUTOFF, GL_SPOT_EXPONENT

Point Light Source (1/2)

Point Light Source (2/2)

Control of Light Position (1/4)

Specifying All Terms (1/2)

Specifying All Terms (2/2)

Point Light – Attenuation (1/2)

Point Light – Attenuation (2/2)

Spot Light (1/4)

Spot Light (2/4)

Spot Light (3/4)

Spot Light (4/4)

Multiple Lights (1/2)

Multiple Lights (2/2)

Specifying a Material (1/5)
Reflectivity properties of a material face GL_FRONT, GL_BACK, GL_FRONT_AND_BACK name GL_DIFFUSE, GL_SPECLAR, GL_AMBIENT, GL_AMBIENT_AND_DIFFUSE, GL_EMISSION, GL_SHININESS glMaterial{if}(GLenum face, GLenum name, TYPE value); glMaterial{if}v(GLenum face, GLenum name, TYPE *value);

White Shiny Material (1/2)

White Shiny Material (2/2)

Brass Material (1/2)

Brass Material (2/2)

Red Plastic Material (1/2)

Red Plastic Material (2/2)

Multiple Objects (1/2)

Multiple Objects (2/2)

Exercise Create yours!! color plate 25

Texture Mapping

Contents Texels and textures Constructing a texture map
Texture coordinates Texture parameters A rotating cube with texture Texture mapping with images Exercise

Texels and Textures Texels – texture elements
Texture coordinates (s, t)

Constructing a Texture Map
Steps: Read an image for the texture map Define parameters that determine how the texture should be applied Define texture coordinates for the vertices

1D, 2D, & 3D Texture Maps void glTexImage1D(GLenum target, GLint level, GLint iformat, GLsizei width, GLint border, GLenum format, GLenum type, Glvoid *texels); void glTexImage2D(GLenum target, GLint level, GLint iformat, GLsizei width, GLsizei height, GLint border, GLenum format, GLenum type, Glvoid *texels); void glTexImage3D(GLenum target, GLint level, GLint iformat, GLsizei width, GLsizei height, Glsizei depth, GLint border, GLenum format, GLenum type, Glvoid *texels);

2D Texture Map A continuous image in (s, t) space Texture Map
Texture Image

Texture Coordinates (1/2)
Mapping between points on geometric objects and texels ex) Mapping the texture to a quadrilateral void glTexCoord{1234}{sifd}(TYPE scoord, ...); void glTexCoord{1234}{sifd}v(TYPE *coord); glBegin(GL_QUADS); glTexCoord2f(0.0, 0.0); glVertex3fv(vertex[0]); glTexCoord2f(0.0, 1.0); glVertex3fv(vertex[1]); glTexCoord2f(1.0, 1.0); glVertex3fv(vertex[2]); glTexCoord2f(1.0, 0.0); glVertex3fv(vertex[3]); glEnd();

Texture Coordinates (2/2)
A checkerboard texture to a quadrilateral Texture Map Quadrilateral

Texture Parameters (1/3)
Control over how the texture is applied to the surface Deciding what to do if values are out of (0, 1) GL_CLAMP void glTexParameter{if}(GLenum target, GLenum name, TYPE value); void glTexParameter{if}v(GLenum target, GLenum name, TYPE *value); glTexParameter(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameter(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T,

Pre-image of the pixel Texture mapping is not really applied to the surface but rather a pixel in screen coordinates Magnification Each texel covers multiple pixels Minification Each pixel covers multiple texels Magnification Minification

Point sampling OpenGL uses to average a 2x2 array of neighboring texels GL_LINEAR glTexParameter(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST); glTexParameter(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER,

A Rotating Cube with Texture

Constructor

DrawQuad( )

DrawScene( )

A Color Cube

DrawQuad( )

Texture Images Load a BMP file for a texture image

OpenGL Auxiliary Library

Project Settings

DrawScene( )

LoadTexture( )

Result – Texture Mapping (1)

Multiple Texture Images

LoadTexture( )

DrawScene( )

Result – Texture Mapping (2)

3D Graphics with OpenGL CSCE 458 Fall 2004

Similar presentations

Presentation on theme: "3D Graphics with OpenGL CSCE 458 Fall 2004"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

3D Graphics with OpenGL CSCE 458 Fall 2004

Similar presentations

Presentation on theme: "3D Graphics with OpenGL CSCE 458 Fall 2004"— Presentation transcript:

Similar presentations

About project

Feedback