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

9. Shader language

9. Shader language

Tatsuya Yatagawa

May 13, 2021
Tweet

More Decks by Tatsuya Yatagawa

Other Decks in Technology

Transcript

  1. 9. Shader language
    Tatsuya Yatagawa

    View Slide

  2. What is shader language?

    Before shader language, OpenGL’s drawing pipeline is in
    the black box

    Shader language enable programmable control over processes
    on graphics pipeline.

    GLSL (OpenGL Shading Language) is for OpenGL and Vulkan,
    HLSL (High Level Shading Language) is for DirectX.

    Recent movement on shader languages

    GLSL has rather old specifications, and its update is not really
    fast (OpenGL 4.5 out in 2014, OpenGL 4.6 out in 2017).

    Khronos Group want to glue many different languages with an
    assembly format called SPIR-V (OpenGL 4.6 can accept this
    SPIR-V format).
    Computer Graphics Course @Waseda University

    View Slide

  3. Graphics pipeline

    Workflow to draw 3D graphics
    Computer Graphics Course @Waseda University
    (Currently, the pipeline can be controlled more precisely)
    Triangle list
    𝐯′ = 𝐏𝐕𝐌𝐯
    vertex shader
    fragment shader
    Coordinate transform
    Shading to vertices
    Triangle rasterization
    Shading to pixels
    Output to render buffer

    View Slide

  4. Type of shaders

    Vertex shader

    In charge of coordinate transform to vertices.

    Also, vertices can be shaded.
    → After transformation, attributes (colors, normals etc.) will be
    interpolated by “rasterizer”.

    Fragment shader (a.k.a. pixel shader)

    In charge of shading to pixels.

    Shading can be calculated by interpolated attributes from
    rasterizer.
    Computer Graphics Course @Waseda University

    View Slide

  5. Vertex shader
    Computer Graphics Course @Waseda University
    Vertex shader process “vertices”, does not change indices.
    Coordinate
    transform
    𝐯′ = 𝐏𝐕𝐌𝐯
    =
    ◼ vertex list (in VBO)
    ◼ index list (in IBO)
    Connect verts.
    { {0, 1, 2}, {0, 3, 1}, … }

    View Slide

  6. Rasterizer
    Computer Graphics Course @Waseda University
    Rasterize
    (divide area into pixels)
    Along with rasterization, attributes are interpolated by
    barycentric coordinates
    (𝐩0
    , 𝐟0
    )
    (𝐩2
    , 𝐟2
    )
    (𝐩1
    , 𝐟1
    )
    : position
    : attribute
    𝐩
    𝐟
    (𝐩, 𝐟)
    𝐟 = 𝑎0
    𝐟0
    + 𝑎1
    𝐟1
    + 𝑎2
    𝐟2
    𝐚 = 𝐩0
    𝐩1
    𝐩2
    −1𝐩

    View Slide

  7. Fragment shader
    Computer Graphics Course @Waseda University
    Shading to pixels
    Pixel shading is like a function of attributes
    𝐜 = 𝐹𝑆(𝐟)

    View Slide

  8. Simplest vertex shader
    Computer Graphics Course @Waseda University

    Vertex shader code
    shader version identifier
    attribute variables
    coordinate transform
    uniform variables

    Two kinds of variables are passed from CPU

    Attribute variable: attribute for vertices

    Uniform variable: shared by all vertices

    gl_Position represents screen-space coordinates

    gl_Position is a build-in variable used by rasterizer.

    View Slide

  9. Simplest fragment shader

    Fragment shader code

    Note

    Variables with “out” identifier will be passed to display.

    Output color is typed by “vec4”. Its name can be arbitrary.

    Assign output color in a function (typically in “main”).
    Computer Graphics Course @Waseda University
    version identifier (can be varied from that in VS)
    output pixel color
    output to pixel color (simple yellow color)

    View Slide

  10. Workflow to use shader programs (C++)

    Preparation

    Load shader sources from text files (VS, FS)

    Compile shader sources (VS, FS)

    Link shaders to get program

    Drawing

    Enable shader program

    Setup uniform variables to be passed to shaders.

    Draw primitives (it does not depend shaders)

    Disable shader program
    Computer Graphics Course @Waseda University

    View Slide

  11. Load shader sources

    Load from file using ifstream, and get it as string data
    Computer Graphics Course @Waseda University

    View Slide

  12. Load shader sources

    Load from file using ifstream, and get it as string data
    Computer Graphics Course @Waseda University
    Open a source file with error handing

    View Slide

  13. Load shader sources

    Load from file using ifstream, and get it as string data
    Computer Graphics Course @Waseda University
    Load entire source using ifstream

    View Slide

  14. Compile shader sources
    Computer Graphics Course @Waseda University

    View Slide

  15. Compile shader sources

    Code

    Note

    glShaderSource takes “const char**” type (not “const
    char*”) for 3rd parameter. It’s a list of source strings.

    2nd parameter denotes length of the source string list.

    4th parameter denotes the length of the source. The length can
    be calculated automatically by specifying NULL.
    Computer Graphics Course @Waseda University

    View Slide

  16. Error handling while compiling
    You need to get length of error message before get the message itself.
    Computer Graphics Course @Waseda University

    View Slide

  17. Link shaders to get program
    Computer Graphics Course @Waseda University

    Code

    Note

    You should make a method for compiling for convenience!

    Liking process consists of:

    Create an empty program (glCreateProgram)

    Attach shaders to program (glAttachShader)

    Link attached shaders (glLinkProgram)

    View Slide

  18. Error handling while linking

    Almost identical with that for compiling
    Computer Graphics Course @Waseda University

    View Slide

  19. Workflow to use shader programs (C++)

    Preparation

    Load shader sources from text files (VS, FS)

    Compile shader sources (VS, FS)

    Link shaders to get program

    Drawing

    Enable shader program

    Setup uniform variables to be passed to shaders.

    Draw primitives (it does not depend shaders)

    Disable shader program
    Computer Graphics Course @Waseda University

    View Slide

  20. Review: Variables in shaders
    Computer Graphics Course @Waseda University

    Simplest vertex shader

    Vertex shader receive two kinds of variables

    attribute variable (different for each vertex)

    uniform variable (same for every vertex)
    attribute variable
    uniform variable

    View Slide

  21. Attribute variable

    Specification

    Note

    Location index and variable type correspond to those specified
    with “glVertexAttribPointer”
    Computer Graphics Course @Waseda University
    layout(location = 0) in vec3 in_position;
    Location index
    “in” identifier
    type name of variable
    glVertexAttribPointer(0, 3, GL_FLOAT, sizeof(Vertex), ...);
    Location index type

    View Slide

  22. glVertexAttribPointer

    Legacy pipeline

    Shading is performed “pre-defined” parameters, e.g., vertex
    position, normal, colors with fixed types (typically 3 floats)

    So, a small set of glVertexPointer, glNormalPointer, and
    glColorPointer is enough.

    Modern pipeline

    Shaders can flexibly perform shading with arbitrary parameters
    with arbitrary types.

    Usage will be determined in shaders. So, only what we should
    do in CPU side is how data is described.
    → glVertexAttribPointer allows general data specification!
    Computer Graphics Course @Waseda University

    View Slide

  23. Definition of attribute variable (C++)
    Computer Graphics Course @Waseda University

    View Slide

  24. Create vertex buffer
    Computer Graphics Course @Waseda University
    • Nothing has changed!

    View Slide

  25. Define vertex array on vertex shader
    Computer Graphics Course @Waseda University

    glEnableVertexAttribArray

    Enable specified location index.

    glVertexAttribPointer

    1st: location index

    2nd: length of vector type (3 for vec3, 2 for vec2)

    3rd: scalar type for vector type (GL_FLOAT for vec3, GL_INT for
    ivec2)

    4th: byte offset between consecutive vertex attributes

    5th: byte offset for first element from the head of vertex array

    View Slide

  26. Create index buffer

    Nothing has changed!
    Computer Graphics Course @Waseda University

    View Slide

  27. Uniform variable

    Description

    Defined with “uniform” identifier.

    Note

    You can define uniform variable using either of name (in string)
    or index (integer).

    However, specifying location index as below is rather wordy.
    Computer Graphics Course @Waseda University
    uniform mat4 u_mvpMat;
    layout(location = 0) uniform mat4 u_mvpMat;
    (index is independent of that for attribute variables)

    View Slide

  28. Definition of uniform variables (C++)

    Don’t forget to enable shader program by glUseProgram.

    Uniform variables are defined for each program and is not shared
    between different programs!

    glGetUniformLocation gives you location index with its name.

    glUniformXXXX allow you to pass a value.
    Computer Graphics Course @Waseda University

    View Slide

  29. Review what happens with shaders
    Computer Graphics Course @Waseda University

    Vertex shader code
    Given with “glVertexAttribPointer”
    Passed to “rasterizer”
    Given by “glUniformMatrix4f”

    View Slide

  30. Review what happens with shaders

    Fragment shader code

    Note

    Variables with “out” identifier will be passed to display.

    Output color is typed by “vec4”. Its name can be arbitrary.

    Assign output color in a function (typically in “main”).
    Computer Graphics Course @Waseda University
    Passed to display (render buffer)
    Simple yellow color

    View Slide

  31. Result

    Yellow cube is drawn!
    Computer Graphics Course @Waseda University

    View Slide

  32. Varying variable

    Varying variable

    Passed between consecutive shader stages (e.g., from VS to FS)

    Old GLSL had “varying” specifier, but currently it was altered
    by “out” and “in” specifiers.

    Unfortunately, you cannot directly pass variable to fragment
    shader which is varied by pixels. So, you need to pass it
    indirectly with varying variables.
    Computer Graphics Course @Waseda University

    View Slide

  33. Result

    Cube is colored!!
    Computer Graphics Course @Waseda University

    View Slide

  34. Exercise 9-1
    Draw background with color gradation. For this purpose,
    define a new class object.

    Hint: Gradation is not very difficult because OpenGL
    interpolates colors between vertices.

    Advanced: You can use glDrawArrays (see slides after this one),
    then you can show simple rectangle by relatively simple
    preparation.
    Computer Graphics Course @Waseda University

    View Slide

  35. VAO for simple rectangle (preparation)

    glDrawArrays simplifies VAO preparation!
    Computer Graphics Course @Waseda University

    View Slide

  36. VAO for simple rectangle (drawing)

    glDrawArrays simplifies VAO preparation!
    Computer Graphics Course @Waseda University

    View Slide

  37. VAO for simple rectangle

    In vertex shader, you can use local vertex and index
    arrays!
    Computer Graphics Course @Waseda University

    View Slide