Basic Math for Shaders

I never thought I was going to be able to do graphics programming because I believed I was bad at math. The only class I failed in college was a math course. And yet here I am, actually doing decently well at handling math subjects!!

Visualizing math has made all the difference. Abstract math means nothing to me, and I don’t expect it to mean anything to you either. But that doesn’t mean you’re not good at math- it might just mean you have untapped potential at geometry and visual-based math!

The best way to use this tutorial is probably to either a) reference it when you’re confused about or forget the meaning of a term used in another tutorial (for example, a tutorial says “get the surface normal” or “transform into X space” without explaining what that means) or b) reading it as a primer for more complex discussions of the subjects presented.

To really harness the math involved in this tutorial, you’ll need to do a combination of experimentation and research: start writing code to experiment with the terms you learn, and read books that go more in-depth explaining the math involved.

Or, you could do what I did, and use it as a brush-up on your graphics-related linear algebra skills before having a technical interview.¯\_(ツ)_/¯

This tutorial is going to cover how the following math topics apply to representing 3D geometry:

  • What vectors and matrices represent
  • Vector addition & subtraction
  • Vector cross products & surface normals
  • Vector normalization
  • Vector dot products
  • Matrix * vector multiplication

Continue reading Basic Math for Shaders

Ice Shader in Unity

Hey y’all! Today, I want to show you how I created this ice / crystal shader. There are three parts to this effect:

  1. The transparency with opaque, white edges
  2. The iridescent bumpy texture
  3. The distortion effect behind the ice

All of these effects are reusable for other kinds of shaders.

For example, if you’re successful, you’ll be able to apply the distortion effect to anything, like the water shader!

watergif

For your reference during the tutorial, here’s the final code for the shader.

–> Link to final code for Unity Ice Shader

 


Continue reading Ice Shader in Unity

Cel Shader with Outline in Unity

Today, I want to cover two super popular topics for shaders in Unity:

  1. How to create cel-shaded lighting
  2. How to create an outline effect

In addition to this code, you may want to check out the Unity graphics settings for this tutorial, which are important for lighting a cel-shaded game well.

If you like this post, be sure to follow me on Twitter 🙂

If you’ve never written shader code before, or used Unity, you still may get plenty out of this post, because the algorithms used to write the cel shader and the outline are applicable to any shader. If you do write shader code in Unity, you’ll find the rest of the techniques extra helpful 🙂

This is the end result, applied to an adorable Boston Terrier model made by amazing artist Kytana Le:

finished dog shader

And here’s the full code for you to reference while following the tutorial:

–> Link to final code for the cel and outline shader

Continue reading Cel Shader with Outline in Unity