Hello all! Welcome to the Webcam Shader Workshop page!
Take the first steps to wielding the power of shader code by shading your webcam feed. The shader language we are using is GLSL is the OpenGL Shading Language, a C-like programming language that allows you to to code powerful graphics programs directly on your computer’s graphics card. In this workshop, you’ll learn how to livecode GLSL shaders using an online software. Livecoding is a method of programming in which one’s changes to the code are realized immediately and in real-time. This is an ideal way to create realtime graphics.
No programming experience required, but recommended.
11:00 – 11:15 PDT, 2:00 – 2:15 EDT (15 min) Introduction.
11:15 – 12:00 PDT, 2:45 – 3:00 EDT (45 min) We will go through the check points together (see below)
12:00 – 12:30 PDT, 3:00 – 3:30 EDT (30 min) break off into groups for workshopping time.
12:30 – 12:45 PDT, 3:30 – 3:45 EDT (15 min) Those who wish can show their music visualizer.
12:45 – 1:00 PDT, 3:45 – 4:00 EDT (15 min) I will take questions and present my 4 tips and some steps going forward to learn more about shader coding.
👋 The Force by Shawn Lawson the editor we are using: https://shawnlawson.github.io/The_Force/
🎞 Link to my presentation slides:https://docs.google.com/presentation/d/1LxDxkTdhUj9HGO6GvTmKXhQwQLCi3MtTwDLEhxt8bx0/edit?usp=sharing
🌈 CODAME Slides for the exact code we wrote in one nice page that also has link to the form to upload your shader and the feedback form: https://docs.google.com/presentation/d/1BSxE8vugE8V2Y_MPry9Yon12TBawbLFPNxannDPz67s/edit#slide=id.g1fd4179d34_1_114
🖼 UPLOAD your shader for the gallery (it’s also in the CODAME slides up there but I thought I’d link it here again 🙂 https://forms.gle/U4GTxYciMVbvtUaa6
🧰 Here you can find the glsl sticker sheet: https://gist.github.com/CharStiles/783675b1229221be108cfbb1c430e094
🧮 Here is an online graphing calculator, very helpful when writing shaders: https://www.desmos.com/calculator
Here is the cosPalette function graphed out: https://www.desmos.com/calculator/rz7abjujdj
Checkpoint 0: Fundamental
Here we will learn about coordinates, color channels: https://gist.github.com/CharStiles/f2121d97c055752c4d332f1cfe0ce1ce
Checkpoint 1: CosPalette
Here we will learn about mixing and cosinePalette
Checkpoint 1: Backbuffer
Here we will learn the backbuffer and offsetting coordinates.
Checkpoint 2: Final!
(its okay if we just get up to here): https://gist.github.com/CharStiles/da7453dfff7b99b2873c92aa4ce9251f
Checkpoint 3: Final Bonus
This is the last checkpoint. Here we learn about the snoise function and offset some more :https://gist.github.com/CharStiles/422ab3f47412d68fa94adab44decdacb
This is the shader that I made for the promo (the hand video in the slides): https://gist.github.com/CharStiles/30db59b4c8c84ece18bafabce88d3f1e
These are some specific suggestions from me if you want to continue learning but don’t know how to start.
Learn the maths from The Book of Shaders
** If you haven’t looked at this already, look through it! Its wonderfully paced and has a lot of versatile useful information: https://thebookofshaders.com/
More online math
Learn more about GLSL shader functions:
Learn more math that is relevant from an awesome youtube channel
Some easing functions if sin & cos get boring 🙂