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. So, now we're learning what it is doing.
Because of the dependency of this workbook on lectures, we will have a non-standard deadline. We will accept assignments until Tuesday, April 23rd (rather than Monday April 22nd). We will not be able to grade assignments turned in after this date.
Students should learn to:
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)
Unfortunately, I don't have a great tutorial 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). So, I am giving you a bunch of alternatives. We'll rely on lectures a lot.
What I recommend: - Get the basic idea of how shaders work from lecture. You can add to it by reading Chapter 17 of Fundamentals of Computer Graphics (FCG4_Ch17.pdf), or Chapters 2 and 3 of the Orange Book (see below). - Get the basic ideas of the GLSL language by looking at examples. Reading through Chapter 3 of the Orange Book or the Shaderific documents can be helpful (see below). - Get ideas of what you can do with shaders by reading more examples. Reading through some of The Book Of Shaders can give you lots of ideas. - While you're programming, keep the reference card and the Shaderific reference handy.
Note that for class:
Here are the readings. You will need to read some of this.
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 it. It's a little tricky to apply directly (since all of the examples are designed to run stand alone in the browser using his 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.
The WebGL Reference Card is a handy reference. Pages 6-8 cover the shading language. It won't tell you much about what the different functions do or how they are used, but they will tell what is available. I find it immensely useful.
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).
Some alternative readings...
The official 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.
The official documentation for GLSL is the "Orange Book" - however, it seems to be out of date. The old version is available online. While the book is targeted towards OpenGL (this edition predates WebGL), it does provide a good tutorial of the basics. Chapters 2 and 3 provide a good tutorial.
The book "GLSL Essentials" is available online from the UW library. At a glance, I am not sure it adds much - it does give more examples and explanations.
Pages 5 and 8 have required exercises on them. Each require you to write shaders.
Page 6 has a bonus point only exercise. You can also earn bonus points for making very creative shaders on Page 5 and 8.
For this workbook, we won't be grading questions. However, we wanted to give you some questions to think about to help you make sure you understand the concepts and are ready for the exam.
Everything begins on Page One!