Skip to main content

BOTW Style Anime Grass

Nintendo's 2017 release, "The Legend of Zelda: Breath of the Wild", had many striking visual elements. It's beautiful terrain includes winding rivers, snow-capped mountains and even fiery volcanoes. Most memorable of all was it's lush open fields with tall grass swaying in the wind.

You could spend hours riding your horse around these relaxing meadows. Listening to the calming ambient music, broken up by the occasional Guardian fight

Last year, I came across a great video on YouTube by Kristof Dedene showing a technique for making anime style style grass in the 3D software, Blender. I was impressed by the simplicity and wanted to recreate it using WebGL.

To begin with, I needed to determine how to draw a blade of grass. I settled on using 5 vertices. The low number of vertices would improve performance and allow more grass to render..

To create each grass blade, I needed to find it's center position and a random rotation angle. Using this angle, I pushed out from the center to find the location of the bottom 2 vertices. I repeated this for the top 2 vertices but only going out half as far. Next, I set vertical height of each vertex to a pre determined number. I could tweak these numbers to change the general appearance of the field.

To find the UV coordinates, I normalized the center position (relative to the size of the field) to be between 0 and 1. Each blade would appear as a single color that was sampled from the underlying texture. Looking across the field, it appeared as a changing gradient.

I also used vertex colors to assign the bottom 2 vertices as black, middle as gray and the top one as white. More on this in a moment.

Once I had my field generated, I would need a shader for rendering it.

There are 2 parts to a shader. A vertex shader which controls the shape of the geometry and a fragment shader that controls how it renders. You write them using a "C Like" language called GLSL.

I passed a time value into the vertex shader, and used this with the Sin function to offset blade vertices. I checked the vertex colors to determine which vertex it was. The bottom vertices were not moved at all. The middle were offset a little and the single one at the top moved the most. This gave the effect of grass swaying in the wind.

In addition to the time value, I also added the UV position of the vertex in the Sin function. This results in the blades moving at different times, giving the appearance of wind gusts.

Finally, In the fragment shader I passed in 2 textures. The first was a splattered green texture for the grass blades to sample from. The second was a black and white cloud image, which when scrolled, gave the illusion of clouds casting shadows.

Source Code

Github