Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SER332 Lecture 15

SER332 Lecture 15

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

Javier Gonzalez-Sanchez
PRO

March 13, 2018
Tweet

More Decks by Javier Gonzalez-Sanchez

Other Decks in Programming

Transcript

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

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

    View Slide