Shader Programming
with GLSL
Instructor: Christopher Rasmussen (cer@cis.udel.edu)
February 24, 2023 ❖ Lecture 9
Outline
OpenGL from 3.0
from Orange Book
Vertex shader
Fragment shader
Other Shader types
GLSL (GL Shading Language)
GLSL Syntax Overview
GLSL Syntax Overview
More details...and see last several slides for more functions
GLSL Syntax Overview
Original tutorial03 .vertexshader
#version 330 core
// Input vertex data, different for all executions of shader
layout(location = 0) in vec3 vertexPosition_modelspace;
// Values that stay constant for the whole mesh.
uniform mat4 MVP;
void main()
{
// Output position of the vertex (clip space) = MVP * position
gl_Position = MVP * vec4(vertexPosition_modelspace,1);
}
GLSL Syntax: Types
GLSL Syntax: Vectors
vec3 xyz = vec3(1.0, 2.0, 3.0);
vec3 xyz = vec3(1.0); // [1.0, 1.0, 1.0]
vec3 xyz = vec3(vec2(1.0, 2.0), 3.0);
vec4 xyzw = vec3(xyz, 1.0);
GLSL Syntax: Vectors
vec3 xyz = vec3(1.0, 2.0, 3.0);
vec3 xyz = vec3(1.0); // [1.0, 1.0, 1.0]
vec3 xyz = vec3(vec2(1.0, 2.0), 3.0);
vec4 xyzw = vec3(xyz, 1.0);
GLSL Syntax: Matrices
mat3 i = mat3(1.0); // 3x3 identity matrix
mat2 m = mat2(1.0, 2.0, // [1.0 3.0]
3.0, 4.0); // [2.0 4.0]
float f = m[column][row];
float x = m[0].x; // x component of first column
vec2 yz = i[1].yz; // yz components of second column
Treat matrix as array of column vec2’s
Can "swizzle" (select or
rearrange components) too
GLSL Syntax: Vectors and Matrices
vec3 xyz = // ...
vec3 v0 = 2.0 * xyz; // scale
vec3 v1 = v0 + xyz; // component-wise
vec3 v2 = v0 * xyz; // component-wise
float f = dot(v0, v1); // dot product
vec3 v2 = cross(v0, v1); // cross product
vec3 v3 = normalize(v2); // “unitize”
mat3 M = // ...
mat3 N = // ...
mat3 MN = M * N; // matrix * matrix
vec3 xyz2 = MN * xyz; // matrix * vector
Original tutorial03 .vertexshader
#version 330 core
// Input vertex data, different for all executions of shader
layout(location = 0) in vec3 vertexPosition_modelspace;
// Values that stay constant for the whole mesh
uniform mat4 MVP;
void main()
{
// Output position of the vertex (clip space) = MVP * position
gl_Position = MVP * vec4(vertexPosition_modelspace,1);
}
Type qualifiers
Type qualifiers
attribute, varying not used in OGL Tutorials
Type qualifiers
Original tutorial03 .vertexshader
#version 330 core
// Input vertex data, different for all executions of shader
layout(location = 0) in vec3 vertexPosition_modelspace;
// Values that stay constant for the whole mesh
uniform mat4 MVP;
void main()
{
// Output position of the vertex (clip space) = MVP * position
gl_Position = MVP * vec4(vertexPosition_modelspace,1);
}
Layout
in, out qualifiers; "built-in" variables
Modified .vertexshader in HW #1
(additions to tutorial 3 version in bold)
#version 330 core
// Input vertex data, different for all executions of shader
layout(location = 0) in vec3 vertexPosition_modelspace;
layout(location = 1) in vec3 vertexColor;
// Values that stay constant for the whole mesh
uniform mat4 MVP;
out vec3 fragmentColor;
void main()
{
// Output position of the vertex (clip space) = MVP * position
gl_Position = MVP * vec4(vertexPosition_modelspace,1);
fragmentColor = vertexColor;
}
Old .fragmentshader in HW #1
#version 330 core
// Output data
out vec3 color;
void main()
{
// Output color = red
color = vec3(1,0,0);
}
Modified .fragmentshader in HW #1
#version 330 core
// Output data
out vec3 color;
in vec3 fragmentColor;
void main()
{
color = fragmentColor;
}
Basic Textures with OpenGL + GLSL
Texture example: Keyboard handling
More fun with fragment shaders
Basic Textures with OpenGL + GLSL
2-D Texture
3-D Shape
Basic Textures with OpenGL + GLSL
A texture "atlas" -- multiple patterns stored in single "texture" for time & memory efficiency
3-D scene
2-D texture source
Basic Textures with OpenGL + GLSL
Layout
Basic Textures with OpenGL + GLSL
Basic Textures with OpenGL + GLSL
More GLSL language features/API
GLSL Built-in Functions
vec3 l, n; // = . . .
vec3 p, q; // = . . .
float f = length(l); // vector length
float d = distance(p, q); // dist between pts
mat4 m = // ...
mat4 t = transpose(m);
float d = determinant(m);
mat4 d = inverse(m);
GLSL Syntax: Vectors
vec4 c = vec4(0.5, 1.0, 0.8, 1.0);
vec3 rgb = c.rgb; // [0.5, 1.0, 0.8]
vec3 bgr = c.bgr; // [0.8, 1.0, 0.5]
vec3 rrr = c.rrr; // [0.5, 0.5, 0.5]
c.a = 0.5; // [0.5, 1.0, 0.8, 0.5]
c.rb = 0.0; // [0.0, 1.0, 0.0, 0.5]
float g = rgb[1]; // indexing, not swizzling
GLSL Built-in Functions
n
l
r
GLSL Built-in Functions
vec3 p = vec3(1.0, 2.0, 3.0);
vec3 q = vec3(3.0, 2.0, 1.0);
bvec3 b = equal(p, q); // (F, T, F)
bvec3 b2 = lessThan(p, q); // (T, F, F)
bvec3 b3 = greaterThan(p, q); // (F, F, T)
bool b4 = any(b); // T
bool b5 = all(b); // F
GLSL Built-in Functions
bool foo(vec3 p, vec3 q)
{
if (p.x < q.x)
return true;
else if (p.y < q.y)
return true;
else if (p.z < q.z)
return true;
return false;
}
return any(lessThan(p, q));
GLSL Built-in Functions
float s = sin(theta);
float c = cos(theta);
float t = tan(theta);
float phi = asin(s);
// ...
vec3 angles = vec3(/* ... */);
vec3 vs = sin(angles);
Works on vectors component-wise
Angles are measured
in radians
GLSL Built-in Functions
float xToTheY = pow(x, y);
float eToTheX = exp(x);
float twoToTheX = exp2(x);
float l = log(x); // ln
float l2 = log2(x); // log2
float s = sqrt(x);
float is = inversesqrt(x);
GLSL Built-in Functions
float ax = abs(x); // absolute value
float sx = sign(x); // -1.0, 0.0, 1.0
float m0 = min(x, y); // minimum value
float m1 = max(x, y); // maximum value
float c = clamp(x, 0.0, 1.0);
// many others: floor(), ceil(), …
GLSL Built-in Functions