9. Shader language

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