CSE 167: Introduction to Computer Graphics Lecture #8:...
Transcript of CSE 167: Introduction to Computer Graphics Lecture #8:...
![Page 1: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/1.jpg)
CSE 167:
Introduction to Computer GraphicsIntroduction to Computer Graphics
Lecture #8: GLSL
Jürgen P. Schulze, Ph.D.
University of California, San Diego
Fall Quarter 2012
![Page 2: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/2.jpg)
Announcements
� Homework project #4 due Friday, November 2nd
� Introduction: Oct 29 at 2:30pm
� This Friday:
� Late grading for project #3
� Early grading for project #4
� Midterm exam: Thursday, Oct 25, 2-3:20pm in classroom
� Midterm compatible index cards provided today and in instructor’s office
� Reminder: Ted forums exist to discuss homework assignments and midterms
2
![Page 3: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/3.jpg)
Review
� OpenGL’s Shading Model
3
![Page 4: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/4.jpg)
Complete Blinn-Phong Shading Model
� Blinn-Phong model with several light sources I
� All colors and reflection coefficients are vectors with 3 components for red, green, blue
ambientdiffuse specular
4
![Page 5: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/5.jpg)
BRDFs
� Diffuse, Phong, Blinn models are instances of bidirectional reflectance distribution functions (BRDFs)
� For each pair of light directions L and viewing direction e, the BRDF returns the fraction of reflected light
� Shading with general BRDF f� Shading with general BRDF f
� Many other forms of BRDFs exist in graphics, often named after inventors: Cook-Torrance, Ward, etc.
5
![Page 6: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/6.jpg)
Lecture Overview
� OpenGL Light Sources
� Types of Geometry Shading
� Shading in OpenGL
� Fixed-Function Shading
� Programmable ShadersProgrammable Shaders
� Vertex Programs
� Fragment Programs
� GLSL
6
![Page 7: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/7.jpg)
Light Sources
� Real light sources can have complex properties
� Geometric area over which light is produced
� Anisotropy (directionally dependent)
� Reflective surfaces act as light sources (indirect light)
� OpenGL uses a drastically simplified model to allow real-time rendering
7
![Page 8: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/8.jpg)
OpenGL Light Sources
� At each point on surfaces we need to know
� Direction of incoming light (the L vector)
� Intensity of incoming light (the cl values)
� Standard light sources in OpenGL
� Directional: from a specific direction
� Point light source: from a specific point
� Spotlight: from a specific point with intensity that depends on direction
8
![Page 9: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/9.jpg)
Directional Light
� Light from a distant source
� Light rays are parallel
� Direction and intensity are the same everywhere
� As if the source were infinitely far away
� Good approximation of sunlight
� Specified by a unit length direction vector, and a color
Light source
Receiving surface
9
![Page 10: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/10.jpg)
Point Lights
� Similar to light bulbs
� Infinitely small point radiates light equally in all directions
� Light vector varies across receiving surface
� What is light intensity over distance proportional to?
� Intensity drops off proportionally to the inverse square of the Intensity drops off proportionally to the inverse square of the distance from the light
� Reason for inverse square falloff: Surface area A of sphere:
A = 4 π r2
10
![Page 11: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/11.jpg)
Point Lights in Theory
cl
v
pcsrc
cl
v
Light source
vv
Receiving surface
11
At any point v on the
surface:
![Page 12: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/12.jpg)
Point Lights in OpenGL
� OpenGL model for distance attenuation:
� Attenuation parameters:
� kc = constant attenuation, default: 1
cl =csrc
kc + kl p − v + kq p − v2
c
� kl = linear attenuation, default: 0
� kq = quadratic attenuation, default: 0
� Default: no attenuation: cl=csrc� Change attenuation parameters with:
� GL_CONSTANT_ATTENUATION
� GL_LINEAR_ATTENUATION
� GL_QUADRATIC_ATTENUATION12
![Page 13: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/13.jpg)
� Like point source, but intensity depends on direction
Parameters
� Position: location of the light source
� Spot direction: center axis of the light source
Spotlights
� Spot direction: center axis of the light source
� Falloff parameters:
� Beam width (cone angle)
� The way the light tapers off at the edges of the beam (cosine exponent)
13
![Page 14: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/14.jpg)
Spotlights
Light source
Receiving surface
14
![Page 15: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/15.jpg)
Spotlights
Photograph of real spotlight Spotlights in OpenGL
15
![Page 16: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/16.jpg)
Lecture Overview
� OpenGL Light Sources
� Types of Geometry Shading
� Shading in OpenGL
� Fixed-Function Shading
� Programmable ShadersProgrammable Shaders
� Vertex Programs
� Fragment Programs
� GLSL
16
![Page 17: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/17.jpg)
Types of Geometry Shading
� Per-triangle
� Per-vertex
� Per-pixel
17
![Page 18: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/18.jpg)
Per-Triangle Shading
� Known as flat shading
� Evaluate shading once per triangle
� Advantage
� FastFast
� Disadvantage
� Faceted appearance
18
![Page 19: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/19.jpg)
Per-Vertex Shading
� Known as Gouraud shading (Henri Gouraud, 1971)
� Interpolates vertex colors across triangles with Barycentric Interpolation
� Advantages� Advantages� Fast
� Smoother surface appearance than with flat shading
� Disadvantage� Problems with small highlights
19
![Page 20: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/20.jpg)
Per-Pixel Shading
� Also known as Phong Interpolation (not to be confused with Phong Illumination Model)
� Rasterizer interpolates normals (instead of colors) across triangles
� Illumination model is evaluated at each pixel
Simulates shading with normals of a curved � Simulates shading with normals of a curved surface
� Advantage
� Higher quality than Gouraud shading
� Disadvantage
� Slow
20
Source: Penny Rheingans, UMBC
![Page 21: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/21.jpg)
Gouraud vs. Per-Pixel Shading
� Gouraud has problems with highlights
� More triangles would improve result, but reduce frame rate
Gouraud Per-Pixel
21
![Page 22: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/22.jpg)
Lecture Overview
� OpenGL Light Sources
� Types of Geometry Shading
� Shading in OpenGL
� Fixed-Function Shading
� Programmable ShadersProgrammable Shaders
� Vertex Programs
� Fragment Programs
� GLSL
22
![Page 23: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/23.jpg)
Shading with Fixed-Function Pipeline
� Fixed-function pipeline only allows Gouraud (per-vertex) shading
� We need to provide a normal vector for each vertex� Shading is performed in camera space
� Position and direction of light sources are transformed by GL_MODELVIEW matrixmatrix
� If light sources should be in object space:� Set GL_MODELVIEW to desired object-to-camera transformation
� Use object space coordinates for light positions
� More information:� http://glprogramming.com/red/chapter05.html
� http://www.falloutsoftware.com/tutorials/gl/gl8.htm
23
![Page 24: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/24.jpg)
Tips for Transforming Normals
� If you need to (manually) transform geometry by a transformation matrix M, which includes shearing or scaling:
� Transforming the normals with M will not work: transformed normalsare no longer perpendicular to surfaces
� Solution: transform the normals differently:
� Either transform the end points of the normal vectors separately� Either transform the end points of the normal vectors separately
� Or transform normals with
� Find derivation on-line at:
� http://www.oocities.com/vmelkon/transformingnormals.html
� OpenGL does this automatically if the following command is used:
� glEnable(GL_NORMALIZE)
24
![Page 25: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/25.jpg)
Lecture Overview
� OpenGL Light Sources
� Types of Geometry Shading
� Shading in OpenGL
� Fixed-Function Shading
� Programmable ShadersProgrammable Shaders
� Vertex Programs
� Fragment Programs
� GLSL
25
![Page 26: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/26.jpg)
Programmable Shaders in OpenGL� Initially, OpenGL only had a fixed-function pipeline for shading
� Programmers wanted more flexibility, similar to programmable shaders in raytracing software (term “shader” first introduced by Pixar in 1988)
� First shading languages came out in 2002:
� Cg (C for Graphics, created by Nvidia)
� HLSL (High Level Shader Language, created by Microsoft)
� They supported:� They supported:
� Fragment shaders: allowed per-pixel shading
� Vertex shaders: allowed modification of geometry
� OpenGL 2.0 supported the OpenGL Shading Language (GLSL) in 2003
� Geometry shaders were added in OpenGL 3.2
� Tessellation shaders were added in OpenGL 4.0
� Programmable shaders allow real-time: Shadows, environment mapping, per-pixel lighting, bump mapping, parallax bump mapping, HDR, etc., etc.
26
![Page 27: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/27.jpg)
Demo
� NVIDIA Froggy� http://www.nvidia.com/coolstuff/demos#!/froggy
� FeaturesFeatures
� Bump mapping shader for Froggy’s skin
� Physically-based lighting model simulating sub-surface scattering
� Supersampling for scene anti-aliasing
� Raytracing shader for irises to simulate refraction for wet and shiny eyes
� Dynamically-generated lights and shadows
27
![Page 28: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/28.jpg)
Shader Programs
� Programmable shaders consist of shader programs
� Written in a shading language
� Syntax similar to C language
� Each shader is a separate piece of code in a separate ASCII text file
� Shader types:
� Vertex shaderVertex shader
� Tessellation shader
� Geometry shader
� Fragment shader (a.k.a. pixel shader)
� The programmer can provide any number of shader types to work together to achieve a certain effect
� If a shader type is not provided, OpenGL’s fixed-function pipeline is used
28
![Page 29: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/29.jpg)
Programmable Pipeline
� Executed once per vertex:
� Vertex Shader
� Tessellation Shader
� Geometry Shader
Modeling and viewing
transformation
Shading
Projection
Scene
Frame-buffer access
(z-buffering)
� Executed once per fragment:
� Fragment Shader
29
Projection
Rasterization
Image
Fragment processing
![Page 30: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/30.jpg)
Vertex Shader
� Executed once per vertex
� Cannot create or remove vertices
� Does not know the primitive it belongs to
� Replaces functionality for
� Model-view, projection transformation
� Per-vertex shading� Per-vertex shading
� If you use a vertex program, you need to implement behavior for the above functionality in the program!
� Typically used for:
� Character animation
� Particle systems
30
![Page 31: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/31.jpg)
Tessellation Shader
� Executed once per primitive
� Generates new primitives by subdividing each line, triangle or quad primitive
� Typically used for:
� Adapting visual quality to the required level of detail
� For instance, for automatic tessellation of Bezier curves and surfaces� For instance, for automatic tessellation of Bezier curves and surfaces
� Geometry compression: 3D models stored at coarser level of resolution, expanded at runtime
� Allows detailed displacement maps for less detailed geometry
31
![Page 32: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/32.jpg)
Geometry Shader
� Executed once per primitive (triangle, quad, etc.)
� Can create new graphics primitives from output of tessellation shader (e.g., points, lines, triangles)
� Or can remove the primitive
� Typically used for:
� Per-face normal computation� Per-face normal computation
� Easy wireframe rendering
� Point sprite generation
� Shadow volume extrusion
� Single pass rendering to a cube map
� Automatic mesh complexity modification (depending on resolution requirements)
32
![Page 33: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/33.jpg)
Fragment Shader
� A.k.a. Pixel Shader
� Executed once per fragment
� Cannot access other pixels or vertices
� Makes execution highly parallelizable
� Computes color, opacity, z-value, texture � Computes color, opacity, z-value, texture coordinates
� Typically used for:
� Per-pixel shading (e.g., Phong shading)
� Advanced texturing
� Bump mapping
� Shadows33
![Page 34: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/34.jpg)
Lecture Overview
� OpenGL Light Sources
� Types of Geometry Shading
� Shading in OpenGL
� Fixed-Function Shading
� Programmable ShadersProgrammable Shaders
� Vertex Programs
� Fragment Programs
� GLSL
34
![Page 35: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/35.jpg)
Vertex Programs
Vertex
Vertex Attributes
From Application
Vertex
program
To Rasterizer
Output Variables
Uniform Parameters
35
![Page 36: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/36.jpg)
Vertex Attributes
� Declared using the attribute storage classifier
� Different for each execution of the vertex program
� Can be modified by the vertex program
� Two types:
� Pre-defined OpenGL attributes. Examples:� Pre-defined OpenGL attributes. Examples:attribute vec4 gl_Vertex;
attribute vec3 gl_Normal;
attribute vec4 gl_Color;
� User-defined attributes. Example:attribute float myAttrib;
36
![Page 37: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/37.jpg)
Uniform Parameters
� Declared by uniform storage classifier
� Normally the same for all vertices
� Read-only
� Two types:
� Pre-defined OpenGL state variables� Pre-defined OpenGL state variables
� User-defined parameters
37
![Page 38: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/38.jpg)
Uniform Parameters: Pre-Defined
� Provide access to the OpenGL state
� Examples for pre-defined variables:uniform mat4 gl_ModelViewMatrix;
uniform mat4 gl_ModelViewProjectionMatrix;
uniform mat4 gl_ProjectionMatrix;
uniform gl_LightSourceParametersuniform gl_LightSourceParameters
gl_LightSource[gl_MaxLights];
38
![Page 39: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/39.jpg)
Uniform Parameters: User-Defined
� Parameters that are set by the application
� Should not be changed frequently
� Especially not on a per-vertex basis!
� To access, use glGetUniformLocation, glUniform*
in applicationin application
� Example:
� In shader declareuniform float a;
� Set value of a in application:GLuint p;
int I = glGetUniformLocation(p,”a”);
glUniform1f(i, 1.0f);
39
![Page 40: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/40.jpg)
Vertex Programs: Output Variables
� Required output: homogeneous vertex coordinatesvec4 gl_Position
� varying output variables
� Mechanism to send data to the fragment shader
� Will be interpolated during rasterization
� Fragment shader gets interpolated data� Fragment shader gets interpolated data
� Pre-defined varying output variables, for example:varying vec4 gl_FrontColor;
varying vec4 gl_TexCoord[];
Any pre-defined output variable that you do not overwrite will have the value of the OpenGL state.
� User-defined varying output variables, e.g.:
varying vec4 vertex_color;
40
![Page 41: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/41.jpg)
Lecture Overview
� OpenGL Light Sources
� Types of Geometry Shading
� Shading in OpenGL
� Fixed-Function Shading
� Programmable ShadersProgrammable Shaders
� Vertex Programs
� Fragment Programs
� GLSL
41
![Page 42: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/42.jpg)
Fragment Programs
Fragment
Fragment Data
From Rasterizer
Fragment
program
To Frame Buffer
Output Variables
Uniform Parameters
42
![Page 43: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/43.jpg)
Fragment Data
� Changes for each execution of the fragment program
� Fragment data includes:
� Interpolated standard OpenGL variables for fragment shader, as generated by vertex shader, for example:varying vec4 gl_Color;
varying vec4 gl_TexCoord[];varying vec4 gl_TexCoord[];
� Interpolated varying variables from vertex shader
� Allows data to be passed from vertex to fragment shader
43
![Page 44: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/44.jpg)
Uniform Parameters
� Same as in vertex programs
44
![Page 45: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/45.jpg)
Output Variables
� Pre-defined output variables:� gl_FragColor
� gl_FragDepth
� OpenGL writes these to the frame buffer
� Result is undefined if you do not set these variables!Result is undefined if you do not set these variables!
45
![Page 46: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/46.jpg)
Lecture Overview
� OpenGL Light Sources
� Types of Geometry Shading
� Shading in OpenGL
� Fixed-Function Shading
� Programmable ShadersProgrammable Shaders
� Vertex Programs
� Fragment Programs
� GLSL
46
![Page 47: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/47.jpg)
GLSL Main Features
� Similar to C language
� attribute, uniform, varying storage classifiers
� Set of predefined variables
� Access to per-vertex, per-fragment data
� Access OpenGL state� Access OpenGL state
� Built-in vector data types, vector operations
� No pointers
� No direct access to data or variables in your C++ code
47
![Page 48: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/48.jpg)
Example: Treat normals as colors// Vertex Shader
varying vec4 color;
void main()
{
// Treat the normal (x, y, z) values as (r, g, b) color
components.
color = vec4(clamp(abs((gl_Normal + 1.0) * 0.5), 0.0, 1.0),
1.0);1.0);
gl_Position = ftransform();
}
// Fragment Shader
varying vec4 color;
void main()
{
gl_FragColor = color;
}
48
![Page 49: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/49.jpg)
Creating Shaders in OpenGL
Source: Gabriel Zachmann, Clausthal University
49
![Page 50: CSE 167: Introduction to Computer Graphics Lecture #8: GLSLivl.calit2.net/wiki/images/b/b0/08_GLSL_F12.pdf · Midterm exam: Thursday, Oct 25, 2 -3:20pm in classroom Midterm compatible](https://reader033.fdocuments.in/reader033/viewer/2022052011/6026cc2904879e460e79649d/html5/thumbnails/50.jpg)
Tutorials and Documentation
� OpenGL and GLSL specifications
� http://www.opengl.org/documentation/specs/
� GLSL tutorials
� http://www.lighthouse3d.com/opengl/glsl/
� http://www.clockworkcoders.com/oglsl/tutorials.html
� OpenGL Programming Guide (Red Book)
� OpenGL Shading Language (Orange Book)
� OpenGL API Reference Card
� http://www.khronos.org/files/opengl43-quick-reference-card.pdf
50