Take the 2-minute tour ×

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:

projection of sphere is ellipse

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?

share|improve this question
Hi @StevenLu, could you post me the link to a working version? Or just email it to me: yannbane@gmail.com. –  jco Apr 30 '12 at 12:15

1 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.

share|improve this answer
Indeed, performance testing will tell me if using the curve primitives in canvas are actually worth using as opposed to lines. I was hoping somebody could tell me about elliptical cone conic sections. Maybe I'll ask on math.stackexchange. –  Steven Lu Apr 30 '12 at 15:18

Your Answer


