OpenGL Shading
Languages(GLSL)
SK플래닛/모바일 개발 2팀
남정수
yegam400@gmail.com
Graphics Programming
• Generates
– 2D Programming
• GDI, Quartz, Canvas
• DirectDraw

– 3D Programming
• Direct3D, OpenGL
...
3D Graphics Programming
• Inputs
– Vertex Processing
• Vertices(Positions), Lights, Colors, Texture Coordinates

– Fragmen...
Shading
• Shading
– Shading refers to depicting depth perception in 3D
models or illustrations by varying levels of darkne...
3D Rendering Pipeline
OpenGL ES 2.0 Rendering Pipeline –
Fixed Function Pipeline removed
Rasterization & Raster
Operations(ROP)
Transform and Lighting
emissive = Ke

ambient = Ka x globalAmbient

diffuse = Kd x lightColor x max(N · L, 0)

specular = ...
Vertex Processing Pipeline
Fragment Processing Pipeline
GPU Programming
• Writing programmable vertex/fragment
programs(shaders)
GPU Programming History(1/6)
GPU Programming History(2/6)
GPU Programming History(3/6)
GPU Programming History(4/6)
GPU Programming History(5/6)
GPU Programming History(6/6)
Cg vs GLSL
• Advantage of Cg
–
–
–
–
–

Supports both of Direct3D/OpenGL
Supports Old VGAs(before OpenGL 2.0)
Supports nVI...
OpenGL Versions
OpenGL
Version

Comments

DirectX
Version

Description

1.0~1.5

Direct3D 8.0~9.0b
Shader Model 1.0~2.0a
C...
OpenGL Extensions
•

OpenGL Extensions
–

OpenGL Extensions are usually made available to access new features of 3D graphi...
GLSL Versions
•

Until version 3.30, the GLSL version number and the corresponding OpenGL version number
were different. H...
Shader Model(SM) Numbers
Shader Model

Shader Profiles

Shader Model 1

vs_1_1

Shader Model 2

ps_2_0, ps_2_x, vs_2_0, vs...
Shader Model 3 Example
OpenGL ES Versions
Version

Description

OpenGL ES 1.0
Android
Standard

•
•
•

•
•

Quad and polygon rendering primitives...
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 ...
GLSL – Simple Example

ftransform() is used for fixed function pipeline.
GLSL - Build-in Variables(1/2)
GLSL - Build-in Variables(1/2)
GLSL keywords –
attribute, uniform, varying
• (Vertex) Attribute
– Vertex attributes are used to communicate from outside ...
GLSL APIs
•

GLSL flow APIs
– Loading Shader
•
•

glCreateShaderObject
glShaderSource

– Compiling Shader
•

glCompileShad...
Vertex Shader Example – Directional
Lighting
void main()
{
vec3 normal, lightDir, viewVector, halfVector;
vec4 diffuse, am...
Fragment Shader Example – Per Pixel
Directional Lighting

http://www.lighthouse3d.com/tutorials/glsl-tutorial/directional-...
Fragment Shader Example – YUV to
RGB Conversion

http://helloworld.naver.com/helloworld/1207
Fragment Shader Example – Image
Filter(Box Blur)
attribute vec2 vPosition;
attribute vec2 vTexCoord;

precision mediump fl...
OpenGL 4.3 generation
OpenGL 4.3
Direct3D 11
Fragment Shader vs Compute Shader
Geometry Shader
//GEOMETRY SHADER
#version 120
#extension GL_ARB_geometry_shader4 : enable
///////////////////////
void ma...
Compute Shader
Thank you
• 감사합니다.
Upcoming SlideShare
Loading in...5
×

OpenGL Shading Language

2,381
-1

Published on

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

Published in: Technology, Art & Photos
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,381
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
97
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

OpenGL Shading Language

  1. 1. OpenGL Shading Languages(GLSL) SK플래닛/모바일 개발 2팀 남정수 yegam400@gmail.com
  2. 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. 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. 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. 5. 3D Rendering Pipeline
  6. 6. OpenGL ES 2.0 Rendering Pipeline – Fixed Function Pipeline removed
  7. 7. Rasterization & Raster Operations(ROP)
  8. 8. Transform and Lighting 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 surfaceColor = emissive + ambient + diffuse + specular
  9. 9. Vertex Processing Pipeline
  10. 10. Fragment Processing Pipeline
  11. 11. GPU Programming • Writing programmable vertex/fragment programs(shaders)
  12. 12. GPU Programming History(1/6)
  13. 13. GPU Programming History(2/6)
  14. 14. GPU Programming History(3/6)
  15. 15. GPU Programming History(4/6)
  16. 16. GPU Programming History(5/6)
  17. 17. GPU Programming History(6/6)
  18. 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. 19. OpenGL Versions OpenGL Version Comments DirectX Version Description 1.0~1.5 Direct3D 8.0~9.0b Shader Model 1.0~2.0a Cg 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 2.0 3.0 Direct3D 9.0c Shader Model 3.0 OpenGL Shading Language 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 11.0* Shader Model 5.0, Geforce 400, Compute Shader 4.0 Direct3D 11 Shader Model 5.0 11.1*+ Shader Model 5.0, Geforce 600 4.1 OpenGL ES 2.0 *Not available for Windows XP OS †Only available for Windows 8 OS 4.2 OpenGL ES 3.0
  20. 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. • • • – Detecting extensions • – 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. 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. 21. GLSL Versions • Until version 3.30, the GLSL version number and the corresponding OpenGL version number were different. Here's a table: OpenGL Version 2.0 1.20 3.0 1.30 3.1 1.40 3.2 • • 1.10 2.1 • GLSL Version 1.50 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
  22. 22. Shader Model(SM) Numbers 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 (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.) • • 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/enus/library/windows/desktop/bb509626(v=vs.85).aspx
  23. 23. Shader Model 3 Example
  24. 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. 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. • 엄밀히 따지면, WebGL은 OpenGL ES 2.0의 방언이라고 할 수 있다. – http://learningwebgl.com/lessons/
  26. 26. GLSL – Simple Example ftransform() is used for fixed function pipeline.
  27. 27. GLSL - Build-in Variables(1/2)
  28. 28. GLSL - Build-in Variables(1/2)
  29. 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. 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. 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. 32. Fragment Shader Example – Per Pixel Directional Lighting http://www.lighthouse3d.com/tutorials/glsl-tutorial/directional-light-per-pixel/
  33. 33. Fragment Shader Example – YUV to RGB Conversion http://helloworld.naver.com/helloworld/1207
  34. 34. Fragment Shader Example – Image Filter(Box Blur) attribute vec2 vPosition; attribute vec2 vTexCoord; precision mediump float; uniform sampler2D sTexture; 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; 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; vec2 firstOffset = vec2(1.5 * texelWidthOffset, 1.5 * texelHeightOffset) * blurSize; vec2 secondOffset = vec2(3.5 * texelWidthOffset, 3.5 * texelHeightOffset) * blurSize; gl_FragColor = fragmentColor; } centerTextureCoordinate = vTexCoord; oneStepLeftTextureCoordinate = vTexCoord - firstOffset; twoStepsLeftTextureCoordinate = vTexCoord - secondOffset; oneStepRightTextureCoordinate = vTexCoord + firstOffset; twoStepsRightTextureCoordinate = vTexCoord + secondOffset; }
  35. 35. OpenGL 4.3 generation
  36. 36. OpenGL 4.3
  37. 37. Direct3D 11
  38. 38. Fragment Shader vs Compute Shader
  39. 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. 40. Compute Shader
  41. 41. Thank you • 감사합니다.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×