Category
Visual Design
Interaction Design
Software Engineering

Published
Mar 5, 2019

Updated
Jan 17, 2024

Read
2 min

Tweet
Share
Comment

Procedural Spiral Mesh in Unity

Introduction

In visiting Washington State University's Webster Hall recently I came across an old infographic. It reminded me of similar ones I had seen as a child. Today as an adult with a design-eye, it resonates as a great way to communicate time-based relationships in a fairly compact space. I instantly wanted to make a modern version while taking the opportunity to improve some design decisions of the original designer(s).

Old School Spiral Info Graphic of Time

Earth has been around

Spiral Mesh

I looked in Unity's Asset Store in hopes of finding a tool for creating the base spiral mesh that I needed. In experimenting with a few options, none managed to provide what I was after. This fact in combination with my backburnered desire to learn more about procedural mesh generation lead me to the creation of Spiral.cs and this article.

Though I still have a few additional components that I'm finalizing (which allow intelligent plotting along the spiral and are fucking cool), the base Spiral.cs for spiral mesh generation and manipulation is done. Here's what the Unity editor UI looks like with the Spiral component:

Spiral Mesh in Unity Editor

Spiral component FTW

To get a working spiral, all you have to do is:

  1. Create an empty GameObject
  2. Add a Spiral component

Easy right? By default there is no material applied, so feel free to update that in the associated and automatically created MeshRenderer.

Spiral without Material

Before

Spiral with Material

After

Spiral Options

There are six options for customizing your spiral mesh. You can manipulate them in the editor (in Edit or Play mode) or animate them in code during runtime. The six options are:

  1. Radius - radius of spiral
  2. Width - width of surface that follows the spiral's radius
  3. Height - height of the surface that follows the spiral's radius
  4. Length - length of the spiral
  5. Sides - curvature of spiral edges
  6. Offset - spacing between spiral revolutions

Below are the same options with visualized examples.

Low radius example

Low radius

High radius example

High radius

Low width example

Low width

High width example

High width

Low height example

Low height

High height example

High height

Low length example

Low length

High length example

High length

Low sides example

Low sides

High sides example

High sides

Low offset example

Low offset

High offset example

High offset

If you end up using or forking Spiral.cs, don't hesitate to reach out on Twitter @derekknox and share what you are working on. Retweets are free. Get the source on GitLab.

GitLab - Unity Spiral Mesh

Conclusion

I've backburnered making a port and PR for Three.js so feel free to take the source and do so 😊

© 2008-2025 Derek Knox