How to draw a 3D sphere?

Question

I want to draw a 3D ball or sphere in HTML 5.0 canvas. I want to understand the Algorithm about how to draw a 3D sphere. Who can share this with me?

Answer 1

Update: This code is quite old and limited. There are libraries for doing 3D spheres now: http://techslides.com/d3-globe-with-canvas-webgl-and-three-js/

---

Over ten years ago I wrote a Java applet to render a textured sphere by actually doing the math to work out where the surface of the sphere was in the scene (not using triangles).

I've rewritten it in JavaScript for canvas and I've got a demo rendering the earth as a sphere:

_{(source: haslers.info)}

I get around 22 fps on my machine. Which is about as fast as the Java version it was based on renders at, if not a little faster!

Now it's a long time since I wrote the Java code - and it was quite obtuse - so I don't really remember exactly how it works, I've just ported it JavaScript. However this is from a slow version of the code and I'm not sure if the faster version was due to optimisations in the Java methods I used to manipulate pixels or from speedups in the math it does to work out which pixel to render from the texture. I was also corresponding at the time with someone who had a similar applet that was much faster than mine but again I don't know if any of the speed improvements they had would be possible in JavaScript as it may have relied on Java libraries. (I never saw their code so I don't know how they did it.)

So it may be possible to improve on the speed. But this works well as a proof of concept.

I'll have a go at converting my faster version some time to see if I can get any speed improvements into the JavaScript version.