This alpha release is a non-embarrassing release after huge refactory, ready for the community to review and start commit it to the trunk. This release makes the following major changes:

• Take OpenGL coordination as the default, i.e the X-axis starts from left to right; the Y-axis starts from bottom to the top; the Z-axis starts from inside to outside of the screen; the orientation is in the left-bottom of the viewport.
• Add OpenGL-like functions: createTriangles(.., “strip”), createTriangles(.., “fan”), createQuads(.., “strip”), …
• add setScheduler to Viewport and Scene, so users may override the default zOrder scheduler by bsp.
• Merge setTexture and setFill to setFill

fix the following bugs:

• bsp sorting bug
• Add intensity in ambient light source.

and the following optimization:

• Optimize the Cube, only three surface are rendered.
• Optimize the Cylinder to eliminate rendering the back cap

And there are still a long way to go:

• Verify the coordination system
• Verify the lighting effects
• Redraw optimization

Attached is the tar ball, just untar it in $DOJO/all/truck/dojox, gfx3d directory is created, and gfx/lighting.js is overwritten.

Lighting model used in dojox.gfx3d is merged from Eugene’ s 2D lighting utility library. We take a simplified Phong reflection model to gear towards the vector graphics:

• All light sources are infinitely far away
• No shadow support
• Second-order reflections is not accounted

The reflection from a surface is divided into three subcomponents, specular reflection, diffuse reflection, and ambient reflection. Due to the effect of parallel light, a polygon surface is ubiquitously the same since the angle between the light and the normal vector is the same. The curved surface in Cylinder can be imitated by the linear gradient. Here is an example how the cylinder looks like in the sunshine.

Here is the snapshot of development. They look real, but we still need more calculation to verify whether the lighting model is precise or not.

Cylinder is much more difficult to implement than the other polygon-based 3D objects. Polygon is still polygon after 3d projection, but the circle is mapped to ellipse and the we need to draw the the outline of surface by all means.

First thing first, we may reuse the cap later, so we introduce the dojox.gfx3d.Orbit, which is the Circle in the 3D space, the first challenge is how to map the X-Y plate circle to the 3D space orbit? We know the new center, the semi major (this may not be true if the projection includes any scale of X, Y, Z axis), and marks which are the projection of artibitrary points in the original circle.

The algorithm is inspired by this mathematic lecture.

1. The general equation is: ax² + 2bxy + cy² + dx + ey + f = 0, we can normalize the marks according to the new center, the equation is reduced as : ax² + 2bxy + cy² + f = 0
2. Let a = 1, the other parameters are determined by marks. 2b, c, f.
3. The rotation angle, theta, is defined as theta = Math.atan2(2b, a–c) /2.
4. Then we can rotate the normalized mark by -theta to get the canonical equation: x²/a² + y²/b² = 1.
5. Using the marks again to find out a and b, which are the rx, and ry.

The draw procedure would create a Ellipse on (0, 0) with rx = a, ry = b, rotate theta, then transpose to the center.

We could not use the Scene to simplify Cylinder drawing, since the curved surface is not a fixed rectangle. We draw the further cap first, then draw a rectangle with width of distance of two caps, height of major radius. A easier approach is to draw the path in (0, 0), rotate theta and transpose to the new center.

One picture is worthy the above. As usual, here is the snapshot.

In last two weeks, I was bothered by the visibility problem of dojox.gfx3d library. Eventually, I decided to review the Computer Graphics 101, and checked out Fundamentals of Computer Graphics, second edition from the library. This books poses two approaches: Z Buffer and Binary Space Partition(BSP).

Z Buffer is pixel based, and does not fit for our requirement, we don’t have the luxury to implement a render pipe using JavaScript. While BSP is primitive based, we still need to draw all the 3D objects in the viewport, just in a Painter’s algorithm manner.

The idea is for any polygon, for example, (a, b, c), the space is divided by the plane into two space: plus and minus. For any arbitrary vertex p, if (p - a) dotProduct n = 0, p is inside the plane, > 0, p is in the plus space, vice versa for minus space. n is the normal vector that is perpendicular the plate, defined as:

When Viewport render 3D objects, it iterates all its children and apply the camera transform to map the 3D objects to the new coordination system, then build the BSP tree based upon the polygonized vertices. At the end, in-order-transverse the BSP tree to draw the 2D shape to the canvas.

So far, this algorithm works for triangle, and theoretically works fine for all polygons. we may need to consider how to bring the Edge to the table, and I do believe the Scene needs to be refactored unless some constraints are imposed to the Scene.

Here is the snapshot of the latest working copy.

I made a huge mistake on the last post, Yet another cube. In that post, I attached a quick-n-dirty implementation of dojox.gfx3d that work in Firefox only. Unfortunately, no source code is attached except gfx3d.js and a symbol link to my home directory. I untared the tar ball, and it worked, of course it just linked to my working copy! Here is the current snapshot.

In this implementation, I took the lazy evaluation, thanks to Eugene’s advice:
Once a 3D object is created in dojox.gfx3d.Viewport, only meta is recorded. The real DOM node is not constructed till the last minute, when dojox.gfx3d.render is called. That simplify the development and eliminate the dependencies of SVG and VML renders under the hood.

Above is screenshot in Firefox 2.0 and MSIE 6.0, you can see the inconsistence of the coordination system, we would fix that later. And here are more to consider:

• Scene support so we can apply the world transform in a group of objects
• Texture support: solid and gradient for more sophisticated texture
• Z-order

Once we solve these problem, the next step is just to propagate it to other more complicated objects.