Ghost of Tsushima: Procedural Grass
1. GHOSTOF TSUSHIMA
Procedural Grass
A small red square logo with the letters 'SP' in white, located in the bottom right corner of the image.
This is a highly detailed and atmospheric landscape painting in a style reminiscent of traditional Chinese ink wash art, but with a more dramatic, almost cinematic lighting. The scene is dominated by a massive, multi-tiered waterfall that cascades over a dark, rocky precipice. To the right of the waterfall, a hillside is covered in dense, autumnal foliage in shades of orange, red, and brown. Perched atop this hillside is a complex of traditional Chinese architecture, featuring multiple levels of dark, tiled roofs with upturned eaves and white walls. The architecture appears to be a fortress or a palace. In the foreground, a figure on horseback stands on a small, grassy patch near the base of the waterfall, looking towards the scene. The ground is covered in lush green grass and small white flowers. A flock of white birds is seen flying across the misty air near the base of the waterfall. The sky is filled with large, billowing white clouds that catch the light, creating a dramatic contrast with the darker areas of the landscape. The overall mood is one of grandeur and tranquility.
A misty, atmospheric scene featuring two figures in a pond, a stone path with lanterns, and large, gnarled trees. The scene is set in a traditional East Asian garden or temple grounds. In the foreground, two figures are wading through a shallow pond. One figure, dressed in dark traditional robes, holds a long staff or sword aloft. The other figure, also in traditional attire, is positioned slightly behind and to the side. The water is calm, reflecting the surrounding environment. To the left, a stone path leads up a gentle slope, lined with several glowing lanterns that cast a warm, golden light. The path is bordered by large, dark, gnarled trees with thick trunks and dense foliage. In the background, a misty hillside rises, dotted with more trees and a few distant lanterns. The overall mood is serene and mysterious, with a soft, hazy light filtering through the trees and mist.
This is a painting of a winter landscape, heavily covered in snow. In the middle ground, a traditional Japanese wooden torii gate stands prominently. To its left, a small, partially snow-covered shrine building is visible. The foreground is filled with a dense layer of snow, interspersed with dark, thin blades of grass and some dried, brownish plant matter. The background shows rolling hills or mountains, also blanketed in snow, under a pale, overcast sky. The overall style is painterly, with visible brushstrokes and a soft, atmospheric quality. The color palette is dominated by whites and greys of the snow, with dark browns and blacks providing contrast in the vegetation and the wooden structure.
A scenic landscape featuring a dirt path leading through a field of white flowers and green grass towards a wooden torii gate. In the background, there are dense green trees, a red building, and snow-capped mountains under a clear blue sky. The foreground is dominated by a wide, light-brown dirt path that curves slightly to the right. On either side of the path are patches of tall, vibrant green grass. In the middle ground, a large field of small white flowers stretches across the landscape. A traditional Japanese wooden torii gate stands in the center of this field. Behind the gate, a dense forest of tall, slender evergreen trees rises. To the left of the trees, a large, leafy tree casts a shadow on the ground. In the far background, a red brick building is visible on a hillside, and beyond that, a range of mountains with significant snow cover. The sky is a clear, deep blue.
A digital rendering of a misty forest landscape. In the foreground, a lush green hillside covered in tall grass slopes upwards from the bottom left towards the center. Several tall, slender pine trees are scattered across the hillside, some standing alone and others in small groups. A thick layer of white mist or fog flows across the base of the hill and fills the lower right portion of the image, partially obscuring the ground and the lower branches of the trees. In the background, more pine trees are visible, some appearing as silhouettes against a bright, hazy sky. The overall atmosphere is serene and ethereal, with soft lighting and a cool color palette dominated by greens and whites.
- • Compute shader
- • Data pipeline
- • Vertex shader
- • Pixel shader
- • Miscellaneous
An abstract, high-contrast, black and white image with a textured, painterly appearance. It features dark, vertical, brushstroke-like elements against a lighter, textured background, suggesting a stylized landscape or architectural structure.
An aerial, high-angle view of a lush landscape. A dark blue river flows from the top center towards the bottom right, winding through a valley. The riverbanks are lined with dense forests of trees with vibrant golden-yellow foliage. In the upper left, a small wooden bridge crosses a tributary. To the left of the river, a dirt path winds through a green field, dotted with several large, dense clusters of small white flowers. In the background, misty mountains are visible under a soft, hazy sky. The overall atmosphere is serene and picturesque, suggesting an autumn or early spring setting.
A landscape photograph featuring a vibrant green field in the foreground, divided by a network of faint, light-colored lines. The field is bordered by a dense line of trees with bright yellow foliage. In the background, rolling hills and mountains are visible under a cloudy sky. A small, dark structure is nestled among the yellow trees on the right side. The overall scene is a mix of natural elements, with the green field and yellow trees providing a strong contrast to the darker background.
This image is a 3D visualization of a terrain map, likely generated from a digital elevation model (DEM). The terrain is represented by a color gradient where blue indicates lower elevations and red indicates higher elevations. A grid of rectangular blocks is overlaid on the terrain, with colors transitioning from blue in the foreground to green and then to red in the background. A river flows through the landscape, and a dense forest of yellow trees is visible on the right side. A small, dark-colored house is nestled among the trees. The sky is a clear blue with some light clouds.
1.1. Placing a Grass Blade
- • Turn lane ID into position on tile grid, jitter
- • Distance culling and frustum culling
- • Determine grass type and height from texture at position
- • Drop lanes that don't have grass
- • Occlusion culling
A dense field of tall grass, viewed from a high angle. The foreground is dominated by a large, irregular patch of bright blue grass, which appears to be a different variety or perhaps dyed. This blue patch is surrounded by a thick carpet of green grass. The grass blades are long and thin, creating a textured, almost chaotic pattern. The lighting is even, highlighting the vibrant colors of the grass.
A top-down view of a dense field of tall, thin grass. The majority of the grass is a vibrant yellow-green color. In the lower half of the image, there is a large, irregular patch of bright blue grass, which appears to be a different variety or perhaps a digital overlay. The grass blades are long and slender, creating a textured, almost chaotic pattern. The background grass is slightly more out of focus than the foreground patch.
1.2. Generating a Grass Blade
- • Position (3 floats)
- • Facing (2 floats)
- • Wind strength at position
- • Per-blade Hash
- • Grass Type
- • Clump facing (2 floats)
- • Clump color
- • Height
- • Width
- • Tilt
- • Bend
- • Side Curve
A vibrant, high-resolution digital landscape featuring a dense field of tall, green grass in the foreground. The grass blades are long and thin, with a slight wave to them, suggesting a gentle breeze. In the middle ground, a cluster of large, grey, craggy rocks sits on a slight rise. To the left of the rocks, a small, dark, rectangular structure, possibly a gazebo or a small building, is partially visible. The background is filled with a dense forest of tall, thin trees with green foliage. The sky is a clear, bright blue. The overall scene is a peaceful, naturalistic environment, likely a screenshot from a video game or a digital art rendering.
The diagram shows a 2D grid with x and y axes ranging from 0 to 3. A central point at (1, 1) is labeled 'sample point'. Several arrows originate from this point and point to various colored dots scattered across the grid, representing different data samples or textures being accessed. The dots are colored blue, green, red, and purple. The arrows indicate the direction of sampling or data flow.
| Sample Color | Approximate Coordinates (x, y) |
|---|---|
| Blue | (0.5, 2.5) |
| Green | (1.2, 2.5) |
| Red | (0.8, 0.8) |
| Purple | (1.8, 1.8) |
| Red | (2.3, 1.8) |
| Purple | (2.8, 2.2) |
| Blue | (1.8, 0.5) |
| Green | (2.8, 0.5) |
A vibrant, high-resolution digital landscape. The foreground is dominated by a dense field of tall, green grass that appears to be blowing in a breeze, creating a sense of movement. To the left, a cluster of large, grey, craggy rocks sits on a slight incline. A small, light-colored path or stream bed winds through the rocks and grass. In the background, a dense forest of tall, thin trees with green foliage stretches across the horizon. The sky is a clear, bright blue. The overall scene is a lush, naturalistic environment, likely a render from a video game or a digital art piece.
A vibrant, high-resolution digital landscape. The foreground is dominated by a dense field of tall, green grass that appears to be blowing in a breeze, creating a sense of movement. In the middle ground, several large, grey, craggy rocks are scattered across the terrain. To the left, a small, dark wooden structure, possibly a gazebo or a small shrine, is partially visible among the trees. The background is filled with a dense forest of tall, thin trees with green foliage. In the far distance, a mountain peak is visible under a clear blue sky. The overall scene is bright and sunny, with strong shadows cast by the rocks and trees.
A vibrant, high-resolution digital landscape. The foreground is dominated by a dense field of tall, green grass that appears to be blowing in a breeze, creating a sense of movement. To the left, a cluster of large, grey, craggy rocks sits on a slight incline. In the background, a dense forest of tall, thin trees with green foliage stretches across the horizon under a clear blue sky. A small, dark wooden structure, possibly a gazebo or a small building, is visible among the trees on the left. The overall scene is bright and sunny, with strong shadows cast by the rocks and trees.
A vibrant, high-resolution digital landscape. The foreground is dominated by a dense field of tall, green grass that appears to be blowing in a gentle breeze. To the left, a cluster of large, grey, textured rocks sits on a slight incline. A small, dark wooden structure, possibly a gazebo or a small shrine, is partially visible behind the rocks. In the background, a dense forest of tall, thin trees with green foliage stretches across the horizon. The sky is a clear, bright blue. The overall scene is a peaceful, naturalistic environment, likely a screenshot from a video game or a digital art render.
A vibrant, high-resolution digital landscape. The foreground is dominated by a dense field of tall, green grass that appears to be blowing in a breeze, creating a sense of movement. To the left, a cluster of large, grey, craggy rocks sits on a slightly elevated patch of land. A small, light-colored path or stream bed winds through the rocks and grass. In the background, a dense forest of tall, thin trees with green foliage stretches across the horizon. The sky is a clear, bright blue. The overall scene is a lush, naturalistic environment, likely a screenshot from a video game or a high-quality digital rendering.
graph LR; C1[compute 1] --> BC[blade count]; BC --> C2[compute 2]; C2 --> IDA[indirect draw args]; C1 --> ID[instance data]; IDA --> V[vertex]; ID --> V; V --> P[pixel];
The diagram illustrates a data pipeline with the following components and flow:
- compute 1 (blue box) is the starting point.
- compute 1 outputs to blade count (gray box).
- blade count outputs to compute 2 (blue box).
- compute 2 outputs to indirect draw args (gray box).
- compute 1 also outputs directly to instance data (gray box).
- indirect draw args outputs to vertex (green box).
- instance data outputs to vertex (green box).
- vertex outputs to pixel (orange box).
1.2.1. DATA PIPELINE
The diagram illustrates a data pipeline architecture. On the left, there are two vertical gray boxes, each labeled "instance data buffer". Arrows from these buffers feed into a series of four horizontal processing blocks. Each block is composed of four colored segments: a blue segment labeled "compute 1", a blue segment labeled "compute 2", a green segment labeled "vertex", and an orange segment labeled "pixel". The first block is connected to the top "instance data buffer". The second block is connected to the bottom "instance data buffer". The third block is connected to the top "instance data buffer". The fourth block is connected to the bottom "instance data buffer". The pipeline shows a staggered flow where data from both buffers is processed in parallel through the same sequence of stages.
High LOD
15 vertices
A tall, thin, black wireframe tower structure standing on a green grassy field. The tower is composed of many small, interconnected triangles, creating a smooth, tapering silhouette. The background is a blurred, light-colored landscape.
Low LOD
7 vertices
A tall, thin, black wireframe tower structure standing on a green grassy field. The tower is composed of a few large, interconnected triangles, creating a simplified, blocky silhouette. The background is a blurred, light-colored landscape.
A tall, thin, black metal structure, possibly a marker or a small tower, stands vertically in the center of a field. The structure is composed of a central vertical pole with several horizontal rungs and diagonal bracing, forming a series of triangles. The ground is covered in green grass, interspersed with patches of dry, brownish-yellow grass and scattered dry leaves. The lighting is bright, casting a soft shadow of the structure onto the ground to its right.
A diagram illustrating a vertex shader input. It consists of a 2x2 grid of blue squares. Each square contains a black dot in the bottom-left corner and a red 'X' in the top-right corner. This represents a 2x2 grid of vertices, where each vertex is defined by its position (black dot) and a texture coordinate (red 'X').
A diagram illustrating a vertex shader output. It consists of a single teal square. Inside the square, there are four black dots arranged in a 2x2 grid, representing the output vertices. This represents a single vertex, where the position is defined by the black dot.
High LOD
15 vertices
A wireframe rendering of a sword hilt, showing a complex structure with 15 vertices. The hilt is positioned on a grassy ground. The wireframe is composed of white and black lines, highlighting the detailed geometry of the pommel, guard, and crossguard.
Low LOD
7 vertices
A wireframe rendering of the same sword hilt, but with a simplified geometry using only 7 vertices. The structure is much less detailed, appearing as a basic outline of the hilt's main components. The background is the same grassy ground.
1.2.2. Cubic Bezier curve
- • Position easy to calculate
- • Derivative easy to calculate
- • Use derivative to find normal
- • Moving control points changes blade shape
- • Useful for animation
- • Useful for varying appearance of grass
A graph illustrating a curve controlled by bend. The x-axis ranges from 0 to 10, and the y-axis ranges from 0 to 8. A blue curve starts at the origin (0,0) and ends at approximately (9, 9). A black dot marks the midpoint of the curve at approximately (3, 8.5), labeled "midpoint". An orange arrow points from the text "controlled by bend" to the curve, indicating the parameter that controls the curve's shape.
| x | y |
|---|---|
| 0 | 0 |
| 2 | 4 |
| 4 | 6.5 |
| 6 | 8 |
| 8 | 9 |
| 9 | 9 |
- • Evaluate Bezier curve
- • Get normal orthogonal to facing
- • Step vertex in width direction
- • Evaluate Bezier derivative curve
The image shows a 3D perspective view of a textured surface, possibly a ground plane with a green and brown pattern. A black Bezier curve is drawn on the surface. A yellow arrow labeled "surface normal" points upwards from a vertex on the curve. A grey arrow labeled "Bezier derivative" points along the curve, indicating the direction of the derivative at that point. The curve is composed of several segments, and the derivative arrow is shown at one of the vertices.
This image displays a 3D visualization of a point cloud or a mesh, likely generated from a depth sensor like a LiDAR scanner. The surface is represented by a grid of points or small squares, each colored according to its vertical position (height or depth). The color scheme follows a gradient: blue and purple for the lowest points, transitioning through green and yellow to red and orange for the highest points. The terrain features a prominent central depression or valley, with a small, dark, vertical object standing within it. The background is dark, suggesting a night-time scan or a lack of ambient light, with some faint outlines of trees or structures visible in the distance.
Flat
normals
A blue sword is shown against a background of a colorful, noisy texture. The sword's surface is smooth and uniform in color, indicating that the normals are flat and do not vary across the surface.
Rounded
normals
A blue sword is shown against a background of a colorful, noisy texture. The sword's surface is smooth and uniform in color, indicating that the normals are rounded and do not vary across the surface.
A low-angle, close-up shot of a vast field of tall, vibrant green grass. The blades are long and slender, some standing upright while others lean over, creating a dense, textured appearance. The grass fills the foreground and middle ground, extending to a flat horizon line. Above the horizon, the sky is a clear, uniform light blue, occupying the upper half of the frame. A single, long blade of grass is prominently featured in the upper left foreground, extending diagonally across the frame. The lighting is bright and even, suggesting a sunny day, with no visible shadows or clouds.
A low-angle, close-up view of a cornfield. The foreground is dominated by large, vibrant green corn leaves, some of which are slightly out of focus. The plants are densely packed, and their long, pointed leaves create a sense of depth and texture. In the background, the field stretches out to a flat horizon under a clear, bright blue sky. The lighting is bright and even, suggesting a sunny day. The overall composition emphasizes the lushness and growth of the crops.
A wide-angle photograph of a vast, flat agricultural field. The foreground and middle ground are filled with dense, green crops, likely corn or a similar grain, growing in neat rows. The plants are vibrant green and appear to be in the early stages of growth. The field extends to a straight, level horizon line. Above the horizon, the sky is a clear, pale blue, with a slight gradient from a lighter hue near the horizon to a slightly deeper blue at the top. The overall scene is bright and open, suggesting a sunny day in a rural or agricultural setting.
A wide-angle photograph of a vast, flat landscape covered in dense green vegetation, likely a field of tall grass or reeds. The vegetation is lush and green, with individual blades visible in the foreground. The field extends to a flat horizon line under a clear, pale blue sky. The lighting is bright and even, suggesting a sunny day. The overall composition is simple and emphasizes the expanse and uniformity of the natural environment.
- • Output material data to G buffers
- • Gloss- 1D texture
- • Diffuse- Two textures
- • 1D texture for vein
- • 2D texture for color and alternate colors
- • Translucency- Constant value
- • AO- Constant value
A vertical rectangular inset image showing a close-up of a textured surface, likely a tree trunk or bark. The texture is detailed with various shades of brown and tan, showing natural patterns and imperfections. A bright white vertical highlight or scratch runs down the center of the image, creating a strong contrast with the darker, textured background.
A dense field of tall green grass with white feathery seed heads, likely a type of ornamental grass, growing in a field. The grass is illuminated by bright sunlight, creating strong highlights and shadows. The foreground shows the lower green blades of the grass, while the background is filled with the white seed heads. The lighting is bright, suggesting a sunny day, and the overall scene is a lush, natural landscape.
A vibrant, high-quality digital landscape scene. The foreground is dominated by a vast field of white, daisy-like flowers with green foliage, stretching across the lower two-thirds of the frame. A narrow, light-brown dirt path winds through the field, starting from the left and curving towards the center. To the left of the path, a calm blue lake reflects the sky, bordered by a dense line of trees with bright yellow foliage. To the right, a lush green forest of tall, leafy trees stands on a gentle slope. In the background, a rocky, mountainous peak rises against a clear blue sky with a few wispy clouds. The overall scene is bright and colorful, suggesting a sunny day in a fantastical or idealized natural setting.
A screenshot of a rural landscape, likely from a video game. The foreground and middle ground are dominated by a large field of harvested rice stalks, arranged in neat rows. Several large, conical haystacks are scattered throughout the field. In the lower-left foreground, two white geese are visible, one standing and one partially submerged in a small pool of water. To the right, there is a dense, green vine-covered wall or fence. In the background, a dense forest of tall, thin trees (possibly bamboo or birch) stretches across the horizon. A small, white shrine-like structure with a thatched roof is visible on the left side of the background. Further back, a few traditional houses with thatched roofs are nestled on a hillside. The sky is clear and blue, with a few wispy clouds. The overall scene depicts a peaceful, rural setting during the harvest season.
An aerial view of a lush, rocky landscape. A river flows through the center, surrounded by dense green forests and rocky terrain. In the foreground, a sandy beach meets the water, with three small, simple huts or structures built near the shore. The background features more rugged, rocky hills and a small, distant settlement or village. The scene is bathed in bright sunlight, creating strong shadows and highlighting the textures of the rocks, sand, and foliage.
A samurai, seen from behind, stands in a field of tall green grass and white flowers. He is wearing dark armor with red lacing and a shoulder guard. He holds a sword in his right hand. The landscape is a vast field of white flowers, possibly a rice paddy, with a river flowing through it. In the background, there is a dense forest of green trees and a large, rocky mountain under a blue sky with some clouds. A small bridge is visible on the right side of the river.
This is a digital landscape rendering, likely from a video game. The scene is set in a coastal or marshy area. In the foreground, a dirt path leads from the bottom center towards the middle ground. The path is flanked by dense, tall grass with long, thin blades. The grass on the left has white, feathery seed heads, while the grass on the right is mostly green. The path itself is brown and shows some signs of wear and small puddles. In the middle ground, the path continues towards a body of water. On the far side of the water, there is a harbor or port area. Several large, traditional-looking sailing ships with multiple masts and sails are docked or anchored. The ships have a reddish-brown hull and white sails. In the background, there are more ships and some distant landmasses or mountains under a clear blue sky with a few wispy clouds. The overall lighting is bright, suggesting a sunny day. The image has a slightly stylized, high-quality digital art feel.
A black and white photograph capturing a dense thicket of tall, slender grasses or reeds. The plants are clustered together, with their long, narrow leaves creating a complex, layered texture. The foreground is dominated by a large, bright white area, likely due to overexposure, which obscures the lower portions of the vegetation. The background also features a bright, washed-out section, suggesting a continuation of the field or a distant horizon. The overall composition emphasizes the verticality and density of the natural growth.
A black and white photograph capturing a dense cluster of tall, slender grasses or reeds. The plants are positioned on the left side of the frame, leaning slightly towards the right. Their long, narrow leaves create a complex, layered texture. The base of the plants meets a light-colored, sandy surface, which occupies the lower right portion of the image. Sharp, dark shadows are cast from the base of the grasses onto the sand, indicating a strong light source from the upper left. The background is a bright, featureless white, likely representing a body of water or a very bright sky, which contrasts sharply with the dark foliage and shadows.
A close-up, low-angle shot of a dense patch of green grass growing on a sandy, textured ground. The grass blades are long, narrow, and vibrant green, with some showing signs of being cut or broken. They are growing in a somewhat uniform, dense clump. The ground is a mix of light brown and tan sand, with visible ripples and small indentations, suggesting it might be a beach or a dune area. The lighting is bright, casting soft shadows from the grass onto the sand. The overall composition is simple, focusing on the texture and color of the natural elements.
A scenic landscape featuring a river, a bridge, and a large, mossy rock formation in the foreground. The foreground is dominated by a large, light-colored rock formation with a flat top covered in green moss and patches of dry grass. The rock face is steep and shows signs of weathering. To the left, a river flows, its water reflecting the sky. In the background, a stone bridge with multiple arches spans the river. The surrounding area is lush with green grass and some trees, with shadows cast across the mossy rock surface.
This image captures a vibrant forest floor scene. The foreground and middle ground are dominated by a thick, undulating carpet of green ferns, their fronds creating a complex, textured pattern. Interspersed among the ferns are patches of reddish-brown soil and smaller, low-lying plants. In the lower-left corner, a clump of tall, thin grasses adds to the variety of vegetation. To the right, a large, weathered log lies horizontally across the fern-covered slope. The background is filled with tall, slender trees with light-colored bark, their trunks rising vertically towards a canopy of green leaves. Sunlight filters through the trees, casting soft, dappled shadows across the ferns and the forest floor, creating a sense of depth and tranquility. The overall color palette is rich with various shades of green, accented by the earthy reds of the soil and the warm tones of the tree trunks.
A diagram consisting of a 2x4 grid of blue squares. Each square contains a single black dot in its center. The grid is divided into two columns and two rows by thin black lines.
A diagram consisting of a single large teal square. Inside the square, there are four black dots arranged in a 2x2 grid pattern, corresponding to the positions of the dots in the blue grid to its left.
A digital rendering of a misty forest landscape. In the foreground, a lush green hillside covered in tall grass slopes upwards from the bottom left towards the center. Several tall, slender pine trees are scattered across the hillside, some standing alone and others in small groups. A thick layer of white mist or fog flows through the valley between the hills, partially obscuring the trees in the distance. In the background, more forested hills are visible under a pale, overcast sky. The overall atmosphere is serene and ethereal, with soft lighting and a cool color palette dominated by greens and blues.
THANKS
Questions? @ericwoh
A small red logo located in the bottom right corner of the slide. It consists of the letters 'SP' in a white, bold, sans-serif font, enclosed within a red rounded square border.
1.3. ACKNOWLEDGEMENTS
The logo for GH5T, featuring the letters 'G', 'H', and 'T' in a bold, sans-serif font, with a circular icon containing a stylized upward-pointing arrow between the 'H' and 'T'.
Jasmin Patry
Bill Rockenbeck
Adrian Bentley
Matt Pohlmann
Tom Low
Dave Elder
Joanna Wang
WE ARE HIRING!
A small red square logo with the letters 'SP' in white, located in the bottom right corner of the image.
Outerra's 2012 blog post-