I (the TA) have decided to hold extra office hours on Monday 10/12. It will be in cs 5397 from 2:30 to 5:30. Please don’t hesitate to come. We can have very fruitful discussions.
This past week, we had a look at what it takes to program the graphics pipeline. We look at GLSL code to implement shaders, and JavaScript code using WebGL to send triangles down the pipeline. And hopefully, the loose ends of Programs 3 and 4 are wrapped up.
Next week, you’ll get to try out all that stuff we discussed: you’ll write shaders (for P5) and then use those shaders in a JavaScript WebGL program (P6). We’ll also move on to talk about lighting and texturing – which will give you more interesting things to use shaders for in the future.
The readings we’ll do a little differently this week. For reading 6, we’d like you to go back to review those readings from last week (reading 5) on GLSL and WebGL programming. Your “quiz” is that you’ll need this material to do Programs 5 and 6. The next reading (reading 7) will be due after we discuss it in class – however, we recommend you take a look this week to help you digest what is going on in class.
So the schedule:
- Monday (10/12) – Programming Assignment 5 – write some shaders. They aren’t very big.
- Monday (10/12) – Reading Assignment 6 – is really just reading assignment 5 again. There’s no quiz.
- Tuesday (10/13) – Lecture on Lighting Basics. We’ve talked about it a little, but now you’ll get a lot more. You may wish to skim the readings ahead of time, and then read them more carefully after the lecture (it will be part of reading 7)
- Thursday (10/15) – Lecture on Texturing Basics. This will make fragment shaders make a lot more sense. You may wish to skim the readings ahead of time, and then read them more carefully after the lecture (it will be part of reading 7)
- Thursday (10/15) – Programming Assignment 6 – you’ll actually write a WebGL program. Yes, it will be frustrating at first.
- Monday (10/19) – Reading Assignment 7 is really due – it will be easy, since we’ll have discussed the main points in lecture. There will be a quiz, which will be good practice for the exam.
Jyoti has graciously offered to schedule an additional office hour this week to help with assignments. He will be in his office (5397CS) between 5-6pm on Thursday October 8. (warning: the elevators and stairs in CS may be locked after 6pm).
Jyoti has been sick today (Thursday) and he is not in a position to hold this extra office hour. We are considering possibilities to allow us (i.e. at least one among the staff) to offer an additional office hour tomorrow before the end of the week. If this possibility materializes, it will be announced here.
The triangle examples from class: (Slides posted soon)
- One Triangle (JSBin) (simpler version in JSBin)
- Two Triangles (JSBin)
- Two Triangles, Different Colors (JSBin)
- Two Triangles, Different Colors, Spinning (JSBin)
- Two Triangles, Different Colors, Spinning, TWGL (JSBin)
The Shaders From Class (in shdr.bkcore): (Slides posted soon)
- Yellow (shdr)
- Yellow Diffuse (shdr)
- Vertex Colors (shdr)
- Right side of screen (shdr)
- Stripes (shdr)
- Checkers (shdr)
- Siren (shdr)
Yusef’s Shaders (building up from somethng simple)
- http://goo.gl/9pvMqz
- http://goo.gl/ZYYjzl
- http://goo.gl/bjpX56
- http://goo.gl/9yvVYT
- http://goo.gl/RhRgeC
Sifakis’ Amazing Shader
Other references discussed:
- Built in variables reference
- reference card
- Reading Assignment 5 (full of good info)
Last week, we took some time to help people make sure they got the concepts behind P3. This caused some changes in schedule (be sure to read the discussion of how things are changing). We also learned how the graphics hardware works – which wasn’t meant to just be a history lesson. We’ll need to understand the pipeline so we can program it.
This week, we’ll learn how to program the graphics hardware. We’ll kindof do it inside out: we’ll first learn about how to write shaders (the little programs that run on the graphics hardware in the boxes we saw in lecture). Then we’ll see how to talk to it from JavaScript. We’ll have programs due that use these Program 5 will make you write a shader (postponed due date). Program 6 will ask you to write a WebGL program (announcement coming soon).
This week:
- Monday (10/5) – Reading Assignment 5, with no Quiz. Look over the readings – then go through them in detail after the lectures.
- Tuesday (10/6) – Lecture on Shader Programming. This, plus the readings, is what you’ll need for Program 5.
- Thursday (10/8) – Lecture on WebGL Programming. Program 5 is not due. You should hopefuly be done with Programs 3 and 4.
Program 5 is due on Monday, October 12th. We’ll also have a reading on the next topic (lighting). And Program 6 will be due on Thursday the 15th (a real WebGL program).
Since we slowed down a bit to make sure that everyone gets P3, a lot of our plans need to change. (this includes reading 5, program 5, program 6, …)
P3 and P4 grading:
We will grade P3 and P4 together. During grading we will look at both of your assignments together, and see which of the requirements you have.
- P3 Basics – You can draw something (a cube, a cube over a ground plane – or more is OK) that is obviously perspective. You have a way to change the viewport such that we can tell its really 3D.
- P3 Easy Options – You can switch between perspective and orthographic. You can move objects around. You can draw something more than a cube.
- P3 Frills – drawing a cool object, having them animated in a cool way, …
- P4 (1) – You can draw filled triangles.
- P4 (2) – You can order the triangles for occlusions (Painter’s Algorithm). You need to make things move so it’s clear this is working “right.” (although, the painter’s algorithm won’t be perfect)
- P4 (3) – You compute normals and do simple, diffuse shading. Again, there needs to be some object movement so we can see that this is correct. If you don’t have the painter’s algorithm working, this might not be worth doing – since it will be hard to see the results.
- P4 (frills) – You made a cooler object, cooler motions, otherwise did something fancier.
It’s really important that you get the P3 Basics. You can’t get points for anything else if you don’t get that. Make sure you get the P3 stuff. You’ll need it for future assignments.
We’d like everyone to get everything, but this might not happen. We need to move on. Most of the important stuff will come back (like lighting and shading). So for now, if you’re not getting the P4 parts (especially the painter’s algorithm), you should accept that not everyone gets it the first time. We’ll talk about shading more in the future, and you won’t need the painter’s algorithm (from now on, we’ll use the Z-buffer).
P3 and P4 Late Policy:
Your P3 cannot be late, since we’re incorporating it into P4. It could have been early (if you did it on time). We’d like to reward people who did it “early.”
Your P3/P4 is technically due on October 1. But remember the class late policy: it’s OK to turn in some things late. We only penalize people that are consistently late. If you were on time with all (or at least most) of your other assignments, we’ll know this one was different.
Part of the reason we want to keep things on schedule is that we need to move on to the next thing. However, since we slowed down to help people with P3, we’re a little behind on the next thing. So assignment 5 will be delayed a bit. We want you to be done with P4 (even if it means just doing the P3 part) before the new P5 deadline. But be warned: P6 is basically P4 all over. Just faster.
Reading 5, Program 5, Program 6
At this point, we’re changing gears a bit to learn how to program the graphics hardware using WebGL/OpenGL.
We’ll have lectures that explain the basics, readings that will cover the details, and then programming assignments that will check that you have gotten the basics.
Unfortunately, since the lectures got delayed a little bit, reading after the lectures won’t happen if we stick to the usual schedule. So, we’ll change the schedule a little to make things work better:
Skim over Readings 5 before lecture on Tuesday. There will be no quiz.
Program 5 will be due on Monday (10/12) – since it’s kindof like the Quiz for the readings.
Readings 6 (lighting) will have a similar pattern – skim it before lecture, and then read it more carefully after we discuss it. Because you don’t need it for Program 6, we won’t delay program 6.
The Schedule
- Monday (Oct 5) – no reading quiz! (but look over reading 5)
- Tuesday (Oct 6) – Lecture on Shader Programming (stuff you need for P5)
- Thursday (Oct 8) – WebGL Programming (stuff you need for P6)
- Friday (Oct 9) – consider this the “late deadline” for P4. You shouldn’t need more time than this.
- Monday (October 12) – Program 5 due (shaders). You should have read Reading 5 carefully, and at least skimmed reading 6. There will probably be a “quiz” that focuses more on the Reading 5 stuff (that was also discussed in Lecture).
- Tuesday (October 13) – More on Shader and WebGL Programming, basics of lighting. Ideally, we’d know where people were getting stuck on P6 so we could help people get unstuck before its due.
- Thursday (October 15) – More on Lighting. Program 6 (a WebGL program that does basic shapes and shading) is due.
I have posted more videos from the JavaScript class. These are lecture capture – they may or may not be useful to someone who wasn’t there. I do recommend the readings for the class. (of course, you can ask someone in the class and see if they think the readings are good).
Lecture 3: Basics of JavaScript Objects
https://mediaspace.wisc.edu/media/CS638+JavaScript+Fall+15+-+Lecture+3+-+Objects+Basics/0_jsankctn
Lecture 4: More Advanced Stuff with Functions
As I’ve mentioned in class, P3 is really important – if you don’t understand what is going on with this, nothing else in class will work for you.
So, we want to make sure that everyone gets the ideas in P3. Even if you didn’t get it the first try. Hopefully with the extra time we spent in class, and the extra hints, everyone will get it.
Since P4 is a super-set of P3, if you’ve done P4, you’ve done P3. So, if you didn’t get P3 (you program should have a perspective projection, and the ability to move the camera enough to see that its working) – make sure that you do this in P4. If your P4 does P3 stuff, we’ll give you credit for P3.
It is better to turn in a working P3 for P4 (e.g. a program that correctly does wireframe in perspective) than to have a program that does solids (as P4 wants) but does not have perspective. It is better to have a correct wireframe (perspective) cube, than an incorrect fancier thing.
The next programming assignment (P5 shaders) will not build on P3/P4. However, the ones after that will require you to do perspective transformations using a matrix library.
Something that I realized in hearing questions today: there are so many tutorials and other aids that its hard to remember what they all are. Many of them we asked you to read at the beginning before you realized why they were important. Some of them we’ve only recenty fixed the links.
There are also some P3/P4 hints scattered about in postings. (I just made one with some P4 hints).
Here’s a reminder about some of tutorials that might come in handy:
- Learning JavaScript – especially if you want advice on tools beyond JSBin (which you are probably ready for)
- When do I Draw – on how to connect things to sliders and create animation
- Getting started with TWGL m4 – with hints on how twgl works.
- Matrices and GL – for an explanation of why things are backwards in TWGL.