how to draw 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 3d sphere. Who can share this with me?

Thanks in advance ！

Answer 1

To see some examples of doing 3D in canvas you can look at: http://www.canvasdemos.com/2009/02/26/3d-on-2d-canvas/

You will need to model a sphere, and have it be varying colors so that as it rotates you can see that it is not only a sphere, but being rendered.

Otherwise, a sphere in space, with not point of reference around it looks like a circle, if it is all one solid color.

To start with you will want to try drawing a circle with rectangles, as that is the main primitive you have.

Once you understand how to do that, or create a new primitive, such as a triangle, using the Path method, and create a circle, then you are ready to move it to 3D.

3D is just a trick, as you will take your model, probably generated by an equation, and then flatten it, as you determine which parts will be seen, and then display it.

But, you will want to change the color of the triangles based on how far they are from a source of light, as well as based on the angle of that part to the light source.

This is where you can start to do optimizations, as, if you do this pixel by pixel then you are raytracing. If you have larger blocks, and a point source of light, and the object is rotating but not moving around then you can recalculate how the color changes for each triangle, then it is just a matter of changing colors to simulate rotating.

The algorithm will depend on what simplifications you want to make, so as you gain experience come back and ask, showing what you have done so far.