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.

Well, the Roma is a little different in different aspectives.

VML assume the gradient starts/ends from 0%/100%, so VML render discard the start/end information; the gradient vector is mimiced by the rotation.

Here are the screenshots of linear gradients on VML(left) and SVG(right):

1. Two stops: { 5%, #F60 }, { 95%, #FF6 }
with gradient vector: {x1:0, y1:0, x2:75, y2:50}

The differences are quite subtle.

2. Three stops: { 5%, #F60 }, { 55%, #FAF }, { 95%, #FF6 }
with gradient vector: {x1:0, y1:0, x2:75, y2:50}

The intermediate stop in VML plays a more important role compared with SVG.

The VML expect the users to apply CSS to control the appearence and behavior of the shapes, so if one attribute is missing, VML would take the default CSS style. The default stroke style in VML is single black line like this. To make it compatible to SVG, we need to explicitly setup the stroke style in the initialization:

The width and opacity of the stroke are setup to 0+delta, in case 0 has special value in Windows. However, there is an annoying solid while stroke line around the shape like this:

UPDATE: The stroke bug has been fixed by Eugene:

1) Making no stroke by default.

VML shape has two boolean flags (“filled” and “stroked”), which govern,
if correspondent fill and stroke are used. By default they are on
(==true) using white solid fill, and black cosmetic (==1px) stroke. The
fix was to set “filled” and “stroked” to “false”.

He also fixed the funny offset and transformation bug as well, Eugene rocks!

Before this project is launched, dojo’s developers have made significant progress to explore how to integrate SVG support. Another candidate for the back-end render engine is VML. There are two projects in dojo SoC 2006, dojo-svg & dojo-vml, a universal interface is developed to glue the Gfx API and various back-end rendering engine. I prefer dojo-svg, since VML is only rendered within Microsoft Internet Explorer, while SVG is supported natively by Mozilla Firefox 1.5+, or any browsers with Adobe SVG plugin.

SVG is a complicated protocol, current specification is 1.1, v1.2 draft is still in progress. The good news is I don’t need to implement all the features of the specification, current work is still a proof of correctness. Here is a snapshot of the current achievement.