I spent over 200 hours researching easy methods to make fluffy grass that I utilized in my mission Elysium. I needed to make use of a method that was easy, however extraordinarily efficient and performant sufficient to run on older gadgets.
On this detailed article, I’ll breakdown the entire strategies used and clarify how I made The Fluffiest Grass on the Net!
Desk of Contents
- Making a Terrain
- Well-liked Strategies for Creating Grass
- Tiled Grass Textures
- Alpha Playing cards/Billboard Grass
- Particular person Grass Blades
- Creating Billboard Grass
- Creating Grass Mesh
- Instancing
- Chunking
- LODs
- Enhancing Visible Attraction
- Faux Ambient Occlusion
- Shade Variation
- Animation
- Lighting and Shadows
- Video Tutorials
- Conclusion
Making a Terrain
First, I created a terrain in blender by sculpting a airplane mesh. I subdivided the airplane till it had sufficient element. On this stage, the extra vertices we have now the higher the outcomes might be. Utilizing the Sculpting instruments in Blender, I carved out my islands.
Then, I used the decimate modifier to selectively cut back the vertex depend in low element areas. This leads to a mesh that appears the identical as the unique, however the vertex depend is drastically lowered. That is one in all my favorite strategies to optimize fashions for the net. Now onto the fascinating part- creating grass.
Well-liked Grass Rendering Strategies
These are the preferred strategies used to render grass:
1. Tiled Grass Textures
That is the best methodology: making use of diffuse and regular map textures immediately onto the terrain. It’s quick however seems to be flat. Many older video games like The Legend of Zelda: Ocarina of Time used this methodology. Builders mapped a flat grass texture onto the terrain, counting on inventive shading to imitate grass. Equally, in low-poly video games or cell video games similar to Stardew Valley, tiling textures are nonetheless the go-to methodology for sustaining efficiency on much less highly effective {hardware} whereas delivering a stylized aesthetic.
2. Alpha Playing cards/Billboard Grass
Alpha textures are used to chop out the form of grass blades on easy airplane meshes. This methodology affords higher depth and realism whereas conserving the poly depend low. This method is right for rendering huge fields of grass and not using a efficiency hit. By making use of textures with transparency to flat planes, builders can simulate dense vegetation that reacts to lighting and motion. This strategy strikes a steadiness between visible high quality and rendering effectivity. That is the approach that we are going to be exploring on this tutorial.
3. Particular person Grass Blades
Every blade of grass is modeled and instanced. Whereas this gives probably the most realism, it’s computationally costly. Video games like Ghost of Tsushima showcase the great thing about this methodology, with each blade of grass reacting dynamically to wind and participant motion, making a deeply immersive setting. Nonetheless, this realism comes at a excessive computational value, making it much less viable for web-based tasks or functions focusing on lower-end gadgets.
Creating Billboard Grass
Welcome to the fascinating world of Billboard Grass. On this approach, an alpha texture is used to chop out a airplane, to appear like grass. Two or extra such intersecting planes are used to type a clump of grass that appears convincing from all instructions, besides when seen immediately from above. It seems to be like a criss-cross mess. Whereas it is a viable possibility, and it’s quick, I needed to see if there was any method to mitigate this concern.
Growing the density of grass wouldn’t resolve the criss cross concern. Subsequently, I got here up with an concept to extend the variety of planes and to rotate all of them such that the grass would nonetheless be seen when seen from above. Seems that I used to be not the primary particular person to give you the concept.😅
With this system applied, the grass mesh seems to be good when seen from any angle. Issues had been staring to look promising. I now had the right grass mesh.
Instancing
Naively growing the variety of meshes within the scene will result in extra draw calls, with every grass mesh taking on a single draw name. 1000 grass meshes = 1000 draw calls. Unacceptable! The answer is to make use of instancing! I created an instanced mesh and scattered grass situations in my scene. Nonetheless, after we enhance the variety of situations, the fps begins to drop. We hit a roadblock even earlier than reaching 500k grass situations.
Chunking
At this stage, the scene was rendering tens of millions of triangles in a single draw name, which isn’t best. The variety of draw calls in not the one issue that determines efficiency. I needed to cut back the poly depend within the scene on the expense of some extra draw calls. A method to try this is to benefit from the automated Frustum Culling characteristic in threejs. Frustum culling is the method by which objects which are exterior the digital camera’s view (frustum) aren’t rendered.
To utilize this characteristic, I divided the world into chunks after which I created grass situations inside every chunk. In different phrases, every chunk now has its personal InstancedMesh. I divided my terrain into equal components and created 16*16 = 256 chunks (this may be modified primarily based on the dimensions of terrain and efficiency). Although the draw calls had been up, the whole variety of polygons within the scene was now lower than 70-80% of our earlier step. 1 million grass situations was now attainable! However, the grass seemed sparse on the terrain, and I used to be hungry for some lush grass.
Now, I might virtually render tens of millions of grass situations on my MacBook. When constructing for the net, one should take into account the completely different gadgets that customers could have. Operating an online primarily based 3D software on a flagship machine isn’t any flex. I needed this run on my intel i3 laptop computer from 2018. To render extra grass, Frustum Culling alone was not going to chop it. I wanted one thing extra.
Stage Of Element (LOD)
That is the ultimate step within the optimization course of. We are able to cut back the poly depend of the grass blades which are farther away from the digital camera through the use of a grass geometry with lesser vertices. Since that is removed from the digital camera, the distinction is barely noticeable, if in any respect.
That is referred to as Stage of Element (LOD) and is a typical approach utilized in video video games to enhance efficiency. The LOD system works by rendering the grass at a decrease decision when the digital camera is way away. When the digital camera will get nearer, the grass is rendered at the next decision. This can be a frequent approach utilized in video video games to enhance efficiency. In my case, I utilized LOD per chunk with 3 ranges of element.
Grass is grass and grass is small. You possibly can’t see particular person blades of grass until you might be shut sufficient. Equally in our scene, grass that’s farther away occupies much less house on the display screen (just a few pixels). We are able to save treasured draw calls on rendering just a few pixels by not selecting to render grass past a sure distance from the digital camera. That is the place, including fog to the scene and matching the terrain to the colour of the grass can do wonders in hiding the sudden transition.
Enhancing The Visuals
I handed an alpha texture to the shader as a uniform, then, I copied the alphatest_fragment from three.js Shader Chunks, which primarily simply discards any pixels the place the alpha worth is under a given threshold.
Faux Ambient Occlusion
Faux Ambient Occlusion: I added two uniforms one for the bottom shade of the grass and one other for the tip shade. We combine these two colours alongside the uv.y worth, which supplies us a easy lerp of the bottom and tip shade. Simply including a darkish base shade, drastically modifications the looks of the grass by faking “shadows” on the backside.
Shade Variation
When the variety of grass situations is elevated, nevertheless, the grass seems to be lifeless and bland. In an effort to add some selection, I used a noise texture to create a mixture of two completely different tip colours.
Instantly, the grass seems to be extra lush and alive!
Animation
Till now, the grass has been static. All modifications have been restricted to the fragment shader. To animate the grass, we have to use the vertex shader. I exploit a sine wave for the wind impact, and so as to make the motion much less uniform, I added a scrolling noise texture to it.
Lighting and Shadows
Lighting and Shadows: As quickly as I added the sunshine shader chunks, I confronted two points:
1. The 2 faces of every grass card reacted in a different way to mild.
2. Lighting and shadow calculation are a number of the most costly operations we will carry out on our grass situations.
This instantly made it clear that I couldn’t have a couple of mild in my mission. To resolve these two issues, I made a decision to have only one directional mild in my mission. I then copied the uncooked fragment chunks associated to mild and eliminated all of the code till issues broke. Upon simplifying it, I extracted the shadow worth and used it to combine between the grass diffuseColor and a grass shadowColor. Though, this was removed from best, it suited my function of reaching a Stylized Look.
Video Tutorial
Listed below are two quick movies, I posted lately, explaining the method of making Fluffy Grass.
I usually publish tutorials and mini-breakdowns on my socials. Data too small to make it right into a full fledged article.
Conclusion
I additionally added three ranges of graphics settings which might be sure that my mission Elysium might run on all gadgets, together with cellphones. As a remaining contact, I handed the participant place as a uniform to the shader to deform the grass because the participant strikes.
With that, we now have the fluffiest grass on the internet! I hope this tutorial evokes you to push the boundaries of what’s attainable!
P.S.: Hey! If you happen to’ve made it this far, you is likely to be eager about one thing thrilling I’m engaged on. I’m constructing Mokubara—the best method to create gorgeous 3D mockups immediately in your browser, no superior 3D modeling or movement graphics expertise required. If you happen to’re an online designer or developer in search of a simple method to convey your tasks to life, test it out!
