jgs SER332 Introduction to Graphics and Game Development Lecture 15: Font, OBJ, and Review Javier Gonzalez-Sanchez [email protected] PERALTA 230U Office Hours: By appointment

jgs Fonts

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 3 jgs Example 4 // https://github.com/javiergs/SER332/blob/master/Lecture15/fonts.c

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 4 jgs 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. § Examples of Fonts supported by bitmap: GLUT_BITMAP_8_BY_13 GLUT_BITMAP_TIMES_ROMAN_10 § Examples of Fonts supported by stroke GLUT_STROKE_ROMAN GLUT_STROKE_MONO_ROMAN

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 5 jgs 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: renderStrokeString(20.0,30.0,0.0,0.1, GLUT_STROKE_ROMAN,"start");

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 6 jgs 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: renderBitmapString(20.0,30.0,0.0, GLUT_BITMAP_9_BY_13,”start”);

jgs OBJ Files

jgs Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 8 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 OBJ

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 9 jgs Mesh Orientation Ability to distinguish ‘front’ and ‘back’ faces § Efficient rendering § Many rendering effects treat front and back faces separately Vertex order § Counterclockwise or clockwise § Adjacent triangles should be correctly oriented

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 10 jgs Mesh Orientation Remember back face culling glFrontFace(GL_CCW) // right-hand rule // GL_CCW selects counterclockwise polygons as front-facing (default) // GL_CW selects clockwise polygons Pass Discard

jgs Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 11 3D Builder | Windows 10 Preview | MacOSX Tools

jgs Midterm Review

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 13 jgs 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

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 14 jgs 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 int main, init, display, 2D drawing, double buffering § Lecture 4 Callback functions (mouse, keyboard, idle, display) § Lecture 5 Geometric primitives (points, lines, triangles, quads, polygon), shading

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 15 jgs Review § Lecture 6 Lab 1 § Lecture 7 Model-View transformation (rotate, translate, scale), local and world coordinates. § Lecture 8 Viewport, reshapeWindow § Lecture 9 Lab 2 § Lecture 10 Display lists, pop-up menus

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 16 jgs Review § Lecture 11 Z-buffering, Projection transformation, perspective setup, gluLookAt, glMatrixMode. § Lecture 12 Lab 3 § Lecture 13 Algebra § Lecture 14 Lab 4 § Lecture 15 Fonts, Vertex vs Faces, OBJ file format

jgs Extra: C/C++ Quiz Review

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 18 jgs 59% 38% Q1

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 19 jgs 90% 10% Q2

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 20 jgs 76% 3% 17% Q3

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 21 jgs 3% 48% 48% Q4

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 22 jgs 59% 14% 3% 17% Q5

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 23 jgs 21% 45% 24% 7% Q6

jgs SER332 Introduction to Graphics Javier Gonzalez-Sanchez [email protected] Spring 2018 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.