Draw smooth cones using WPF and C#

The example Draw cones using WPF and C# shows how to draw cones in WPF and C#. This example shows how to draw smooth cones. Or at least smoother cones.

To make smooth cones, the program simply ensures that adjacent sides of the cone share the same vertices. The color of a point on a triangle depends on the angle between the viewing position, the surface normal (the vector perpendicular to the surface) at that point, and lighting direction. If two triangles share a vertex, then they share the same normal vector at the shared vertex. That gives them the same color at that vertex so they are smooth there.

In this example, that gives you smooth cones. If you look at the picture above, you’ll see that the cones’ sides are very smooth at both ends where the sides share vertices.

Points farther from a triangle’s vertices don’t match angles and normals as well so their colors are slightly different and you can see some banding. In the picture above, the cones are smooth near the ends but not as smooth in the middle.

The AddSmoothCone method uses the following code to generate the sides of the smooth cones.

// Make the sides.
// Add the points to the mesh.
int first_side_point = mesh.Positions.Count;
theta = 0;
for (int i = 0; i < num_sides; i++)
{
    Point3D p1 = end_point +
        Math.Cos(theta) * top_v1 +
        Math.Sin(theta) * top_v2;
    mesh.Positions.Add(p1);
    Point3D p2 = end_point + axis +
        Math.Cos(theta) * bot_v1 +
        Math.Sin(theta) * bot_v2;
    mesh.Positions.Add(p2);
    theta += dtheta;
}

// Make the side triangles.
pt1 = mesh.Positions.Count - 2;
pt2 = pt1 + 1;
int pt3 = first_side_point;
int pt4 = pt3 + 1;
for (int i = 0; i < num_sides; i++)
{
    mesh.TriangleIndices.Add(pt1);
    mesh.TriangleIndices.Add(pt2);
    mesh.TriangleIndices.Add(pt4);

    mesh.TriangleIndices.Add(pt1);
    mesh.TriangleIndices.Add(pt4);
    mesh.TriangleIndices.Add(pt3);

    pt1 = pt3;
    pt3 += 2;
    pt2 = pt4;
    pt4 += 2;
}

First the code loops around the circumference of the cone’s ends. For each angle theta around the circumference, the program creates two points, one at each end of the cone.

Next the code loops around the circumference again, this time using the points it previously created to define the cone’s sides. Because it reuses the same points for adjacent sides, the program produces smooth cones.

The following picture shows the difference between the regular cones drawn by the previous example and the smooth cones drawn by this one. The cones aren’t perfect, but they’re much smoother.

Download the example to see additional details.

To get even smoother cones, you can draw the cone sides in shorter pieces. I’ll show how to do that in my next post.