Workbook 11: Shaders

CS559 Spring 2021 Sample Solution - Workbook 11

Written by CS559 course staff

You can try out the example solutions here. The interesting code is on page 6, page 7 and page 9.

This workbook is due on Monday, April 12, 2021.

This week, we’ll learn to program the graphics hardware. In many classes, you have to start with this, since you can’t draw a triangle without writing two programs. So far, we’ve let THREE.js program the graphics hardware for us. Now we’re learning what it is doing.

Learning Goals

  1. Understand the basic organization of graphics hardware, and how programmability fits into it.
  2. Appreciate why shaders are the ways that they are and what you can do with them.
  3. Understand how the shader programming paradigm leads to specific, real implementations.
  4. Be able to write shaders in a real shading language.
  5. 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:

  1. You must write some shaders. For this, you need to understand the basic concepts, and a little bit of the GLSL language.
  2. You must understand shaders (for the exam). We won’t test you on GLSL details, but you will need to know the key concepts and be able to read shader code.

Unfortunately, we don’t have great readings on how to write shaders. Things tend to spend too much time on the issues in connecting shaders to real programs (which is generally taken care of by a higher level API, such as THREE). Hopefully, the combination of lectures, this workbook, and the different 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:

  1. 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. Chapter 2 and Chapter 3 of The OpenGL Shading Language (3e) covers the basics and gives you enough to get started. We’ll suggest some others below.

  2. 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 from on pages 6-8. There are more thorough references below.

  3. 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. Chapter 1 gives an overview of the graphics programming model (OpenGL in general). Chapter 2 and Chapter 3 give a nice introduction to shading and the GLSL language (these are the chapters that are required reading). Chapter 4 reviews the types of variables (a topic that confuses most people), Chapter 5 is a reference for different functions that are available (kind of like the standard library), and Chapter 6 gives a complete example in thorough detail.

The UW library has 2 ebooks available for your to read online. “GLSL Essentials” is available from the UW library. At a glance, I am not sure it adds much - it does give more examples and explanations. Similarly, the OpenGL4 Shading Language Cookbook talks a lot about how C++ and GLSL communicates, but also works through some good examples.

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_Ch17.pdf (2.2mb) 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).

OpenGL Shading Language (3e) Chapter 5 has a more descriptive list of all the functions available in GLSL (kind of like its standard library).

Shaderific has a GLSL reference. It’s less terse than the reference card, but it still is just a reference once you have a basic idea of what you’re doing. It has a paragraph or so about all the functions (that are just listed on the reference card).

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.

OpenGL Shading Language (3e) 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.

Another resource are the examples of shaders available around the web. We’ll encourage you to look for those later.

Rubric

Workbook Rubric (96 points total)
Points (88):
Box 11-01-01
3 pt
answered basic questions
Box 11-02-01
4 pt
change the color in 11-02-01.fs from yellow to something else
Box 11-05-02
5 pt
dots alternate between 2+ solid colors
Box 11-04-02b
2 pt
change diffuse lighting (direction and 2-sidedness)
Box 11-04-03
3 pt
add diffuse lighting
Box 11-04-03
1 pt
change specular to white
Box 11-04-03
3 pt
explain how you know it is correct
Box 11-06-01
7 pt
looks like a checkerboard
Box 11-06-01
3 pt
responds to slider
Box 11-06-02
8 pt
some other pattern
Box 11-07-02
5 pt
non-jaggy checkerboard
Box 11-09-01
5 pt
has a procedural pattern
Box 11-09-01
4 pt
has lighting
Box 11-09-02
5 pt
has an image-based texture
Box 11-09-02
4 pt
has lighting
Box 11-09-03
10 pt
Some shader that is different than what is in other boxes
Box 11-10-01
8 pt
has some example
Box 11-10-01
3 pt
gives attribution
Box 11-10-01
5 pt
gives an explanation
Bonus points (8):
Box 11-02-02
2 pt
implement the color animation inside the fragment shader using the provided time uniform
Box 11-09-02
3 pt
something beyond basic lighting with texture (required explanation)
Box 11-09-03
3 pt
something particularly interesting (grader's discretion) (requires explanation)

Get started on Page  1  (Shader Basics)!