Page 10: Shader Tools and Examples

Back on Page  3  (GLSL and THREE), we talked about tools for developing shaders. Here, we’ll talk about them a little more.

One of the nice things about many of the shader tools (especially the web-based ones) is that they provide nice galleries of examples (often contributed by users). Some example galleries are:

• GLSL Sandbox
• ShaderToy
• The Book of Shaders
• ShaderFrog

For many of them (everything on the list above except ShaderFrog), the focus is on fragment shaders - the idea is that you always apply the fragment shader to every pixel in the image (effectively, the scene is one big rectangle). People do crazy things in these environments (like implementing an entire rendering system, and creating animations in it - for example WWI dogfight and Snake - warning, these links require a modern GPU and decent graphics card drivers).

Looking at other people’s shaders is useful. It can inspire you with ideas of things to do. It can give you examples of things to read to learn new tricks. Trying to read and modify another person’s work can be a good way to understand the concepts as well as their specific work. And, sometimes, the thing that you want has already been made by someone else (assuming they allow you to use it).

For class, we really want you to write some of your own shaders - since that’s the best way to check that you really understand things.

But, we also want you to look at other shaders (for the reasons listed above).

Remember: if you use things from someone else, give them proper attribution!

For this exercise to borrow someone else’s shader! Find a cool shader in a gallery or tutorial. And put it on an object in the class software framework in the box below. You must also explain in 10-workbook.txt file, to give attribution, as well as a brief description explaining how the shader works (to show that you read the code and tried to understand it).

Some things you’ll need to do:

1. You will need to adapt the shader to work within the Framework. Even if the shader is written in GLSL, you will need to make sure that it uses the correct uniforms and attributes provided by the THREE and the framework. You might need to correctly access THREE’s built-in uniforms and attributes, or you might need to add your own new uniforms. (adding attributes is trickier)

2. You will need to adapt the JavaScript programs to correctly load and set up the shaders. This may involve making new uniforms. You might want to add more objects or lights to show off the shader.

3. You will need to answer questions in the text box (below) including giving attribution to where you got the shader from. Please format the text so it is easy to read.

4. You will need to understand how the shader works (since that is one of the questions). Ideally, you’ll pick a shader that is complicated enough that you’ll have to think about it.

5. You will need to add the shader files and any images (textures) you use to the repo. The files 10-10-01.html, 10-10-01.js, shaders/10-10-01.vs and shaders/10-10-01.fs are all in place - you can edit them. If you add new files, make sure that things run in the box 10-10-01.html and all files are added to the repo.

The grading will be relatively loose for this. If you pick something easy (some simple shader that already works in THREE), or something complicated (that required a lot of adaptation and thinking), we might not know the difference. We won’t really know how much you understand the code. We’ll trust that if you do something for this assignment and say something reasonable, you really tried to fulfill the spirit of the assignment and deserve full points.

In the past (2020), we had hints about adapting shaders from ShaderFrog.

The End!

That’s the end of this workbook - and of the regular workbooks for the class! (there is the final project workbook)

Don’t forget to commit, push, and complete the handin survey! Next: Hand-in and Gallery