{"id":38,"date":"2021-10-20T00:02:30","date_gmt":"2021-10-20T00:02:30","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/learnfromscratch\/?p=38"},"modified":"2021-10-20T00:02:30","modified_gmt":"2021-10-20T00:02:30","slug":"vertex-shader-and-fragment-shader","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/learnfromscratch\/2021\/10\/20\/vertex-shader-and-fragment-shader\/","title":{"rendered":"Vertex Shader and Fragment Shader"},"content":{"rendered":"\n

1.0 Introduction<\/strong><\/p>\n\n\n\n

As beginners continue to make progress with OpenGL, they should pick up more new tools to advance their learning. One of the recommended tools is Shader. In this blog, I will discuss the advantages of using vertex and fragment Shaders and some basic OpenGL Shading Language.<\/p>\n\n\n\n

2.0 Advantage of Shader over Fixed-Function OpenGL pipeline<\/strong><\/p>\n\n\n\n

With Shader, users can put and run codes in the GPU, this can significantly improve performance of the product as GPU can simultaneously excuse multiple data streams and fragments. Display rate can increase to hundreds of frames per second [1]. In addition, Shader provide flexibility and quality for graphic design. Per-fragment lighting and per-fragment animation, for example, could produce effective and attractive visual effects for users.<\/p>\n\n\n\n

2.1 Roles of Vertex shader and fragment shader in the OpenGL pipeline<\/strong><\/p>\n\n\n\n

Studying the figure 1 can help users understand the roles of vertex Shader and fragment Shader in the OpenGL pipeline compared to the fixed-functions. Vertex Shader will replace the sequential steps of model transform, view transform, per – vertex lighting, and projection transformation with some built-in variables such as gl_Vertex, gl_Color, gl_Normal, gl_ModelViewMatrix, gl_ProjectionMatrix, gl_ModelViewProjectionMatrix. Vertex Shader use in variables and uniform variables. The gl_Position and out variable created from vertex Shader undergo the rasterization process to create a fragment for every pixel.\u00a0 Fragment Shader is used in variable, uniform variable, and local variables to perform fragment processing, texturing, and per-fragment lighting. gl_FragColor produced from fragment Shader then get into the framebuffer.\u00a0<\/p>\n\n\n\n

\"\"
Figure 1: The Shader-style in the OpenGL pileline.
Source: http:\/\/web.engr.oregonstate.edu\/~mjb\/cs550\/PDFs\/Shaders.1pp.pdf<\/figcaption><\/figure>\n\n\n\n

2.2 Basic knowledge of OpenGL Shading Language (GLSL)<\/strong> <\/p>\n\n\n\n

There is no pointer, string, or enum in GLSL. Also, GLSP does not support mixed data types; thus, users need to cast data. For vectors, vector components include x, y, z, w (for geometric data) or r, g, b, a (for color data) or s, t, p, q (for texture data). Swizzle notation<\/strong> can help create new vectors based on other defined vectors. Common vectors are Boolean vectors (bvec2, bvec3, <\/strong>and bvec4<\/strong>), Integer vector (ivec2, ivec3, <\/strong>and ivec4<\/strong>), and float point vector(vec2, vec3, <\/strong>and vec4)<\/strong>. Studying the below examples [3] can be a good way to understand how vectors work in GLSP.\u00a0<\/p>\n\n\n\n

\"\"
Figure 2: Basic variables in GLSL.
Source: http:\/\/learnwebgl.brown37.net\/12_shader_language\/glsl_data_types.html<\/figcaption><\/figure>\n\n\n\n

In GLSP, users need to declare functions before calling them. If-else statement, while loop, and for loop can also be utilized. For calculation, some command functions are exp()<\/a>, log()<\/a>, sqrt()<\/a>, mod(), fract(), ceil(), floor(), abs(), min(), max(), fract(), clamp(), sin(), cos(), etc. Math functions can be used to animate, to distort shape, and blend values.  <\/p>\n\n\n\n

GLSL is used to write vertex and fragment shaders, but there are some similarities and differences between those two shaders. Both vertex and fragment shaders have a main function, built-in functions, variables, and expressions. Uniform<\/strong> is a read-only variable that both vertex shader and fragment shader can read from.\u00a0<\/p>\n\n\n\n

2.2.1 Vertex Shader<\/strong><\/p>\n\n\n\n

However, some specific built-in functions are used for vertex Shader only. The out <\/strong>variables are\u00a0 from vertex Shaders. Attribute <\/strong>variables can only be read from the vertex Shader. The gl_Vertex<\/strong> and gl_Normal <\/strong>are the two important built-in variables in vertex Shader. In Shader, without vec4 gl_Vertex, one can not draw any geometry; without vec3 gl_Normal, one cannot light the object. The vertex position and normal vector for each vertex can be defined in OpenGL and is accessed in vertex Shader file and fragment Shader file using the built-in gl_Vertex and gl_Normal respectively. Interestingly, users can set the rgb color for an object by using the untransformed gl_Vertex or the transformed gl_Vertex. The final color effect is very different. While the untransformed one has a fixed color position, the transformed one allows color to change based on position.\u00a0<\/p>\n\n\n\n

\"\"
Figure 3: Untransformed vs. transformed gl_Vertex in setting rgb.
Source: http:\/\/web.engr.oregonstate.edu\/~mjb\/cs550\/PDFs\/Shaders.1pp.pdf [2]<\/figcaption><\/figure>\n\n\n\n

2.2.2 Fragment Shader<\/strong><\/p>\n\n\n\n

Fragment Shaders help build\u00a0 per-fragment lighting. As users might notice, the fixed-function OpenGL can only allow per-vertex and per-face\u00a0 lighting. In per-vertex lighting might be fast, but the quality seems different from the per-fragment lighting. In per-vertex light, tessellation of the surface impacts the lighting quality [4].\u00a0<\/p>\n\n\n\n

\"\"
Figure 4: per-vertex vs. per-fragment lighting effect.
Source: https:\/\/www.gamersnexus.net\/guides\/2429-gpu-rendering-and-game-graphics-explained<\/a> [4] <\/figcaption><\/figure>\n\n\n\n

3.0 Conclusion<\/strong>:<\/p>\n\n\n\n

We have learned some basic background for vertex Shader and fragment Shader. Hopefully, this could add some more understanding for some beginners who start programming with those Shaders. With Shader, users make a huge difference in the quality and performance of of graphic design. \u00a0<\/p>\n\n\n\n

Reference<\/strong> <\/p>\n\n\n\n

[1] L3Harris Geospatial. (2020). How Shaders Enhance Performance<\/em>. [Online]. Available: https:\/\/www.l3harrisgeospatial.com\/docs\/shaderperformance.html. Accessed Oct 19th, 2021.<\/p>\n\n\n\n

[2] Mike Bailey.(2021). Introduction to using the OpenGL Shading Language (GLSL)<\/em>. Oregon state university. [Online]. Available: http:\/\/web.engr.oregonstate.edu\/~mjb\/cs550\/PDFs\/Shaders.1pp.pdf<\/p>\n\n\n\n

[3] Learn WebGL.(2016). GLSL Data types and Variables<\/em>.[Online]. Available: http:\/\/learnwebgl.brown37.net\/12_shader_language\/glsl_data_types.html. Accessed: Oct 19th, 2021. <\/p>\n\n\n\n

[4] Steve Burke. (2016). GPU Rendering & Game Graphics Pipeline Explained with nVidia.<\/em> Gamer Nexus. [Online]. Available: https:\/\/www.gamersnexus.net\/guides\/2429-gpu-rendering-and-game-graphics-explained<\/a>.Accessed: Oct 19th, 2021. <\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

1.0 Introduction As beginners continue to make progress with OpenGL, they should pick up more new tools to advance their learning. One of the recommended tools is Shader. In this blog, I will discuss the advantages of using vertex and fragment Shaders and some basic OpenGL Shading Language. 2.0 Advantage of Shader over Fixed-Function OpenGL… Continue reading Vertex Shader and Fragment Shader<\/span><\/a><\/p>\n","protected":false},"author":11550,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/learnfromscratch\/wp-json\/wp\/v2\/posts\/38","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/learnfromscratch\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/learnfromscratch\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/learnfromscratch\/wp-json\/wp\/v2\/users\/11550"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/learnfromscratch\/wp-json\/wp\/v2\/comments?post=38"}],"version-history":[{"count":1,"href":"https:\/\/blogs.oregonstate.edu\/learnfromscratch\/wp-json\/wp\/v2\/posts\/38\/revisions"}],"predecessor-version":[{"id":44,"href":"https:\/\/blogs.oregonstate.edu\/learnfromscratch\/wp-json\/wp\/v2\/posts\/38\/revisions\/44"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/learnfromscratch\/wp-json\/wp\/v2\/media?parent=38"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/learnfromscratch\/wp-json\/wp\/v2\/categories?post=38"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/learnfromscratch\/wp-json\/wp\/v2\/tags?post=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}