I have recently focused on drawing some cool shapes in a HTML 5.0 canvas. And I want to write a 3D graphics engine which can be used in JavaScript. I have already finished a rotating cube. And I want to finish the shapes like this example: http://gyu.que.jp/jscloth/touch.html.
Who have ever tried in this field?
On
In order to write one you will need to first decide if you will support Excanvas, so IE can use it, or not.
That will set some limits on what you can do if you support IE.
Your best bet is to just start with creating some primary shapes, and most likely you will want to have certain primitives that everything else can be built from, so, you may want to look at OpenGL or DirectX, at their primitives.
Once you have that, and you can move them around in 3D space, then you will want to start looking at adding cameras, but that will be relatively easy compared to step 1.
Unfortunately, all of this is very heavy in math, so you will take a huge performance hit if you create several 3D objects that have to move frequently.
I think the best bet is to wait, as, in late 2007 there was blogs for Firefox and Opera to have 3D support in canvas: http://starkravingfinkle.org/blog/2007/11/animating-with-canvas/
The reason is that if it will be built into the browser then most of the heavy work will be done, esp if it supports some flavor of OpenGL.
On
I wrote a Javascript 3D engine about a year ago, around the time that Google released their Chrome browser with the superfast V8 Javascript engine. Unfortunately since no browser exposes a 3D graphics API (such as OpenGL or Direct3D), this engine warps bitmap images onto the webpage in order to achieve affine texture-mapped triangles (which are inferior to perspective-correct texture-mapped triangles), which is quite slow.
I used my Javascript 3D engine to build a 3D model library. (Hint: don't view the first model - it's the largest and slowest to view!). Performance is around 10 frames per second for a 3D model with around a 1000 triangles in Google Chrome on my PC.
I've considered open sourcing the source code to this engine, but I never got around to doing this. If there is enough interest, I'll put the source code onto Google Code.
My current pet project is a Silverlight 3D engine and model viewer, which is a software 3D engine (i.e. my C# code has control over the colour of every pixel). Silverlight 3 is much faster than Javascript, but is non-standard, a browser-addon and still does not support 3D hardware accelerated graphics (without a lot of overhead).
Update: In the time since I originally wrote this post, I updated the Silverlight model viewer mentioned above to use Silverlight 5 and hardware accelerated 3D.
On
How about binding a pre-existing 3D library to JavaScript? Like OpenGL.
V8-GL exposes 80% of the OpenGL API to JavaScript:
Edit: This question was asked many years ago. Since then, every browser except for IE (for now?) has added support for webgl. You can see many samples here: http://www.chromeexperiments.com/webgl/
I truly don't want to discourage you, but in order to write a 3D engine in JavaScript, you have to be extremely well versed and intimate in the math/logic behind 3D rendering.
Since you didn't state your current expertise, I'm assuming you don't ... in which case I strongly suggest that you start somewhere else. For example, XNA Game Studio. You write the code in C#, and there are already a lot of well written APIs that abstract most (but definitely not all) of the hard parts. But it's a great way to learn a lot of the concepts and math behind 3D rendering.
If however, you are dead set on starting with JavaScript, there's already a lot of resources on the Internet about this. For example this one :-)
http://dev.opera.com/articles/view/3d-games-with-canvas-and-raycasting-part/
Good luck!