Download - Lecture 02: OpenGL (Fixed-Function)
![Page 1: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/1.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 1/6002 – OpenGL
Lecture 02:OpenGL (Fixed-Function)
COMP 175: Computer GraphicsJanuary 26, 2016
![Page 2: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/2.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 2/6002 – OpenGL
Seems possible, but it’s still in the early stages.
Support for OpenGL seems to top out at 3.3 (which is plenty good for the purpose of this class, but latest version is 4.5)
Using MESA is an option, but MESA is a software emulation of a graphics card.
A Note on OpenGL on VMWare
![Page 3: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/3.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 3/6002 – OpenGL
For the Windows users, download Visual Studio from Tufts UIT (which is free).
This is important for Thursday’s lab – you don’t want to spend 45 minutes downloading and installing VS and only end up with 20 minutes to get Lab0 to work.
Common question that I get: why use Windows?
TODO:
![Page 4: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/4.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 4/6002 – OpenGL
What is event-based programming?
Infinite loop until user clicks on “exit”
During that time, the system reacts to events Keyboard, mouse Network traffic Threads
The most relevant for visualization/graphics are: Repaint event Idle event
Note on Event-Based Programming
![Page 5: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/5.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 5/6002 – OpenGL
Conceptual Graphics Framework
Graphics Library can be Direct3D, Java3D, OpenGL, etc. It is a software API that controls the functions of a piece
of hardware – the graphics card. Can we run OpenGL programs remotely? (e.g., use
linux.cs.tufts.edu remotely through SSH and X-tunneling?)
What is OpenGL?
GraphicsSystem/
GPUApplicatio
nModel
(database)
Software Hardware
Applicationprogram
GraphicsLibrary
![Page 6: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/6.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 6/6002 – OpenGL
In Immediate-Mode Fixed-Function mode, OpenGL acts as a state machine.
What is a state machine?
Every variable is a “global variable” For example, the current color
You need to keep track of the states… Or query the graphics card if you forget Which, of course, is slow
Graphics Library
![Page 7: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/7.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 7/6002 – OpenGL
Pseudo code:
SetState (LineStyle, DASHED);
SetState (LineColor, RED);
DrawLine ( PtStart = (x1,y1), PtEnd = (x2,y2) );
SetState (LineColor, BLUE);
DrawLine ( PtStart = (x2,y2), PtEnd = (x3,y3) );
SetState (LineStyle, SOLID);
DrawLine ( PtStart = (x3,y3), PtEnd = (x1,y1) );
State Variables
What color and shape?
What color and shape?
What color and shape?
![Page 8: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/8.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 8/6002 – OpenGL
Pseudo code:
SetState (LineStyle, DASHED);
SetState (LineColor, RED);
DrawLine ( PtStart = (x1,y1), PtEnd = (x2,y2) );
SetState (LineStyle, DASHED);
SetState (LineColor, BLUE);
DrawLine ( PtStart = (x2,y2), PtEnd = (x3,y3) );
SetState (LineStyle, SOLID);
SetState (LineColor, BLUE);
DrawLine ( PtStart = (x3,y3), PtEnd = (x1,y1) );
State Variables
What color and shape?
What color and shape?
What color and shape?
![Page 9: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/9.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 9/6002 – OpenGL
What if…?
function DrawDashedTriangle (pt1,pt2,p3) {SetState( LineStyle, DASHED );DrawLine( PtStart=pt1, PtStart=p2 );DrawLine( PtStart=pt2, PtStart=p3 );DrawLine( PtStart=pt3, PtStart=p1 );
} What color is the triangle?
Pros:?? Cons:??
State Variables – Pros and Cons
![Page 10: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/10.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 10/6002 – OpenGL
What if…?
function DrawDashedTriangle (pt1,pt2,p3) {SetState( LineStyle, DASHED );DrawLine( PtStart=pt1, PtStart=p2 );DrawLine( PtStart=pt2, PtStart=p3 );DrawLine( PtStart=pt3, PtStart=p1 );}
What color is the triangle? Pros: trickle down effect, caller can control the subroutine’s
behavior Cons: the color is undefined! Who set my color?!
State Variables – Pros and Cons
![Page 11: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/11.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 11/6002 – OpenGL
What’s right and what’s wrong with this?
function DrawTriangle (pt1,pt2,p3, int origColor, int curColor, int origStyle, int curStyle ) {SetState( LineStyle, curStyle );SetState(LineColor, curColor);DrawLine( PtStart=pt1, PtStart=p2 );DrawLine( PtStart=pt2, PtStart=p3 );DrawLine( PtStart=pt3, PtStart=p1 );SetState( LineStyle, origStyle );SetState(LineColor, origColor);}
State Variables – Pros and Cons
![Page 12: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/12.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 12/6002 – OpenGL
Bundles and unsets…
function DrawRedDashedTriangle(pt1,pt2,p3){PushAttributeState();SetState( LineStyle, DASHED );SetState( LineColor, RED );...PopAttributeState();}
This eliminates the state variable problem.
Still A Pain, but Cleaner…
![Page 13: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/13.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 13/6002 – OpenGL
What does this function do?
//using idleFunc as the main render loopvoid idleFunc () {glTranslate3f (1, 0, 0);glBegin(GL_POINTS);glVertex3f (0, 0, 0);glEnd();}
Where is the point showing up? How do I get that value?
Another Example
![Page 14: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/14.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 14/6002 – OpenGL
What if I forget to set some state?DrawLine ( PtStart = (x1,y1), PtEnd = (x2,y2) );
What if I set the wrong state?SetState(LineStyle, 12345);DrawLine( PtStart=pt1, PtStart=p2 );
What if I forget the state a variable is in?
Forgetting the State?
![Page 15: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/15.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 15/6002 – OpenGL
What if I forget to set some state?DrawLine ( PtStart = (x1,y1), PtEnd = (x2,y2) );
OpenGL provides some good default values. For example, for color, it’s set to (1,1,1,1) – non transparent white
How do I know if something worked?SetState(LineStyle, 12345);DrawLine( PtStart=pt1, PtStart=p2 );
You don’t. Since it’s not clear if some configuration of states will send OpenGL spinning, if you suspect an error from OpenGL, call
Glenum glGetError(void)
What if I forget the state a variable is in? You should use this sparingly… But you can use
void glGetBooleanv(Glenum paraname, Glboolean* params)
void glGetFixedv(Glenum paraname, Glfixed* params)
void glGetFloatv(Glenum paraname, Glfloat* params)
void glGetIntegerv(Glenum paraname, Glint* params)
Forgetting the State?
![Page 16: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/16.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 16/6002 – OpenGL
What do you think is the best way to deal with the state machine and maintain state variables? How to access local variables (that correspond to state
variables)? Efficiency considerations?
How do you think the programming with a state machine affects multi-threaded applications?
Programming Strategies?
![Page 17: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/17.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 17/6002 – OpenGL
How many parameters do you have to pass to render an object?
void render () { obj1->drawSelf(myMouse, myScreenSize, myTimer, ...); obj2->drawSelf(myMouse, myScreenSize, myTimer, ...); obj3->drawSelf(myMouse, myScreenSize, myTimer, ...);}
How do you enforce that there is only one instance of myMouse, myScreenSize, myTimer in code?
For Example
![Page 18: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/18.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 18/6002 – OpenGL
1. Use global variables
2. Use mutual references. For example:
Possible Answers?
void setChild (CWidget* child) { myChild = child; child->setParent(this);}
MyMouse* getMouse() { return myMouse;}
void setParent (PWidget* parent) { myParent = parent;}
void doStuff () { MyMouse mouse = myParent->getMouse(); doStuffWithMouse (mouse);}
![Page 19: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/19.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 19/6002 – OpenGL
Problems: Need to guarantee a single instance of the states Don’t want to pass a billion parameters during the
execution of every child object Don’t want the child to have to call
parent->parent->parent->parent->getProperties();
One possible answer is to use Singletons
Possible Answers?
![Page 20: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/20.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 20/6002 – OpenGL
//h file
class Singleton {
public:
static Singleton* Instance();
~Singleton();
int getValue();
private:
Singleton();
int m_value;
static Singleton* sm_instance;
};
Singleton Example//c++ file
Singleton* Singleton::sm_instance = NULL;
Singleton::Singleton() {
}
Singleton::~Singleton() {
}
Singleton* Singleton::Instance() {
if (Singleton::sm_instance == NULL) {
Singleton::sm_instance = new Singleton();
}
return Singleton::sm_instance;
}
int Singleton::getValue() {
return m_value;
}
//main.cpp file
int main (int argc, char** argv) {
//blah blah blah
Singleton* singletonObj = Singleton::Instance();
delete singletonObj;
return 0;
}
![Page 21: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/21.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 21/6002 – OpenGL
What do you think is the best way to deal with the state machine and maintain state variables? How to access local variables (that correspond to state
variables)? Efficiency considerations?
How do you think the programming with a state machine affects multi-threaded applications?
Programming Strategies?
![Page 22: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/22.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 22/6002 – OpenGL
Thread A Thread B
void drawRedDashedTriangle() { pushAttributes();
setColor (RED); setStyle (DASHED); drawLine (pt1+d, pt2+d); drawLine (pt2+d, pt3+d); drawLine (pt3+d, pt1+d); d++; popAttributes(); }
void drawBlueSolidTriangle() { pushAttributes();
setColor (BLUE); setStyle (SOLID); drawLine (pt4-p, pt5-p); drawLine (pt5-p, pt6-p); drawLine (pt6-p, pt4-p); p--; popAttributes(); }
Multi-Threading and OpenGL
![Page 23: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/23.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 23/6002 – OpenGL
Thread A Thread B
void drawRedDashedTriangle() { mutex.lock(); pushAttributes();
setColor (RED); setStyle (DASHED); drawLine (pt1+d, pt2+d); drawLine (pt2+d, pt3+d); drawLine (pt3+d, pt1+d); d++; popAttributes(); mutex.unlock();}
void drawBlueSolidTriangle() { mutex.lock(); pushAttributes();
setColor (BLUE); setStyle (SOLID); drawLine (pt4-p, pt5-p); drawLine (pt5-p, pt6-p); drawLine (pt6-p, pt4-p); p--; popAttributes(); mutex.unlock();}
Multi-Threading and OpenGL
![Page 24: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/24.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 24/6002 – OpenGL
Questions?
![Page 25: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/25.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 25/6002 – OpenGL
Typical OpenGL Application
![Page 26: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/26.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 26/6002 – OpenGL
Here we use GLUT, which is a basic GL window implementation that is on all platforms.
Pros: cross-platform, command line, easy to use Cons: no GUI support (no buttons, menus, etc.)
Example
![Page 27: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/27.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 27/6002 – OpenGL
int main( int argc, char** argv ) {
glutInit( &argc, argv ); // Boilerplate initialization
glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);
glutInitWindowPosition( 50, 50 ); //upper left
glutInitWindowSize( 640, 480 ); // width, height, in pixels
glutCreateWindow( "OpenGL Example" ); // window title
glViewport(
/* lower left corner of the viewport */ 0, 0,
/* width, height of the viewport */ 640, 480 ); //lower left
Example OpenGL Application
What’s going on here?
![Page 28: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/28.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 28/6002 – OpenGL
int main( int argc, char** argv ) {
glutInit( &argc, argv ); // Boilerplate initialization
glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);
Example OpenGL Application
#define GLUT_RGB 0 #define GLUT_RGBA GLUT_RGB #define GLUT_INDEX 1 #define GLUT_SINGLE 0 #define GLUT_DOUBLE 2 #define GLUT_ACCUM 4 #define GLUT_ALPHA 8 #define GLUT_DEPTH 16 #define GLUT_STENCIL 32 #if {GLUT_API_VERSION >= 2} #define GLUT_MULTISAMPLE 128 #define GLUT_STEREO 256 #endif #if {GLUT_API_VERSION >= 3} #define GLUT_LUMINANCE 512 #endif
What is a Bit Mask?
![Page 29: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/29.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 29/6002 – OpenGL
Let’s say I have a bit string to store the current state of my variables: 1001
Making the state: int myState = (var1 | var4)
Checking the state: If I want to ask if variable 1 is on: if (myState & var1 > 0)
Lastly, on image-based bit masking…
Quick Word on Bit Masking…
*Note: the black pixels represent “transparent pixels”
![Page 30: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/30.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 30/6002 – OpenGL
int main( int argc, char** argv ) {
glutInit( &argc, argv ); // Boilerplate initialization
glutInitDisplayMode( GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH );
glutInitWindowPosition( 50, 50 ); //upper left
glutInitWindowSize( 640, 480 ); // width, height, in pixels
glutCreateWindow( "OpenGL Example" ); // window title
glViewport(
/* lower left corner of the viewport */ 0, 0,
/* width, height of the viewport */ 640, 480 ); //lower left
Example OpenGL Application
Careful!!
![Page 31: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/31.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 31/6002 – OpenGL
![Page 32: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/32.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 32/6002 – OpenGL
int main( int argc, char** argv ) {glutInit( &argc, argv ); // Boilerplate initializationglutInitDisplayMode( GLUT_RGB | GLUT_DEPTH );
glutInitWindowPosition( 50, 50 ); //upper leftglutInitWindowSize( 640, 480 ); // width, height, in pixelsglutCreateWindow( "OpenGL Example" ); // window title
glViewport(/* lower left corner of the viewport */ 0, 0,/* width, height of the viewport */ 640, 480 ); //lower left
glShadeModel( GL_SMOOTH );
glPolygonMode( GL_FRONT, GL_FILL );
setupLighting();
setupCamera(640, 480);
registerCallBacks();
glutMainLoop();
}
Example OpenGL Application
Asks OpenGL to render with smooth (Gouraud) shading. Other option is GL_FLAT
![Page 33: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/33.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 33/6002 – OpenGL
int main( int argc, char** argv ) {glutInit( &argc, argv ); // Boilerplate initializationglutInitDisplayMode( GLUT_RGB | GLUT_DEPTH );
glutInitWindowPosition( 50, 50 ); //upper leftglutInitWindowSize( 640, 480 ); // width, height, in pixelsglutCreateWindow( "OpenGL Example" ); // window title
glViewport(/* lower left corner of the viewport */ 0, 0,/* width, height of the viewport */ 640, 480 ); //lower left
glShadeModel( GL_SMOOTH );
glPolygonMode( GL_FRONT, GL_FILL );
setupLighting();
setupCamera(640, 480);
registerCallBacks();
glutMainLoop();
}
Example OpenGL Application
Asks OpenGL to render fill the polygons but only in the front-facing sideOptions are GL_BACK, GL_FRONT_AND_BACK, and GL_POINT, GL_LINE, GL_FILL
![Page 34: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/34.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 34/6002 – OpenGL
int main( int argc, char** argv ) {glutInit( &argc, argv ); // Boilerplate initializationglutInitDisplayMode( GLUT_RGB | GLUT_DEPTH );
glutInitWindowPosition( 50, 50 ); //upper leftglutInitWindowSize( 640, 480 ); // width, height, in pixelsglutCreateWindow( "OpenGL Example" ); // window title
glViewport(/* lower left corner of the viewport */ 0, 0,/* width, height of the viewport */ 640, 480 ); //lower left
glShadeModel( GL_SMOOTH );
glPolygonMode( GL_FRONT, GL_FILL );
setupLighting();
setupCamera(640, 480);
registerCallBacks();
glutMainLoop();
}
Example OpenGL Applicationvoid setupLighting() { glEnable (GL_LIGHTING); glEnable (GL_LIGHT0); GLfloat whiteColor[] = {0.25f, 0.25f, 0.25f, 1.0f}; glLightfv (GL_LIGHT0, GL_AMBIENT, whiteColor);
//directional (diffuse) light GLfloat whiteFull[] = {1.0f, 1.0f, 1.0f, 1.0f}; GLfloat lightPos[] = {-1.0f, 1.0f, 1.0f, 0.0f}; glLightfv(GL_LIGHT0, GL_DIFFUSE, whiteFull); glLightfv(GL_LIGHT0, GL_POSITION, lightPos);
GLfloat grey[] = {0.1f, 0.1f, 0.1f, 1.0f}; glMaterialfv(GL_FRONT, GL_DIFFUSE, grey); //reflect 10% diffuse glMaterialfv(GL_FRONT, GL_AMBIENT, whiteFull);}//reflect full ambient
![Page 35: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/35.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 35/6002 – OpenGL
int main( int argc, char** argv ) {glutInit( &argc, argv ); // Boilerplate initializationglutInitDisplayMode( GLUT_RGB | GLUT_DEPTH );
glutInitWindowPosition( 50, 50 ); //upper leftglutInitWindowSize( 640, 480 ); // width, height, in pixelsglutCreateWindow( "OpenGL Example" ); // window title
glViewport(/* lower left corner of the viewport */ 0, 0,/* width, height of the viewport */ 640, 480 ); //lower left
glShadeModel( GL_SMOOTH );
glPolygonMode( GL_FRONT, GL_FILL );
setupLighting();
setupCamera(640, 480);
registerCallBacks();
glutMainLoop();
}
Example OpenGL Applicationvoid setupCamera(int w, int h) { glMatrixMode (GL_PROJECTION); glLoadIdentity(); //left, right, bottom, top gluOrtho(-1, 1, -1, 1);
//same as: (adds near, far) //glOrtho(-1,1,-1,1,-1,1);
//or perspective transform //gluPerspective( // 45, //y-axis field of view // ((float)w/(float)h), // ratio of FOV(x) to FOV(y) // 0.02, //distance to near clip plane // 1000 //distance to far clip plane // );
glMatrixMode (GL_MODELVIEW); glLoadIdentity();}
![Page 36: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/36.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 36/6002 – OpenGL
int main( int argc, char** argv ) {glutInit( &argc, argv ); // Boilerplate initializationglutInitDisplayMode( GLUT_RGB | GLUT_DEPTH );
glutInitWindowPosition( 50, 50 ); //upper leftglutInitWindowSize( 640, 480 ); // width, height, in pixelsglutCreateWindow( "OpenGL Example" ); // window title
glViewport(/* lower left corner of the viewport */ 0, 0,/* width, height of the viewport */ 640, 480 ); //lower left
glShadeModel( GL_SMOOTH );
glPolygonMode( GL_FRONT, GL_FILL );
setupLighting();
setupCamera(640, 480);
registerCallBacks();
glutMainLoop();
}
Example OpenGL Application
void registerCallbacks() { glutReshapeFunc (myReshape); glutKeyboardFunc (myKeyboard); glutMouseFunc (myMouseClick); glutMotionFunc (myMouseMove); glutDisplayFunc (myDisplay); glutIdleFunc (myIdle);}
![Page 37: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/37.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 37/6002 – OpenGL
void myReshape(GLint width, GLint height) { //called when the window is resized
glViewport(0, 0, width, height); setupCamera(width, height);}
void myKeyboard (unsigned car key, int x, int y) { //called on keyboard event switch (key) {
case ‘a’: someGlobalVariable = 1;
: : }}
Example OpenGL Application
void registerCallbacks() { glutReshapeFunc (myReshape); glutKeyboardFunc (myKeyboard); glutMouseFunc (myMouseClick); glutMotionFunc (myMouseMove); glutDisplayFunc (myDisplay); glutIdleFunc (myIdle);}
![Page 38: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/38.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 38/6002 – OpenGL
void myMouseClick(int button, int state, int x, int y) { //called when a mouse click occurs if (button == GLUT_LEFT_BUTTON) { if (state == GLUT_DOWN) {
globalVariableMouseDown = true; } else {
globalVariableMouseDown = false; } }}
void myMouseMove (int x, int y) { //called when a mouse move occurs if (globalVariableMouseDown==true) { //dragging occurs }}
Example OpenGL Application
void registerCallbacks() { glutReshapeFunc (myReshape); glutKeyboardFunc (myKeyboard); glutMouseFunc (myMouseClick); glutMotionFunc (myMouseMove); glutDisplayFunc (myDisplay); glutIdleFunc (myIdle);}
![Page 39: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/39.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 39/6002 – OpenGL
void display(void) { //called when the window needs to paint itself glClear (GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
drawMyStuff(); glutSwapBuffers();
numberOfFrames++;}
void myIdle (void) { //called ALL THE TIME!!
DWORD time_now = GetTickCount(); float diff = (float)(time_now-last_check_time)/1000.0; if (diff > 1.0) { float frameRate = numberOfFrames / (float)diff; numberOfFrames = 0; last_check_time = time_now; } glutPostRedisplay();}
Example OpenGL Application
void registerCallbacks() { glutReshapeFunc (myReshape); glutKeyboardFunc (myKeyboard); glutMouseFunc (myMouseClick); glutMotionFunc (myMouseMove); glutDisplayFunc (myDisplay); glutIdleFunc (myIdle);}
![Page 40: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/40.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 40/6002 – OpenGL
int main( int argc, char** argv ) {glutInit( &argc, argv ); // Boilerplate initializationglutInitDisplayMode( GLUT_RGB | GLUT_DEPTH );
glutInitWindowPosition( 50, 50 ); //upper leftglutInitWindowSize( 640, 480 ); // width, height, in pixelsglutCreateWindow( "OpenGL Example" ); // window title
glViewport(/* lower left corner of the viewport */ 0, 0,/* width, height of the viewport */ 640, 480 ); //lower left
glShadeModel( GL_SMOOTH );
glPolygonMode( GL_FRONT, GL_FILL );
setupLighting();
setupCamera(640, 480);
registerCallBacks();
glutMainLoop();
}
Example OpenGL Application
No turning back at this point, we enter the infinite loop!
![Page 41: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/41.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 41/6002 – OpenGL
Typical OpenGL Application
![Page 42: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/42.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 42/6002 – OpenGL
Questions?
![Page 43: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/43.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 43/6002 – OpenGL
void drawMyStuff(void) { glBegin (...);
//glColor3f(1.0f, 1.0f, 1.0f); //glNormal3f(0.0f, 0.0f, 1.0f); glVertex3f(1.0f, 1.0f, 1.0f); glVertex3f(1.0f, 2.0f, 1.0f); : :
glEnd();}
Drawing Primitives
![Page 44: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/44.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 44/6002 – OpenGL
GL_POINTSGL_LINESGL_LINE_STRIPGL_LINE_LOOPGL_TRIANGLESGL_TRIANGLE_STRIPGL_TRIANGLE_FANGL_QUADSGL_QUAD_STRIPGL_POLYGON
OpenGL Primitives
![Page 45: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/45.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 45/6002 – OpenGL
GL_POINTSGL_LINESGL_LINE_STRIPGL_LINE_LOOPGL_TRIANGLESGL_TRIANGLE_STRIPGL_TRIANGLE_FANGL_QUADSGL_QUAD_STRIPGL_POLYGON
OpenGL Primitives
![Page 46: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/46.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 46/6002 – OpenGL
GL_POINTSGL_LINESGL_LINE_STRIPGL_LINE_LOOPGL_TRIANGLESGL_TRIANGLE_STRIPGL_TRIANGLE_FANGL_QUADSGL_QUAD_STRIPGL_POLYGON
OpenGL Primitives
![Page 47: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/47.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 47/6002 – OpenGL
GL_POINTSGL_LINESGL_LINE_STRIPGL_LINE_LOOPGL_TRIANGLESGL_TRIANGLE_STRIPGL_TRIANGLE_FANGL_QUADSGL_QUAD_STRIPGL_POLYGON
OpenGL Primitives
![Page 48: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/48.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 48/6002 – OpenGL
void glFrontFace (GLenum mode) mode can be either GL_CW or GL_CCW
GL_CCW is the default
Ordering of Vertices
![Page 49: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/49.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 49/6002 – OpenGL
GL_POINTSGL_LINESGL_LINE_STRIPGL_LINE_LOOPGL_TRIANGLESGL_TRIANGLE_STRIPGL_TRIANGLE_FANGL_QUADSGL_QUAD_STRIPGL_POLYGON
OpenGL Primitives
![Page 50: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/50.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 50/6002 – OpenGL
GL_POINTSGL_LINESGL_LINE_STRIPGL_LINE_LOOPGL_TRIANGLESGL_TRIANGLE_STRIPGL_TRIANGLE_FANGL_QUADSGL_QUAD_STRIPGL_POLYGON
OpenGL Primitives
![Page 51: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/51.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 51/6002 – OpenGL
GL_POINTSGL_LINESGL_LINE_STRIPGL_LINE_LOOPGL_TRIANGLESGL_TRIANGLE_STRIPGL_TRIANGLE_FANGL_QUADSGL_QUAD_STRIPGL_POLYGON
OpenGL Primitives
![Page 52: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/52.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 52/6002 – OpenGL
GL_POINTSGL_LINESGL_LINE_STRIPGL_LINE_LOOPGL_TRIANGLESGL_TRIANGLE_STRIPGL_TRIANGLE_FANGL_QUADSGL_QUAD_STRIPGL_POLYGON
OpenGL Primitives
![Page 53: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/53.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 53/6002 – OpenGL
GL_POINTSGL_LINESGL_LINE_STRIPGL_LINE_LOOPGL_TRIANGLESGL_TRIANGLE_STRIPGL_TRIANGLE_FANGL_QUADSGL_QUAD_STRIPGL_POLYGON
OpenGL Primitives
1. Must be convex2. Cannot intersect
![Page 54: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/54.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 54/6002 – OpenGL
glColor3f (1.0, 0.0f, 0.0f);glBegin(GL_TRIANGLES); glVertex3f(-1.0f, -0.5f, -4.0f); // A glVertex3f( 1.0f, -0.5f, -4.0f); // B glVertex3f( 0.0f, 0.5f, -4.0f); // C glEnd();
Color Blending
![Page 55: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/55.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 55/6002 – OpenGL
glBegin(GL_TRIANGLES); glColor3f(1.0f, 0.0f, 0.0f); glVertex3f(-1.0f, -0.5f, -4.0f); // A glColor3f(0.0f, 1.0f, 0.0f); glVertex3f( 1.0f, -0.5f, -4.0f); // B glColor3f(0.0f, 0.0f, 1.0f); glVertex3f( 0.0f, 0.5f, -4.0f); // C glEnd();
Color Blending
![Page 56: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/56.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 56/6002 – OpenGL
glShadeModel( GL_FLAT );glBegin(GL_TRIANGLES); glColor3f(1.0f, 0.0f, 0.0f); glVertex3f(-1.0f, -0.5f, -4.0f); // A glColor3f(0.0f, 1.0f, 0.0f); glVertex3f( 1.0f, -0.5f, -4.0f); // B glColor3f(0.0f, 0.0f, 1.0f); glVertex3f( 0.0f, 0.5f, -4.0f); // C glEnd();
GL Shade Model
![Page 57: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/57.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 57/6002 – OpenGL
The direction where the face of the triangle points towards
Unit vector Or call ( glEnable(GL_NORMALIZE); )
GL Normal
![Page 58: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/58.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 58/6002 – OpenGL
These two have the same number of quads… What is the difference?
GL Normal
![Page 59: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/59.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 59/6002 – OpenGL
GL Normal
![Page 60: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/60.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 60/6002 – OpenGL
glNormal3f(nx, ny, nz);glBegin(GL_QUADS); glVertex3f(x1, y1, z1); glVertex3f(x2, y2, z2); glVertex3f(x3, y3, z3); glVertex3f(x4, y4, z4);glEnd();
GL Normal
![Page 61: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/61.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 61/6002 – OpenGL
glBegin(GL_QUADS); glNormal3f(nx1, ny1, nz1); glVertex3f(x1, y1, z1);
glNormal3f(nx2, ny2, nz2); glVertex3f(x2, y2, z2);
glNormal3f(nx3, ny3, nz3); glVertex3f(x3, y3, z3);
glNormal3f(nx4, ny4, nz4); glVertex3f(x4, y4, z4);glEnd();
GL Normal
![Page 62: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/62.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 62/6002 – OpenGL
Data transport from CPU to GPU Consider the example before… At 60fps, there’s a lot redundancy
How to make it more efficient?
Note on Display List
![Page 63: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/63.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 63/6002 – OpenGL
Data transport from CPU to GPU Consider the example before…
How to make it more efficient? Push things onto the GPU memory…
Display List Vertex Buffer Objects (VBO) etc.
Cost of readability (e.g., http://www.opengl.org/wiki/VBO_-_just_examples)
Note on Display List
![Page 64: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/64.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 64/6002 – OpenGL
Questions?
![Page 65: Lecture 02: OpenGL (Fixed-Function)](https://reader035.vdocuments.net/reader035/viewer/2022062411/56816930550346895de07b6e/html5/thumbnails/65.jpg)
COMP 175 | COMPUTER GRAPHICS
Remco Chang 65/6002 – OpenGL
For the Windows users, download Visual Studio from Tufts UIT (which is free)
Two ways to do this: If you have a CS unix account, go to:
www.eecs.tufts.edu, click on “userguide”, then login. Click on “Access to Microsoft Software Downloads (msdnaa)” under “Software”
If you don’t have a CS account, go to: www.dreamspark.com, click on “students” (on top) Register (if necessary)
Don’t Forget!!!!