3. Technical Background
This section describes the technical requirements to use 3dhtml and how it works with the browser's DHTML capabilities regarding rendering speed and the object-orientation involved.

3.1 Prerequisites
To see the demos and to be able to program with 3dhtml you must use a new browser. This toolkit has been tested with the following browsers:
  • Internet Explorer 5.0 Win
  • Internet Explorer 5 Version 2 Mac
  • Internet Explorer 5.5 Win
  • Internet Explorer 6.0 Win
  • Netscape 4.71 Win
  • Netscape 4.5 Mac
  • Netscape 6.01 Win
  • Netscape 6.02 Win
Though the applications work in Netscape, its very slow. If someone knows faster routines or other ways to speed things up, please let us know. Moreover, in Netscape the ClipRectMaterial's size won't change according to z - instead a fixed size of 10x10px is used at all time. In addition, Netscape has some problems dynamically setting clipping and z-Index properties which sometimes results in some ugly glitches or flickering.
Also, you'll need quite a fast machine to be able to see the examples in smooth quality.

3.2 Projection
First of all it is not really possible to draw rendered images with DHTML. Some approaches are to use colored tables or to scale images dynamically.
3dhtml uses layer positioning and therefore can't draw lines or other objects than points.

To display a three dimensional object on the two dimensional screen we must project the 3D object onto a 2D plane. There are two projections to accomplish this: The parallel and the perspective projection.

Our approach is using the parallel projection because we can simulate it by making use of the z-Index of the layers (which represent the 3D points). Hence every point covers the objects behind itself due to the included z-buffer.

  • Projection Systems
    Super short introduction in parallel and perspective projection.
  • kartographer-5
    A 5k map maker creates maps dynamically by swapping images written with dhtml.
3.3 Pivot and coordinates
The pivot is the central pin around the models turn, the center of rotation.
See also 4.3 Molecule3D # SceneModel & Pivot

Compare the following manipulations and how they perform.

1  Cube at its origin. 1'  Rotated 1 with 90°
2  Translated (in MCS) 2'  Rotated 2 with 90°
3  Pivot Set (in WCS) 3'  Rotated 3 with 90°
4  Translated & Pivot Set 4'  Rotated 4 with 90°

The translation is given in model coordinates (MCS) and the pivot setting is done in the world coordinate system (WCS), respectively in the parent coordinate system if model is linked to a parent model.

3.4 Scene graph

A scene graph is a strict hierarchy of model objects. Take advantage of it by linking models together to set the points of a child object in correct relation to its parent object.
If you've linked an object to another one you still transform each object in its own coordinate system. Take a bicycle model with wheels: You can move the whole bike and rotate the wheels independently.
See also 4.4 SolarSystem3D

3dhtml does not support appearance attribute hierarchies, regretfully. The scene graph can handle only transformations.

  • Coordinate Systems
    A neat tutorial with a good introduction in Local and World Coordinates Systems.
  • 3D dictionary
    Huge dictionary focused on 3D computer graphics. Some entries with images.