Caution: the Layer and Layout nodes are new to the X3D version 3.2
specification and are not supported by some viewers.
Basic File Structure
Layering
The 3D scene at the left is composed of two layers. The main layer contains
scene that is being viewed, including the background, navigation, viewpoints and
geometry. A second layer containing the user interface buttons is then superimposed
on the screen. In the scene illustrated, the cube can be rotated and the buttons at
the bottom can be used to change the color of the cube. For red, the color will change
immediately. For blue, the color will change gradually. The functioning of these
buttons will be postponed until the next tutorial.
Because the Layering and Layout components require X3D version 3.2, it is first
necessary to change the version numbers at the beginning of the X3D file.
Component statements are also necessary to indicate that the Layering and Layout
components are being used in the file.
In most VRML and X3D scenes the nodes are placed inside the <Scene> element.
In this case, however, a <LayerSet> is inserted into the scene and each
of the layers is placed inside the LayerSet. Although it is possible to
place nodes outside the LayerSet, it is best to insert all geometry nodes
inside one of the layers. This avoids some navigation problems, since
navigation occurs within one of the layers.
When using a LayerSet, it is very important to remember to set the order
parameter. This specifies which layers should be displayed. For
this example, both the first and second layers are displayed. If the
the order parameter is omitted, nothing will be displayed!
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN"
"http://www.web3d.org/specifications/x3d-3.2.dtd">
<X3D profile="Immersive" version="3.2">
<head>
<component name="Layering" level="1"/>
<component name="Layout" level="1"/>
</head>
<Scene>
<LayerSet order="1 2">
<Layer>
<!--- The main 3D scene goes here,
including background, viewpoints, etc
--->
....
</Layer>
<LayoutLayer>
<!--- The 2D control panel (dashboard)
goes here --->
....
</LayoutLayer>
</LayerSet>
</Scene>
</X3D>
Layout
The LayoutLayer is a layer node that is designed to contain the elements of the user
interface. We want the control panel centered at the bottom of the screen. This
is indicated in the align parameter of the Layout for the LayoutLayer.
As the size of the display changes we want the positions of the buttons to change
but we do not want their size to change. To achieve this we specify that the control
panel should cover the full width of the screen but should only be 48 pixels wide.
The first number in the size parameter is 1 and this indicates the full width of
the screen because the first entry in the sizeUnits parameter is FRACTION, which means
that the size specifies the fraction of the screen width that is desired.
The second entries are for the height and set the height at 48 pixels.
Now for the buttons. We specified the width of the control panel in FRACTION
because we wanted it to fill the full width of the screen. For the buttons, however,
we want to specify their width and height in pixels.
Insert a LayoutGroup inside the LayoutLayer. This will be the container for the buttons.
The align parameter indicates that the LayoutGroup will be located at the center and top
within the control panel. The Layout group is given a width of 200 pixels and a height
of 48 pixels centered within the control panel.
The center of the LayoutGroup has coordinates (0, 0). The Transform node for the red button
places its lower left corner 6 pixels to the right of center and 24 pixels down.
The button itself is a square of 48 pixels by 48 pixels and uses the upper left
quarter of the texture map. The texture map is described in the next tutorial.
Connecting the Buttons
The next step in the process is to add the message routing that will allow
the buttons to change the color of the cube. That is the subject of the next tutorial ......
CONTINUE
