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