8. X3D

In many situations it is useful to present 3D models alongside 2D information. In an architectural context, for example, 3D plans or walkthroughs could be shown side by side with a plan view and descriptions of various sections of the building. X3D allows 3D graphics to be placed within X2D documents.

8.1.1 The <x3d> element

Authors can embed 3D models into their X2D documents with the <x3d> tag. An <x3d> element is essentially a two-dimensional component that is a viewport into a three-dimensional space. Since it is a component, it has position, size, and color attributes for defining it in a 2D space.

<x3d> elements can include an X3D file through the url attribute:

<x2d width="4000" height="3000">
  <x3d id="Building1" x="100" y="100" width="500" heght="500" url="http://www.buildings.com/house.x3d"/>
</x2d>

Or they can signify the beginning of 3D data directly within the X2D file

<x2d width="4000" height="3000">
  <x3d id="Building1" x="100" y="100" width="500" heght="500">
    <!-- ...building specs: descriptions, geometry, etc. -->
    <shape id="Door1">
      <appearance .../>
      <geometry .../>
    </shape>
    <!-- ...more building specs -->
  </x3d>
</x2d>

8.1.2 X3D nodes

Within the <x3d> tag are X3D nodes which collectively describe a 3D scene graph. There are nodes for describing shapes, geometry, materials, lighting, and transformations.

X3D nodes are analogous to VRML nodes and are composed in the same manner. The main difference is the XML-encoding. The following examples show how X3D nodes are put together to create a scene.

8.1.3 Example 1

The following is a simple X3D scene with a blue box and a red sphere illuminated by a directional light.

<X3D x="100" y="100" w="400" h="400">
  <Transform id="Transform1">

    <DirectionalLight id="light" ambientIntensity="0.3" direction="0 0 -1"/>

    <Transform id="Transform2" translation="3 0 1">
      <Shape id="Shape1">
	<Sphere id="Sphere" radius="2.3"/>
        <Appearance id="SphereAppearance">
          <Material id="SphereMaterial" diffuseColor="1 0 0"/>
        </Appearance>   
      </Shape>
    </Transform>

    <Transform id="Transform3" translation="-2.4 0.2 1" rotation="0 1 1 0.9">
      <Shape id="Shape2"> 
        <Box id="Box"/>
        <Appearance id="BoxAppearance">
           <Material id="BoxMaterial" ambientIntensity="0.4" diffuseColor="0 0 1"/>
        </Appearance>
      </Shape>
    </Transform>

  </Transform>
</X3D>

8.1.4 Example 2

The following example shows how an <IndexedFaceSet> element is used to describe the geometry of a <Shape>.

<X3D x="100" y="100" w="500" h="500">
  <Transform rotation="1 0 0 0.5">
    <DirectionalLight id="light" direction="0 0 -1"/>
    <Shape id="Shape1">

      <IndexedFaceSet coordIndex="0, 1, 3, -1, 0, 2, 3, -1">
        <Color color="0.2 0.7 0.8, 0.5 0 0, 0.1 0.8 0.1, 0 0 0.7"/>
        <Coordinate point="0 0 0, 1 0 0, 1 0 -1, 0.5 1 0"/>
        <Normal vector="0 0 1, 0 0 1, 0 0 1, 0 0 1"/>
      </IndexedFaceSet>

      <Appearance>
        <Material diffuseColor="1 0 0"/>
      </Appearance>   

    </Shape>
  </Transform>
</X3D>