![Page 1: Visualization Recreate the ping pong scene in 3D using ball and racket coordinates](https://reader033.vdocuments.us/reader033/viewer/2022052708/5a4d1b5b7f8b9ab0599ab068/html5/thumbnails/1.jpg)
Visualization
Recreate the ping pong scene in 3D using ball and racket
coordinates
![Page 2: Visualization Recreate the ping pong scene in 3D using ball and racket coordinates](https://reader033.vdocuments.us/reader033/viewer/2022052708/5a4d1b5b7f8b9ab0599ab068/html5/thumbnails/2.jpg)
Choosing an adequate platform
• C++• Scientific data
visualization• Limited animation
capabilities• Few online examples
available
• C++• Game development• Variety of online
examples
![Page 3: Visualization Recreate the ping pong scene in 3D using ball and racket coordinates](https://reader033.vdocuments.us/reader033/viewer/2022052708/5a4d1b5b7f8b9ab0599ab068/html5/thumbnails/3.jpg)
OpenGL + GLUT
• GLUT = OpenGL Utility Toolkit– I/O operations– Opening a window and handling resizes– Executing the actual OpenGL code– Mouse controls and keyboard interaction– Façade functions that combine several basic
OpenGL routines
![Page 4: Visualization Recreate the ping pong scene in 3D using ball and racket coordinates](https://reader033.vdocuments.us/reader033/viewer/2022052708/5a4d1b5b7f8b9ab0599ab068/html5/thumbnails/4.jpg)
OpenGL Rendering PipelineListing of points, lines and basic primitives
Transformations, lighting and clipping non-visible parts from the scene
Conversion into fragments, each fragment square corresponds to a pixel in the frame buffer.
![Page 5: Visualization Recreate the ping pong scene in 3D using ball and racket coordinates](https://reader033.vdocuments.us/reader033/viewer/2022052708/5a4d1b5b7f8b9ab0599ab068/html5/thumbnails/5.jpg)
Drawing the table
• Within glBegin(GL_QUADS) block– Specifies that quadrangle points follow below
• Using glVertex3f-function– Calling this function for every angular point
• In combination with glNormal3f– Specifies the direction of the normal
glNormal3f( 1.0f, 0.0f, 0.0f); // Normal Facing RightglVertex3f( 1, -1, -1); // Bottom RightglVertex3f( 1, 1, -1); // Top RightglVertex3f( 1, 1, 1); // Top leftglVertex3f( 1, -1, 1); // Bottom left
![Page 6: Visualization Recreate the ping pong scene in 3D using ball and racket coordinates](https://reader033.vdocuments.us/reader033/viewer/2022052708/5a4d1b5b7f8b9ab0599ab068/html5/thumbnails/6.jpg)
Animating the ball movement
• Only possible to draw spheres withvoid glutSolidSphere(GLdouble radius, GLint slices, GLint stacks);
• Specifing the location: multiplying the table matrix with a matrix that moves the object glTranslatef(x, y, z);
• Then draw the ball• Do this for every 3D ballcoordinate
![Page 7: Visualization Recreate the ping pong scene in 3D using ball and racket coordinates](https://reader033.vdocuments.us/reader033/viewer/2022052708/5a4d1b5b7f8b9ab0599ab068/html5/thumbnails/7.jpg)
Displaying the rackets
• Same strategy as with the ball movement• Drawing a cylinder at a specified position• Coordinates are in a separate CSV file
![Page 8: Visualization Recreate the ping pong scene in 3D using ball and racket coordinates](https://reader033.vdocuments.us/reader033/viewer/2022052708/5a4d1b5b7f8b9ab0599ab068/html5/thumbnails/8.jpg)
Animation (1)
• Key frame animation• Movie is 25 frames per second (40 ms)• Animation has a 10 ms refresh rate• At least 4 times the coordinates as in the
movie• Redrawing the ball using an (interpolated)
xyz-coordinate (generated in WP4)
![Page 9: Visualization Recreate the ping pong scene in 3D using ball and racket coordinates](https://reader033.vdocuments.us/reader033/viewer/2022052708/5a4d1b5b7f8b9ab0599ab068/html5/thumbnails/9.jpg)
Animation (2)
• Regulating speed: skipping coordinates• List of coordinates fuels:
– Rewind/forward– Pause/play– Tracers– Special camera positions
![Page 10: Visualization Recreate the ping pong scene in 3D using ball and racket coordinates](https://reader033.vdocuments.us/reader033/viewer/2022052708/5a4d1b5b7f8b9ab0599ab068/html5/thumbnails/10.jpg)
Camera placement (1)• Use the Utility Library (GLUT) routine gluLookAt() to
define a line of sight– Encapsulates a series of rotation and translation commands
gluLookAt(4.0, 2.0, 1.0, 2.0, 4.0, -3.0, 2.0, 2.0, -1.0);
• Fully adjustable camera angles:– Rotating the view (around all axis)– Dragging table (up, down, left, right)– Zooming
Cam. pos Up vectorCenter (ref. point)
![Page 11: Visualization Recreate the ping pong scene in 3D using ball and racket coordinates](https://reader033.vdocuments.us/reader033/viewer/2022052708/5a4d1b5b7f8b9ab0599ab068/html5/thumbnails/11.jpg)
Camera placement (2)
• First-person ball tracking using recently displayed coordinates
![Page 12: Visualization Recreate the ping pong scene in 3D using ball and racket coordinates](https://reader033.vdocuments.us/reader033/viewer/2022052708/5a4d1b5b7f8b9ab0599ab068/html5/thumbnails/12.jpg)
Functionality
• Continuous rotation• Tracers
– Use already displayed coordinates and draw a stippled line between each pair
![Page 13: Visualization Recreate the ping pong scene in 3D using ball and racket coordinates](https://reader033.vdocuments.us/reader033/viewer/2022052708/5a4d1b5b7f8b9ab0599ab068/html5/thumbnails/13.jpg)
Demo
• Using mouse & keyboard controls to interpret commands
![Page 14: Visualization Recreate the ping pong scene in 3D using ball and racket coordinates](https://reader033.vdocuments.us/reader033/viewer/2022052708/5a4d1b5b7f8b9ab0599ab068/html5/thumbnails/14.jpg)
Improvements
• Anti-aliasing• Enhancing the coordinates by using a
physics engine– Calculating accurate speed– Simulating gravity– Simulating air resistance
![Page 15: Visualization Recreate the ping pong scene in 3D using ball and racket coordinates](https://reader033.vdocuments.us/reader033/viewer/2022052708/5a4d1b5b7f8b9ab0599ab068/html5/thumbnails/15.jpg)
Conclusion
• Visualization runs smoothly• Success or failure depends on accurate
3D coordinates