Advanced Graphics and Animation OpenGL Shaders Daniel Jones Department of Computing 17 November 2010
Advanced Graphics and Animation
OpenGL Shaders
Daniel Jones
Department of Computing
17 November 2010
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Introduction
Aims and Objectives
‣ In today’s lecture:
‣ Why use shaders?
‣ Getting started with GLSL
‣ Implementing shaders with Processing and GLGraphics
‣ Case study: Generative chessboard texture
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Why use shaders?
CPU vs GPU processing
CPUSerial taskprocessing
GPUParallel taskprocessing
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Why use shaders?
CPU vs GPU processing
‣ 1995: Fujitsu Numerical
Wind Tunnel
$15,000,000
= 170 GFLOPS
‣ 2009: MacBook Pro
£1,800
CPU = 16 GFLOPS
GPU = 208 GFLOPS
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Why use shaders?
Fixed graphics pipeline
APPLICATION
Geometry
Pixels
Vertex assembly
Texture memory
RasteriserFragment processor
FrameBuffer
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Why use shaders?
Programmable pipeline
APPLICATION
Geometry
Pixels Texture memory
Vertex assembly Rasteriser
FrameBuffer
VertexShader
FragmentShader
Per fragmentoperations
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Why use shaders?
Programmable pipeline
‣ Shaders are micro-programs in a C-like language
‣ Many to select from:
‣ GLSL (OpenGL)
‣ CUDA (Nvidia)
‣ HLSL/Cg (Microsoft, Nvidia)
‣ OpenCL (Apple + others)
‣ GLSL is a good choice for cross-platform support
‣ OpenCL/CUDA good for scientific computing
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Why use shaders?
Applications
‣ Lighting
‣ Textures: dynamic, algorithmic, bumpmapped
‣ Fractal terrain
‣ Non-photorealistic effects: cartoon, sketch
‣ Pixel effects: HDR, bloom, blur, star filter
‣ Particle systems: smoke, water, insects
‣ Other general-purpose GPU tasks (GPGPU)
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Why use shaders?
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Why use shaders?
Pros and cons
‣ To recap:
‣ Fast
‣ Powerful
‣ Cool
‣ Limitations:
‣ Steeper learning curve, trickier to debug
‣ Cannot easily store state between shader actions
‣ Cannot add vertices/pixels or manipulate several at once
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Getting started with GLSL
Vertex vs Fragment shaders
APPLICATION
Geometry
Pixels Texture memory
Vertex assembly Rasteriser
FrameBuffer
VertexShader
FragmentShader
Per fragmentoperations
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Getting started with GLSL
The GLSL language
1. Vertex shader 2. Fragment shader
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Getting started with GLSL
Variable declarations
‣ uniformone value passed per object/render
‣ attribute
one value passed per vertex
‣ varyingpass values from vertex shader to fragment shader
‣ constcompile-time constant
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Getting started with GLSL
The GLSL language
1. Vertex shader 2. Fragment shader
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Getting started with GLSL
Vertex shaders
APPLICATION
Geometry
Pixels Texture memory
Vertex assembly Rasteriser
FrameBuffer
VertexShader
FragmentShader
Per fragmentoperations
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Getting started with GLSL
Texture memory VertexShader
gl_Colorgl_Normalgl_Vertexgl_MultiTexCoord0...
StartColorVelocityElevationTangent...
gl_ModelViewMatrixgl_FrontMaterialgl_LightSource[0]gl_Fog...
ScaleFactorLightPositionZoomEyePosition...
gl_FrontColorgl_BackColorgl_FogFragCoord...
NormalModelCoordRefractionIndexDensity...
special output variables (built-in)
gl_Positiongl_PointSizegl_ClipVertex...
attribute variables(built-in)
attribute variables(user)
uniform variables(built-in)
uniform variables(user)
varying variables(built-in)
varying variables(user)
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Getting started with GLSL
Fragment shaders
APPLICATION
Geometry
Pixels Texture memory
Vertex assembly Rasteriser
FrameBuffer
VertexShader
FragmentShader
Per fragmentoperations
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Texture memory FragmentShader
gl_Colorgl_SecondaryColorgl_TexCoord[0]gl_FogFragCoord...
NormalModelCoordRefractionIndexDensity...
special output variables (built-in)
gl_FragColorgl_FragDepthgl_FragData[n]...
special input variables (built-in)
gl_FragCoordgl_FrontFacing...
gl_ModelViewMatrixgl_FrontMaterialgl_LightSource[0]gl_Fog...
ScaleFactorLightPositionZoomEyePosition...
uniform variables(built-in)
uniform variables(user)
varying variables(built-in)
varying variables(user)
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Getting started with GLSL
Basic types
‣ Vectors
vec2, vec3, vec4
‣ Matrices
mat2, mat3, mat4
‣ Numbers and booleans
int, float, bool
‣ Texture readers
sampler1D, sampler2D, sampler3D
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Getting started with GLSL
Basic type operations
‣ Can add and multiply transparently:
‣ vec3 a, b;
vec3 c = a + (2 * b);
‣ And pick vector elements by name:
‣ vec3 a = vec3(6.5, 1.7, -2.4);
vec2 b = a.xy; // b now holds (6.5, 1.7)
vec3 c = (b, 1.0); // c now holds (6.5, 1.7, 1.0)
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Getting started with GLSL
Basic functions
‣ Trigonometry
sin, cos, tan, atan
‣ Geometric functions
dot, cross, length, distance, normalize
‣ Common maths functions
abs, pow, floor, min, max, mix, fract
‣ See OpenGL Quick Ref for details.
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Getting started with GLSL
Developing your shaders
‣ Shader design IDEs
‣ For OSX:OpenGL Shader Builder
‣ For Windows:
RenderMonkey
Shader Designer
‣ For Linux:Shader Designer
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Implementing shaders
Languages and logistics
‣ Now dealing with two languages:
‣ CPU-side program (Processing, Java, C++, ...)
‣ GPU-side shaders (GLSL)
‣ Note that OpenGL has no concept of files
‣ ...and the Processing IDE won’t edit them
‣ Solution: Use an additional, separate text editor
‣ or NetBeans/Eclipse
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Implementing shaders
Approaches for Processing
‣ The native GL approach:
gl.glLoadShader()
‣ The library:
GLGraphicshttp://glgraphics.sourceforge.net/
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Implementing shaders
Processing: GLGraphics
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Implementing shaders
A generative chessboard
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Implementing shaders
A generative chessboard1. Vertex shader
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Implementing shaders
A generative chessboard2. Fragment shader
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Implementing shaders
A generative chessboard3. Processing code
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Implementing shaders
A generative chessboard3. Processing code
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Implementing shaders
A generative chessboard
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Conclusion
Other applications
‣ Scientific computinghttp://gpgpu.org/
‣ Max/MSP and Jitter[jit.gl.slab]
‣ Filtering and convolution functionshttp://www.ozone3d.net/tutorials/image_filtering.php
In GLGraphics:GLTexture / GLTextureFilter
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Conclusion
Further Resources
‣ Tutorials
http://www.lighthouse3d.com/opengl/glsl/
http://nehe.gamedev.net/data/articles/article.asp?article=21
‣ Quick referencehttp://mew.cx/glsl_quickref.pdf
‣ Comprehensive reference
Rost (2006), “OpenGL Shading Language”