Untitled

Hello all! Welcome to the page for Unity Shader in the Looking Glass Stream!

Taught by: Char Stiles (char@lookingglassfactory.com) @charstiles

This stream will introduce you to Unity’s Shading Language, which allows you to code powerful graphics programs directly on your computer’s graphics card. We’re going to contain it to just the shader, and everything you learn can be extended to other shader environments. Char will walk through creating a color palette, movement and shapes using just one shader to create a visual composition on the Looking Glass.

Schedule

12:00 – 12:15 ET (15 min) Introduction.

12:15 – 1:05 ET (50 min) We will go through the check points (see below)

1:05 – 1:20 ET (15 min) I will go over sticker sheet and other tools to learn more about shader writing

1:20 – 1:50 ET (30 min) Free form shader writing, I will explore some shader techniques depending on what you all want to see. That can involve creating shapes, modifying space, quick math tips etc.

1:50 – 2:00 ET (10 min)  I will present my documentation tips and some steps going forward to learn more about shader coding (I will also go over the creation prompt).

2:00 onward I will answer any lingering questions.

Links

👋 Download Unity 2020+  : https://unity3d.com/get-unity/download

👯‍♂️👯‍♀️ Download Looking Glass Unity Plugin: Scroll down and its under “Developer tools”. You have to log in or make an account to download: https://lookingglassfactory.com/software

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

Looking glass resources for Unity developers: https://lookingglassfactory.com/software

Looking Glass Portrait: https://lookingglassfactory.com/portrait

Code

Checkpoint 0: Fundamental

Here we will learn polar coordinate, color channel, scale, sin, cos and time. :https://gist.github.com/CharStiles/2d8e47d3a61c45b0ac785155e438f06e

 

Checkpoint 1: Color

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

 

<shaderworkshop2 gif>

Checkpoint 2: Final

Here we use space transformations to explore a bit: https://gist.github.com/CharStiles/5ebc0fddd938e601da7323ea357d0fdc

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

Creation prompt! (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 or a cauldron.
  • 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