This week we started talking about textures and particle systems, fundamental real time visual effects that are a critical additions to your tool belt.

Textures are straightforward -- you look up a color with the texture glsl function and a uv coordinate.

in vec2 uv_out;
uniform sampler2D theTexture;
// ...
vec4 textureColor = texture(theTexture, uv_out);

What happens if we mess with uv_out? If we multiply it? run it through sin? pow? abs?

Particle systems combine work on the CPU, vertex shader, and fragment shader to make visual effects out of a large number of small quads that share an attribute structure but get unique values. This makes good use of the strengths of the GPU and you can make a lot of particles!

We also looked at linear interpolation, often shortened to lerp.

lerp(a, b, t) = a * (1 - t) + b * t

Where t is between 0 and 1 and a and b are numbers or vectors of any dimension.

This formula is ubiquitous in computer graphics and your engine or framework will often provide you with an implementation. But its also simple enough that being able to recreate it and recognize it in the wild is helpful.

If a linear interpolation is too bland, you can also "sculpt" the value by passing it through an easing function -- a function that takes a value between 0 and 1 and returns another value between 0 and 1, but with a different "shape" to its graph. Many such functions are documented here: https://easings.net/ and other places online.

Key Takeaways

  1. Textures are 2D grids of data -- generally pixels from an image -- you can sample with uv values between 0 and 1 from a shader
  2. Particle systems take advantage of instance functionality on GPUs to repeat some attributes while advancing others

Further Reading/Viewing