Workbook 10: Shaders
CS559 Spring 2023 Sample Solution
This is a sample solution for the Workbook. You are welcome to refer to it to learn one way to do the assignment but only after you have turned in your own assignment
This week, we’ll learn to program the graphics hardware. In many classes, you have to start with this, because in some environments displaying anything at all requires programming the graphics hardware. So far, we’ve let THREE.js program the graphics hardware for us. Now we’re learning what it is doing.
Learning Goals
- Understand the basic organization of graphics hardware, and how programmability fits into it.
- Appreciate why shaders are the ways that they are and what you can do with them.
- Learn how the shader programming paradigm leads to specific, real implementations.
- Be able to write shaders in a real shading language.
- See how shaders are managed and integrated into a graphics application.
In one week, you won’t master shader programming. But you will get to read and write some actual shader programs. This means that you not only have to learn the concepts, but you’ll need to work with a new programming langauge (we’ll use GLSL).
Note that for class:
- You must write some shaders. For this, you need to understand the basic concepts, and a little bit of the GLSL language.
- You must understand shaders for the exam. We won’t test you on GLSL syntax, but you should be able to read shader code and understand key concepts.
Recommended and Required Readings
This "ThreeJS Baby Steps" posting shows how you can do it all yourself - don’t worry, you don’t have to.
Unfortunately, we don’t have great readings on how to write shaders. Too much time tends to be spent on issues with connecting shaders to real programs. This is generally taken care of by a higher level API, such as THREE. Hopefully, the combination of lectures, this workbook, and readings will help.
Be aware that many resources talk about using GLSL with OpenGL. The version of GLSL used in WebGL (OpenGL ES) is slightly different than the “real” OpenGL GLSL. In particular, WebGL only supports GLSL-ES version 3 (not 3.2). Check the WebGL Reference Card to see what is supported. The GLSL ES shading language (used in WebGL) is a subset of regular OpenGL GLSL. Generally, things just work, but sometimes, things are missing.
Also, A lot of the resources for GLSL with OpenGL talk about the interface between C++ and GLSL which is quite complicated. In WebGL, the JavaScript to GLSL interface is somewhat better. But for class, we will let THREE.js take care of it for us.
There are three different types of readings:
-
Required Readings - to give you the basic idea of what’s going on with how the hardware works and how GLSL lets you write Shaders. OpenGLShading Chapter 2 and OpenGLShading Chapter 3 of The OpenGL Shading Language (3e) covers the basics and gives you enough to get started. We’ll suggest some others below.
-
Reference Readings - when you are programming, you will want something that shows you the details. The WebGL Reference Card has what you need in a concise form on pages 6-8. There are more thorough references below.
-
Supplementary Readings - a good way to learn is by looking at examples, and seeing how people do cool things. We’ll suggest some good places to get started (including the examples in the workbook).
The “official” documentation for GLSL is The OpenGL Shading Language (3e) (also known as the orange book). The book is a bit old (2009), and it is about OpenGL GLSL and not WebGL, but it’s still a great resource. OpenGLShading Chapter 1 gives an overview of the graphics programming model (OpenGL in general). OpenGLShading Chapter 2 and OpenGLShading Chapter 3 give a nice introduction to shading and the GLSL language (these are the chapters that are required reading). OpenGLShading Chapter 4 reviews the types of variables (a topic that confuses most people), OpenGLShading Chapter 5 is a reference for different functions that are available (kind of like the standard library), and OpenGLShading Chapter 6 gives a complete example in thorough detail.
Shading and GLSL Basics
You will get the basic ideas of how the graphics hardware works and why shading languages work the way they do from lectures. Be sure you understand the lectures on the graphics pipeline - otherwise the concepts of shaders will not make sense. The lectures on Shaders (especially the introductory parts) will give you an overview.
Chapter 2 and Chapter 3 of The OpenGL Shading Language (3e) are required. They introduce the concepts of shading and the GLSL language, with only a minor amount of irrelevant stuff on the C++ interface.
Chapter 17 of Fundamentals of Computer Graphics FCG4 Chapter 17 provides a nice introduction if you want to see things described in another way. It talks a lot about how we get data to the shaders, which is important for performance.
GLSL Reference
As you start to program in GLSL (or even read programs), you will want to have some resources about the details of the language and the functions you can use.
The WebGL Reference Card has a concise reference for the version of GLSL used by WebGL on pages 6-8. It is amazingly handy as a resource (although less useful to learn from).
OpenGLShading Chapter 5 has a more descriptive list of all the functions available in GLSL (kind of like its standard library).
The official GLSL specification is available here. It’s mainly for language lawyers, but it can help you find out what are all the variable types or built in functions. It is for “OpenGL” - WebGL’s version of GLSL is a subset.
Examples
A great wat to learn how to use shading (once you’ve gotten the basics) is to look at examples. This will also give you good ideas on what kinds of things you can do.
OpenGLShading Chapter 6 works through a simple example of a shader to make something that looks like bricks. (This is an example of a procedural texture; we’ll discuss these further on Page 5 (Procedural Textures).)
The Book of Shaders promises a “a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders”. It’s oriented more towards artists, and it only covers fragment shaders. But that’s our focus, and the art aspects are fun, because the authors create cool things with them. It’s a little tricky to apply directly (since all of its examples are designed to run standalone in the browser using the author’s framework), but not that tricky because things are simplified (it’s only fragment shaders, so the examples expect less than other documents). The book also tries to do all computer graphics in a fragment shader - which leads to interesting examples, but not necessarily practical ones.
There are plenty of shaders on the web, we’ll encourage you to look for those resources later in this workbook.