X3DOM Exploration #2: Creating Geometry with IndexedFaceSet

In my previous post about X3DOM I covered some of the very basics. I used a <Box> object and slapped a Twitter avatar on it. In this post I’m going to use the <IndexedFaceSet> element to create geometry dynamically.

Read them pixels

For this example I’ve used a PHP-script that loads an image, resizes it to an abitrary size, reads every pixel’s color and calculates the average between red, green and blue. This average is used to determine the height of the object. All very simple.

<IndexedFaceSet>

For each pixel we’re going to create a box that’s made up of 8 vertices and 12 faces (triangles). So that 8 (x, y, z) values, 8 (r, g, b) values and 3 * 12 faces = 36 index values. In this example, the <IndexedFaceSet> elements has two children. One for the vertices (<Coordinate>) and one for the colors (<Color>). The <Coordinate> element has an attribute called “point” which we use to specify the (x, y, z) values. These are all separated by spaces:

<Coordinate point="x1 y1 z1 x2 y2 z2 x3 y3 z3 .... etc "/>

These vertices have corresponding colors which are specified in the “color” attribute of the <Color> element:

<Color color="r1 g1 b1 r2 g2 b2 r3 g3 b3 .... etc "/>

The next step is to connect all these vertices to create a shape. This is done by passing the indices to the “coordIndex” attribute of the <IndexedFaceSet> element. This index corresponds to the specific vertex that was defined in the <Coordinate> element.

<IndexedFaceSet coordIndex="face1_index1 face1_index2 face1_index3 -1 face2_index1 face2_index2 face2_index3 -1 .... etc "/>

Note that the “-1″ value separates the individual faces.

Examples

Here are some examples. You can click on them to see the live version.

The Zohan

Jim

Angie