Practical method of putting circular shapes into perspective?

Question

Not entirely sure if this should belong on Stack Overflow, but here goes.

I'm creating a simple version of tic-tac-toe in 3D using the HTML5 <canvas> object. The first player uses the cross symbol, whereas the second player uses the circle symbol. The point is that I'm not sure how to put circular shapes into perspective.

Currently, the method I'm using is creating a regular polygon with as many angles as possible (to a certain extent, though) to fake a circle by drawing straight lines between those points. The coordinates of these points (angles) I have calculated using sine / cosine.

Using 6 angles:

Using 50 angles (looks like a circle well enough):

This works well, but it requires quite a lot of points to fake a circle nicely. Moreover, if I were to create a ball, I'd be in more trouble. The picture at Wikipedia, for example, shows that even with a great deal of points, it would still have a rather 'blocky' surface: http://en.wikipedia.org/wiki/File:Sphere_wireframe.svg

I was wondering if there is any way to put a circle in perspective more effectively, perhaps without points, so as to be able to create a realistic looking circular shapes in a more practical way.

Thanks in advance for any suggestions.

Answer 1

Your polygonal approximation of a circle is the practical way. It's very simple to compute coordinates and apply the perspective transformation to them. You should probably stick to that solution.

That said, the rabbit hole you're considering is VERY cool if you're into mathematical things. It turns out that all quadric surfaces - including spheres and ellipses - can be represented with a 4x4 matrix. Not only that, but once converted to a 4x4 you can apply all the standard 4x4 transformation matrices (it's not just a multiply). IIRC you can even apply the perspective transform to them and the result is still a quadric surface. Now that doesn't quite help you with 2D shapes in a 3d world. However, since a circle is the intersection of a cylinder and a plane and both can be transformed, there should be a solution to your problem.

Here is a link describing the representation and transformations of quadrics

As you have shown, the perspective projection of a circle on the ground is often a rotated ellipse in screen space. I do not have a transform method, but I do believe one exists and is more complex that what you've got now.