![Page 1: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/1.jpg)
Jernej Barbic
CSCI 420 Computer GraphicsLecture 4
Interaction
Client/Server ModelCallbacksDouble BufferingHidden Surface RemovalSimple Transformations[Angel Ch. 2]
University of Southern California
1
![Page 2: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/2.jpg)
Client/Server Model
• Graphics hardware and caching
• Important for efficiency• Need to be aware where data are stored• Graphics driver code is on the CPU• Rendering resources (buffers, shaders,
textures, etc.) are on the GPU2
CPU GPU“Client” “Server”
![Page 3: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/3.jpg)
The CPU-GPU bus
3
CPU GPUcan also read back
Fast, but limited bandwidthAGP, PCI, PCI Express
![Page 4: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/4.jpg)
Buffer Objects
• Store rendering data: vertex positions, normals, texture coordinates, colors, vertex indices, etc.
• Optimize and store on server (GPU)
4
CPU GPU“Client” “Server”
Store here
bus
![Page 5: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/5.jpg)
Vertex Buffer Objects
• Caches vertex geometric data: positions, normals, texture coordinates, colors
• Optimize and store on server (GPU)• Required for core OpenGL profile
5
/* vertices of the quad (will form two triangles;rendered via GL_TRIANGLES) */
float positions[6][3] ={{-1.0, -1.0, -1.0}, {1.0, -1.0, -1.0}, {1.0, 1.0, -1.0},{-1.0, -1.0, -1.0}, {1.0, 1.0, -1.0}, {-1.0, 1.0, -1.0}};
/* colors to be assigned to vertices (4th value is the alpha channel) */
float colors[6][4] ={{0.0, 0.0, 0.0, 1.0}, {1.0, 0.0, 0.0, 1.0}, {0.0, 1.0, 0.0, 1.0}, {0.0, 0.0, 1.0, 1.0}, {1.0, 1.0, 0.0, 1.0}, {1.0, 0.0, 1.0, 1.0}};
![Page 6: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/6.jpg)
Vertex Buffer Object: Initialization
6
GLuint buffer;
void initVBO(){glGenBuffers(1, &buffer);glBindBuffer(GL_ARRAY_BUFFER, buffer);glBufferData(GL_ARRAY_BUFFER, sizeof(positions) + sizeof(colors), NULL, GL_STATIC_DRAW); // init buffer’s size, but don’t assign any data to it
// upload position dataglBufferSubData(GL_ARRAY_BUFFER, 0, sizeof(positions), positions);
// upload color dataglBufferSubData(GL_ARRAY_BUFFER, sizeof(positions), sizeof(colors), colors);
}
![Page 7: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/7.jpg)
Old technology: Display Lists(compatibility profile only)• Cache a sequence of drawing commands• Very useful with complex objects that are
redrawn often (e.g., with transformations)• Another example: fonts (2D or 3D)• Display lists can call other display lists• Display lists cannot be changed• Display lists can be erased / replaced
• Display lists are now deprecated in OpenGL• Replaced with VBOs
7
![Page 8: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/8.jpg)
Display Lists
• Cache a sequence of drawing commands• Optimize and store on server (GPU)
GLuint listName = glGenLists(1); /* new list name */glNewList (listName, GL_COMPILE); /* new list */
glColor3f(1.0, 0.0, 1.0);glBegin(GL_TRIANGLES);
glVertex3f(0.0, 0.0, 0.0);...
glEnd();glEndList(); /* at this point, OpenGL compiles the list */glCallList(listName); /* draw the object */
8
![Page 9: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/9.jpg)
Element Arrays• Draw cube with 6*2*3=36 or with 8 vertices?• Expense in drawing and transformation• Triangle strips help to some extent• Element arrays provide general solution• Define (transmit) array of vertices, colors, normals• Draw using index into array(s) :
// (must first set up the GL_ELEMENT_ARRAY_BUFFER) …glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_INT, 0);
• Vertex sharing for efficient operations• Extra credit for first assignment
9
![Page 10: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/10.jpg)
Outline
••••••
Client/Server ModelCallbacksDouble BufferingHidden Surface RemovalSimple TransformationsExample
10
![Page 11: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/11.jpg)
GLUT Program with Callbacks
11
Initialization
START
Idle()
Display() Keyboard(..) Menu(..)
Mouse(..)Motion(..)Reshape(..)
END
Main event loop
![Page 12: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/12.jpg)
Main Event Loop
• Standard technique for interaction(GLUT, Qt, wxWidgets, ...)
• Main loop processes events
• Dispatch to functions specified by client
• Callbacks also common in operating systems
• “Poor man’s functional programming”
12
![Page 13: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/13.jpg)
Types of Callbacks
• Display ( ) : when window must be drawn• Idle ( ) : when no other events to be handled• Keyboard (unsigned char key, int x, int y) : key pressed• Menu (...) : after selection from menu• Mouse (int button, int state, int x, int y) : mouse button• Motion (...) : mouse movement• Reshape (int w, int h) : window resize• Any callback can be NULL
13
![Page 14: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/14.jpg)
Outline
••••••
Client/Server ModelCallbacksDouble BufferingHidden Surface RemovalSimple TransformationsExample
14
![Page 15: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/15.jpg)
Screen Refresh
••••
Common: 60-100 HzFlicker if drawing overlaps screen refreshProblem during animationSolution: use two separate frame buffers:
– Draw into one buffer– Swap and display, while drawing into other buffer
• Desirable frame rate >= 30 fps (frames/second)
15
![Page 16: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/16.jpg)
Enabling Single/Double Buffering• glutInitDisplayMode(GLUT_SINGLE);• glutInitDisplayMode(GLUT_DOUBLE);
• Single buffering:Must call glFinish() at the end of Display()
• Double buffering:Must call glutSwapBuffers() at the end of Display()
• Must call glutPostRedisplay() at the end of Idle()
• If something in OpenGL has no effect or doesnot work, check the modes in glutInitDisplayMode
16
![Page 17: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/17.jpg)
Outline
••••••
Client/Server ModelCallbacksDouble BufferingHidden Surface RemovalSimple TransformationsExample
17
![Page 18: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/18.jpg)
Hidden Surface Removal
• Classic problem of computer graphics• What is visible after clipping and projection?
• Object-space vs image-space approaches• Object space: depth sort (Painter’s algorithm)• Image space: z-buffer algorithm
• Related: back-face culling
18
![Page 19: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/19.jpg)
Object-Space Approach
• Consider objects pairwise
• Number of cases is O(k2) where k = # of objects• Painter’s algorithm: render back-to-front• “Paint” over invisible polygons• How to sort and how to test overlap?
19
![Page 20: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/20.jpg)
Depth Sorting
• First, sort by furthest distance z from viewer• If minimum depth of A is greater than maximum
depth of B, A can be drawn before B
• If either x or y extents do not overlap, A and Bcan be drawn independently
20
![Page 21: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/21.jpg)
Some Difficult Cases
• Sometimes cannot sort polygons!
• One solution: compute intersections & subdivide• Do while rasterizing (difficult in object space)
Cyclic overlap Piercing Polygons
21
![Page 22: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/22.jpg)
Painter’s Algorithm Assessment
• Strengths– Simple (most of the time)– Handles transparency well– Sometimes, no need to sort (e.g., heightfield)
• Weaknesses– Clumsy when geometry is complex– Sorting can be expensive
• Usage– PostScript interpreters– OpenGL: not supported
(must implement Painter’s Algorithm manually)
22
![Page 23: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/23.jpg)
Image-space approach
23
3Dgeometry Depthimage
darkercoloriscloserSource:Wikipedia
![Page 24: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/24.jpg)
Depth sensor camera
24
![Page 25: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/25.jpg)
Image-Space Approach
• Raycasting: intersect ray with polygons
• O(k) worst case (often better)• Images can be more jagged (need anti-aliasing)
25
![Page 26: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/26.jpg)
The z-Buffer Algorithm
• z-buffer stores depth values z for each pixel• Before writing a pixel into framebuffer:
– Compute distance z of pixel from viewer– If closer, write and update z-buffer, otherwise discard
26
AfterrenderingA:A B
color depth
![Page 27: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/27.jpg)
The z-Buffer Algorithm
• z-buffer stores depth values z for each pixel• Before writing a pixel into framebuffer:
– Compute distance z of pixel from viewer– If closer, write and update z-buffer, otherwise discard
27
AfterrenderingAandB:A B
color depth
![Page 28: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/28.jpg)
z-Buffer Algorithm Assessment
• Strengths– Simple (no sorting or splitting)– Independent of geometric primitives
• Weaknesses– Memory intensive (but memory is cheap now)– Tricky to handle transparency and blending– Depth-ordering artifacts
• Usage– z-Buffering comes standard with OpenGL;
disabled by default; must be enabled
28
![Page 29: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/29.jpg)
Depth Buffer in OpenGL
• glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA | GLUT_DEPTH);
• glEnable (GL_DEPTH_TEST);
• Inside Display():glClear (GL_DEPTH_BUFFER_BIT);
• Remember all of these!• Some “tricks” use z-buffer in read-only mode
29
![Page 30: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/30.jpg)
Note for Mac computers
Must use the GLUT_3_2_CORE_PROFILE flagto use the core profile:
glutInitDisplayMode(GLUT_3_2_CORE_PROFILE |GLUT_DOUBLE | GLUT_RGBA | GLUT_DEPTH);
30
![Page 31: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/31.jpg)
Outline
••••••
Client/Server ModelCallbacksDouble BufferingHidden Surface RemovalSimple TransformationsExample
31
![Page 32: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/32.jpg)
Specifying the Viewing Volume:Compatibility Mode
• Clip everything not in viewing volume• Separate matrices for transformation
and projection glMatrixMode (GL_PROJECTION);glLoadIdentity();... Set viewing volume ...glMatrixMode(GL_MODELVIEW);
32
![Page 33: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/33.jpg)
Specifying the Viewing Volume:Core Profile
• Clip everything not in viewing volume• Set the 4x4 projection matrix manually
(or via our provided “openGLMatrix” library)(Lecture: “Viewing”)
33
![Page 34: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/34.jpg)
Parallel Viewing
• Orthographic projection• Camera points in negative z direction• Compatibility profile:
glOrtho(xmin, xmax, ymin, ymax, near, far)• Core profile: set the 4x4 matrix manually
(or via our provided “openGLMatrix” library)
34
![Page 35: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/35.jpg)
Perspective Viewing
• Slightly more complex• Compatibility profile:
glFrustum(left, right, bottom, top, near, far)• Core profile: set the 4x4 matrix manually
(or via our provided “openGLMatrix” library)
35
![Page 36: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/36.jpg)
Simple Transformations:Compatibility Profile
• Rotate by given angle (in degrees) about axisgiven by (x, y, z)
glRotate{fd}(angle, x, y, z);
• Translate by the given x, y, and z values
glTranslate{fd}(x, y, z);
• Scale with a factor in the x, y, and z directionglScale{fd}(x, y, z);
36
![Page 37: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/37.jpg)
Simple Transformations:Core Profile
• Rotate by given angle (in degrees) about axisgiven by (x, y, z)
• Translate by the given x, y, and z values
• Scale with a factor in the x, y, and z direction
Create these 4x4 matrices manually (or via our provided “openGLMatrix” library)(Lecture: “Transformations”)
37
![Page 38: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/38.jpg)
Outline
••••••
Client/Server ModelCallbacksDouble BufferingHidden Surface RemovalSimple TransformationsExample
38
![Page 39: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/39.jpg)
Example: Rotating Colored Quad
• Draw a colored quad (two triangles)• Rotate it about x, y, or z axis, depending on left,• middle or right mouse click• Stop when the space bar is pressed• Quit when q or Q is pressed
39
![Page 40: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/40.jpg)
Step 1: Defining the Vertices
Use separate arrays for vertices and colors:
/* vertices of the quad (will form two triangles;rendered via GL_TRIANGLES) */
float positions[6][3] ={{-1.0, -1.0, -1.0}, {1.0, -1.0, -1.0}, {1.0, 1.0, -1.0},{-1.0, -1.0, -1.0}, {1.0, 1.0, -1.0}, {-1.0, 1.0, -1.0}};
/* colors to be assigned to vertices (4th value is the alpha channel) */float colors[6][4] ={{0.0, 0.0, 0.0, 1.0}, {1.0, 0.0, 0.0, 1.0}, {0.0, 1.0, 0.0, 1.0}, {0.0, 0.0, 1.0, 1.0}, {1.0, 1.0, 0.0, 1.0}, {1.0, 0.0, 1.0, 1.0}};
// black, red, green, blue, yellow, magenta
40
![Page 41: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/41.jpg)
Step 2: Set Up z-buffer and Double Buffering
int main(int argc, char **argv){
glutInit(&argc, argv);// double buffering for smooth animationglutInitDisplayMode(GLUT_DOUBLE |
GLUT_DEPTH | GLUT_RGBA);
... // window creation and callbacks here (next slide) init(); // our custom initializationglutMainLoop();return(0);
}41
![Page 42: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/42.jpg)
Step 3: Install Callbacks
• Create window and set callbacks
glutInitWindowSize(800, 800);
glutCreateWindow(”quad");
glutReshapeFunc(myReshape);
glutDisplayFunc(display);
glutIdleFunc(spinQuad);
glutMouseFunc(mouse);
glutKeyboardFunc(keyboard);
42
![Page 43: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/43.jpg)
Step 4: Our Initialization Function
#include “openGLMatrix.h” // our own (cs420) helper library
OpenGLMatrix * matrix;
void init(){
glClearColor (0.0, 0.0, 0.0, 0.0);glEnable(GL_DEPTH_TEST);matrix = new OpenGLMatrix();initVBO();initPipelineProgram();
}
43
![Page 44: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/44.jpg)
Step 5: Init Vertex Buffer Object (VBO)GLuint buffer;
void initVBO(){
glGenBuffers(1, &buffer);glBindBuffer(GL_ARRAY_BUFFER, buffer);glBufferData(GL_ARRAY_BUFFER, sizeof(positions) + sizeof(colors),
NULL, GL_STATIC_DRAW); // init buffer’s size, but don’t assign any // data to it
// upload position dataglBufferSubData(GL_ARRAY_BUFFER, 0,
sizeof(positions), positions);
// upload color dataglBufferSubData(GL_ARRAY_BUFFER, sizeof(positions),
sizeof(colors), colors);}
44
![Page 45: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/45.jpg)
Step 6: Init Pipeline Program
void initPipelineProgram(){// initialize shader pipeline program (shader lecture)// …
}
45
![Page 46: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/46.jpg)
Step 7: Reshape Callback
Set projection and viewport, preserve aspect ratio
void myReshape(int w, int h){GLfloat aspect = (GLfloat) w / (GLfloat) h;glViewport(0, 0, w, h);matrix->SetMatrixMode(OpenGLMatrix::Projection);matrix->LoadIdentity();matrix->Ortho(-2.0, 2.0, -2.0/aspect, 2.0/aspect, 0.0, 10.0);matrix->SetMatrixMode(OpenGLMatrix::ModelView);
}
46
![Page 47: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/47.jpg)
Step 8: Display Callback
Clear, rotate, draw, swap
GLfloat theta[3] = {0.0, 0.0, 0.0};
void display(){ glClear(GL_COLOR_BUFFER_BIT |
GL_DEPTH_BUFFER_BIT);matrix->LoadIdentity();matrix->LookAt(0, 0, 0, 0, 0, -1, 0, 1, 0); // default cameramatrix->Rotate(theta[0], 1.0, 0.0, 0.0);matrix->Rotate(theta[1], 0.0, 1.0, 0.0);matrix->Rotate(theta[2], 0.0, 0.0, 1.0);bindProgram();renderQuad(); glutSwapBuffers();
} 47
![Page 48: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/48.jpg)
Step 9: Bind Programvoid bindProgram(){ // bind our buffer, so that glVertexAttribPointer refers// to the correct bufferglBindBuffer(GL_ARRAY_BUFFER, buffer); GLuint loc = glGetAttribLocation(program, “position”);glEnableVertexAttribArray(loc);const void * offset = (const void*) 0;glVertexAttribPointer(loc, 3, GL_FLOAT, GL_FALSE, 0, offset);
GLuint loc2 = glGetAttribLocation(program, “color”);glEnableVertexAttribArray(loc2);const void * offset = (const void*) sizeof(positions);glVertexAttribPointer(loc2, 4, GL_FLOAT, GL_FALSE, 0, offset);
// write projection and modelview matrix to shader// next lexture…
} 48
![Page 49: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/49.jpg)
Step 10: Drawing the Quad
• Use GL_TRIANGLES
void renderQuad(){GLint first = 0;GLsizei numberOfVertices = 6;glDrawArrays(GL_TRIANGLES, first, numberOfVertices);
}
49
![Page 50: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/50.jpg)
Step 11: Animation
• Set idle callback
GLfloat delta = 2.0;GLint axis = 2;GLint spin = 1;void spinQuad(){// spin the quad delta degrees around the selected axisif (spin)
theta[axis] += delta;if (theta[axis] > 360.0)
theta[axis] -= 360.0;
// display result (do not forget this!)glutPostRedisplay();
}50
![Page 51: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/51.jpg)
Step 12: Change Axis of Rotation
• Mouse callback
void mouse(int btn, int state, int x, int y){
if ((btn==GLUT_LEFT_BUTTON) && (state == GLUT_DOWN)) axis = 0;
if ((btn==GLUT_MIDDLE_BUTTON) && (state == GLUT_DOWN)) axis = 1;
if ((btn==GLUT_RIGHT_BUTTON) && (state == GLUT_DOWN)) axis = 2;
}
51
![Page 52: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/52.jpg)
Step 13: Toggle Rotation or Exit
• Keyboard callback
void keyboard(unsigned char key, int x, int y){if (key == 'q' || key == 'Q') exit(0);
if (key == ' ') // spacebarspin= !spin;
}
52
![Page 53: Interaction - · Interaction Client/ServerModel Callbacks DoubleBuffering HiddenSurfaceRemoval SimpleTransformations [AngelCh.2] University of Southern California 1. ... Old technology:](https://reader034.vdocument.in/reader034/viewer/2022051801/5ad8e5627f8b9a3e578df21c/html5/thumbnails/53.jpg)
Summary
••••••
Client/Server ModelCallbacksDouble BufferingHidden Surface RemovalSimple TransformationsExample
53