introduction to glsl patrick cozzi university of pennsylvania cis 565 - spring 2011
Post on 21-Dec-2015
217 views
TRANSCRIPT
![Page 1: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/1.jpg)
Introduction to GLSL
Patrick CozziUniversity of PennsylvaniaCIS 565 - Spring 2011
![Page 2: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/2.jpg)
Administrivia
Wednesday1st assignment due start of class2nd assignment handed out
Google groupEmail: [email protected]
Website: http://groups.google.com/group/cis565-s2011
![Page 3: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/3.jpg)
Agenda
Finish last Wednesday’s slides Fixed vs. Programmable Pipeline Example GLSL Shaders
Execution model In the pipelineSyntax and built-in functionsRelated OpenGL API
![Page 4: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/4.jpg)
Light Map
x =
Images from: http://zanir.wz.cz/?p=56&lang=en
Multiple two textures component-wise
Precomputed light Surface color
“lit” surface
![Page 5: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/5.jpg)
Light Map: Fixed Function
GLuint lightMap;GLuint surfaceMap;// ...
glEnable(GL_TEXTURE_2D);
glActiveTexture(GL_TEXTURE0);glBindTexture(GL_TEXTURE_2D, lightMap);glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE); glActiveTextureARB(GL_TEXTURE1);glBindTexture(GL_TEXTURE_2D, surfaceMap); glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);
glDraw*(...);
![Page 6: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/6.jpg)
Light Map: Fixed Function
GLuint lightMap;GLuint surfaceMap;// ...
glEnable(GL_TEXTURE_2D);
glActiveTexture(GL_TEXTURE0);glBindTexture(GL_TEXTURE_2D, lightMap);glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE); glActiveTextureARB(GL_TEXTURE1);glBindTexture(GL_TEXTURE_2D, surfaceMap); glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);
glDraw*(...);
Tell fixed function we are
using texture mapping
Tell fixed function how to combine textures
![Page 7: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/7.jpg)
Light Map: Fixed Function
In general, the fixed function is Configurable is limited leads to a bloated API Is a pain to use Isn’t as cool as writing shaders
True – but not a valid answer on the homework/exam
![Page 8: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/8.jpg)
Light Map: Programmable
Write a fragment shader:
#version 330
uniform sampler2D lightMap;
uniform sampler2D surfaceMap;
in vec2 fs_TxCoord;
out vec3 out_Color;
void main(void)
{
float intensity = texture2D(lightMap, fs_TxCoord).r;
vec3 color = texture2D(surfaceMap, fs_TxCoord).rgb;
out_Color = intensity * color;
}
![Page 9: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/9.jpg)
Light Map: Programmable
Write a fragment shader:
#version 330
uniform sampler2D lightMap;
uniform sampler2D surfaceMap;
in vec2 fs_TxCoord;
out vec3 out_Color;
void main(void)
{
float intensity = texture2D(lightMap, fs_TxCoord).r;
vec3 color = texture2D(surfaceMap, fs_TxCoord).rgb;
out_Color = intensity * color;
}
GLSL version 3.3
Textures (input)
Per-fragment input
shader outputone channel intensity
three channel color
modulate
![Page 10: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/10.jpg)
Light Map: Programmable
Recall the fixed function light map:GLuint lightMap;GLuint surfaceMap;// ...
glEnable(GL_TEXTURE_2D);
glActiveTexture(GL_TEXTURE0);glBindTexture(GL_TEXTURE_2D, lightMap);glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE); glActiveTextureARB(GL_TEXTURE1);glBindTexture(GL_TEXTURE_2D, surfaceMap); glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);
glDraw*(...);
![Page 11: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/11.jpg)
Light Map: Programmable
GLuint lightMap;GLuint surfaceMap;GLuint program;// ...
glActiveTexture(GL_TEXTURE0);glBindTexture(GL_TEXTURE_2D, lightMap); glActiveTextureARB(GL_TEXTURE1);glBindTexture(GL_TEXTURE_2D, surfaceMap);
glUseProgram(program); // Later: pass uniform variablesglDraw*(...);
![Page 12: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/12.jpg)
Programmable Shading
In general:Write a shader: a small program that runs on
the GPUTell OpenGL to execute your shaderWrite less CPU code / API callsForget that the equivalent fixed function API
ever existed
![Page 13: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/13.jpg)
Programmable Shading
Image from: http://upgifting.com/tmnt-pizza-poster
Fixed function shading
Programmable shading
In general:
Say no to drugstoo, please.
![Page 14: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/14.jpg)
Programmable Shading
Software engineering question: If not all GPUs supports shaders, or has
varying shader support, what GPU do you target?
![Page 15: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/15.jpg)
Shader Execution Model
For any shader type:
ShaderStreaming input Output
Uniform (constant) input
• Streaming input and output examples: vertices, primitives, fragments, …• Uniform input examples: matrices, textures, time, …
![Page 16: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/16.jpg)
Shader Execution Model
Shaders run in parallel on the GPU
Shader
Streaming input Output
Uniform (constant) input
Shader
Shader
Shader
![Page 17: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/17.jpg)
Shader Execution Model
Each shader Shares the same read-only
uniform inputs Has different read-only input
from a stream Writes it own output Has no side effects Executes independently
without communicating with other shaders…
Shader
Streaming input Output
Uniform (constant) input
Shader
Shader
Shader
…in GLSL. In CUDA/OpenCL, kernels (shaders) can synchronize
![Page 18: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/18.jpg)
Shader Execution Model
Shaders execute using SIMTSingle Instruction Multiple ThreadEach thread runs the same shader instruction
on different data
![Page 19: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/19.jpg)
Shader Execution Model
Parallelism is implicitCalling glDraw* invokes a parallel processor
– the GPUThe driver/hardware takes care of scheduling
and synchronizingUsers write parallel applications without even
knowing it!
![Page 20: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/20.jpg)
Shaders in the Pipeline
Vertex Shader
Vertex Shader FramebufferFramebuffer
Fragment
Shader
RasterizationPrimitiveAssembly
PrimitiveAssembly
Recall the programmable pipeline (simplified):
Other programmable stages:Geometry ShaderTessellation: Control and Evaluation Shaders
![Page 21: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/21.jpg)
Vertex Shaders in the Pipeline
Input One vertex with its position in model coordinates Uniforms
Output One vertex with it’s position in clip coordinates
Vertex Shader
Vertex Shader FramebufferFramebuffer
Fragment
Shader
RasterizationPrimitiveAssembly
PrimitiveAssembly
![Page 22: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/22.jpg)
Vertex Shader Input
Image courtesy of A K Peters, Ltd. www.virtualglobebook.com
![Page 23: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/23.jpg)
Vertex Shader Input
This triangle is composed of three vertices.
Each vertex has the same number and type of attributes.
Each vertex usually has different attribute values, e.g., position.
Although the terms are sometimes used interchangeable, a vertex is not a position, and a position is not a vertex
![Page 24: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/24.jpg)
Vertex Shaders in the Pipeline
A simple vertex shader:
#version 330
uniform mat4 u_ModelView;
in vec3 Position;
void main(void)
{
gl_Position = u_ModelView * vec4(Position, 1.0);
}
![Page 25: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/25.jpg)
Vertex Shaders in the Pipeline
A simple vertex shader:
#version 330
uniform mat4 u_ModelView;
in vec3 Position;
void main(void)
{
gl_Position = u_ModelView * vec4(Position, 1.0);
}
The same model-view transform is used for each vertex in a particular glDraw* call.
Each vertex shader executes in a different thread with a different Position.
gl_Position is the GLSL built-in vertex shader position output. You must write to it.
4x4 matrix times a 4 element vector; transform from model to clip coordinates.
![Page 26: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/26.jpg)
Vertex Shaders in the Pipeline
A vertex shader with two input attributes:
#version 330
uniform mat4 u_ModelView;
in vec3 Position;
in vec3 Color;
out vec3 fs_Color;
void main(void)
{
fs_Color = Color;
gl_Position = u_ModelView * vec4(Position, 1.0);
}
![Page 27: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/27.jpg)
Vertex Shaders in the Pipeline
A vertex shader with two input attributes:
#version 330
uniform mat4 u_ModelView;
in vec3 Position;
in vec3 Color;
out vec3 fs_Color;
void main(void)
{
fs_Color = Color;
gl_Position = u_ModelView * vec4(Position, 1.0);
}
Each vertex shader executes in a different thread with a different Position and Color.
This vertex shader outputs a vec3 color in addition to gl_Position.
![Page 28: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/28.jpg)
Fragment Shaders in the Pipeline
Input Fragment position in screen space: gl_FragCoord.xy Fragment depth: gl_FragCoord.z Interpolated vertex shader outputs Uniforms
Output Fragment color Optional: fragment depth: gl_FragDepth. Why? Optional: multiple “colors” to multiple textures discard. Why? Can’t change gl_FragCoord.xy. Why?
Vertex Shader
Vertex Shader FramebufferFramebuffer
Fragment
Shader
RasterizationPrimitiveAssembly
PrimitiveAssembly
![Page 29: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/29.jpg)
Fragment Shader Input
Vertex Shader
Vertex Shader FramebufferFramebuffer
Fragment
Shader
RasterizationPrimitiveAssembly
PrimitiveAssembly
Rasterization converts primitives into fragments, which are input to a fragment shader
Vertex shader outputs are interpolated across the primitive.
![Page 30: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/30.jpg)
Fragment Shaders in the Pipeline
A simple fragment shader:
#version 330
out vec3 out_Color;
void main(void)
{
out_Color = vec3(1.0, 0.0, 0.0);
}
![Page 31: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/31.jpg)
Fragment Shaders in the Pipeline
A simple fragment shader:
#version 330
out vec3 out_Color;
void main(void)
{
out_Color = vec3(1.0, 0.0, 0.0);
}
Each fragment shader executes in a different thread and outputs the color for a different fragment. Why vec3? Why not vec4?
Shade solid red. Result:
![Page 32: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/32.jpg)
Fragment Shaders in the Pipeline
A slightly less simple fragment shader:
#version 330
in vec3 fs_Color;
out vec3 out_Color;
void main(void)
{
out_Color = fs_Color;
}
![Page 33: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/33.jpg)
Fragment Shaders in the Pipeline
A slightly less simple fragment shader:
#version 330
in vec3 fs_Color;
out vec3 out_Color;
void main(void)
{
out_Color = fs_Color;
}
Fragment shader input from vertex shader output after rasterization.
Pass color through.
Result:
How?
![Page 34: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/34.jpg)
GLSL Syntax
GLSL is like C withoutpointersrecursiondynamic memory allocation
GLSL is like C withBuilt-in vector, matrix, and sampler typesConstructorsA great math library Input and output qualifiers
Language features allow us to write concise, efficient shaders.
![Page 35: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/35.jpg)
GLSL Syntax
My advice: If you know C, just do it.
Image from: http://nouvellemode.wordpress.com/2009/11/25/just-do-it/
![Page 36: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/36.jpg)
GLSL Syntax
GLSL has a preprocessor#version 330
#ifdef FAST_EXACT_METHOD FastExact();#else SlowApproximate();#endif
// ... many others
All shaders have main()void main(void)
{
}
![Page 37: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/37.jpg)
GLSL Syntax: Vectors
Scalar types: float, int, uint, and bool Vectors are also built-in types:
vec2, vec3, and vec4Also ivec*, uvec*, and bvec*
Access components three ways:.x, .y, .z, .w.r, .g, .b, .a.s, .t, .p, .q
Position or direction
Color
Texture coordinate
![Page 38: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/38.jpg)
GLSL Syntax: Vectors
Vectors have constructorsvec3 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);
![Page 39: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/39.jpg)
GLSL Syntax: Vectors
Vectors have constructorsvec3 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);
![Page 40: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/40.jpg)
GLSL Syntax: Swizzling
Swizzle: select or rearrange componentsvec4 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]; // 0.5, indexing, not swizzling
Try it – you’ll love it.
![Page 41: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/41.jpg)
GLSL Syntax: Swizzling
Swizzle: select or rearrange componentsvec4 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]; // 0.5, indexing, not swizzling
Try it – you’ll love it.
![Page 42: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/42.jpg)
GLSL Syntax: Matrices
Matrices are built-in types:Square: mat2, mat3, and mat4Rectangular: matmxn. m columns, n rows
Stored column major.
![Page 43: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/43.jpg)
GLSL Syntax: Matrices
Matrix Constructorsmat3 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]
Accessing Elementsfloat f = m[column][row];
float x = m[0].x; // x component of first column
vec2 yz = m[1].yz; // yz components of second column
![Page 44: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/44.jpg)
GLSL Syntax: Matrices
Matrix Constructorsmat3 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]
Accessing Elementsfloat f = m[column][row];
float x = m[0].x; // x component of first column
vec2 yz = m[1].yz; // yz components of second column
Treat matrix as array of column vectors
Can swizzle too!
![Page 45: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/45.jpg)
GLSL Syntax: Vectors and Matrices
Matrix and vector operations are easy and fast:vec3 xyz = // ...
vec3 v0 = 2.0 * xyz; // scalevec3 v1 = v0 + xyz; // component-wisevec3 v2 = v0 * xyz; // component-wise
mat3 m = // ...mat3 v = // ...
mat3 mv = v * m; // matrix * matrixmat3 xyz2 = mv * xyz; // matrix * vectormat3 xyz3 = xyz * mv; // vector * matrix
![Page 46: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/46.jpg)
GLSL Syntax: Vectors and Matrices
Matrix and vector operations are easy and fast:vec3 xyz = // ...
vec3 v0 = 2.0 * xyz; // scalevec3 v1 = v0 + xyz; // component-wisevec3 v2 = v0 * xyz; // component-wise
mat3 m = // ...mat3 v = // ...
mat3 mv = v * m; // matrix * matrixmat3 xyz2 = mv * xyz; // matrix * vectormat3 xyz3 = xyz * mv; // vector * matrix
![Page 47: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/47.jpg)
GLSL Syntax: in / out / uniform
Recall:
#version 330
uniform mat4 u_ModelView;
in vec3 Position;
in vec3 Color;
out vec3 fs_Color;
void main(void)
{
fs_Color = Color;
gl_Position = u_ModelView * vec4(Position, 1.0);
}
uniform: shader input constant across glDraw*
out: shader output
in: shader input varies per vertex attribute
![Page 48: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/48.jpg)
GLSL Syntax: Samplers
Opaque types for accessing texturesuniform sampler2D colorMap; // 2D texture
vec3 color = texture(colorMap, vec2(0.5, 0.5)).rgb;
vec3 colorAbove = textureOffset(colorMap, vec2(0.5, 0.5), ivec2(0, 1)).rgb;
vec2 size = textureSize(colorMap, 0);
// Lots of sampler types: sampler1D,// sampler3D, sampler2DRect, samplerCube,// isampler*, usampler*, ...
// Lots of sampler functions: texelFetch, textureLod
![Page 49: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/49.jpg)
GLSL Syntax: Samplers
Opaque types for accessing texturesuniform sampler2D colorMap; // 2D texture
vec3 color = texture(colorMap, vec2(0.5, 0.5)).rgb;
vec3 colorAbove = textureOffset(colorMap, vec2(0.5, 0.5), ivec2(0, 1)).rgb;
vec2 size = textureSize(colorMap, 0);
// Lots of sampler types: sampler1D,// sampler3D, sampler2DRect, samplerCube,// isampler*, usampler*, ...
// Lots of sampler functions: texelFetch, textureLod
Samplers must be uniforms
![Page 50: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/50.jpg)
GLSL Syntax: Samplers
Opaque types for accessing texturesuniform sampler2D colorMap; // 2D texture
vec3 color = texture(colorMap, vec2(0.5, 0.5)).rgb;
vec3 colorAbove = textureOffset(colorMap, vec2(0.5, 0.5), ivec2(0, 1)).rgb;
vec2 size = textureSize(colorMap, 0);
// Lots of sampler types: sampler1D,// sampler3D, sampler2DRect, samplerCube,// isampler*, usampler*, ...
// Lots of sampler functions: texelFetch, textureLod
2D texture uses 2D texture coordinates for lookup
texture() returns a vec4; extract the components you need
![Page 51: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/51.jpg)
GLSL Syntax: Samplers
Opaque types for accessing texturesuniform sampler2D colorMap; // 2D texture
vec3 color = texture(colorMap, vec2(0.5, 0.5)).rgb;
vec3 colorAbove = textureOffset(colorMap, vec2(0.5, 0.5), ivec2(0, 1)).rgb;
vec2 size = textureSize(colorMap, 0);
// Lots of sampler types: sampler1D,// sampler3D, sampler2DRect, samplerCube,// isampler*, usampler*, ...
// Lots of sampler functions: texelFetch, textureLod
2D texture coordinate
2D integer offset
Random access texture reads is called gather. More on this later.
![Page 52: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/52.jpg)
GLSL Syntax: Samplers
Opaque types for accessing texturesuniform sampler2D colorMap; // 2D texture
vec3 color = texture(colorMap, vec2(0.5, 0.5)).rgb;
vec3 colorAbove = textureOffset(colorMap, vec2(0.5, 0.5), ivec2(0, 1)).rgb;
vec2 size = textureSize(colorMap, 0);
// Lots of sampler types: sampler1D,// sampler3D, sampler2DRect, samplerCube,// isampler*, usampler*, ...
// Lots of sampler functions: texelFetch, textureLod
![Page 53: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/53.jpg)
GLSL Syntax: Samplers
TexturesUsually, but not always:
Textures are square, e.g., 256x256 Dimensions are a power of two
Coordinates are usually normalized, i.e., in the range [0, 1]
Texel: a pixel in a texturetexture() does filtering using fixed function
hardware
![Page 54: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/54.jpg)
GLSL Syntax: Samplers
Texturesare like 2D arrayswere the backbone of GPGPU
next week
![Page 55: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/55.jpg)
GLSL Syntax: Samplers
Images from: http://www.naturalearthdata.com/
s
t
(0, 0)
(1, 1)
![Page 56: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/56.jpg)
GLSL Built-in Functions
Selected Trigonometry Functions float s = sin(theta);float c = cos(theta);float t = tan(theta);
float as = asin(theta);// ...
vec3 angles = vec3(/* ... */);vec3 vs = sin(angles);
![Page 57: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/57.jpg)
Works on vectors component-wise.
GLSL Built-in Functions
Selected Trigonometry Functionsfloat s = sin(theta);float c = cos(theta);float t = tan(theta);
float as = asin(theta);// ...
vec3 angles = vec3(/* ... */);vec3 vs = sin(angles);
![Page 58: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/58.jpg)
GLSL Built-in Functions
Exponential Functions float xToTheY = pow(x, y);float eToTheX = exp(x);float twoToTheX = exp2(x);
float l = log(x); // lnfloat l2 = log2(x); // log2
float s = sqrt(x);float is = inversesqrt(x);
![Page 59: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/59.jpg)
One GPU instruction!
GLSL Built-in Functions
Exponential Functions float xToTheY = pow(x, y);float eToTheX = exp(x);float twoToTheX = exp2(x);
float l = log(x); // lnfloat l2 = log2(x); // log2
float s = sqrt(x);float is = inversesqrt(x);
![Page 60: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/60.jpg)
GLSL Built-in Functions
Selected Common Functions float ax = abs(x); // absolute valuefloat sx = sign(x); // -1.0, 0.0, 1.0
float m0 = min(x, y); // minimum valuefloat m1 = max(x, y); // maximum valuefloat c = clamp(x, 0.0, 1.0);
// many others: floor(), ceil(),// step(), smoothstep(), ...
![Page 61: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/61.jpg)
GLSL Built-in Functions
Selected Common Functions float ax = abs(x); // absolute valuefloat sx = sign(x); // -1.0, 0.0, 1.0
float m0 = min(x, y); // minimum valuefloat m1 = max(x, y); // maximum valuefloat c = clamp(x, 0.0, 1.0);
// many others: floor(), ceil(),// step(), smoothstep(), ...
![Page 62: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/62.jpg)
GLSL Built-in Functions
Rewrite with one function callfloat minimum = // ... float maximum = // ... float x = // ...
float f = min(max(x, minimum), maximum);
![Page 63: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/63.jpg)
GLSL Built-in Functions
Rewrite this without the if statementfloat x = // ... float f;
if (x > 0.0){ f = 2.0;}else{ f = -2.0;}
![Page 64: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/64.jpg)
GLSL Built-in Functions
Rewrite this without the if statementfloat root1 = // ... float root2 = // ...
if (root1 < root2)
{
return vec3(0.0, 0.0, root1);
}
else
{
return vec3(0.0, 0.0, root2);
}
![Page 65: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/65.jpg)
GLSL Built-in Functions
Rewrite this without the if statementbool b = // ... vec3 color;
if (b)
{
color = vec3(1.0, 0.0, 0.0);
}
else
{
color = vec3(0.0, 1.0, 0.0);
}
Hint: no built-in functions required for this one.
![Page 66: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/66.jpg)
GLSL Built-in Functions
Selected Geometric Functions vec3 l = // ...vec3 n = // ...vec3 p = // ...vec3 q = // ...
float f = length(l); // vector lengthfloat d = distance(p, q); // distance between points
float d2 = dot(l, n); // dot productvec3 v2 = cross(l, n); // cross productvec3 v3 = normalize(l); // normalize
vec3 v3 = reflect(l, n); // reflect
// also: faceforward() and refract()
![Page 67: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/67.jpg)
GLSL Built-in Functions
Selected Geometric Functions vec3 l = // ...vec3 n = // ...vec3 p = // ...vec3 q = // ...
float f = length(l); // vector lengthfloat d = distance(p, q); // distance between points
float d2 = dot(l, n); // dot productvec3 v2 = cross(l, n); // cross productvec3 v3 = normalize(l); // normalize
vec3 v3 = reflect(l, n); // reflect
// also: faceforward() and refract()
![Page 68: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/68.jpg)
GLSL Built-in Functions
reflect(-l, n)Given l and n, find r. Angle in equals angle
out
nl r
![Page 69: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/69.jpg)
GLSL Built-in Functions
Rewrite without length.vec3 p = // ...vec3 q = // ...
vec3 v = length(p – q);
![Page 70: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/70.jpg)
GLSL Built-in Functions
What is wrong with this code?vec3 n = // ...
normalize(n);
![Page 71: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/71.jpg)
GLSL Built-in Functions
Selected Matrix Functions mat4 m = // ...
mat4 t = transpose(m);float d = determinant(m);mat4 d = inverse(m);
When do you not want to use these? Think performance.
![Page 72: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/72.jpg)
GLSL Built-in Functions
Selected Vector Relational Functions vec3 p = vec3(1.0, 2.0, 3.0);vec3 q = vec3(3.0, 2.0, 1.0);
bvec3 b = equal(p, q); // (false, true, false)bvec3 b2 = lessThan(p, q); // (true, false, false)bvec3 b3 = greaterThan(p, q); // (false, false, true)
bvec3 b4 = any(b); // truebvec3 b5 = all(b); // false
![Page 73: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/73.jpg)
GLSL Built-in Functions
Selected Vector Relational Functions vec3 p = vec3(1.0, 2.0, 3.0);vec3 q = vec3(3.0, 2.0, 1.0);
bvec3 b = equal(p, q); // (false, true, false)bvec3 b2 = lessThan(p, q); // (true, false, false)bvec3 b3 = greaterThan(p, q); // (false, false, true)
bvec3 b4 = any(b); // truebvec3 b5 = all(b); // false
![Page 74: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/74.jpg)
GLSL Built-in Functions
Rewrite this in one line of codebool 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;}
![Page 75: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/75.jpg)
GLSL Syntax and Built-in Functions
We didn’t cover:ArraysStructsFunction callsconstif / while / fordFdX, dFdy, fwidth…
More on these later in the semester. With SIMT, branches need to be used carefully.
Screen space partial derivatives impact fragment shading scheduling. More later.
![Page 76: Introduction to GLSL Patrick Cozzi University of Pennsylvania CIS 565 - Spring 2011](https://reader036.vdocument.in/reader036/viewer/2022062320/56649d6c5503460f94a4c29f/html5/thumbnails/76.jpg)
GLSL Resources
OpenGL/GLSL Quick Reference Card http://www.khronos.org/files/opengl-quick-reference-card.pdf
GLSL Spec http://www.opengl.org/registry/doc/GLSLangSpec.3.30.6.clean.pdf
NShader: Visual Studio GLSL syntax highlighting http://nshader.codeplex.com/