CS 457 / 557 -- Computer Graphics Shaders

Winter Quarter 2023

http://cs.oregonstate.edu/~mjb/cs557

Resources Page

Projects	Handouts

This page was last updated: March 28, 2023

"Don't wake me for the end of the world unless it has very good special effects."

-- Roger Zelazny (science fiction writer)

Coronavirus Information

Your well-being is our #1 concern! I want all of you to have ready-access to the latest information. Find it here.

Attention Ecampusers!

A special welcome to all you Ecampusers! I am excited because this is the first time ever that the Shaders class has been offered on Ecampus. You are my inaugural guinea pigs! :-)

You will experience the same course that the on-campus students experience. Same material, same notes, same projects, same quizzes, same tests, and same online Office Hours. There are recorded videos that go along with the notes (they are called "LV" for "Lecture Videos" and you will see them in the same table that has links to the notes).

Like I do whenever I have Ecampus students, I have setup a time every week to do a Live Lecture so that you also can hear a discussion of the topics with the chance to ask live questions. You can also ask questions in the Zoom Chat, and I will answer them in a document that I will post in the same place I post the recorded LL videos. These will be on Fridays, starting at 3:00 PM PT. They are on Zoom at: https://oregonstate.zoom.us/j/8340727662?pwd=b01tZ0hJUzdHNUtrdTRqSkdwbG4zdz09 On-campus Shaderers are welcome to come as well.

These Live Lectures will be recorded so that if you miss them, you can catch them later.

Thanks, Ecampusers, for being here!

Stuff You Should Be Interested In:

• Click here to see the new trailer for Pixars movie Elemental, due out June 16.

• This is really interesting. Click here. This is a veteran Disney animator reacting to AI effect filters ("shaders"?) being used to make live animation look handdrawn.

• Here is a brief Qualtrics survey about how the Shaders course went for you. I use this to evolve the class from year-to-year. Please fill it out -- it is a big help to me ... and to those who take this class next year! As this is the first time this class has ever been offered on Ecampus, it is especially important that I hear back from Ecampusers.

• Also, please fill out the Student Learning Experience (SLE, formerly the eSETS) survey as well. This also helps me evolve the class, but the EECS department uses them as well.

• My Finals Week Office Hours are:

  Day	Time
  Monday	10:00-12:00
  Tuesday	11:00-12:00

  Usual Zoom-room.
  BTW, you can see the recording of the Test Review here.

• Many of you have asked about 3D-scanning real objects. Check this out! Here is a video explanation of Adobe's Substance 3D Sampler. Here is the web page for it. Apparently there is a 30-day free trial. If you try it, let me know what you did and how it went.

• Computer on its last legs? The College of Engineering has a Laptop Checkout Service. Not sure what the graphics capabilities are, though.

• So that you can plan ahead, Test #2 will go live at 12:01 PM on Wednesday, March 22. It closes at 23:59 on Sunday, March 26. It wil consist of 40 questions, on Canvas, multiple choice, open-notes.

• This CS 457/557 shader, find, helps you identify key parts of objects by their (s,t) or (x,y,z) coordinates: find.glib, find.vert, find.frag. It's useful to isolate certain parts of objects in order to do some effect on them without affecting the rest of the object.

• Cool CG simulation of an Oregon earthquake!

• Here is the shadow demo video I had made for CS 450/550. I would have shown this program live in class if our classroom computer had been able to handle it.

• Because our classroom computer won't handle render-to-texture, I made a video of the demo I was going to show you. Here it is.

• There is a web site to help you pick color sequences that are colorblind-friendly. It is: http://colorbrewer2.org

• Interviewing this year?
  There is a great book called: Programming Interviews Exposed: Secrets to Landing Your Next Job
  It prepares you for CS interview questions by revealing strategies and giving a nice review of data structures, recursion, and other programming information you might be asked about.
  Best of all, the OSU library has it in electronic form. Click here, scroll down just a little bit, then click on View and download full book.
  (I have a paper copy of it if you'd like to see it. Also, it's under $30 on Amazon

• Here are a couple of articles about job opportunities in 3D graphics entitled Realtime Skills Wanted and Visualizing the Future. However, know that these were co-sponsored by Unreal Engine, so clearly the conclusions are self-serving. However, they are interesting anyway.

  Also, here is a Podcast about How to Make Money doing 3D. The part about How to Apply for a 3D Job comes in at 15:32.

• Way cool demo of Unreal Engine's new MetaHuman Creator. (To get the full effect, put the video into Full Screen mode.) I would guess that they have a skin shader that takes in a ton of uniform variables.

• Our "signature object" this time is the Stanford Bunny in honor of this being the Year of the Rabbit in the Chinese New Year calendar starting February 1. Get the OBJ file here:

  Vertices	Triangles	File
  3,548	6,945	bunny010n.obj

  This OBJ file has normals and texture coordnates. Left-click on it to see what the file looks like. Right-click on it to download it.

  If you ever need this model to have less or more detail, let me know.

• Some museums have been photoscanning items in their collections and then have uploaded them to Sketchfab here. Check them out! They're free.

• Click here to see the calendar of student events.

• Here is one of the most amazing cat animations I've ever seen!

• Here is a great source of texture images: https://3dtextures.me/

• The magazine Computer Graphics World had an interesting article on Looking for a Job in CG.

• The OpenGL 4.6/GLSL 4.60 Reference Card can be found here.
  This isn't absolutely essential to print out, but it is really handy to have around.
  

• Check out these optical illusions. Very cool!

• Here is an Online 3D Model Converter, which you might find handy to convert 3D model files into different formats for your own use.

• Here is a Online Image-to-BMP file converter, which you might find handy to convert images you find into BMP files for use as textures.

What We Will Be Doing

The goals of this course are to leave you "career-ready" (i.e., both work-ready and research-ready) for tasks that require the implementation of graphics algorithms in the form of shaders.

CS 457/557 topics include:

• A more advanced look at the graphics pipeline
• A more advanced look at transformations, including non-linear
• Lighting
• Color
• Opacity
• Step boundaries
• Smooth step boundaries
• Positional and gradient noise
• Fractional Brownian Motion (FBM, 1/f, octave) noise
• The OpenGL Shading Language (GLSL)
• GLSL Vertex shaders
• GLSL Fragment shaders
• GLSL Geometry shaders
• GLSL Tessellation shaders
• GLSL Compute shaders
• Shaders for image manipulation
• Shaders for displacement and bump mapping
• Hiding data in textures
• Using shaders in visualization

Graphics Card Levels

If you are wondering what types of shaders your own graphics card supports, check this table. You can tell what shaders the card supports by looking at the Shader Model (or Shader Level) or what DirectX / OpenGL version it supports:

Shader Model	OpenGL	DirectX	Supports
3.0	2.x	9	Vertex, Fragment
4.0	3.x	10	Geometry
5.0	4.x	11	Tessellation, Compute

We will cover all of these different types of shaders.

Prerequisites

If you don't have any of these under your belt, I suggest that you look over the CS 450/550 class notes, which can be found here.

Professor

Office:	Kelley 2117 (2nd floor, south side)
Phone:	541-737-2542
Email:	mjb@cs.oregonstate.edu

Prof. Bailey's Zoom Office Hours:

There is no Required Textbook!

Course material will consist of my notes and web pages.
All required course materials for this class will cost you $0.00 (i.e., free).

Optional Textbook

There is a textbook, based on the notes for this class.

But, don't buy it! At least, not yet.

But, the book does have more detail in places. If you want to see what is inside it, there is one in the CGEL "library". It is chained to the bookshelf. I also have one in my office.

Bailey and Cunningham, Graphics Shaders: Theory and Practice, Second Edition, CRC Press, 2012. ISBN: 978-1-56881-434-6. If you do end up wanting it, it is available through Amazon, or through CRC Press. Last I looked, it was much cheaper on the CRC site. Not sure why.

Other Good References

Handouts and Recorded Videos

Class Schedule

To see an Academic Year calendar, click here.

Class time is: Mondays and Wednesdays, 10:00 - 11:30.

Unless otherwise specified, all of our classes will be in Milam Auditorium (room 026). The easiest entrance is on the west side.

No class on: Monday January 16.

Note: this schedule is my best guess at where we will be when. It is only approximate.

Week #	Starting Date	Topics
1	Jan 9	Introductions. General course information. History of Shaders The graphics pipeline -- how it really works. Homogeneous coordinates. Coordinate systems: Model, World, Eye, NDC, Clip, Screen. Introduction to the OpenGL Shading Language (GLSL) Attribute, Uniform, and Varying variables GLSL built-in functions and variables glman The GLSL API The GLSLProgram C++ class Vertex shaders
2	Jan 16	No class on January 16: Martin Luther King holiday. Stripes in model vs. world coordinates The smoothstep( ) function Checkers Z-buffer pollution Geometry Morphing GLSL Textures: unsigned byte, floating point, 2D, 3D, parameters, binding, texture units, multitextures, sampler functions Using textures in the vertex shader: displacement maps Noise: Positional, Gradient. Cubic and quintic interpolation. Fractional Brownian Motion (FBM, 1/f), turbulence. glman Noise Reading a noise texture Using noise to create terrain
3	Jan 23	More noise Lighting Disco-ball Lighting Bump mapping
4	Jan 30	SSAO Morphing Timer Noise Terrain
5	Feb 6	Cube mapping Reflection, Refraction More fun with vertex shaders: Dome projection, Hyperbolic geometry. Test #1 Review Test #1 goes live at 12:01 PM on Wednesday, February 8. It closes at 23:59 on Sunday, February 12. It wil consist of 40 questions, on Canvas, multiple choice, open notes. A Public Service Announcement: Valentine's Day is next week!
6	Feb 13	Happy Valentines's Day tomorrow! Discuss the Final Project. Image Manipulation Render to Texture
7	Feb 20	The optics of rainbows The optics of diffraction The optics of lenses Geometry Shaders A one-page PDF project proposal is due to me by 23:59:59 on Wednesday, February 22. Turn it in on Teach.
8	Feb 27	Geometry Shaders Tessellation shaders Scientific Visualization using shaders
9	Mar 6	Compute Shaders Click here to see the Compute Shader particle system from the class notes. Advanced Bump Mapping: Surface Local Coordinates Advanced Bump Mapping: Normal Mapping Advanced Bump Mapping: Parallax Mapping
10	March 13	Algorithmic Art Vulkan and its GLSL Shaders Test #2 review. Test #2 goes live at 12:01 PM on Wednesday, March 22. It closes at 23:59 on Sunday, March 26. It wil consist of 40 questions, on Canvas, multiple choice, open-notes. More Information

Live Lectures

Every Friday, staring at 3:00 PT, I will be hosting a Live Lecture. We will go over some current course materials and see live demos. The important thing is that it will be a time for you to ask live questions. Each LL will probably last anywhere from 60 to 90 minutes.

Attendance at the LLs is optional. These sessions will be recorded (see below) in case you missed them.

When the LL is over, this will become Zoom Office Hours until 6:00 PT.

Here is my Zoom-room.

LLV = Live Lecture Video

Week #	Video	Chat
1A	LLV	PDF
1B	LLV	PDF
2	LLV	PDF
3	LLV	PDF
4	LLV	PDF
5	LLV	PDF
6	LLV	PDF
7	LLV	PDF
8	LLV	PDF
9	LLV	PDF
10	LLV	PDF

Projects

Project Turn-In Procedures

• Your project turnins will be electronic.

• Your electronic turnin will be done at http://teach.engr.oregonstate.edu and will consist of:
  
  1. A PDF report. The PDF file should include:
     • A cover page (name, email address, project name)
     • Images
     • Key snippets of code
     • The link to a Kaltura video or YouTube video or Loom video (or something else that I can open and view), demonstrating that your project does what the requirements ask for. Narrate your video so that you can tell me what it is doing.
  2. Source files of everything (.cpp, .glib, .vert, .frag, .geom, .tcs, .tes).

• You can zip up all the files you are turning in except the PDF. Please turn it in separately so I can run my gather-up-all-the-PDFs script.

• If you need to re-upload any part of your project to Teach, re-upload everything. Teach treats each upload as a brand new submission. It does not accumulate things that you have previously uploaded.

• Submissions are due at 23:59:59 on the listed due date.

• I know some of you know the Cg and HLSL languages for shaders, but all GPU assignments must be done in GLSL.

• Your project will be graded and the score posted to your Canvas Grades If you lost any points, there will be a comment about it.

Bonus Days and Late Assignments

Projects are due at 23:59:59 on the listed due date, with the following exception:

Each of you has been granted 5 Bonus Days, which are no-questions-asked one-day extensions which may be applied to any project, subject to the following rules:

1. No more than 2 Bonus Days may be applied to any one project
2. Bonus Days cannot be applied to tests or quizzes
3. Bonus Days cannot be applied to the Final Project Proposal, the Final Project, or the CS 557 Paper Project

If you turn in a project three or more days late, your score is a zero.

If you turn in a project late and you don't have enough Bonus Days left to spend on it, your score is a zero.

You don't need to ask me, or even tell me, that you are using Bonus Days. Just turn your project in two-or-less days late. I have a script that will check your turn-in date and deduct the Bonus Days.

It is up to you to track how many Bonus Days you have used up. However, I also keep a spreadsheet of all of your Bonus Days. If you lose track, send me an email and ask.

Grading

Downloadable Files

Here is a folder with some of my favorite OBJ files.

Opening up the ShaderSampleWindows.zip or ShaderSampleLinux.tar or ShaderSampleMac.tar file will produce a folder full of all the other files you need. You do not need to go hunt the internet for any other files. Use the ones that have been given to you.

Windows Visual Studio 2019 Sample Program	ShaderSampleWindows.zip	Un-zip, get into the ShaderSampleWindows folder, and double-click on the .sln file, then select Build→Clean Solution, then select Build→Build Sample, then select Debug→Start Without Debugging
Linux Sample Program	ShaderSampleLinux.tar	Un-tar (tar -xvf ShaderSampleLinux.tar), then cd ShaderSampleLinux, then make sample, then ./sample
Mac Sample Program *	ShaderSampleMac.tar *	Un-tar (tar -xvf ShaderSampleMac.tar), then cd ShaderSampleMac, then make sample, then ./sample
Windows Visual Studio 2019 Shadows Program	Shadows2019.zip	Un-zip and double-click on the .sln file, then select Build→Clean Solution, then select Build→Build Sample, then select Debug→Start Without Debugging
BMP-to-Texture function	bmptotexture.cpp
Our own version of the sphere-drawing function	osusphere.cpp
The full version of the C++ class to use GLSL shaders	glslprogram.h, glslprogram.cpp
A cut-down version of the C++ class to use GLSL shaders (might be better for Macs)	glslprogramP5.h, glslprogramP5.cpp
Vertex Buffer C++ class	vertexbufferobject.h, vertexbufferobject.cpp
Code to load an OBJ file	loadobjfile.cpp
glm Folder	glm.zip	Un-zip into your VS project folder
Keytime Animation C++ class	keytime.h, keytime.cpp
2D Noise Texture	noise2d.064.tex
3D Noise Texture	noise3d.064.tex
Kelley Engineering Center test image	kec.bmp
The find shader	find.glib, find.vert, find.frag
Shader code to produce the rainbow and heated-object color scales	colorscales.txt
Mars Panoram	MarsPanoram.zip

* Previous Mac users in this class have recommended that, rather than use the trackpad, you go get a Bluetooth 3-button mouse. If you need to use the Mac trackpad, I've been told that a two finger click/tap works as a right click and option+click works as a middle click.

An alert CS 450/550 student put together these instructions for getting shadsrs to run on a Mac.

If you want to use an OBJ object in glman, download it and include it in your GLIB file like this:
Obj spaceship.obj

Or use an OBJ file in your C/C++ file by including the file loadobjfile.cpp into your own code. Then, place the .obj object into a display list:

// a global variable:
GLuint DL;

. . .

// do this in InitLists( ):
DL = glGenLists( 1 );
glNewList( DL, GL_COMPILE );
LoadObjFile( "spaceship.obj" );
glEndList( );

. . .

// and do this in Display( ):
Pattern->Use( );
. . .
glCallList( DL );
Pattern->Use( 0 );

Other Files

1. OpenGL/GLSL-related files
2. .obj files

3. Want to use the Nvidia Lobby in a cube map? Here are the files:
   nvposx.bmp
   nvnegx.bmp
   nvposy.bmp
   nvnegy.bmp
   nvposz.bmp
   nvnegz.bmp

4. Want to use the Kelley Engineering Center Atrium in a cube map? Here are the files:
   kec.posx.bmp
   kec.negx.bmp
   kec.posy.bmp
   kec.negy.bmp
   kec.posz.bmp
   kec.negz.bmp

Downloadable Executables

These executables are all loaded on the CGEL machines, but you can also get them here in case you want to run them on other Windows machines.

1. noisegraph.exe
2. glman.exe

You might also need these dlls:

1. glew32.dll
2. glut32.dll
3. libcd.lib
4. libcid.lib
5. msvcr71d.dll

Class Rules

MySSP @ OSU is an app that gives all OSU students, including Ecampus students, 24/7 access by text or phone with a licensed mental health counselor (MySSP stands for “My Student Support Program”). The app makes it easy to schedule short-term counseling appointments with the same ongoing counselor and provides educational materials covering mental health topics. Students can communicate with a counselor in five different languages (Mandarin, Cantonese, French, Spanish or English); additional language options are available upon request. Students can download the Anytime Anywhere: MySSP @ OSU and learn more about the service at http://beav.es/anytimeanywhere. For questions, please contact Bonnie Hemrick ( bonnie.hemrick@oregonstate.edu ), Director of Mental Health Promotion.

Establishing a Positive Community

It is important you feel safe and welcome in this course. If somebody is making discriminatory comments against you, sexually harassing you, or excluding you in other ways, contact the professor, your academic advisor, and/or report what happened at https://studentlife.oregonstate.edu/studentconduct/ reporting so we can connect you with resources.

Academic Dishonesty

You are expected to do your own work. Helping each other, with explanations or clarifications, is OK. Sharing code, however, is considered cheating. Anyone caught cheating will fail this class, and the matter will be turned over to the Dean's Office.

You are expected to read and understand Oregon State University's Statement of Expectations for Student Conduct, found here: https://beav.es/codeofconduct . If there is any parts of this document that you don't understand, ask me!

Students With Disabilities

Accommodations for students with disabilities are determined and approved by Disability Access Services (DAS). If you, as a student, believe you are eligible for accommodations but have not obtained approval please contact DAS immediately at 541-737-4098 or at http://ds.oregonstate.edu. DAS notifies students and faculty members of approved academic accommodations and coordinates implementation of those accommodations. While not required, students and faculty members are encouraged to discuss details of the implementation of individual accommodations.

Student Bill of Rights

OSU has twelve established student rights. They include due process in all university disciplinary processes, an equal opportunity to learn, and grading in accordance with the course syllabus. See: https://asosu.oregonstate.edu/advocacy/rights

Religious Holidays

Oregon State University strives to respect all religious practices. If you have religious holidays that are in conflict with any of the requirements of this class, please see me immediately so that we can make alternative arrangements.

Life Events

As {John Lennon? Allen Saunders?} has said: "Life is what happens to you while you're busy making other plans". I care about you as a person. When life happens to you, send me an email and come see me. I might be able to help. But I surely can listen. You are not alone.

Reach Out for Success

University students encounter setbacks from time to time. If you encounter difficulties and need assistance, it's important to reach out. Consider discussing the situation with me or an academic advisor. Learn about resources that assist with wellness and academic success at http://oregonstate.edu/ReachOut. If you are in immediate crisis, please contact the Crisis Text Line by texting OREGON to 741-741 or call the National Suicide Prevention Lifeline at 1-800-273-TALK (8255)

Basic Needs

Success at OSU means knowing and using your resources. One helpful resource is the community of staff available at the Basic Needs Center (BNC) for support (bnc@oregonstate.edu, 541-737-3747, https://studentlife.oregonstate.edu/bnc). Students can drop in during open hours and talk with a BNC student leader for resources, ideas and strategies connected to basic needs challenges. The BNC is often known for its food pantry but there are other resources connected to groceries and affording food and staff who can help you work through housing stressors. Undergraduate students, living in Oregon, are especially encouraged to explore SNAP (up to $236 in grocery money each month for eligible students) as a resource. Domestic undergraduate students living in Oregon are more likely than not to be eligible for SNAP. BNC staff are skilled with helping students navigate this process.

Additionally, the BNC Textbook Lending Program offers students the opportunity to check out required textbooks for the academic term.

Furthermore, if you are comfortable doing so, please talk with Professor Bailey. He will do everything he can to help you.

Other Notes You Might Enjoy!

Grades 2-12 Outreach
	Scratch (including Scratch Jr.)
	TinkerCad
	Blender
	Processing
	SketchUp

Other Useful Online Graphics and Shader Information

• OpenGL:
  • Industry-wide OpenGL Information: http://www.opengl.org
  • The OpenGL 1.1 State Machine Diagram http://www.opengl.org/documentation/specs/version1.1/state.pdf
  • Free OpenGL textbook rscfullbook.pdf
  • Another free OpenGL textbook http://openglbook.com/
  • The OpenGL 4.6 Reference Card can be found here.
    This is not absolutely essential to print out, but it can be really handy to have around.
  • OpenGL Man Pages: https://www.khronos.org/registry/OpenGL-Refpages/gl4/

• The GLUT Library:
  • PDF GLUT Documentation: https://www.opengl.org/resources/libraries/glut/glut-3.spec.pdf

• The GLUI Library:
  • OpenGL User Interface (GLUI) Documentation https://master.dl.sourceforge.net/project/glui/Documentation/GLUI%202/glui_manual_v2_beta.pdf?viasf=1

• GLSL:
  • The OpenGL 4.6 Reference Card, which includes a lot about GLSL, can be found here.
    This is not absolutely essential to print out, but they can be really handy to have around.

• WebGL:
  • Khronos group's WebGL Page: http://khronos.org/webgl
  • OSU WebGL site: http://cs.oregonstate.edu/~mjb/webgl
  • three.js: http://threejs.org/
  • JQuery user interface: http://api.jqueryui.com/
  • Ed Angel's WebGL site for his book examples: http://www.cs.unm.edu/~angel/BOOK/INTERACTIVE_COMPUTER_GRAPHICS/SIXTH_EDITION/CODE/WebGL/

• SIGGRAPH (The Special Interest Group on Computer Graphics): http://www.siggraph.org

• SIGGRAPH Online Computer Graphics Bibliography Database: https://liinwww.ira.uka.de/bibliography/Graphics/siggraph/index.html

• Game Information:
  • Game Developer: http://www.gamedev.net
  • Gamasutra: http://www.gamasutra.com

• 3D Models you can download:
  • Free 3D Models: http://thefree3dmodels.com
  • Level of Detail book support (free): http://lodbook.com/models
  • Florida State (free): http://people.sc.fsu.edu/~jburkardt/data/data.html
  • TurboSquid: http://www.turbosquid.com/Search/3D-Models/free/obj
  • Digimation (costs money): http://www.digimation.com

• Interesting visualization of the world's intercontinental networks https://www.infrapedia.com/

• WebGL isosurface of low-frequency 3D noise function http://kirox.de/test/Surface.html