MAT 594CM S10Fundamentals of Spatial ComputingAngus Forbes Week 5 : GLSL Shaders Topics: Shader syntax, passing textures into shaders, per-pixel lighting,

Slides:



Advertisements
Similar presentations
MAT 594CM S2010Fundamentals of Spatial ComputingAngus Forbes Overview Goals of the course: 1. to introduce real-time 3D graphics programming with openGL.
Advertisements

GLSL Basics Discussion Lecture for CS 418 Spring 2015 TA: Zhicheng Yan, Sushma S Kini, Mary Pietrowicz.
Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS Fall 2014.
Informationsteknologi Wednesday, December 12, 2007Computer Graphics - Class 171 Today’s class OpenGL Shading Language.
MAT 594CM S10Fundamentals of Spatial ComputingAngus Forbes Week 4 : GLSL Shaders Topics: Shader programs, vertex & fragment shaders, passing data into.
MAT 594CM S2010Fundamentals of Spatial ComputingAngus Forbes Overview Today: - Make sure everyone is set up with an OpenGL environment - OpenGL basics:
Introduction to Shader Programming
GLSL I May 28, 2007 (Adapted from Ed Angel’s lecture slides)
GLSL I Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts Director, Arts Technology Center University of New Mexico.
Mohan Sridharan Based on slides created by Edward Angel GLSL I 1 CS4395: Computer Graphics.
Computer Science – Game DesignUC Santa Cruz Adapted from Jim Whitehead’s slides Shaders Feb 18, 2011 Creative Commons Attribution 3.0 (Except copyrighted.
Computer Graphics: Programming, Problem Solving, and Visual Communication Steve Cunningham California State University Stanislaus and Grinnell College.
GPU Programming Yanci Zhang Game Programming Practice.
Programmable Pipelines. Objectives Introduce programmable pipelines ­Vertex shaders ­Fragment shaders Introduce shading languages ­Needed to describe.
An Introduction to the OpenGL Shading Language Benj Lipchak Rob Simpson Bill Licea-Kane.
A Really (too) Short Introduction to OpenGL Peter Rautek.
CIS 565 Fall 2011 Qing Sun
Computer Graphics 3 Lecture 5: OpenGL Shading Language (GLSL)
Computing & Information Sciences Kansas State University Lecture 13 of 42CIS 636/736: (Introduction to) Computer Graphics Lecture 13 of 42 Wednesday, 20.
OpenGL Shading Language (Advanced Computer Graphics) Ernest Tatum.
Programmable Pipelines. 2 Objectives Introduce programmable pipelines ­Vertex shaders ­Fragment shaders Introduce shading languages ­Needed to describe.
CS 4363/6353 TEXTURE MAPPING PART II. WHAT WE KNOW We can open image files for reading We can load them into texture buffers We can link that texture.
CSE 690: GPGPU Lecture 6: Cg Tutorial Klaus Mueller Computer Science, Stony Brook University.
Lecture by: Martin Deschamps CSE 4431
Computer Graphics The Rendering Pipeline - Review CO2409 Computer Graphics Week 15.
OpenGL Shading Language Jian Huang CS594, Spring 2005.
GPU Shading and Rendering: OpenGL Shading Language Marc Olano UMBC.
GRAPHICS PIPELINE & SHADERS SET09115 Intro to Graphics Programming.
OpenGL Shader Language Vertex and Fragment Shading Programs.
Wilf Comp Shaders. Wilf Comp 4002 Shaders Shaders are programs that you can download onto the card Can be used.
Shaders in OpenGL Marshall Hahn. Introduction to Shaders in OpenGL In this talk, the basics of OpenGL Shading Language will be covered. This includes.
CS418 Computer Graphics John C. Hart
Shading in OpenGL Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E.
OpenGL Shading Language (GLSL)
CSE 381 – Advanced Game Programming GLSL. Rendering Revisited.
OpenGL-ES 3.0 And Beyond Boston Photo credit :Johnson Cameraface OpenGL Basics.
OpenGL Shading Language (GLSL)
Vertex Buffer Objects and Shader Attributes. For Further Reading Angel 7 th Ed: –Most parts of Chapter 2. Beginning WebGL: –Chapter 1: vertex Buffer Objects,
Week 3 Lecture 4: Part 2: GLSL I Based on Interactive Computer Graphics (Angel) - Chapter 9.
Programmable Pipelines. 2 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009 Black Box View Geometry Processor Frame Buffer Fragment Processor.
 Learn how you can use the shader through OpenGL ES  Add texture on object and make the object have a different look!!
 Learn some important functions and process in OpenGL ES  Draw some triangles on the screen  Do some transformation on each triangle in each frame.
What are shaders? In the field of computer graphics, a shader is a computer program that runs on the graphics processing unit(GPU) and is used to do shading.
CS 4363/6353 SHADERS/GLSL. ANOTHER LOOK AT THE PIPELINE Vertex Processing Clipping/Assembly Rasterization Fragment Processing.
OpenGL Shading Language
OpenGL Shading Language (GLSL)
Programming with OpenGL Part 3: Shaders Ed Angel Professor of Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive.
OpenGl Shaders Lighthouse3d.com.
GLSL I.  Fixed vs. Programmable  HW fixed function pipeline ▪ Faster ▪ Limited  New programmable hardware ▪ Many effects become possible. ▪ Global.
Computer Science – Game DesignUC Santa Cruz Tile Engine.
COMP 175 | COMPUTER GRAPHICS Remco Chang1/XX13 – GLSL Lecture 13: OpenGL Shading Language (GLSL) COMP 175: Computer Graphics April 12, 2016.
GLSL Basics Slides by : Wei-Wen Feng.
Shaders, part 2 alexandri zavodny.
Shader.
CSE 381 – Advanced Game Programming GLSL Syntax
Chapter 6 GPU, Shaders, and Shading Languages
GLSL I Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts Director, Arts Technology Center University of New Mexico.
Introduction to Computer Graphics with WebGL
Day 05 Shader Basics.
UMBC Graphics for Games
Chapter VI OpenGL ES and Shader
Introduction to Computer Graphics with WebGL
Introduction to Shaders
Programming with OpenGL Part 3: Shaders
Mickaël Sereno Shaders Mickaël Sereno 25/04/2019 Mickaël Sereno -
CS 480/680 Computer Graphics GLSL Overview.
Language Definitions Chap. 3 of Orange Book.
CS 480/680 Part 1: Model Loading.
Introduction to Computer Graphics with WebGL
CS 480/680 Fall 2011 Dr. Frederick C Harris, Jr. Computer Graphics
Presentation transcript:

MAT 594CM S10Fundamentals of Spatial ComputingAngus Forbes Week 5 : GLSL Shaders Topics: Shader syntax, passing textures into shaders, per-pixel lighting, vertex displacement, multi-texturing

MAT 594CM S10Fundamentals of Spatial ComputingAngus Forbes Syntax GLSL looks like a simplified version of C. The main addition to GLSL is vector, matrix, and texture-sampler types, and associated built-in functions and operations to those types. floats: float, vec2, vec3, vec4, mat2, mat3, mat4 ints: int, ivec2, ivec3, ivec4 booleans: bool, bvec2, bvec3, bvec4 textures: sampler1D, sampler2D, sampler3D, sampler1DShadow, sampler2DShadow

MAT 594CM S10Fundamentals of Spatial ComputingAngus Forbes Syntax vec3 pos = vec3(0.0, 0.0, -0.5);= [ , -0.5] vec4 v = vec4(0.5);= [0.5, 0.5, 0.5, 0.5] mat2 m = mat2(1.0, 2.0, 3.0, 4.0);= [ ] mat4 identity = mat4(1.0);= [ ]

MAT 594CM S10Fundamentals of Spatial ComputingAngus Forbes Indexing You can index into a vector or matrix type using array notation: vec3 v = vec3(1.0, 2.0, 3.0); = [1.0, 2.0, 3.0] float val = v[2]; = [3.0] mat2 m = mat2(1.0, 2.0, 3.0, 4.0) = [ ] vec2 v2 = m[1] //gets the 2 nd column= [ ]

MAT 594CM S10Fundamentals of Spatial ComputingAngus Forbes Swizzling The vector types can be “swizzled” using any of these conventions x,y,z,w (usually indicates position) r,g,b,a (usually indicates color) s,t,p,q (usually indicates texture coordinates) to refer to the 1 st, 2 nd, 3 rd, or 4 th component of the vector. For instance: vec4 vecA = vec4(1.0, 2.0, 3.0, 4.0);= [1.0, 2.0, 3.0, 4.0] vec2 vecB = vecA.xz;= [1.0, 3.0]; vec3 vecC = vecB.grg;= [3.0, 1.0, 3.0];

MAT 594CM S10Fundamentals of Spatial ComputingAngus Forbes Operations Operations are the same as in C, except for a few special cases for vector and matrix types. In general, any operation to a vector or matrix is component-wise... Except for multiplication between a vector and a matrix, or between two matrices: vec4 v, u; mat4 m; vec4 v1 = v * u; //v1 = [v.x * u.x; v.y * u.y; v.z * u.z; v.w * u.w] vec4 v2 = v * m; //vector first treats v like a row-vector when multiplying vec4 v3 = m * v; //matrix first treats v like a column-vector when multiplying mat4 m1 = m * m; //performs a matrix multiplication

MAT 594CM S10Fundamentals of Spatial ComputingAngus Forbes Qualifiers There are also special global “qualifiers” that need to be attached to the variables when communicating between OpenGL and a GLSL program or between a vertex shader and a fragment shader. “uniform” = read-only global variable accessible to the entire primitive during the binding of the program. “attribute” = vertex specific variable accessible to each vertex in the primitive within the vertex shader “varying” = write-only variable created in the vertex shader and interpolated across each vertex, read-only accessible within the fragment shader

MAT 594CM S10Fundamentals of Spatial ComputingAngus Forbes Built-in functions GLSL has a number of built-in functions that operate on the vector and matrix data types. Most of these functions are hardware accelerated. Refer to the reference page linked to on the syllabus, but they include: common math functions, trigonometry, exponential, geometric, derivatives (for fragments), lighting calculations (reflection, refraction), matrix functions, texture access functions (for Sampler data types), noise functions (although noise functions are NOT hardware accelerated on my graphics card!)

MAT 594CM S10Fundamentals of Spatial ComputingAngus Forbes Built-in variables There are also a number of built-in variables available to the shaders. Vertex attributes (available to the vertex shaders): gl_Color, gl_Normal, gl_Vertex, gl_MutliTexCoord0  16 (or however many are textures are available for simultaneous processing on your card) Uniform variables (available to both vertex and fragment shaders): modelview and projection info: gl_ModelViewMatrix, gl_ProjectionMatrix, gl_ModelViewProjectionMatrix, gl_NormalMatrix, etc light and material info: gl_ModelViewMatrixInverse, gl_FrontMaterial, gl_BackMaterial, gl_LightSource[] Varying variables (automatically passed to the fragment shader): gl_Color, gl_TexCoord[]

MAT 594CM S10Fundamentals of Spatial ComputingAngus Forbes Vertex shader the information passed from the vertex shader to the fragment shader is automatically interpolated across the geometry. In the fixed-functionality pipeline, this happens automatically with the position, the color, the normals, and the texture coordinates. In the vertex shader you can create your own interpolated variables by defining and writing to a special type of data called “varying” At the very least, you must specify a built-in varying variable called “gl_Position” which indicates how the geometry is projected onto the 2D screen. The vertex shader has access to the modelview matrix and the projection matrix, or you can call ftransform() to automatically mimic the fixed-functionality pipeline. Vertex shaders are used for particle effects, deformations, etc

MAT 594CM S10Fundamentals of Spatial ComputingAngus Forbes Fragment shader The fragment shader ultimately defines the color of every pixel of the geometry. You use a combination of global (“uniform”) and interpolated (“varying”) data to determine how to color the pixels. Fragment shaders commonly are used for lighting models, image processing techniques, blurring, glow filters, light scattering effects, etc. Fragment shaders run for every pixel, whereas vertex shaders run only once per vertex. So if possible, put the necessary logic in the vertex shader. In some cases, the automatic interpolation of values may not be sufficient, and some or all logic may have to be placed in the fragment shader.

MAT 594CM S10Fundamentals of Spatial ComputingAngus Forbes Installing a shader program 1. Create a shader program programID = glCreateProgram(); 2. Create the vertex and fragment shaders vertexID = glCreateShader(GL_VERTEX_SHADER); fragmentID = glCreateShader(GL_FRAGMENT_SHADER); 3. Load source code from a file glShaderSource(vertexID, numLines, vertexSource, lineLengths, 0); glShaderSource(fragmentID, numLines, fragmentCode, lineLengths, 0); 4. Compile the shader glCompileShader(vertexID); glCompileShader(fragmentID); 5. Attach the shaders to the program glAttachShader(programID, vertexID); glAttachShader(programID, fragmentID); 6. Link the program to the OpenGL context glLinkProgram(programID);

MAT 594CM S10Fundamentals of Spatial ComputingAngus Forbes Using a shader program 1. Bind the program within your display loop to bypass fixed-functionality glUseProgram(programID); 2. Pass “uniform” data into the shaders uniformID = glGetUniformLocation(programID, variableName); glUniform...(uniformID, values...); 3. Pass texture data into the shaders glEnable(GL_TEXTURE_2D); glActiveTexture(GL_TEXTURE#); glBindTexture(GL_TEXTURE_2D, textureID); uniformID = glGetUniformLocation(programID, textureVariableName); glUniform1i(textureVariableName, #); 3. Draw geometry (passing in “attribute” data if necessary) attributeID = glGetAttribLocation(programID, variableName); glBegin(GL_POINTS); glVertexAttrib...(attributeID, values...); glVertex3f(x, y, z); glEnd(); 4. Unbind the program to return to fixed-functionality pipeline glUseProgram(0);

MAT 594CM S10Fundamentals of Spatial ComputingAngus Forbes OpenGL  GLSL data types Uniform data = Data that is global to the entire shader program e.g. textures, timestamp, counters, blending value, states, filter kernels Vertex Attribute data = Data that is specific to a particular vertex e.g. position offsets, color offsets, texture coordinates glColor, glNormal, glVertex, glTexCoord are all automatically available

MAT 594CM S10Fundamentals of Spatial ComputingAngus Forbes GLSL data types Uniform data = global data passed in from OpenGL, read-only and available in the vertex shaders and the fragment shaders Attribute data = vertex specific data passed in from OpenGL, read-only, available only in the vertex shader Varying data = data interpolated between vertices, writable in the vertex shader and read-only in fragment shader

MAT 594CM S10Fundamentals of Spatial ComputingAngus Forbes Simple example This example mimcs fixed-functionality with no lighting and no texturing. simple.vert //passes the position to the fragment shader void main() { gl_Position = ftransform(); //gl_Position must ALWAYS be set } simple.frag //interpolates the colors of the vertices void main() { gl_FragColor = gl_Color; //gl_FragColor must ALWAYS be set }

MAT 594CM S10Fundamentals of Spatial ComputingAngus Forbes Vertex Displacement example...

MAT 594CM S10Fundamentals of Spatial ComputingAngus Forbes Per-Pixel Lighting example

MAT 594CM S10Fundamentals of Spatial ComputingAngus Forbes Multi-texturing example