SlideServe
Menu
Préférences
© SlideServe · v2026

Fragment Shading

cliff avatar
20 diapositives · 471 Views · Jul 13, 2014

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

Fragment Shading - slide 1
01 / 20Fragment Shading
1 / 17

Télécharger la présentation

Fragment Shading
Une image / un lien ci-dessous est fourni (tel quel) pour télécharger la présentation

Politique de téléchargement : le contenu du site vous est fourni TEL QUEL pour votre information et votre usage personnel ; il ne peut être vendu, concédé sous licence ni partagé sur d’autres sites sans l’accord de son auteur.Le contenu vous est fourni TEL QUEL, pour votre information et votre usage personnel uniquement. Téléchargez la présentation en cliquant sur ce lien. Lors du téléchargement, si vous ne parvenez pas à télécharger une présentation, l’éditeur a peut-être supprimé le fichier de son serveur.Pendant le téléchargement, si vous ne parvenez pas à obtenir une présentation, le fichier a peut-être été supprimé par l’éditeur.

F I N

Plus de contenu associé

Transcription de la présentation
  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