shader

Hello all! Welcome to the Shader Workshop page!

Taught by: Char Stiles (contact@charstiles.com) @charstiles

In this workshop, you will learn how to livecode shaders by creating a visual composition with GPU code and a little bit of math. 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 music visualizers, or any interactive abstract graphics of the sort. We will briefly go over how to use the shaders we create in a variety of other real-time engines like Unity, p5.js & touch designer.

You will learn about where the shader exists in the graphics pipeline, the basics of how the language works, and how to quickly iterate on writing your shader using livecoding tools. You will also be given a plethora of tools to build upon what you learn, so you can keep learning and practicing beyond this workshop.

Schedule

9:00 – 9:15 EDT (15 min) Introduction.

9:15 -10:05 EDT (50 min) We will go through the check points together (see below)

10:05 – 10:20 EDT (15 min) Go off into groups of 4 for workshopping time in shader.place

10:20 – 10:35 EDT (15 min) Break! I will stick around and answer more questions. (There is a possibility this might get eaten up by going through the checkpoints)

10:35 -10:50 EDT (15 min) We will go to each shader.place room to look at the creations each group has made. & I will take questions and present my tips and some steps going forward to learn more about shader coding.

Links

👋 The Force by Shawn Lawson the editor we are using: https://shawnlawson.github.io/The_Force/

👯‍♂️👯‍♀️ Shader place is a collaborative shader editing tool, good for sharing creations online. We will use it in our breakout rooms. The main difference is that time is passed in as u_time. https://www.shader.place/

🎞 Link to my presentation slides: https://docs.google.com/presentation/d/1M5lDJ0x1iCOLQTn8EGdI8vIGpGSqvAfsxmJ0s7jngVQ/edit?usp=sharing

Tools

🧰 Here you can find the GLSL sticker sheet: https://gist.github.com/CharStiles/e6fec016967c6c8fd648aa4b6c0055cc

here is Inigo Quilez’s page for 2D SDF: https://www.iquilezles.org/www/articles/distfunctions2d/distfunctions2d.htm

🧮 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/18rq4ybrru

Code

Checkpoint 0: Fundamental

Here we will learn polar coordinate, color channel, scale, sin, cos and time.

https://gist.github.com/CharStiles/c49fd09c26d6c0c22cc79dd440c7df3d

 

Checkpoint 1: Color

Here we learn using palette and combining colors to explore a bit: https://gist.github.com/CharStiles/5a74e98dfb644786e3d0a614f09741f5

Checkpoint 2: Shape

https://gist.github.com/CharStiles/c90432f65f56819be25afd7a1d5551aa

Checkpoint 2: Shape movement

https://gist.github.com/CharStiles/a80a060136aad4aff27cbed6c472e4c2

Checkpoint 2: Adding Shapes

https://gist.github.com/CharStiles/39ac653485e137a76292e1d14ca2a2ee

Templates

Touch Designer: https://drive.google.com/drive/folders/1u2_IrBhG5SM6gyy4VYdy73VvFQxejT9Y?usp=sharing

Unity: https://gist.github.com/CharStiles/5ebc0fddd938e601da7323ea357d0fdc (this also moves vertices)

Unity Sticker Sheet: https://gist.github.com/CharStiles/787c2e3e898b68f7e2ca1acbdc0262b5

p5: https://glitch.com/~p5-shader-ex

Homework! (optional)

Create an object in Unity and color it using shaders in a way that “makes sense”

“Makes sense” can be interpreted broadly. Some options:

  • Make a lava lamp where the inside blobs are driven by a shader.
  • Make some bubbling soup.
  • Make washing machine where the window part is a shader.
  • Make a ghost!

This homework is most of all meant to be a prompt to encourage exploration, which is why its left to broad interpretation.

Next Steps

These are some specific suggestions from me if you want to continue learning but don’t know how to start.

💜Join a community!

Shader.Zone is a a safe and inclusive discord to talk about shaders, tools, generative art, and more! Started by my friends Conner Bell and Patricio Gonzalez Vivo: https://shader.zone/

💙Watch the Twitch stream Curiously Minded!
It was started by two former students of mine who met at a workshop that was just like this one!: https://www.curiouslyminded.xyz/ This is their stream: https://www.twitch.tv/curiouslyminded/

💚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

http://immersivemath.com/ila/index.html

🌟Learn more about GLSL shader functions:

https://www.shaderific.com/glsl-functions

📽Learn more math that is relevant from an awesome YouTube channel

https://www.youtube.com/channel/UCYO_jab_esuFRV4b17AJtAw

📈Some easing functions if sin & cos get boring 🙂

https://easings.net/en