|
Tutorial: Layering and Layout
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
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.
<LayoutLayer>
<!--- layout for gray rectangle --->
<Layout align='"CENTER""BOTTOM"'
offsetUnits='"FRACTION""PIXEL"'
scaleMode='"FRACTION"PIXEL"'
size="1 48" sizeUnits='"FRACTION""PIXEL"'/>
<!--- The background gray rectangle --->
<Transform translation="0 0 -10">
<Shape>
<Appearance>
<Material diffuseColor="0.77 0.77 0.77"/>
</Appearance>
<Rectangle2D size="1 48"/>
</Shape>
</Transform>
<LayoutGroup>
<!--- The layout for blue and red buttons --->
<Layout align='"CENTER""TOP"'
offsetUnits='"PIXEL""PIXEL"'
scaleMode='"PIXEL""PIXEL"'
size="200 48" sizeUnits='"PIXEL""PIXEL"'/>
<!--- The blue button (simplified) --->
<Transform translation="-54 -24 2">
<Shape>
<Appearance>
<ImageTexture url="buttons.png"/>
</Appearance>
<IndexedFaceSet coordIndex="0 1 3 2"
normalIndex="0 0 0 0"
texCoordIndex="0 1 3 2">
<Coordinate point="0 0 0, 48 0 0,
0 48 0, 48 48 0"/>
<Normal vector="0 0 1"/>
<TextureCoordinate point="0.0 0.5, 0.5 0.5,
0.0 1.0, 0.5 1.0"/>
</IndexedFaceSet>
</Shape>
</Transform>
<!--- The red button (simplified) --->
<Transform translation="6 -24 2">
<Shape>
<Appearance>
<ImageTexture url="buttons.png"/>
</Appearance>
<IndexedFaceSet coordIndex="0 1 3 2"
normalIndex="0 0 0 0"
texCoordIndex="0 1 3 2">
<Coordinate point="0 0 0, 48 0 0,
0 48 0, 48 48 0"/>
<Normal vector="0 0 1"/>
<TextureCoordinate point="0.5 0.5, 1.0 0.5,
0.5 1.0, 1.0 1.0"/>
</IndexedFaceSet>
</Shape>
</Transform>
</Transform>
</LayoutGroup>
</LayoutLayer>
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
Download tutorial files
|
