Pie chart shader

Here’s a clipboard_image.11method for drawing beautiful 3D lit pie charts, without rendering geometry.

First, you need an artist that can produce the following images:

  • A circular gradient mapped on a 3D pie object
  • Diffuse lighting of the pie
  • Specular lighting of the pie

Warning: It’s not easy to do the gradient in photoshop, as it uses a strange gradient curve by default. I think it is something like a smoothstep. It really looks better than a linear gradient, but in this case, make sure you’ve got linear, otherwise you might end up looking for nonexistent bugs in your code, because this messes up the pie’s proportions.

Also, use orthographic projection, because perspective looks just wrong when you have to display proportions.

The images should look like this:


Pie gradient (top left), Diffuse (top right), Specular (bottom left) and Combined.

Combine all the components as the RGB channels of a color image. The bottom-right image displays the combined result.

Then, in order to render the pie, create a 1D (256×1) texture containing the colors you want to paint your pie with. For example, if you want a pie with two segments: 50% red and 50% blue, write red to the first 128 positions of your texture and blue to the last 128.

Render the image as a sprite and in the shader:

  • Sample the 1D texture using the pie gradient
  • Multiply that by the diffuse component
  • Add the specular component

That’s it! And it’s about as complex as rendering a progress bar.

It is also easy to animate this, by changing the 1D texture every frame, or by applying an offset while sampling the 1D texture, to give the impression that the whole thing rotates in 3D.

You can download my Unity shader and texture here.



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s