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 Greeble 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.

Firstly, let me complain that ‘greeble’ is an abhorrent word and should be banished.

Ok, now that’s off my chest… 😂

Greebles are small, repeated details added to a model to give it a sense of scale and a particular aesthetic. Certain classic sci-fi films popularized them, back when “model” more often meant a physical sculpture:

star-destroyer-back

If you’re familiar with how to extrude the polys on a mesh, as described in my procedural mesh extrusion tutorial, then you already know how to add greebles to one. Not to spoil the fun, but to put it simply:

Adding simple greebles to a mesh can be accomplished by extruding all of the polys of the mesh by a random length.

However, you might have noticed that the above tutorial focuses only on extruding triangles, whereas the header image for this tutorial has square greebles. I had set up the mesh so that it was split into quads, and many of the meshes in LT (and possibly in your game) are made of polys with more than 3 indicies. So, in this tutorial, we’ll learn how to extrude a poly with n indicies, and we’ll apply that algorithm across a whole mesh to add greebles. We’ll also learn a couple of ways to vary the greebling algorithm to get less uniform results.

Continue reading Procedural Greeble Tutorial

Simple Mesh Tessellation & Triangulation 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.

Sometimes, we want to add detail to a mesh without changing its shape. We may need to break up polygons with lots of verticies into triangles, a necessary step before handing it to the renderer; or prepare a mesh for a warp like stellation or extrusion to ensure that it’ll have lots of small details. This is where tessellation and triangulation come in handy! The algorithms I’m going to be showing in this tutorial break up the polys that make up a mesh without changing the shape of the mesh.

Continue reading Simple Mesh Tessellation & Triangulation Tutorial

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