1 / 20

Fragment Shading

Fragment Shading. Grayscale. Lets simulate black - and - white film. void main ( void ) { // Convert to grayscale using NTSC conversion weights float gray = dot ( gl _ Color . rgb , vec3(0.299, 0.587, 0.114)); // replicate grayscale to RGB components

cliff
Download Presentation

Fragment Shading

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. FragmentShading

  2. Grayscale • Letssimulateblack-and-white film. • voidmain(void) • { • // Convert to grayscale using NTSC conversion weights • floatgray = dot(gl_Color.rgb, vec3(0.299, 0.587, 0.114)); • // replicategrayscaleto RGB components • gl_FragColor = vec4(gray, gray, gray, 1.0); • }

  3. SepiaTone • In this example, we recolorize the grayscale picture with a sepia tone. This tone givesthe picture the tint of an Old West photograph. To do this, we first convert to grayscale asbefore. Then we multiply the gray value by a color vector, which accentuates some colorchannelsandreducesothers. • voidmain(void) • { • // Convert RGB to grayscale using NTSC conversion weights • floatgray = dot(gl_Color.rgb, vec3(0.299, 0.587, 0.114)); • // convertgrayscaletosepia • gl_FragColor = vec4(gray * vec3(1.2, 1.0, 0.8), 1.0); • }

  4. Inversion • For this next example, we’re going for the film negative effect. take whatever color you were otherwise goingto draw and subtract that color from 1. • voidmain(void) • { • // invertcolorcomponents • gl_FragColor.rgb = 1.0 - gl_Color.rgb; • gl_FragColor.a = 1.0; • }

  5. Post-processingEffects • Afterfillingtheframebuffercall glCopyTexImage2D andcopyframebufffer in totexture. • The texture size is chosen to be the largest power-of-two sizesmaller than the window. (If OpenGL 2.0 or theARB_texture_non_power_of_two extensionis supported, the texture can be the same size as the window.) • A fragment-shadedquadis then drawn centered within the window with the same dimensions as the texture,witha base texture coordinate ranging from (0,0) in the lower left to (1,1) in the upper right.

  6. BlurEffect • Itsmoothesouthighfrequencyfeatures, such as the jaggies along object edges. It is also called a low-pass filterbecause it lets low-frequency features pass through while filtering out high-frequencyfeatures.

  7. BlurEffect (3x3 filter) • uniform sampler2D sampler0; • uniform vec2 tc_offset[9]; • voidmain(void) • { • vec4 sample[9]; • for (int i = 0; i < 9; i++) • { • sample[i] = texture2D(sampler0, • gl_TexCoord[0].st + tc_offset[i]); • } • // 1 2 1 • // 2 1 2 / 13 • // 1 2 1 • gl_FragColor = (sample[0] + (2.0*sample[1]) + sample[2] + • (2.0*sample[3]) + sample[4] + (2.0*sample[5]) + • sample[6] + (2.0*sample[7]) + sample[8]) / 13.0; • }

  8. SharpenEffect • Sharpening is the opposite of blurring. Some examples of its use include making edgesmore pronounced and making text more readable.

  9. SharpenEffect (3x3 Filter) • uniform sampler2D sampler0; • uniform vec2 tc_offset[9]; • voidmain(void) • { • vec4 sample[9]; • for (int i = 0; i < 9; i++) • { • sample[i] = texture2D(sampler0, • gl_TexCoord[0].st + tc_offset[i]); • } • // -1 -1 -1 • // -1 9 -1 • // -1 -1 -1 • gl_FragColor = (sample[4] * 9.0) - • (sample[0] + sample[1] + sample[2] + • sample[3] + sample[5] + • sample[6] + sample[7] + sample[8]); • }

  10. DilationandErosionEffects • Dilation and erosion are morphological filters, meaning they alter the shape of objects.Dilation grows the size of bright objects, whereas erosion shrinks the size of bright objects.(They each have the reverse effect on dark objects.)

  11. DilationEffect • uniform sampler2D sampler0; • uniform vec2 tc_offset[9]; • voidmain(void) • { • vec4 sample[9]; • vec4 maxValue = vec4(0.0); • for (int i = 0; i < 9; i++) • { • sample[i] = texture2D(sampler0, • gl_TexCoord[0].st + tc_offset[i]); • maxValue= max(sample[i], maxValue); • } • gl_FragColor = maxValue; • }

  12. ErosionEffect • uniform sampler2D sampler0; • uniform vec2 tc_offset[9]; • voidmain(void) • { • vec4 sample[9]; • vec4 minValue = vec4(1.0); • for (int i = 0; i < 9; i++) • { • sample[i] = texture2D(sampler0, • gl_TexCoord[0].st + tc_offset[i]); • minValue= min(sample[i], minValue); • } • gl_FragColor = minValue; • }

  13. EdgeDetection • Edges are simply places in an image where the color changesrapidly, and edge detection filters pick up on these rapid changes and highlight them.

  14. LaplacianEdgeDetection • uniform sampler2D sampler0; • uniform vec2 tc_offset[9]; • voidmain(void) • { • vec4 sample[9]; • for (int i = 0; i < 9; i++) • { • sample[i] = texture2D(sampler0, • gl_TexCoord[0].st + tc_offset[i]); • } • // -1 -1 -1 • // -1 8 -1 • // -1 -1 -1 • gl_FragColor = (sample[4] * 8.0) - • (sample[0] + sample[1] + sample[2] + • sample[3] + sample[5] + • sample[6] + sample[7] + sample[8]); • }

  15. DiffuseLighting (perfragment) • Verysimilartopervertexlighting. • The vertex shader sets up the data that needs to be interpolated acrossthe line or triangle, such as normals and light vectors. The fragment shader then proceedsto do most of the work, resulting in a final color.

  16. DiffuseLightingVertexShaderStage • uniform vec3 lightPos0; • varyingvec3 N, L; • voidmain(void) • { • // vertex MVP transform • gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex; • // eye-space normal • N = gl_NormalMatrix * gl_Normal; • // eye-spacelightvector • vec4 V = gl_ModelViewMatrix * gl_Vertex; • L = lightPos0 - V.xyz; • // Copytheprimarycolor • gl_FrontColor = gl_Color; • }

  17. DiffuseLighting Per FragmentStage • varyingvec3 N, L; • voidmain(void) • { • // outputthediffusecolor • floatintensity = max(0.0,dot(normalize(N), normalize(L))); • gl_FragColor = gl_Color; • gl_FragColor.rgb *= intensity; • }

  18. MultipleSpecularLights • The vertex shader needs to generate light vector interpolants for all three lights, in additiontothe normal vector.

  19. ThreeLightsVertexShader • uniform vec3 lightPos[3]; • varying vec3 N, L[3]; • voidmain(void) • { • // vertex MVP transform • gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex; • vec4 V = gl_ModelViewMatrix * gl_Vertex; • // eye-space normal • N = gl_NormalMatrix * gl_Normal; • // Lightvectors • for (int i = 0; i < 3; i++) • L[i] = lightPos[i] - V.xyz; • // Copytheprimarycolor • gl_FrontColor = gl_Color; • }

  20. varying vec3 N, L[3]; • voidmain(void) • { • constfloatspecularExp = 128.0; • vec3 NN = normalize(N); • // Lightcolors • vec3 lightCol[3]; • lightCol[0] = vec3(1.0, 0.25, 0.25); • lightCol[1] = vec3(0.25, 1.0, 0.25); • lightCol[2] = vec3(0.25, 0.25, 1.0); • gl_FragColor = vec4(0.0); • for (int i = 0; i < 3; i++) • { • vec3 NL = normalize(L[i]); • vec3 NH = normalize(NL + vec3(0.0, 0.0, 1.0)); • floatNdotL = max(0.0, dot(NN, NL)); • // Accumulatethediffusecontributions • gl_FragColor.rgb += gl_Color.rgb * lightCol[i] * • NdotL; • // Accumulatethespecularcontributions • if (NdotL > 0.0) • gl_FragColor.rgb += lightCol[i] * • pow(max(0.0, dot(NN, NH)), specularExp); • } • gl_FragColor.a = gl_Color.a; • } Per pixellighting

More Related