SER332 Lecture 15

Introduction to Graphics and Game Development
Fonts, OBJ, and Midterm Review
(201804)

Transcript

1. jgs
   SER332
   Introduction to Graphics and Game
   Development
   Lecture 15: Font, OBJ, and Review
   Javier Gonzalez-Sanchez
   javiergs@asu.edu
   PERALTA 230U
   Office Hours: By appointment
   

   View Slide

2. jgs
   Fonts
   

   View Slide

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

   View Slide

4. 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
   

   View Slide

5. 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");
   

   View Slide

6. 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”);
   

   View Slide

7. jgs
   OBJ Files
   

   View Slide

8. 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
   

   View Slide

9. 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
   

   View Slide

10. 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
    

    View Slide

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

    View Slide

12. jgs
    Midterm Review
    

    View Slide

13. 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
    

    View Slide

14. 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
    

    View Slide

15. 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
    

    View Slide

16. 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
    

    View Slide

17. jgs
    Extra: C/C++ Quiz Review
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. jgs
    SER332 Introduction to Graphics
    Javier Gonzalez-Sanchez
    javiergs@asu.edu
    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.
    

    View Slide