What is the best online resource for 3D rendering in JavaScript?

Question

First a little intro:

Last year i wrote this http://dragan.yourtree.org/code/canvas-3d-graph/

Now, i want to make complete rewrite of it, because that old version have some limitations, for example: sometimes it happens that bars are not visible, because they are drawn one behind another.

In this old version there is no real 3d, just bunck of 2D lines, which emulate 3D.

Now, what i want is to go to full blown 3D scene, i want to keep all the objects in memory, and add some kind of 3D navigation buttons that will enable users to rotate whole scene on all 3 axis, and zoom camera in and out.

I've already decided that i will use http://sylvester.jcoglan.com/ for vector/matrix stuff, but i'm still unable to find good tutorial for 3D. There are tons of texts on the Internet, most of them date from the 90s, an are incomplete or written really bad.

So, my question is: what is the best online resource/tutorial that will enable me to write my own JS 3D engine from scratch.

It should cover all relevant topics:

• vectors
• matrices
• objects
• camera
• scene rendering
• lighting
• rotating objects on scene
• moving the camera

etc.. (i'm fairly familiar with first two)

Thank you for your time.

Answer 1

Just a couple of suggestions, but probably not exactly what you're looking for:

I suggest that you take a look at Jacob Seidelin's canvas examples at nihilogic.dk : http://blog.nihilogic.dk/search/label/canvas .

If you're willing to abandon canvas and go with an existing flash library, take a look at Sandy3D : http://www.flashsandy.org/demos .

Answer 2

Perspective projection: http://www.cse.unr.edu/~bebis/CS791E/Notes/PerspectiveProjection.pdf

Answer 3

http://www.gamedev.net/

It's been quite a while since last time I tried to do anything with graphics/games/3D, but I do remember this website as one of the most widely known resource.

http://www.gamedev.net/reference/

Of course, it's very general purpose, and covers more things than you're asking for, but it contains good stuff on the Math and Physics stuff.

Answer 4

If this is specifically for a JavaScript related project then I understand but if you are simply doing this to grasp the basics of 3d rendering there might be more mature platforms out there for you.

In any case..

Links that might be useful to your learning:

• Prototyping A Simple 3d Renderer In JavaScript
• 3D Basics - A Primer
• The JavaScript Raytracer
• JavaScript 3D Renderer

Also, some fun JavaScript 3d examples:

• Rotating 3D Cube in JavaScript
• Wolfenstein 3D in JavaScript
• Anything else in this SO Question: Stunning graphic effects with JavaScript?

Answer 5

The sad truth is that there is still no real support for 3D graphics in JavaScript.
So anything you do will have to involve completely implementing a 3D renderer (or use one someone else already implemented)
Since these things are usually implemented in hardware and you are writing JavaScript it is naturally going to be very slow for anything more than trivial scenes.

You will be better served by languages like Java, C# or C++ for your 3D graphics.

Answer 6

Sorry shy, but i'm implementing this as an browser feature. I'm well aware of javascript limitations, but as i said, i don't need 30 FPS animation, just an ability to rotate my objects in 3D.

Answer 7

There is a technology called "Canvas 3D" available for Firefox. There is also an utility called C3DL, which makes it easier to use this technology.

Unfortunately, as far as I know, there is no Opera/Internet Explorer/WebKit equivalent - this addon is only available for Firefox 3(Firefox 2 and Firefox 3.1 beta are not supported)...