Advanced Graphics and Animation OpenGL Shaders

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


Why use shaders?

CPU vs GPU processing

CPUSerial taskprocessing

GPUParallel taskprocessing


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


Why use shaders?

Fixed graphics pipeline

APPLICATION

Geometry

Pixels

Vertex assembly

Texture memory

RasteriserFragment processor

FrameBuffer


Why use shaders?

Programmable pipeline

APPLICATION

Geometry

Pixels Texture memory

Vertex assembly Rasteriser

FrameBuffer

VertexShader

FragmentShader

Per fragmentoperations


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


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)


Why use shaders?


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


Getting started with GLSL

Vertex vs Fragment shaders

APPLICATION

Geometry



FrameBuffer

VertexShader

FragmentShader




The GLSL language

1. Vertex shader 2. Fragment shader



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



The GLSL language

1. Vertex shader 2. Fragment shader



Vertex shaders

APPLICATION

Geometry



FrameBuffer

VertexShader

FragmentShader




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)



Fragment shaders

APPLICATION

Geometry



FrameBuffer

VertexShader

FragmentShader



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)



Basic types

‣ Vectors

vec2, vec3, vec4

‣ Matrices

mat2, mat3, mat4

‣ Numbers and booleans

int, float, bool

‣ Texture readers

sampler1D, sampler2D, sampler3D



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)



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.



Developing your shaders

‣ Shader design IDEs

‣ For OSX:OpenGL Shader Builder

‣ For Windows:

RenderMonkey

Shader Designer

‣ For Linux:Shader Designer


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



Approaches for Processing

‣ The native GL approach:

gl.glLoadShader()

‣ The library:

GLGraphicshttp://glgraphics.sourceforge.net/

http://glgraphics.sourceforge.net

http://glgraphics.sourceforge.net



Processing: GLGraphics



A generative chessboard



A generative chessboard1. Vertex shader



A generative chessboard2. Fragment shader



A generative chessboard3. Processing code



A generative chessboard3. Processing code



A generative chessboard


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

http://gpgpu.org

http://gpgpu.org

http://www.ozone3d.net/tutorials/image_filtering.php

http://www.ozone3d.net/tutorials/image_filtering.php


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”



http://mew.cx/glsl_quickref.pdf

http://mew.cx/glsl_quickref.pdf

Documents

Advanced Graphics and Animation OpenGL Shaders