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

Intro to Procedural Geometry, Part 3

This is an immediate follow-up to Intro to Procedural Geometry, Part 2. If you don’t yet know how to generate a cube, make sure to read Part 1 and 2!

This tutorial assumes you know:

  • Basics of using Unity (creating objects, attaching scripts, using the inspector)
  • How to code in C# (or at least a similar language)
  • The high-level of how 3D geometry is represented in code (vertices and triangles)
  • How to use Unity’s Mesh API to create geometry
  • How to create a plane mesh in code
  • How to create a cube’s vertices and triangles

This tutorial will teach you:

  • How normals & UVs work
  • How to texture procedural meshes (part 4)

For your reference, here’s the final code for a procedural cube. Make sure to read the linked file and the file titled Shape in the same repository folder!

Let’s get to it!

Continue reading Intro to Procedural Geometry, Part 3

Intro to Procedural Geometry, Part 2

If you follow me on Twitter, you’ll know that I post polls to determine the content of these tutorials! Y’all are keeping up the trend of voting for this procedural geometry series, so as requested, here’s part 2 😀

If you missed Intro to Procedural Geometry, Part 1, and you’re unfamiliar with how vertices and triangles work, I highly recommend checking out that tutorial first.

This tutorial assumes you know:

  • Basics of using Unity (creating objects, attaching scripts, using the inspector)
  • How to code in C# (or at least a similar language)
  • The high-level of how 3D geometry is represented in code (vertices and triangles)
  • How to use Unity’s Mesh API to create geometry
  • How to create a plane mesh in code

This tutorial will teach you:

  • How to create a cube’s vertices and triangles
  • How normals & UVs work (part 3)
  • How to texture procedural meshes (part 4)

Let’s get started!

Continue reading Intro to Procedural Geometry, Part 2

Intro to Procedural Geometry, Part 1

If you follow me on Twitter, you’ll know that I posted a poll to determine the content of this tutorial! With almost half the votes, an introduction to procedural geometry was the winner.

So, this tutorial will teach you the bare basics of creating procedural geometry in Unity!

Unity has a tutorial on creating a plane in code, but it’s lacking in pictures and assumes that you already know what “vertices” and “triangles” mean. A few other people have written good tutorials on procedural geometry, but I wanted to write one that easily flows into the other procedural geometry tutorials that I write.

Although this tutorial uses Unity, all of the concepts (other than the specific calls to Unity’s API) are applicable to most other engines.

This tutorial assumes you know:

  • Basics of using Unity (creating objects, attaching scripts, using the inspector)
  • How to code in C# (or at least a similar language)

This tutorial will teach you:

  • The high-level of how 3D geometry is represented in code (vertices and triangles)
  • How to use these concepts to create geometry with code
  • How to use Unity’s Mesh API to create geometry
  • How to create a plane mesh in code
  • How to create a 3D cube (part 2)
  • How normals & UVs work (part 3)
  • How to texture procedural meshes (part 4)

Here’s what we’re going to learn to create today! It’s not fancy, but it’s important to understand all of the basics before moving on.

planeScreenshot

Continue reading Intro to Procedural Geometry, Part 1

Procedural Sphere / Ellipsoid Tutorial

DISCLAIMER #1: Code presented here is pseudocode that does NOT necessarily reflect production Limit Theory code.

DISCLAIMER #2: This tutorial assumes you have at least basic knowledge of 3D geometry and related math.

I’ve seen plenty of tutorials for procedural spheres online, but most of them present the pseudocode (or even worse, language-specific code) for a sphere without explaining why it works. But if you want to really learn how to create procedural meshes – especially creative ones like torii or mesh warps like stellation and extrusion – it helps massively to first understand how the simple ones work.

Continue reading Procedural Sphere / Ellipsoid Tutorial

Procedural Torus Tutorial

DISCLAIMER #1: Code presented here is pseudocode that does NOT necessarily reflect production Limit Theory code.

DISCLAIMER #2: This tutorial assumes you have at least basic knowledge of 3D geometry and related math.

The torus is probably my favorite shape right now because of the contrast between how daunting it looks to build and how beautifully simple it actually is. I never thought I would be good at math, much less enjoy it, but here I am, a professional graphics programmer, loving and learning math-heavy algorithms. Visualizing math made all the difference. The torus is a stunning example of how beautiful math can actually be,  once you get away from dry, academic, rote math and into the applied realms of proceduralism, graphics, and games.

I want to take the time to explain why these algorithms work on a conceptual level. If you understand why they work, it’s an easy leap from the simple torus on the left of the header image to the fancy torus on the right.

Continue reading Procedural Torus Tutorial

Procedural Mesh Extrusion Tutorial

DISCLAIMER #1: Code presented here is pseudocode that does NOT necessarily reflect production Limit Theory code.

DISCLAIMER #2: This tutorial assumes you have at least basic knowledge of 3D geometry and related math.

This week, I’m writing as many procedural generation tutorials as I can to help out participants of #PROCJAM! Today, I’m going to explain how to extrude the triangles in a mesh. For the purpose of this tutorial, extrusion is the process of copying all of the verticies in a triangle and translating them in the direction of the surface normal, so that you end up with a triangular prism.

Continue reading Procedural Mesh Extrusion Tutorial

Procedural Stellation Tutorial

DISCLAIMER: Code presented here is pseudocode that does NOT necessarily reflect production Limit Theory code.

A quick intro to me: I’m a programmer at Procedural Reality, an indie game studio creating an infinite, procedural space exploration game called Limit Theory. You can follow @LimitTheory on Twitter if you want to see where these cool screenshots come from. In addition, all of the code presented here (in non-pseudocode form, lol) will be available and moddable once Limit Theory is released. So if you like this tutorial, be sure to keep in touch. ;0

EVERYTHING in Limit Theory is procedurally generated- including all geometry, down to every vertex and triangle. My job is to create procedural space ships and space stations. I’ve been building up a library of basic shapes to be the building blocks of these ships and a library of warps to make these shapes ~interesting~.

Note: This tutorial assumes you have at least basic knowledge of 3D geometry and related math.

Today, I want to share with y’all an algorithm for stellation. For the purpose of this tutorial, stellation is the process of extruding a triangle to converge at a point, to create a tetrahedron- a pyramid made of 4 traingular faces. The word comes from similar roots to the word “star”, as when you apply it to a polyhedron, you end up with a star shape.

Continue reading Procedural Stellation Tutorial