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

9. Shader language

9. Shader language

94870c02836167043f37f05ae1032690?s=128

Tatsuya Yatagawa

May 13, 2021
Tweet

More Decks by Tatsuya Yatagawa

Other Decks in Technology

Transcript

  1. 9. Shader language Tatsuya Yatagawa

  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
  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
  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
  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}, … }
  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𝐩
  7. Fragment shader Computer Graphics Course @Waseda University Shading to pixels

    Pixel shading is like a function of attributes 𝐜 = 𝐹𝑆(𝐟)
  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.
  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)
  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
  11. Load shader sources ◼ Load from file using ifstream, and

    get it as string data Computer Graphics Course @Waseda University
  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
  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
  14. Compile shader sources Computer Graphics Course @Waseda University

  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
  16. Error handling while compiling You need to get length of

    error message before get the message itself. Computer Graphics Course @Waseda University
  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)
  18. Error handling while linking ◼ Almost identical with that for

    compiling Computer Graphics Course @Waseda University
  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
  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
  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
  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
  23. Definition of attribute variable (C++) Computer Graphics Course @Waseda University

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

    has changed!
  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
  26. Create index buffer ◼ Nothing has changed! Computer Graphics Course

    @Waseda University
  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)
  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
  29. Review what happens with shaders Computer Graphics Course @Waseda University

    ◼ Vertex shader code Given with “glVertexAttribPointer” Passed to “rasterizer” Given by “glUniformMatrix4f”
  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
  31. Result ◼ Yellow cube is drawn! Computer Graphics Course @Waseda

    University
  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
  33. Result ◼ Cube is colored!! Computer Graphics Course @Waseda University

  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
  35. VAO for simple rectangle (preparation) ◼ glDrawArrays simplifies VAO preparation!

    Computer Graphics Course @Waseda University
  36. VAO for simple rectangle (drawing) ◼ glDrawArrays simplifies VAO preparation!

    Computer Graphics Course @Waseda University
  37. VAO for simple rectangle ◼ In vertex shader, you can

    use local vertex and index arrays! Computer Graphics Course @Waseda University