How to compute the 2D equations of 3D circular arcs?

Question

I'd like to obtain these equations for the ellipses produced by the perspective projections of (3-dimensionally transformed) circles.

This is useful for rendering in 2D contexts which provide curve primitives. I'm using HTML5's canvas, so I get Beziers, arcs, and quadratic curves.

See here:

The projection of a sphere outside of the plane of projection is an ellipse because the view is a cone (silhouette of a sphere is a circle).

However if I want to draw my sphere using circular wireframes, that projection-cone is no longer a circular cone. So it's not your traditional conic section anymore.

How to deal with this?

Answer 1

I wouldn't bother with heavy maths to get that ellipse's equation. Here's what I recommend:

• Discretize your wireframe sphere (the usual way, using lattitude/longitude, or with a geodesic grid, or fancier). This gives you a list of 3D vertices;
• Transform them to screen space with the usual model-view-projection matrix;
• Then just render line segments between those transformed vertices.

Of course you've got line segments instead of arcs, but drawing arcs in an HTML5 canvas kills performance, so I wouldn't recommend it. Just subdivide your sphere until the result looks OK.

There's a bunch of 3D engines for Javascript that implement software rendering. For instance, you could have a look at Three.js for inspiration.

That's if you want to do it all yourself, on the CPU. You could also use WebGL, there's already a tutorial for that. Browser support is not very broad yet, but it's supposed to be the future.