Vertex Shaders
So far, I’ve been primarily writing 2D shaders to create patterns on a flat canvas. In practice, shaders can also be applied to 3D objects to manipulate not only their textures but also their shape.
To start, let’s take a look at a simple 2D shader placed on a 3D cube.
Notice that the texture remains flat but is effectively cropped onto the projection of the cube. Ideally, we’d like the texture to wrap over the cube instead.
Shaders With Normals
Normals refer to vector data stored at each vertice of a mesh. The vector points perpendicular from the mesh and gives us information on which way this vertice is facing. We can use this information to make sure our shader gets properly transformed onto each side of the shape instead of covering its profile.
Timing Functions
It’s easy to add moving parts to a shader by including a u_time term. However, if you want more interesting motion, you should be interested in adding shapes and curves using functions.
Slope Step
This was my first implementation of a start and stop timing function. It’s very close to working but has a fatal flaw.
float slope_step(float x) {
float c = .5*floor(x)*ceil(sin(x*PI));
float b = .5*floor(x+1.)*ceil(sin(x*PI-PI));
float a = x*ceil(sin(x*PI))-floor(x)*ceil(sin(x*PI));
return a + b + c;
}
Notice how the shader occasionally glitches positions. Because we need to hardcode a value for PI, the imprecision causes our sine waves to not line up where we need them to and instead, return unexpected values at those junctures.