Shaders and Puddles

Hey everyone! This is Spencer! We’re diving into the technical side once again; today we are talking a little bit about shaders. I mentioned them briefly the last time I wrote, so this is a good chance to go into more detail on what shaders are! Though they’re not my personal area of expertise, I have been working on a custom shader for our puddles that sends out small, colored waves when Fella steps into them, as well as making rain splashes.

UM_puddles_01
The shader randomly generates points for ripples

At their most basic, shaders are powerful graphics programs that calculate how an object is rendered (i.e. how light interacts with it). Complicated shaders have expanded to non-shading purposes, but today we will just be focusing on the rendering of the object. Shaders are especially powerful due to their speed. They’re fast because they are often made to run on the GPU (Graphics Processing Unit) of the computer in parallel. This means that the shader runs many versions of itself and outputs pieces of the whole image or object, which is much faster than going one by one. In its ‘simplest’ form, shaders come with two stages, the vertex shader and the fragment shader. The vertices of the mesh are the mathematical points that connect together to make faces, and all those faces combine to make the object.

The fragments are the rendered area in-between each of the vertices. The vertex shader comes first, and it primarily calculates data on positions, rotations normals, and more. This data is then passed onto the fragment. The fragment shader is where it takes the positions in-between vertices and interpolates data from the closest surrounding vertices to determine the value the fragment should be. Fragment shaders set the final colors based on where the final interpolated position would be on the texture map, calculate final lighting effects based on the normal data passed in, and other final details. The fragment shader lets the programmer make fine-detail effects on the mesh where vertices don’t exist due to the power of interpolation.

medium
Image from medium.com. If you’re looking for an even deeper, programming explanation of shaders, check out this article: https://medium.com/@nithstong/2d-colored-triangle-in-elm-with-webgl-2a9b2734ce77

In the example of the puddle shader, most of the processing is done in the fragment shader. The vertex shader passes in the vertices’ position and normal data to the fragment shader, which then takes in variable data, which is when we pass the shader an impact position (like Fella’s foot colliding with a puddle) and distance. After calculating a distance using the fragment’s interpolated position, the shader decides to color the fragment bright if it is between a maximum and minimum distance. The normals are also changed to a random direction, then slowly changed back to match the actual normal of the plane to give a nice lighting effect where the wave disturbs the reflected light for a moment.

The vertex shader could also have been used to raise the vertex positions based on the wave location to make an actual physical wave in 3D, however, we refrained from this choice for our game’s aesthetic and minimizing vertices (as it would take a lot of vertices to get a smooth effect.)

Shaders are running in every game with amazing effects, and are used in creating water, reflections, refractions, and more. Every nearly modern game relies on their power to define their looks and impress audiences. This is just a small example! Many shaders have several layers of effects and calculations!

UM_puddles_02
Fella’s footsteps create ripples as she runs

Shaders are running in every game with amazing effects, and are used in creating water, reflections, refractions, and more. Every nearly modern game relies on their power to define their looks and impress audiences. This is just a small example! Many shaders have several layers of effects and calculations!

Thanks for reading, and we look forward to our last month of development!

Spencer

umbrellaforWeb

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s