2Roqs is a resident of
La Fabrique Pola


offices
2Roqs
La Fabrique Pola
10 Quai de Brazza
33100 BORDEAUX
FRANCE


 

3D in javascript

Animating a cube is like the Hello world of the demomaker ( and drawing a Tetris game the Hello world of a game programmer).
Thus we never miss an occasion to try out a new display by programming the rotating cube on it.

The case of Javascript

Javascript inside a web browser allows any kind of mathematical computation in floating point. The major problem lies in the displaying of shapes, since there are no drawing facilities available.

To simulate pixels, I chose to use DIV objects positioned in absolute coordinates inside the screen. This way, each pixel of a drawn line is made of one DIV.

( Note: today some browsers include the canvas object that can be used as a matrix display. However, back in 2000 when I wrote this program, this object wasn't available yet )

Wireframe rendering

The process of drawing lines is an interpretation of the Bresenham algorithm. Since every pixel is made of one DIV, the drawing of a single line can be quite costly in term of CPU time. To limit the number of pixels, every tip is worth being tried, such as using dotted lines for backside edges.

Filled faces 3D

A classic rasterization routine ( i.e. the triangles to draw are sliced into 1-pixel-high horizontal lines ) was used to render triangles.
Here, a single horizontal DIV was used for each horizontal slice of a triangle, then resized and positioned in absolute coordinates, and also colored in the face's tint using style attribute and HTML colors.

A finer optimization made it possible to divide by two the number of DIV involved: for each set of two triangles that make up a square face, two juxtaposed horizontal slices were jointed into just one.
Another tuning to accelerate the frame rate was simply to render bigger pixels.

English