OpenGL Shading Language OpenGL History and Features GLSL Vertex Shader Fragment Shader Compute Shader Geometry Shader

1. OpenGL Shading Languages
(GLSL)
SK planet/Mobile Platform Dept.
Jungsoo Nam
namjungsoo@gmail.com

2. Graphics Programming
• Generates
– 2D Programming
• GDI, Quartz, Canvas
• DirectDraw
– 3D Programming
• Direct3D, OpenGL
• Post Processing
– Image Processing, Computer Vision
• OpenCV
• OpenCL, CUDA, RenderScript

3. 3D Graphics Programming
• Inputs
– Vertex Processing
• Vertices(Positions), Lights, Colors, Texture Coordinates
– Fragment Processing
• Texture Coordinates, Texture Images
• Outputs
– Vertex Processing
• Vertices, Texture Coordinates and Colors
• Polygons
– Fragment Processing
• Pixels, Depth

4. Shading
• Shading
– Shading refers to depicting depth perception in 3D
models or illustrations by varying levels of darkness.
– In computer graphics, shading refers to the process of
altering the color of an object/surface/polygon in the
3D scene, based on its angle to lights and its distance
from lights to create a photorealistic effect. Shading is
performed during the rendering process by a program
called a shader.

5. 3D Rendering Pipeline

6. OpenGL ES 2.0 Rendering Pipeline –
Fixed Function Pipeline removed

7. Rasterization & Raster
Operations(ROP)

8. Transform and Lighting
surfaceColor = emissive + ambient + diffuse + specular
emissive = Ke
ambient = Ka x globalAmbient
diffuse = Kd x lightColor x max(N · L, 0)
specular = Ks x lightColor x facing x (max(N · H, 0)) shininess

9. Vertex Processing Pipeline

10. Fragment Processing Pipeline

11. GPU Programming
• Writing programmable vertex/fragment
programs(shaders)

12. GPU Programming History(1/6)

13. GPU Programming History(2/6)

14. GPU Programming History(3/6)

15. GPU Programming History(4/6)

16. GPU Programming History(5/6)

17. GPU Programming History(6/6)

18. Cg vs GLSL
• Advantage of Cg
– Supports both of Direct3D/OpenGL
– Supports Old VGAs(before OpenGL 2.0)
– Supports nVIDIA OpenGL Extensions
– Direct3D compatibility(HLSL and Cg, HLSL Effect and CgFX
– Possible to assembly optimization
• Advantage of GLSL
– OpenGL Standard(for OpenGL only users and new comers)
• No extra runtimes(Cg.dll, CgGL.dll, …)
• Supports OpenGL ES(Android, iOS, WebGL)

19. OpenGL Versions
OpenGL
Version
Comments
1.0~1.5 Direct3D 8.0~9.0b
Shader Model 1.0~2.0a
Cg
2.0 Direct3D 9.0c
Shader Model 3.0
OpenGL Shading Language
3.0 Direct3D 10
Shader Model 4.0
Deprecated features include:
• All fixed-function vertex and fragment
processing.
• Direct-mode rendering, using glBegin and
glEnd.
• Display lists.
• Indexed-color rendering targets.
• OpenGL Shading Language versions 1.10 and
1.20.
3.3 Geforce 8
4.0 Direct3D 11
Shader Model 5.0
4.1 OpenGL ES 2.0
4.2 OpenGL ES 3.0
DirectX
Version
Description
8.0 Shader Model 1.0 & 1.1, Geforce 3
8.0a Shader Model 1.3
8.1 Shader Model 1.4, ATI Radeon 8500
9.0 Shader Model 2.0, Geforce FX(5)
HLSL
9.0a Shader Model 2.0a
9.0b Shader Model 2.0b
9.0c Shader Model 3.0, Geforce 6
10.0* Shader Model 4.0, Geforce 8, Geometry Shader
10.1* Shader Model 4.1, Geforce 200
11.0* Shader Model 5.0, Geforce 400, Compute Shader
11.1*+ Shader Model 5.0, Geforce 600
*Not available for Windows XP OS
†Only available for Windows 8 OS

20. OpenGL Extensions
• OpenGL Extensions
– OpenGL Extensions are usually made available to access new features of 3D graphics hardware. Hardware vendors
define new functions and/or tokens that enhance the existing features of OpenGL.
• Extensions created by a single vendor are called "vendor-specific" and extensions created by several vendors are called
"multivendor" extensions.
• If a vendor-specific or multivendor extension proves to be a good enhancement, the OpenGL Architecture Review Board (ARB)
may promote it to an "ARB approved" extension.
• If the extension is very useful, the ARB may decide to integrate the extension as a "core feature" to OpenGL. This happened for
example with the OpenGL Shading Language which is now a core feature of OpenGL 2.0 and higher.
– Detecting extensions
• const GLubyte* sExtensions = glGetString(GL_EXTENSIONS);
– Naming conventions
• GL(PLATFORM)_VENDOR_extension_name
• VENDOR
– ARB Architecture Review Board approved extension
– EXT Multivendor Extension
– APPLE Extension from Apple Computer, Inc.
– ATI Extension from ATI Technologies, Inc. (AMD)
– HP Extension from Hewlett Packard.
– NV Extension from NVIDIA Corporation
– SGIS Extension from Silicon Graphics, Inc.
• PLATFORM: WGL, GLX, EGL
– GLSL required extensions
• ARB vertex shader
• ARB fragment shader
• ARB shader objects
• ARB geometry shader 4
• ARB tessellation shader

21. GLSL Versions
• Until version 3.30, the GLSL version number and the corresponding OpenGL version number
were different. Here's a table:
• Direct3D Shader Model 4.0 is equivalent to GLSL version 3.30. Earlier GLSL versions for
OpenGL 3.x provide subsets of this functionality, based on the available functionality in the
OpenGL version, though 1.50 is almost feature-identical to SM4
• Direct3D Shader Model 5.0 is equivalent to GLSL version 4.30.
• http://www.opengl.org/wiki/Detecting_the_Shader_Model
OpenGL Version GLSL Version
2.0 1.10
2.1 1.20
3.0 1.30
3.1 1.40
3.2 1.50

22. Shader Model(SM) Numbers
• ARB Assembly Language
• These are done through testing the presence of extensions. You should test
them in this order:
• GL_NV_gpu_program4: SM 4.0 or better.
• GL_NV_vertex_program3: SM 3.0 or better.
• GL_ARB_fragment_program: SM 2.0 or better.
• ATI does not support higher than SM 2.0 functionality in assembly shaders.
• http://msdn.microsoft.com/en-
us/library/windows/desktop/bb509626(v=vs.85).aspx
(Although gs_4_0, gs_4_1, ps_4_0, ps_4_1, vs_4_0, and vs_4_1 were introduced in shader model 4.0, shader
model 5 adds support to these shader profiles for structured buffers and byte address buffers.)
Shader Model Shader Profiles
Shader Model 1 vs_1_1
Shader Model 2 ps_2_0, ps_2_x, vs_2_0, vs_2_x, ps_4_0_level_9_0, ps_4_0_level_9_1, ps_4_0_level_9_3,
vs_4_0_level_9_0, vs_4_0_level_9_1, vs_4_0_level_9_3, lib_4_0_level_9_1, lib_4_0_level_9_3
Shader Model 3 ps_3_0, vs_3_0
Shader Model 4 cs_4_0, gs_4_0, ps_4_0, vs_4_0, cs_4_1, gs_4_1, ps_4_1, vs_4_1, lib_4_0, lib_4_1
Shader Model 5 cs_5_0, ds_5_0, gs_5_0, hs_5_0, ps_5_0, vs_5_0, lib_5_0

23. Shader Model 3 Example

24. OpenGL ES Versions
Version Description
OpenGL ES 1.0
Android
Standard
• Quad and polygon rendering primitives,
• Texgen, line and polygon stipple,
• Polygon mode and antialiased polygon rendering are not supported, although rendering using multisample is still possible (rather
than alpha border fragments),
• ARB_Image pixel class operation are not supported, nor are bitmaps or 3D textures,
• Several of the more technical drawing modes are eliminated, including frontbuffer and accumulation buffer. Bitmap operations,
specifically copying pixels (individually) is not allowed, nor are evaluators, nor (user) selection operations,
• Display lists and feedback are removed, as are push and pop operations for state attributes,
• Some material parameters were removed, including back-face parameters and user defined clip planes.
OpenGL ES 1.1
Android 1.6
• Better multitexture support (including combiners and dot product texture operations)
• Automatic mipmap generation
• Vertex buffer objects
• State queries
• User clip planes
• Greater control over point rendering
OpenGL ES 2.0
Android
2.0(NDK), 2.2
• Eliminates most of the fixed-function rendering pipeline in favor of a programmable one in a move similar to transition from OpenGL
3.0 to 3.1.
• Almost all rendering features of the transform and lighting stage, such as the specification of materials and light parameters formerly
specified by the fixed-function API, are replaced by shaders written by the graphics programmer.
• As a result, OpenGL ES 2.0 is not backward compatible with OpenGL ES 1.1.
OpenGL ES 3.0
Android 4.3
Samsung
S4(Snapdragon
)/Nexus5,
7(2013)/LG G2
OpenGL ES 3.0 is backwards compatible with OpenGL ES 2.0, enabling applications to incrementally add new visual features to
applications. OpenGL 4.3 provides full compatibility with OpenGL ES 3.0.
• Multiple enhancements to the rendering pipeline to enable acceleration of advanced visual effects including: occlusion queries,
transform feedback, instanced rendering and support for four or more rendering targets
• High quality ETC2 / EAC texture compression as a standard feature, eliminating the need for a different set of textures for each
platform
• A new version of the GLSL ES shading language[8] with full support for integer and 32-bit floating point operations
• Greatly enhanced texturing functionality including guaranteed support for floating point textures, 3D textures, depth textures, vertex
textures, NPOT textures, R/RG textures, immutable textures, 2D array textures, swizzles, LOD and mip level clamps, seamless cube
maps and sampler objects
• An extensive set of required, explicitly sized texture and render-buffer formats, reducing implementation variability and making it
much easier to write portable applications

25. WebGL
• WebGL
– WebGL is based on OpenGL ES 2.0 and provides
an API for 3D graphics.
– Like OpenGL ES 2.0, WebGL does not have the
fixed-function APIs introduced in OpenGL 1.0 and
deprecated in OpenGL 3.0.
• Strictly speaking, WebGL is a dialect of OpenGL ES 2.0
– http://learningwebgl.com/lessons/

26. GLSL – Simple Example
ftransform() is used for fixed function pipeline.

27. GLSL - Build-in Variables(1/2)

28. GLSL - Build-in Variables(1/2)

29. GLSL keywords – attribute, uniform,
varying
• (Vertex) Attribute
– Vertex attributes are used to communicate from outside to the vertex shader.
• Unlike uniform variables, values are provided per vertex (and not globally for all vertices).
• There are built-in vertex attributes like the normal or the position, or you can specify
your own vertex attribute like a tangent or another custom value.
• Attributes can't be defined in the fragment shader.
• Uniform
– Uniform variables are used to communicate with your vertex or fragment
shader from "outside". In your shader you use the uniform qualifier to declare
the variable
• Uniform variables are read-only and have the same value among all processed vertices.
You can only change them within your C++ program.
• Varying
– Varying variables provide an interface between Vertex and Fragment Shader.
• Vertex Shaders compute values per vertex and fragment shaders compute values per
fragment.
• If you define a varying variable in a vertex shader, its value will be interpolated
(perspective-correct) over the primitive being rendered and you can access the
interpolated value in the fragment shader.

30. GLSL APIs
• GLSL flow APIs
– Loading Shader
• glCreateShaderObject
• glShaderSource
– Compiling Shader
• glCompileShader
– Linking
• glCreateProgramObject
• glAttachObject
• glLinkProgram
– Using Shaders
• glUseProgramObject
• GLSL communication APIs
– Attribute
• glGetAttribLocation
• glEnableVertexAttribArray
• glVertexAttribPointer
– Uniform
• glGetUniformLocation
• glUniform

31. Vertex Shader Example – Directional
Lighting
void main()
{
vec3 normal, lightDir, viewVector, halfVector;
vec4 diffuse, ambient, globalAmbient, specular = vec4(0.0);
float NdotL,NdotHV;
/* first transform the normal into eye space and normalize the result */
normal = normalize(gl_NormalMatrix * gl_Normal);
/* now normalize the light's direction. Note that according to the
OpenGL specification, the light is stored in eye space. Also since
we're talking about a directional light, the position field is actually
direction */
lightDir = normalize(vec3(gl_LightSource[0].position));
/* compute the cos of the angle between the normal and lights direction.
The light is directional so the direction is constant for every vertex.
Since these two are normalized the cosine is the dot product. We also
need to clamp the result to the [0,1] range. */
NdotL = max(dot(normal, lightDir), 0.0);
/* Compute the diffuse, ambient and globalAmbient terms */
diffuse = gl_FrontMaterial.diffuse * gl_LightSource[0].diffuse;
ambient = gl_FrontMaterial.ambient * gl_LightSource[0].ambient;
globalAmbient = gl_LightModel.ambient * gl_FrontMaterial.ambient;
/* compute the specular term if NdotL is larger than zero */
if (NdotL > 0.0) {
NdotHV = max(dot(normal, normalize(gl_LightSource[0].halfVector.xyz)),0.0);
specular = gl_FrontMaterial.specular * gl_LightSource[0].specular * pow(NdotHV,gl_FrontMaterial.shininess);
}
gl_FrontColor = globalAmbient + NdotL * diffuse + ambient + specular;
gl_Position = ftransform();
}

32. Fragment Shader Example – Per Pixel
Directional Lighting
http://www.lighthouse3d.com/tutorials/glsl-tutorial/directional-light-per-pixel/

33. Fragment Shader Example – YUV to
RGB Conversion
http://helloworld.naver.com/helloworld/1207

34. Fragment Shader Example – Image
Filter(Box Blur)
attribute vec2 vPosition;
attribute vec2 vTexCoord;
uniform float texelWidthOffset;
uniform float texelHeightOffset;
uniform highp float blurSize;
varying vec2 centerTextureCoordinate;
varying vec2 oneStepLeftTextureCoordinate;
varying vec2 twoStepsLeftTextureCoordinate;
varying vec2 oneStepRightTextureCoordinate;
varying vec2 twoStepsRightTextureCoordinate;
void main()
{
gl_Position = vPosition;
vec2 firstOffset = vec2(1.5 * texelWidthOffset, 1.5 * texelHeightOffset) * blurSize;
vec2 secondOffset = vec2(3.5 * texelWidthOffset, 3.5 * texelHeightOffset) * blurSize;
centerTextureCoordinate = vTexCoord;
oneStepLeftTextureCoordinate = vTexCoord - firstOffset;
twoStepsLeftTextureCoordinate = vTexCoord - secondOffset;
oneStepRightTextureCoordinate = vTexCoord + firstOffset;
twoStepsRightTextureCoordinate = vTexCoord + secondOffset;
}
precision mediump float;
uniform sampler2D sTexture;
varying vec2 centerTextureCoordinate;
varying vec2 oneStepLeftTextureCoordinate;
varying vec2 twoStepsLeftTextureCoordinate;
varying vec2 oneStepRightTextureCoordinate;
varying vec2 twoStepsRightTextureCoordinate;
void main()
{
lowp vec4 fragmentColor = texture2D(sTexture, centerTextureCoordinate) * 0.2;
fragmentColor += texture2D(sTexture, oneStepLeftTextureCoordinate) * 0.2;
fragmentColor += texture2D(sTexture, oneStepRightTextureCoordinate) * 0.2;
fragmentColor += texture2D(sTexture, twoStepsLeftTextureCoordinate) * 0.2;
fragmentColor += texture2D(sTexture, twoStepsRightTextureCoordinate) * 0.2;
gl_FragColor = fragmentColor;
}

35. OpenGL 4.3 generation

36. OpenGL 4.3

37. Direct3D 11

38. Fragment Shader vs Compute Shader

39. Geometry Shader
//GEOMETRY SHADER
#version 120
#extension GL_ARB_geometry_shader4 : enable
///////////////////////
void main()
{
//increment variable
int i;
vec4 vertex;
/////////////////////////////////////////////////////////////
//This example has two parts
// step a) draw the primitive pushed down the pipeline
// there are gl_VerticesIn # of vertices
// put the vertex value into gl_Position
// use EmitVertex => 'create' a new vertex
// use EndPrimitive to signal that you are done creating a primitive!
// step b) create a new piece of geometry
// I just do the same loop, but I negate the vertex.z
// result => the primitive is now mirrored.
//Pass-thru!
for(i = 0; i < gl_VerticesIn; i++)
{
gl_Position = gl_PositionIn[i];
EmitVertex();
}
EndPrimitive();
//New piece of geometry!
for(i = 0; i < gl_VerticesIn; i++)
{
vertex = gl_PositionIn[i];
vertex.z = -vertex.z;
gl_Position = vertex;
EmitVertex();
}
EndPrimitive();
}

40. Compute Shader

41. Thank you
• Q & A