Procedural shader techniques allow generating complex geometry and patterns directly in the shader. This opens up many possibilities for unique styling without heavy modeling work.
In this tutorial, we’ll explore a shader that produces randomized procedural shapes with controllable properties like sides, size, and rotation. The shader tiles seamlessly, making it great for backgrounds and environments.
We’ll go over the key node concepts that give this effect, and how you can customize the look. Let’s jump in!
[ad_1]
Contents: Procedural Shapes in Unity using Shader Graph
Video reference Procedural Shapes in Unity using Shader Graph
This Shader is available in Asset Store: https://bit.ly/lwrp-materials-3
Tiling the Pattern
The first step is setting up seamless tiling of the pattern across a surface.
Scaling Tiling with Object Size
To start, we can scale the tiling amount based on the object’s scale. This keeps the tiling frequency consistent if scaling the object up or down.
- Take the object’s scale vector
- Multiply it by a tiling amount parameter
- Use result as tiling for a Tiling and Offset node
As the object scales up, it will tile the pattern more.
Offsetting Columns
Next we’ll offset alternating columns so the shapes don’t line up in rows.
- Get just the X from the Tiling and Offset
- Round it down with a Floor node, giving us 1 value per column
- Add it into a Random node’s seed to generate differing random values per column
- Get a random Y offset value from 0 to 1
- Apply that to a second Tiling and Offset as the Y offset input
This shifts the pattern up or down randomly per column, breaking up the rows.
Generating Random Shapes
With our base tiling set up, now we can use it to generate randomized shapes.
Polygon Node
The Polygon node from Procedural Shapes offers an easy way to generate geometric forms.
- The Sides property sets how many sides the polygon has
- Width and Height control the dimensions
We can pass randomized values into these to get varied shapes.
Parameter Inputs
To control the randomization, we can use shader parameters:
- Max polygon sides
- Min/max width range
- Min/max height range
- Max rotation speed
These gives us control over the procedural generation.
Randomizing Properties
The basic approach for randomizing a property:
- Take tiling X and round down with Floor for unique seed per tile
- Add an offset to the seed to avoid correlations between properties
- Input seed into Random Range node
- Use Random Range values for polygon properties
Repeating this gives us different width, height, and rotation per shape instance while keeping the values within the specified ranges.
Coloring the Shapes
To add color variety, we can use a gradient sampled based on random values.
- Get a random value from 0 to 1 based on the tiling seed
- Sample a gradient texture using that value
- Use the gradient color to tint the polygon
The gradient can smoothly blend between colors or change sharply based on the type used.
This adds lots of variation to the pattern with just sampling a single texture.
Putting It Together
Combining all the pieces covered so far:
- Tile base pattern by object scale
- Offset columns randomly
- Use tiling to generate random seeds per shape
- Create polygons with randomized properties
- Sample color gradient based on random tiling value
- Output colored polygons with alpha
This gives us a shader that can produce unique procedural patterns like this:
And it tiles seamlessly allowing it to be scaled and repeated.
Animating the Shapes
To add motion, we can use the tiling seed to also randomize rotation speed.
- Get a random rotation speed value based on tiling seed
- Multiply it by Time to rotate over time
- Plug into Polygon node’s Rotation input
This will make each shape spin at different rates for an animated effect.
Performance Optimizations
Procedurally generating geometry in the shader can get expensive. Here are some tips for optimization:
- Limit polygon sides to reduce vertex count
- Don’t randomize properties every frame – cache in texture instead
- Use lower resolution for tiling to avoid generating more shapes than needed
- Fade opacity towards edges of surface to limit fill rate
- Use GPU instancing to draw shapes efficiently when possible
Example Use Cases
Some examples of how this procedural shapes shader could be used:
Abstract Backgrounds
With colorful gradients, it creates nice abstract backgrounds and environments that tile seamlessly.
Scifi Panels
For a scifi look, use fewer sides and edge lines to create panels and plating.
Decorative Patterns
With more controlled randomness, it can generate decorative patterns for fabrics or wallpapers.
The possibilities are endless!
Conclusion
Here’s a summary of the key points covered:
- Tile base pattern using object scale
- Offset columns randomly
- Use tiling to generate seeds for shape properties
- Create procedural polygons with randomization
- Sample color gradient based on tiling
- Animate rotation for added motion
- Lots of options for different looks and styles
Procedural shaders are a fun way to add detail and variety to your projects. The node-based logic enables complex effects without hand-modeling every asset.
This should provide a solid introduction to the concepts and techniques involved in procedural shaders using Unity’s toolset. Let me know if you have any other procedural shader topics you want to see covered!
Check more articles on our blog
[ad_2]