Advanced Graphics and Animation OpenGL Shaders
Transcript of Advanced Graphics and Animation OpenGL Shaders
![Page 1: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/1.jpg)
Advanced Graphics and Animation
OpenGL Shaders
Daniel Jones
Department of Computing
17 November 2010
![Page 2: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/2.jpg)
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
![Page 3: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/3.jpg)
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Why use shaders?
CPU vs GPU processing
CPUSerial taskprocessing
GPUParallel taskprocessing
![Page 4: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/4.jpg)
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
![Page 5: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/5.jpg)
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Why use shaders?
Fixed graphics pipeline
APPLICATION
Geometry
Pixels
Vertex assembly
Texture memory
RasteriserFragment processor
FrameBuffer
![Page 6: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/6.jpg)
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
![Page 7: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/7.jpg)
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
![Page 8: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/8.jpg)
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)
![Page 9: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/9.jpg)
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Why use shaders?
![Page 10: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/10.jpg)
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
![Page 11: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/11.jpg)
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
![Page 12: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/12.jpg)
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Getting started with GLSL
The GLSL language
1. Vertex shader 2. Fragment shader
![Page 13: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/13.jpg)
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
![Page 14: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/14.jpg)
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Getting started with GLSL
The GLSL language
1. Vertex shader 2. Fragment shader
![Page 15: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/15.jpg)
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
![Page 16: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/16.jpg)
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)
![Page 17: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/17.jpg)
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
![Page 18: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/18.jpg)
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)
![Page 19: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/19.jpg)
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
![Page 20: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/20.jpg)
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)
![Page 21: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/21.jpg)
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.
![Page 22: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/22.jpg)
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
![Page 23: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/23.jpg)
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
![Page 24: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/24.jpg)
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/
![Page 25: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/25.jpg)
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Implementing shaders
Processing: GLGraphics
![Page 26: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/26.jpg)
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Implementing shaders
A generative chessboard
![Page 27: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/27.jpg)
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Implementing shaders
A generative chessboard1. Vertex shader
![Page 28: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/28.jpg)
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Implementing shaders
A generative chessboard2. Fragment shader
![Page 29: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/29.jpg)
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Implementing shaders
A generative chessboard3. Processing code
![Page 30: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/30.jpg)
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Implementing shaders
A generative chessboard3. Processing code
![Page 31: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/31.jpg)
Advanced Graphics and Animation: OpenGL Shaders17 November 2010
Implementing shaders
A generative chessboard
![Page 32: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/32.jpg)
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
![Page 33: Advanced Graphics and Animation OpenGL Shaders](https://reader030.fdocuments.in/reader030/viewer/2022040822/624df7e8595d3b46ea6b614b/html5/thumbnails/33.jpg)
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”