SlideShare una empresa de Scribd logo
1 de 22
SHADERS
2014VERTICES, FRAGMENTS - REVISITED
 Vertices –
 Points defined in a specific coordinate axes, to represent 3D geometry
 Atleast 3 vertices are used to define a Triangle – one of the primitives supported by
OpenGL ES
 Fragments
 The primitives are “rasterised” to convert the “area” under the primitive to a set of
color pixels that are then placed in the output buffer
Shader characteristics
2014SHADER CHARACTERISTICS
 Uniforms – uniform for all shader passes
 Can be updated at run time from application
 Attributes – changes per shader pass
 Varying – Passed between vertex and fragment shaders
 Ex, written by Vertex shader, and used by Fragment shader
 gl_Position
 Programs
 Why do we need multiple programs in an application
 for offscreen animation, different effects
 MAX VARYING VECTORS – enum
Inputs to shader
2014INPUTS TO THE SHADERS
 Vertex Shader
 Vertices, attributes,
 Uniforms
 Fragment Shader
 Rasterised fragments (ie, after rasteriser fixed function HW)
 Varyings from vertex shader
 Uniforms
Shader types
2014SHADER TYPES
 Two types of shaders are recognised in OpenGL ES2.0 – Vertex, and Fragment
shaders
 Shaders are typically included in source code as strings (online compilation)
 Shaders can be dynamically compiled, or can be pre-compiled and loaded as
binaries
 A “program” can be created with a group of related Vertex+Fragment shaders
 There can be many shaders and programs in an application
 Only one active at a time (made current by “useProgram”)
Shader usage model
2014SHADER USAGE MODEL
Application
GL Context
Compiler
Linker
Program
Vertex shader source
Fragment shader source
UseProgram
GL library
User Application
Vertex shader
2014VERTEX SHADERS
 Vertex shaders operate on the vertices, and corresponding properties
(“attributes”)
 The same vertex shader code is run on all the vertices
 A shader can operate only on the current vertex – ie “1” vertex. It does “not”
have access to any other vertex even belonging to same primitive
 The Vertex shader outputs one value per vertex
 gl_Position
 Additional per-vertex parameters can be sent to Fragment shaders using
“varyings”
 Upto a maximum of “MAX VARYING VECTORS”
Sample shader
2014VERTEX SHADER WALKTHROUGH
Frag shader
2014FRAGMENT SHADERS
 A fragment is – a pixel belonging to an area of the target render screen (on-screen or off-screen)
 Primitives are rasterised, after clipping
 Fragment shader is responsible for the output colour, just before the post-processing operations
 A Fragment shader can operate on “1” fragment at a time
 Minimum number of “TEXTURE UNITS” is 8
 Calculation of colors
 Colors are interpolated across vertices automatically (Ref Lab 6 in the hands-on session) – ie, “varyings” are
interpolated in Fragment shaders during rendering
 Colors can be generated from a texture “sampler”
 Each HW has a specific number of “Texture Units” that need to be activated, and textures assigned to it for
operation in the shader
 Additional information from vertex shader through “varyings”
 Outputs
 gl_FragColor
Sample Frag shader
2014FRAGMENT SHADER WALKTHROUGH
Shader Program
2014PROGRAM
 Each program consists of 1 fragment shader, and 1 vertex shader
 Within a program, all uniforms share a single global space
Precision
2014PRECISION OF REPRESENTATIONS
 Revision of “Precision” and “Range”
 lowp, mediump, highp notations
 Ex – “mediump vec3 tempColor;”
2014NOTE ON PRECISION
 GLES2.0 mandates explicit specification of precision in shader
 “varying mediump vec2 TexCoord”; //PASS
 “varying vec2 TexCoord”; //WILL SHOW BELOW ERROR!
 Why ?
 Discussion on authors assumption
Functions
2014
FUNCTIONS AVAILABLE IN GLSL (ES)
SHADER
 General–
 pow, exp2, log2, sqrt, inversesqrt, abs, sign, floor, ceil, fract, mod, min, max, clamp,
mix, step
 Trig functions–
 radians, degrees, sin, cos, tan, asin, acos, atan
 Geometric–
 length, distance, cross, dot, normalize, faceForward, reflect, refract
Shader constructs
2014CONSTRUCTS AVAILABLE IN THE SHADERS
 Structures
 struct light {
 float intensity;
 vec3 position;
 } lightVar;
 light lightVar2;
 Arrays
 float frequencies[3];
 Vectors
 vec3 myVector; //x,y,z accessed as myVector.x, myVector.y..
 Matrices
 mat3 myMatrix;
 Note that there are limitations to declaring, initialising, and using variables in shaders
invariance
2014INVARIANCE IN SHADERS
 Why values should change ?
 Compiler quirks, temporary lack of GPR’s
 GLES2 allows invariance to be maintained where specified, within / across
multiple shaders
 #pragma STDGL invariant(all)
 Before declarations
 Why invariance ?
 Needed where precision is critical – specially depth-buffers
 Multi-pass rendering example
2014ADDITIONAL INFORMATION ON SHADERS
 If errors are encountered on the shader, it will not be executed (try it in any of the
online labs)
 Specially important to WebGL
 Reasons of security in browsers
 Reduce cycles – by using measurement tools
 Ex PVRShaman
 RenderMonkey (now discontinued), ShaderMaker – useful tools to write shaders
techniques
2014TECHNIQUES FOR SPECIAL EFFECTS
 Fog effect
 Shader adds a decay depending on distance of object from eye
 Particle effects
 Simulate fire, smoke
 Cloth modelling
 Lot of techniques including deformation, springs
 Reflection/ refraction
 Accomplished with blending , and resizing offscreen buffers
 Shadows
 Ambient Occlusion
 Varying light around objects with neighbours
2014TECHNIQUES FOR SPECIAL EFFECTS
 Multiple render passes – with modified textures
 Change texture coordinates dynamically, then blend results
Reference:
http://www.nada.kth.se/utbildning/grukth/exjobb/rapportlistor/2008/rapporter08/olsson_erik_08025.pdf
2014ADVANCED SHADERS
 Animation
 Environment Mapping
 Per-Pixel Lighting (As opposed to textured lighting)
 Bump Mapping
 Ray Tracers
 Procedural Textures
 CSS – shaders (HTML5 – coming up)
PROGRAMMING WITH SHADERS
 Pass in shader strings
 Compile, link, Use
 Set uniforms
 Do calculations
 Next lab with shaders
2014LAB L7 – MAKING CLOUDS

Más contenido relacionado

La actualidad más candente

Hardware Shaders
Hardware ShadersHardware Shaders
Hardware Shaders
gueste52f1b
 
Deferred shading
Deferred shadingDeferred shading
Deferred shading
Frank Chao
 
565 Alpha Chun-Fu Chao
565 Alpha Chun-Fu Chao565 Alpha Chun-Fu Chao
565 Alpha Chun-Fu Chao
Frank Chao
 

La actualidad más candente (20)

OpenGL ES based UI Development on TI Platforms
OpenGL ES based UI Development on TI PlatformsOpenGL ES based UI Development on TI Platforms
OpenGL ES based UI Development on TI Platforms
 
Hardware Shaders
Hardware ShadersHardware Shaders
Hardware Shaders
 
Virtual Reality Features of NVIDIA GPUs
Virtual Reality Features of NVIDIA GPUsVirtual Reality Features of NVIDIA GPUs
Virtual Reality Features of NVIDIA GPUs
 
GFX Part 4 - Introduction to Texturing in OpenGL ES
GFX Part 4 - Introduction to Texturing in OpenGL ESGFX Part 4 - Introduction to Texturing in OpenGL ES
GFX Part 4 - Introduction to Texturing in OpenGL ES
 
Sig13 ce future_gfx
Sig13 ce future_gfxSig13 ce future_gfx
Sig13 ce future_gfx
 
CS 354 Viewing Stuff
CS 354 Viewing StuffCS 354 Viewing Stuff
CS 354 Viewing Stuff
 
NVIDIA OpenGL in 2016
NVIDIA OpenGL in 2016NVIDIA OpenGL in 2016
NVIDIA OpenGL in 2016
 
NVIDIA's OpenGL Functionality
NVIDIA's OpenGL FunctionalityNVIDIA's OpenGL Functionality
NVIDIA's OpenGL Functionality
 
Shader Programming With Unity
Shader Programming With UnityShader Programming With Unity
Shader Programming With Unity
 
Deferred shading
Deferred shadingDeferred shading
Deferred shading
 
CS 354 Introduction
CS 354 IntroductionCS 354 Introduction
CS 354 Introduction
 
565 Alpha Chun-Fu Chao
565 Alpha Chun-Fu Chao565 Alpha Chun-Fu Chao
565 Alpha Chun-Fu Chao
 
Migrating from OpenGL to Vulkan
Migrating from OpenGL to VulkanMigrating from OpenGL to Vulkan
Migrating from OpenGL to Vulkan
 
Rendering AAA-Quality Characters of Project A1
Rendering AAA-Quality Characters of Project A1Rendering AAA-Quality Characters of Project A1
Rendering AAA-Quality Characters of Project A1
 
Destruction Masking in Frostbite 2 using Volume Distance Fields
Destruction Masking in Frostbite 2 using Volume Distance FieldsDestruction Masking in Frostbite 2 using Volume Distance Fields
Destruction Masking in Frostbite 2 using Volume Distance Fields
 
GTC 2012: GPU-Accelerated Path Rendering
GTC 2012: GPU-Accelerated Path RenderingGTC 2012: GPU-Accelerated Path Rendering
GTC 2012: GPU-Accelerated Path Rendering
 
Secrets of CryENGINE 3 Graphics Technology
Secrets of CryENGINE 3 Graphics TechnologySecrets of CryENGINE 3 Graphics Technology
Secrets of CryENGINE 3 Graphics Technology
 
Substanceshanghaippt repacked
Substanceshanghaippt repackedSubstanceshanghaippt repacked
Substanceshanghaippt repacked
 
TressFX The Fast and The Furry by Nicolas Thibieroz
TressFX The Fast and The Furry by Nicolas ThibierozTressFX The Fast and The Furry by Nicolas Thibieroz
TressFX The Fast and The Furry by Nicolas Thibieroz
 
SPU Assisted Rendering
SPU Assisted RenderingSPU Assisted Rendering
SPU Assisted Rendering
 

Similar a GFX Part 6 - Introduction to Vertex and Fragment Shaders in OpenGL ES

Automated Combination of Real Time Shader Programs (EG 2007)
Automated Combination of Real Time Shader Programs (EG 2007)Automated Combination of Real Time Shader Programs (EG 2007)
Automated Combination of Real Time Shader Programs (EG 2007)
Matthias Trapp
 
Gdc 14 bringing unreal engine 4 to open_gl
Gdc 14 bringing unreal engine 4 to open_glGdc 14 bringing unreal engine 4 to open_gl
Gdc 14 bringing unreal engine 4 to open_gl
changehee lee
 
Android open gl2_droidcon_2014
Android open gl2_droidcon_2014Android open gl2_droidcon_2014
Android open gl2_droidcon_2014
Droidcon Berlin
 
Minko - Targeting Flash/Stage3D with C++ and GLSL
Minko - Targeting Flash/Stage3D with C++ and GLSLMinko - Targeting Flash/Stage3D with C++ and GLSL
Minko - Targeting Flash/Stage3D with C++ and GLSL
Minko3D
 
Opengl lec 3
Opengl lec 3Opengl lec 3
Opengl lec 3
elnaqah
 

Similar a GFX Part 6 - Introduction to Vertex and Fragment Shaders in OpenGL ES (20)

Cg shaders with Unity3D
Cg shaders with Unity3DCg shaders with Unity3D
Cg shaders with Unity3D
 
Automated Combination of Real Time Shader Programs (EG 2007)
Automated Combination of Real Time Shader Programs (EG 2007)Automated Combination of Real Time Shader Programs (EG 2007)
Automated Combination of Real Time Shader Programs (EG 2007)
 
Gdc 14 bringing unreal engine 4 to open_gl
Gdc 14 bringing unreal engine 4 to open_glGdc 14 bringing unreal engine 4 to open_gl
Gdc 14 bringing unreal engine 4 to open_gl
 
XR graphics in Unity: delivering the best AR/VR experiences – Unite Copenhage...
XR graphics in Unity: delivering the best AR/VR experiences – Unite Copenhage...XR graphics in Unity: delivering the best AR/VR experiences – Unite Copenhage...
XR graphics in Unity: delivering the best AR/VR experiences – Unite Copenhage...
 
Clean architecture for shaders unite2019
Clean architecture for shaders unite2019Clean architecture for shaders unite2019
Clean architecture for shaders unite2019
 
Demystifying shaders
Demystifying shadersDemystifying shaders
Demystifying shaders
 
Demystifying shaders
Demystifying shadersDemystifying shaders
Demystifying shaders
 
CS 354 Programmable Shading
CS 354 Programmable ShadingCS 354 Programmable Shading
CS 354 Programmable Shading
 
Making High Quality Interactive VR with Unreal Engine Luis Cataldi
Making High Quality Interactive VR with Unreal Engine Luis CataldiMaking High Quality Interactive VR with Unreal Engine Luis Cataldi
Making High Quality Interactive VR with Unreal Engine Luis Cataldi
 
Making High Quality Interactive VR with Unreal Engine Luis Cataldi
Making High Quality Interactive VR with Unreal Engine Luis CataldiMaking High Quality Interactive VR with Unreal Engine Luis Cataldi
Making High Quality Interactive VR with Unreal Engine Luis Cataldi
 
OpenGL Shading Language
OpenGL Shading LanguageOpenGL Shading Language
OpenGL Shading Language
 
GLSL
GLSLGLSL
GLSL
 
Working with Shader with Unity
Working with Shader with UnityWorking with Shader with Unity
Working with Shader with Unity
 
Open GL ES Android
Open GL ES AndroidOpen GL ES Android
Open GL ES Android
 
Android open gl2_droidcon_2014
Android open gl2_droidcon_2014Android open gl2_droidcon_2014
Android open gl2_droidcon_2014
 
How to Use OpenGL/ES on Native Activity
How to Use OpenGL/ES on Native ActivityHow to Use OpenGL/ES on Native Activity
How to Use OpenGL/ES on Native Activity
 
OpenGL for 2015
OpenGL for 2015OpenGL for 2015
OpenGL for 2015
 
Minko - Targeting Flash/Stage3D with C++ and GLSL
Minko - Targeting Flash/Stage3D with C++ and GLSLMinko - Targeting Flash/Stage3D with C++ and GLSL
Minko - Targeting Flash/Stage3D with C++ and GLSL
 
Opengl lec 3
Opengl lec 3Opengl lec 3
Opengl lec 3
 
Opengl basics
Opengl basicsOpengl basics
Opengl basics
 

Más de Prabindh Sundareson

Más de Prabindh Sundareson (20)

Synthetic Data and Graphics Techniques in Robotics
Synthetic Data and Graphics Techniques in RoboticsSynthetic Data and Graphics Techniques in Robotics
Synthetic Data and Graphics Techniques in Robotics
 
Work and Life
Work and Life Work and Life
Work and Life
 
GPU Algorithms and trends 2018
GPU Algorithms and trends 2018GPU Algorithms and trends 2018
GPU Algorithms and trends 2018
 
Machine learning in the Indian Context - IEEE talk at SRM Institute
Machine learning in the Indian Context - IEEE talk at SRM InstituteMachine learning in the Indian Context - IEEE talk at SRM Institute
Machine learning in the Indian Context - IEEE talk at SRM Institute
 
Students Hackathon - 2017
Students Hackathon - 2017Students Hackathon - 2017
Students Hackathon - 2017
 
ICCE Asia 2017 - Program Outline
ICCE Asia 2017 - Program OutlineICCE Asia 2017 - Program Outline
ICCE Asia 2017 - Program Outline
 
Call for Papers - ICCE Asia 2017
Call for Papers - ICCE Asia 2017Call for Papers - ICCE Asia 2017
Call for Papers - ICCE Asia 2017
 
Technology, Innovation - A Perspective
Technology, Innovation - A PerspectiveTechnology, Innovation - A Perspective
Technology, Innovation - A Perspective
 
IEEE - Consumer Electronics Trends Opportunities (2015)
IEEE - Consumer Electronics Trends Opportunities (2015)IEEE - Consumer Electronics Trends Opportunities (2015)
IEEE - Consumer Electronics Trends Opportunities (2015)
 
GFX Part 7 - Introduction to Rendering Targets in OpenGL ES
GFX Part 7 - Introduction to Rendering Targets in OpenGL ESGFX Part 7 - Introduction to Rendering Targets in OpenGL ES
GFX Part 7 - Introduction to Rendering Targets in OpenGL ES
 
GFX Part 2 - Introduction to GPU Programming
GFX Part 2 - Introduction to GPU ProgrammingGFX Part 2 - Introduction to GPU Programming
GFX Part 2 - Introduction to GPU Programming
 
John Carmack talk at SMU, April 2014 - Virtual Reality
John Carmack talk at SMU, April 2014 - Virtual RealityJohn Carmack talk at SMU, April 2014 - Virtual Reality
John Carmack talk at SMU, April 2014 - Virtual Reality
 
GFX2014 OpenGL ES Quiz
GFX2014 OpenGL ES QuizGFX2014 OpenGL ES Quiz
GFX2014 OpenGL ES Quiz
 
Gfx2014 Graphics Workshop - Lab manual
Gfx2014 Graphics Workshop - Lab manualGfx2014 Graphics Workshop - Lab manual
Gfx2014 Graphics Workshop - Lab manual
 
Render to Texture with Three.js
Render to Texture with Three.jsRender to Texture with Three.js
Render to Texture with Three.js
 
ANGLE on Windows for OpenGLES2.0
ANGLE on Windows for OpenGLES2.0ANGLE on Windows for OpenGLES2.0
ANGLE on Windows for OpenGLES2.0
 
Yocto usage for Graphics SDK on AM335x
Yocto usage for Graphics SDK on AM335xYocto usage for Graphics SDK on AM335x
Yocto usage for Graphics SDK on AM335x
 
Gfx2013 lab manual
Gfx2013 lab manualGfx2013 lab manual
Gfx2013 lab manual
 
ARM Linux Embedded memory protection techniques
ARM Linux Embedded memory protection techniquesARM Linux Embedded memory protection techniques
ARM Linux Embedded memory protection techniques
 
Qt5 (minimal) on beaglebone, with Yocto
Qt5 (minimal) on beaglebone, with YoctoQt5 (minimal) on beaglebone, with Yocto
Qt5 (minimal) on beaglebone, with Yocto
 

Último

EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
 

Último (20)

Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 

GFX Part 6 - Introduction to Vertex and Fragment Shaders in OpenGL ES

  • 2. 2014VERTICES, FRAGMENTS - REVISITED  Vertices –  Points defined in a specific coordinate axes, to represent 3D geometry  Atleast 3 vertices are used to define a Triangle – one of the primitives supported by OpenGL ES  Fragments  The primitives are “rasterised” to convert the “area” under the primitive to a set of color pixels that are then placed in the output buffer Shader characteristics
  • 3. 2014SHADER CHARACTERISTICS  Uniforms – uniform for all shader passes  Can be updated at run time from application  Attributes – changes per shader pass  Varying – Passed between vertex and fragment shaders  Ex, written by Vertex shader, and used by Fragment shader  gl_Position  Programs  Why do we need multiple programs in an application  for offscreen animation, different effects  MAX VARYING VECTORS – enum Inputs to shader
  • 4. 2014INPUTS TO THE SHADERS  Vertex Shader  Vertices, attributes,  Uniforms  Fragment Shader  Rasterised fragments (ie, after rasteriser fixed function HW)  Varyings from vertex shader  Uniforms Shader types
  • 5. 2014SHADER TYPES  Two types of shaders are recognised in OpenGL ES2.0 – Vertex, and Fragment shaders  Shaders are typically included in source code as strings (online compilation)  Shaders can be dynamically compiled, or can be pre-compiled and loaded as binaries  A “program” can be created with a group of related Vertex+Fragment shaders  There can be many shaders and programs in an application  Only one active at a time (made current by “useProgram”) Shader usage model
  • 6. 2014SHADER USAGE MODEL Application GL Context Compiler Linker Program Vertex shader source Fragment shader source UseProgram GL library User Application Vertex shader
  • 7. 2014VERTEX SHADERS  Vertex shaders operate on the vertices, and corresponding properties (“attributes”)  The same vertex shader code is run on all the vertices  A shader can operate only on the current vertex – ie “1” vertex. It does “not” have access to any other vertex even belonging to same primitive  The Vertex shader outputs one value per vertex  gl_Position  Additional per-vertex parameters can be sent to Fragment shaders using “varyings”  Upto a maximum of “MAX VARYING VECTORS” Sample shader
  • 9. 2014FRAGMENT SHADERS  A fragment is – a pixel belonging to an area of the target render screen (on-screen or off-screen)  Primitives are rasterised, after clipping  Fragment shader is responsible for the output colour, just before the post-processing operations  A Fragment shader can operate on “1” fragment at a time  Minimum number of “TEXTURE UNITS” is 8  Calculation of colors  Colors are interpolated across vertices automatically (Ref Lab 6 in the hands-on session) – ie, “varyings” are interpolated in Fragment shaders during rendering  Colors can be generated from a texture “sampler”  Each HW has a specific number of “Texture Units” that need to be activated, and textures assigned to it for operation in the shader  Additional information from vertex shader through “varyings”  Outputs  gl_FragColor Sample Frag shader
  • 11. 2014PROGRAM  Each program consists of 1 fragment shader, and 1 vertex shader  Within a program, all uniforms share a single global space Precision
  • 12. 2014PRECISION OF REPRESENTATIONS  Revision of “Precision” and “Range”  lowp, mediump, highp notations  Ex – “mediump vec3 tempColor;”
  • 13. 2014NOTE ON PRECISION  GLES2.0 mandates explicit specification of precision in shader  “varying mediump vec2 TexCoord”; //PASS  “varying vec2 TexCoord”; //WILL SHOW BELOW ERROR!  Why ?  Discussion on authors assumption Functions
  • 14. 2014 FUNCTIONS AVAILABLE IN GLSL (ES) SHADER  General–  pow, exp2, log2, sqrt, inversesqrt, abs, sign, floor, ceil, fract, mod, min, max, clamp, mix, step  Trig functions–  radians, degrees, sin, cos, tan, asin, acos, atan  Geometric–  length, distance, cross, dot, normalize, faceForward, reflect, refract Shader constructs
  • 15. 2014CONSTRUCTS AVAILABLE IN THE SHADERS  Structures  struct light {  float intensity;  vec3 position;  } lightVar;  light lightVar2;  Arrays  float frequencies[3];  Vectors  vec3 myVector; //x,y,z accessed as myVector.x, myVector.y..  Matrices  mat3 myMatrix;  Note that there are limitations to declaring, initialising, and using variables in shaders invariance
  • 16. 2014INVARIANCE IN SHADERS  Why values should change ?  Compiler quirks, temporary lack of GPR’s  GLES2 allows invariance to be maintained where specified, within / across multiple shaders  #pragma STDGL invariant(all)  Before declarations  Why invariance ?  Needed where precision is critical – specially depth-buffers  Multi-pass rendering example
  • 17. 2014ADDITIONAL INFORMATION ON SHADERS  If errors are encountered on the shader, it will not be executed (try it in any of the online labs)  Specially important to WebGL  Reasons of security in browsers  Reduce cycles – by using measurement tools  Ex PVRShaman  RenderMonkey (now discontinued), ShaderMaker – useful tools to write shaders techniques
  • 18. 2014TECHNIQUES FOR SPECIAL EFFECTS  Fog effect  Shader adds a decay depending on distance of object from eye  Particle effects  Simulate fire, smoke  Cloth modelling  Lot of techniques including deformation, springs  Reflection/ refraction  Accomplished with blending , and resizing offscreen buffers  Shadows  Ambient Occlusion  Varying light around objects with neighbours
  • 19. 2014TECHNIQUES FOR SPECIAL EFFECTS  Multiple render passes – with modified textures  Change texture coordinates dynamically, then blend results Reference: http://www.nada.kth.se/utbildning/grukth/exjobb/rapportlistor/2008/rapporter08/olsson_erik_08025.pdf
  • 20. 2014ADVANCED SHADERS  Animation  Environment Mapping  Per-Pixel Lighting (As opposed to textured lighting)  Bump Mapping  Ray Tracers  Procedural Textures  CSS – shaders (HTML5 – coming up)
  • 21. PROGRAMMING WITH SHADERS  Pass in shader strings  Compile, link, Use  Set uniforms  Do calculations  Next lab with shaders
  • 22. 2014LAB L7 – MAKING CLOUDS