17:23
How I made grass better than 99% of games | Stylized grass 3D pixel art
Dylearn
Overview
This video details the creation of stylized, high-quality grass for 3D games, focusing on shader techniques rather than simple asset placement. It covers methods for adding visual variety through color and accent grass, simulating realistic wind effects with world-space rotation and noise textures, and creating a sense of depth with fake perspective. The tutorial also explores advanced features like low-frame-rate animation, character-reactive grass displacement, and a hybrid toon shading technique for smoother lighting transitions. Finally, it touches upon simulating animated clouds using global shader variables and noise textures.
How was this?
Save this permanently with flashcards, quizzes, and AI chat
Chapters
- Grass is generated using a multimesh instance node with quad meshes.
- Quads are oriented to face the terrain's Z direction for correct lighting.
- A base shader is applied, using an albedo texture and alpha scissor for transparency.
- Shadow casting is disabled, and quads are bill-boarded to always face the camera.
This establishes the basic visual representation and technical foundation for the grass, ensuring it's correctly positioned and lit before more complex effects are added.
Using a grass sprite as the albedo texture and setting the alpha scissor to one to remove unwanted parts of the sprite.
- Visual variety is achieved through color patches and accent grass.
- Color patches are created by sampling world-space noise textures and comparing them to a threshold to select different grass colors.
- Accent grass uses a random seed based on instance ID to modify a subset of grass quads in size, height, color, and sprite.
- These techniques are applied to both grass and the underlying floor for consistent visual appeal.
These methods break up the uniformity of the grass, making it appear more natural and less repetitive, which is crucial for visual realism in games.
Sampling a noise texture at world coordinates and using its value to decide whether a specific grass quad should have a different color or sprite.
- Grass rotation is shifted from view-space to world-space for better wind simulation.
- Wind is simulated by sampling a noise texture at world coordinates, modulated by time, speed, and direction.
- The rotation axis is calculated as the perpendicular vector to the wind direction.
- To avoid repetitive patterns, two noise textures are sampled with different speeds and UV scales, using irrational numbers to ensure they rarely align.
World-space rotation allows for a more convincing and consistent wind effect that behaves realistically across the game world, independent of camera orientation.
Using a noise texture with time, speed, and direction parameters to determine how much and in which direction each grass quad should rotate.
- Fake perspective is added in the fragment shader by scaling the top part of quads based on their movement relative to the camera.
- UV coordinates are manipulated to scale the grass sprite, creating an illusion of depth.
- A low-frame-rate animation effect is achieved by quantizing the time value used for sampling wind noise.
- To prevent laggy visuals where all grass updates simultaneously, each instance's animation phase is offset using its world location as a seed.
These techniques enhance the visual fidelity by simulating depth and adding a unique, stylized animation quality reminiscent of hand-drawn art.
Modifying the UV coordinates of a grass quad based on its wind-induced rotation and its Y-axis UV value to simulate perspective scaling.
- Grass displacement is made reactive to player movement.
- An intensity mask based on distance from the player controls the strength of the displacement effect.
- Dot products are used to calculate rotation around view-space X and Z axes, based on the player-to-grass vector and camera direction.
- Multiple character interactions are supported by passing an array of character positions and radii to the shader, with a workaround for fixed array sizes.
This feature makes the game world feel more dynamic and responsive, as the grass reacts realistically to characters moving through it.
Calculating a circular gradient around the player and using it to determine how much the grass quads should bend away from the player.
- Hybrid toon shading smooths transitions between lighting cuts while retaining a stylized look.
- It uses a gradient around rounded lighting values to blend between adjacent light bands.
- Clouds are simulated using a 2D noise texture stored as a global shader variable.
- Light intersection with a world-space height is calculated using ray marching along the light direction to sample the noise texture for diffuse lighting.
These advanced techniques refine the visual presentation by improving lighting continuity and adding atmospheric elements like dynamic clouds.
Using a noise texture and ray marching along the light direction to determine where light intersects a cloud layer, affecting the scene's diffuse lighting.
Key takeaways
- Shader programming is essential for creating unique and advanced visual effects in games, going beyond basic asset application.
- Visual variety in natural elements like grass is crucial for realism and can be achieved through procedural techniques like noise sampling.
- Simulating natural phenomena like wind requires understanding world-space transformations and using noise textures to introduce organic variation.
- Creating a sense of depth and perspective in 3D games can be achieved through 'fake' techniques within shaders, especially with orthogonal cameras.
- Interactive elements, like grass reacting to characters, significantly enhance player immersion and the dynamism of the game world.
- Advanced shading techniques like hybrid toon shading can blend stylized aesthetics with smoother visual transitions, improving overall polish.
- Global shader variables and shader include files are powerful tools for managing and reusing complex shader logic across different game elements.
Key terms
Multimesh Instance NodeShaderAlbedo TextureAlpha ScissorVertex ShaderFragment ShaderVaryingsBuilt-in VariablesWorld SpaceNoise TextureInstance IDBillboardOrthogonal CameraUV CoordinatesDot ProductRay MarchingGlobal Shader VariablesShader Include FileHybrid Toon Shading
Test your understanding
- How does using world-space noise textures contribute to the visual heterogeneity of the grass?
- Explain the purpose of calculating a perpendicular vector to the wind direction when simulating grass rotation.
- What is the primary challenge addressed by implementing 'fake perspective' in the grass shader, and how is it achieved?
- Describe the technique used to offset the animation phase of individual grass instances to avoid a laggy appearance.
- How does the hybrid toon shading technique improve upon standard toon shading for game visuals?