Fonts, 3D Objects and Review

1. SER332
Introduction to Graphics and
Game Development
Lecture 12:
Fonts, 3D Objects, and Review
Javier Gonzalez-Sanchez
javiergs@asu.edu
PERALTA 230U
Office Hours: By appointment

2. Part 8:
Fonts

3. Javier Gonzalez-Sanchez | SER332 | Fall 2016 | 3
Example 4
// https://github.com/javiergs/SER332/blob/master/L12

4. Javier Gonzalez-Sanchez | SER332 | Fall 2016 | 4
Fonts Rendering
§ GLUT supports two type of font rendering.
§ Stroke fonts: each character is rendered as a set of line segments, a
geometrical thing can be scaled or translated, rendered; it requires a
3D environment set up.
§ Bitmap fonts: each character is a bitmap generated. Rendered as
bitmaps, but faster.
§ Fonts supported by bitmap:
§ GLUT_BITMAP_8_BY_13
§ GLUT_BITMAP_TIMES_ROMAN_10
§ ... ... ...
§ Fonts supported by stroke
§ GLUT_STROKE_ROMAN
§ GLUT_STROKE_MONO_ROMAN

5. Javier Gonzalez-Sanchez | SER332 | Fall 2016 | 5
Stroke Fonts
void renderStrokeString
(float x, float y, float z, float scale, void *font, char *string) {
char *c;
glPushMatrix();
glTranslatef(x, y, z); // fonts position
glScalef(scale, scale, scale);
for(c=string; *c != ‘0’; c++)
glutStrokeCharacter(font, *c);
glPopMatrix();
}
Example:
int font = GLUT_STROKE_ROMAN;
renderStrokeString(20.0,30.0,0.0,0.1,font,”start”);

6. Javier Gonzalez-Sanchez | SER332 | Fall 2016 | 6
Bitmap Fonts
void renderBitmapString
(float x, float y, float z, void *font, char *string){
char *c;
glRasterPos3f(x, y, z); // fonts position
for(c=string; *c != ‘0’; c++)
glutBitmapCharacter(font, *c);
}
Example:
int font = GLUT_BITMAP_9_BY_13;
renderBitmapString(20.0,30.0,0.0,font,”start”);

7. Part 9:
OBJ Files

8. Javier Gonzalez-Sanchez | SER332 | Fall 2016 | 8
OBJ
v 0.0 2.0 0.0
v 0.0 -2.0 0.0
v -1.0 0.0 -1.0
v 1.0 0.0 -1.0
v 1.0 0.0 1.0
v -1.0 0.0 1.0
f 1 4 3
f 1 3 6
f 1 6 5
f 1 5 4
f 2 3 4
f 2 6 3
f 2 5 6
f 2 4 5

9. Javier Gonzalez-Sanchez | SER332 | Fall 2016 | 9
Mesh Orientation
• Ability to distinguish ‘front’ and ‘back’ faces
o Efficient rendering
o Many rendering effects treat front and back faces separately
• Vertex order
o Counterclockwise or clockwise
o Adjacent triangles should be correctly oriented

10. Javier Gonzalez-Sanchez | SER332 | Fall 2016 | 10
Mesh Orientation
• Remember the back face culling
• glFrontFace(GL_CCW) // right-hand rule
Pass Discard

11. Javier Gonzalez-Sanchez | SER332 | Fall 2016 | 11
Tools
Preview | MacOSX 3D Builder | Windows 10

12. Part 10:
Midterm Review

13. Javier Gonzalez-Sanchez | SER332 | Fall 2016 | 13
Review
The following is a summary of the most relevant ideas.
But, the exam is not limited to these,
i.e.,
The following IS NOT a comprehensive list

14. Javier Gonzalez-Sanchez | SER332 | Fall 2016 | 14
Review
• Lecture 1
concepts: rendering, rasterization, transformation,
C/C++, draw basic shapes (math), matrix
multiplication, line equation.
• Lecture 2
Frame buffer (size), color (RGB, RGBA), resolution, depth, GPU
architecture, pixel, aspect-ratio.
• Lecture 3
OpenGL: (begin, end, vertex, color), (gl, glut, glu), instructions
in main, init, display, 2D drawing, double buffering
• Lecture 4
callback functions (mouse, keyboard, idle, display)

15. Javier Gonzalez-Sanchez | SER332 | Fall 2016 | 15
Review
• Lecture 5
Geometric primitives (points, lines, triangles, quads,
polygon), shading
• Lecture 6
Model-View transformation (rotate, translate, scale), local and world
coordinates.
• Lecture 7
Viewport, reshapeWindow
• Lecture 8
Lab 1

16. Javier Gonzalez-Sanchez | SER332 | Fall 2016 | 16
Review
• Lecture 9
Display lists, pop-up menus
• Lecture 10
Z-buffering, Projection transformation, perspective setup, gluLookAt,
glMatrixMode.
• Lecture 11
Lab 2
• Lecture 12
Fonts, Vertex vs Faces, OBJ file format

17. SER332 Introduction to Graphics
Javier Gonzalez-Sanchez
javiergs@asu.edu
Spring 2017
Disclaimer. These slides can only be used as study material for the class SER332 at ASU. They cannot be distributed or used for another purpose.