\chapter{3D-Visualization of Neural Networks}
\label{XGUI3D}
\thispagestyle{empty}

\section{Overview of the 3D Network Visualization}
\label{XGUI3DOverview}
\index{3D Network!Visualization}

This section presents a short overview over the 3D user interface. The
following figures show the user interface with a simple three-layer
network for the recognition of letters.

The info window is located in the upper left corner of the screen.
There, the values of the units can be displayed and changed. Next to
it, the 2D display is placed. This window is used to create and
display the network topology. The big window below is used for
messages from the kernel and the user interface. The control panel in
the lower left corner controls the learning process. Above it, the 3D
display is located which shows the 3D visualization of the network.
The 3D control window, in the center of the screen, is used to control
the 3D display.

In the upper part, the orientation of the network in space can be
specified. The middle part is used for the selection of various
display modes. In {\tt SETUP} the basic settings can be
selected. With {\tt MODEL} the user can switch between solid and
wire-frame model display. With {\tt PROJECT} parallel or central
projection can be chosen. {\tt LIGHT} sets the illumination
parameters, while {\tt UNITS} lets the user select the values for
visualizing the units. The display of links can be switched on with
{\tt LINKS}. {\tt RESET} sets the network to its initial
configuration. After a click to {\tt FREEZE} the network is not
updated anymore. The {\tt DISPLAY} button opens the 3D-display
window and {\tt DONE} closes it again. In the lower part of the
window, the z-coordinate for the network layers can be set.

\clearpage

\section{Use of the 3D-Interface}
\label{XGUI3DUse}

\subsection{Structure of the 3D-Interface}
\index{3D Interface!Structure}

The 3D interface consists of three parts:

\begin{itemize}
\item the 2D $\rightarrow$ 3D transformation in the XGUI-display
\item the 3D control panel
\item the 3D display window
\end{itemize}


\subsection{Calling and Leaving the 3D Interface}
\index{3D Interface!Call}

The 3D interface is called with the \fbox{\tt GUI} button in the info
panel. It opens the 3D Control panel which controls the network
display. When the configuration file of a three dimensional network is
loaded, the control panel and the display window are opened
automatically, if this was specified in the configuration. No
additional control panel may be opened if one is already open.

The 3D interface is left by pressing the \fbox{\tt DONE} button in
the control panel.


\subsection{Creating a 3D-Network}
\index{3D Network!Creation}

\subsubsection{Concepts}

A three dimensional network is created with the network editor in the
first 2D-display. It can be created in two dimensions as usual and
then changed into 3D form by adding a z-coordinate. It may as
well be created directly in three dimensions.

Great care was given to compatibility aspects on the extension of
the network editor. Therefore a network is represented in exactly the
same way as in the 2D case.

In the 2D representation each unit is assigned a unique \mbox{(x, y)}
coordinate. The different layers of units lie next to each other. In
the 3D representation these layers are to lie on top of each other. An
additional z-coordinate may not simply be added, because this would
lead to ambiguity in the 2D display.

Therefore an \mbox{(x, y)} offset by which all units of a layer are
transposed against their position in the 2D display has to be computed
for each layer. The distance of the layer in height corresponds to the
z value. Only entire layers may be moved, i.e.\ all units of a layer
have to be in the same z plane, meaning they must have the same
z-coordinate. Figure \ref{Layers2D3D} explains this behavior.

\begin{figure}[htb]
\begin{center}
  \begin{minipage}{\textwidth}
    \screendump{0.7}{xgui_3D_figs/Layers2D3D.ps}
  \end{minipage}
\end{center}
\caption{Layers in the 2D- and 3D-display}
\label{Layers2D3D}
\end{figure}


Therefore the network editor contains two new commands
\begin{tabbing}
\qquad \= {\bf Units 3d Z} \qquad \quad \= : assigning a z-coordinate \\
\> {\bf Units 3d Move} \> : Moving a z-layer \\
\end{tabbing}

The event of 3D-creation is easily controlled by rotating the network
in the 3D display by $90^\circ$ to be able to see the network
sideways. It may be useful to display the z-coordinates in the XGUI
display (see \ref{xgui-disp}). 

The user is advised to create a 3D network first as a wire-frame model without
links for much faster screen display.


\subsubsection{Assigning a new z-Coordinate}
\index{3D Network!z-Coordinate!Assignment}

The desired new z-coordinate may be entered in the setup panel of the
2D-display, or in the z-value panel of the 3D-control panel. The
latter is more convenient, since this panel is always visible. Values
between  \mbox{-32768 and +32767} are legal.

With the mouse all units are selected which are to receive the new
z-coordinate. 

With the key sequence {\tt U 3 Z} (for {\bf U}nits {\bf 3}d {\bf Z}) the
units are assigned the new value.

Afterwards all units are deselected.


\subsubsection{Moving a z-Plane}
\index{3D Network!z-Plane Movement}

From the plane to be moved, one unit is selected as a reference unit
in the 2D display.  Then the mouse is moved to the unit in the base
layer above which the selected unit is to be located after the move.

With the key sequence {\tt U 3 M} (for {\bf U}nits {\bf 3}d {\bf M}ove)
all units of the layer are moved to the current z-plane.

The right mouse button deselects the reference unit.


\subsubsection{Displaying the z-Coordinates}
\label{xgui-disp} 
\index{3D Network!z-Coordinate!Display}

The z-values of the different units can be displayed in the
2D-display. To do this, the user activates the setup panel of the
2D-display with the button \fbox{\tt SETUP}. The button \fbox{\tt
SHOW}, next to the entry {\tt units top} opens a menu where {\tt
z-value} allows the display of the values.

The z-values may also be displayed in the 3D-display. For this, the
user selects in the 3D-control panel the buttons  \fbox{\tt UNITS},
then  \fbox{\tt TOP LABEL} or \fbox{\tt BOTTOM LABEL} and finally
\fbox{\tt Z-VALUE}. (see also chapter~\ref{units-d3})


\subsubsection{Example Dialogue to Create a 3D-Network}
\index{Example!3D Network}
\index{3D Network!Example}

The following example is to demonstrate the rearranging of a normal 2D
network for three dimensional display. As example network, the
letter classifier \mbox{LETTERS.NET} is used.

In the 2D-display, the network looks like in figure~\ref{2D-display}:

\begin{figure}[htbp]
\begin{center}
  \begin{minipage}{\textwidth}
    \screendump{0.4}{xgui_3D_figs/2D_display.ps}
   \end{minipage}
   \vspace{25mm}
\end{center}
\caption{2D-display}
\label{2D-display}
\end{figure}

One scales the net with {\tt scale} \fbox{\tt -} in the transformation
panel, then it looks like figure~\ref{scaledNetwork} (left).  After a
rotation with {\tt rotate} \fbox{\tt +} by $90^\circ$ around the
x-axis the network looks like figure~\ref{rotatedNetwork} (right).

\begin{figure}[htbp]
\begin{center}
  \begin{minipage}{\textwidth}
    \screendump{0.4}{xgui_3D_figs/scaledNetwork.ps}
  \end{minipage}
  \hspace{10mm}
  \begin{minipage}{\textwidth}
    \screendump{0.4}{xgui_3D_figs/rotatedNetwork.ps}
  \end{minipage}   
  \vspace{22mm}
\caption{Scaled network (left) and network rotated by $90^\circ$ (right)}
\label{scaledNetwork}
\label{rotatedNetwork}
\end{center}
\end{figure}

Now the middle layer is selected in the 2D-display
(figure~\ref{SelectionOneLayer}, left).

\begin{figure}[htbp]
\begin{center}
\begin{minipage}{15cm}
  \begin{minipage}{8.4cm}
    \screendump{0.35}{xgui_3D_figs/SelectionOneLayer.ps}
  \end{minipage}
  \hspace{10mm}
  \begin{minipage}{7cm}
    \screendump{0.35}{xgui_3D_figs/assignZValue.ps}
  \end{minipage}
\end{minipage}
  \vspace{22mm}
\caption{Selection of one layer (left) and assigning a z-value (right)}
\label{SelectionOneLayer}
\label{assignZValue}
\end{center}
\end{figure}

To assign the z-coordinate to the layer, the {\tt z-value} entry in
the 3D-control panel is set to three. Then one moves the mouse into
the 2D-display and enters the key sequence  "`{\tt U 3 Z}"'. This is
shown in figure~\ref{assignZValue} (right).

\begin{figure}[htbp]
\begin{center}
\begin{minipage}{15cm}
  \begin{minipage}{8.4cm}
    \screendump{0.35}{xgui_3D_figs/ReferenceUnit.ps}
   \end{minipage}
   \hspace{10mm}
   \begin{minipage}{7cm}
    \screendump{0.35}{xgui_3D_figs/movingPlane.ps}
   \end{minipage}
\end{minipage}
  \vspace{22mm}
\caption{Selection of a reference unit (left) and moving a plane (right)}
\label{ReferenceUnit}
\label{movingPlane}
\end{center}
\end{figure}

Now the reference unit must be selected (figure~\ref{ReferenceUnit}, left).

To move the units over the zero plane, the mouse is moved in the XGUI
display to the position x=3, y=0 and the keys  "`{\tt U 3 M}"' are
pressed. The result is displayed in figure~\ref{movingPlane} (right).

\begin{figure}[htbp]
\begin{center}
  \begin{minipage}{\textwidth}
    \screendump{0.4}{xgui_3D_figs/ParallelProjection.ps}
  \end{minipage}
  \hspace{10mm}
  \begin{minipage}{\textwidth}
    \screendump{0.4}{xgui_3D_figs/ProjectIllumin.ps}
  \end{minipage}
  \vspace{20mm}
\caption{Wire-frame model in parallel projection (left) and solid model
in central projection (right)}
\label{ParallelProjection}
\label{ProjectIllumin}
\end{center}
\end{figure}

The output layer, which is assigned the z-value 6, is treated
accordingly.  Now the network may be rotated to any position
(figure~\ref{ParallelProjection}, left).

Finally the central projection and the illumination may be turned
on (figure~\ref{ProjectIllumin}, right).

These are the links in the wire-frame model
(figure~\ref{LinksWireframe}, left).The network with links in the
solid model looks like figure~\ref{LinksSolid} (right).

\begin{figure}[htbp]
\begin{center}
  \begin{minipage}{\textwidth}
    \screendump{0.4}{xgui_3D_figs/LinksWireframe.ps}
  \end{minipage}
  \hspace{10mm}
  \begin{minipage}{\textwidth}
    \screendump{0.4}{xgui_3D_figs/LinksSolid.ps}
   \end{minipage}
  \vspace{20mm}
\caption{Network with links in the wireframe model (left) and in the solid
model (right)}
\label{LinksWireframe}
\label{LinksSolid}
\end{center}
\end{figure}

%\clearpage
\subsection{3D-Control Panel}
\index{3D Control Panel}
\index{Panel!3D Control Panel}

\begin{figure}[htbp]
\begin{center}
  \begin{minipage}[b]{\textwidth}
    \screendump{0.6}{xgui_3D_figs/ControlPanel.ps}
  \end{minipage}
\caption{Control Panel}
\end{center}
\end{figure}

The 3D-control panel is used to control the display panel. It consists
of four sections (panel):

\begin{enumerate}
\item the transformation panels
        \begin{itemize}
        \item {\tt rotate}: rotates the 3D-display along the x-, y- or z-axis
        \item {\tt trans}: transposes the 3D-display along the x-, y- or z-axis
        \item {\tt scale}: scales the 3D-display 
        \end{itemize}
\item the command panel with the buttons
        \begin{itemize}
        \item \fbox{\tt SETUP}: basic settings like rotation angles
                                are selected
        \item \fbox{\tt MODEL}: switch between solid model and
                                wireframe model
        \item \fbox{\tt PROJECT}: selects parallel or central projection
        \item \fbox{\tt LIGHT}: chooses lighting parameter
        \item \fbox{\tt UNITS}: selects various unit display options
        \item \fbox{\tt LINKS}: selects link display options
        \item \fbox{\tt RESET}: resets all 3D settings to their
                                original values
        \item \fbox{\tt FREEZE}: freezes the 3D-display
        \end{itemize}
\item the panel with the buttons
        \begin{itemize}
        \item \fbox{\tt DISPLAY}: opens the 3D-display (max.\ one)
        \item \fbox{\tt DONE}: closes the 3D-display window and the
                                3D-control window and exits the 
                                3D visualization component
        \end{itemize}
\item the z-value panel: used for input of z-values either directly or
                        incrementally with the arrow buttons
\end{enumerate}


\subsubsection{Transformation Panels}

With the transformation panels, the position and size of the network
can be controlled.

\index{3D Control Panel!Rotate Panel}
In the {\tt rotate} panel, the net is rotated around the x-, y-, or
z-axis.  The \fbox{\tt +} buttons rotate clockwise, the \fbox{\tt -}
buttons counterclockwise. The center fields {\tt X}, {\tt Y} and {\tt
Z} are no buttons but framed in similar way for pleasant viewing.

\index{3D Control Panel!Trans Panel}
In the {\tt trans} panel, the net is moved along the x-, y-, or
z-axis. The \fbox{\tt +} buttons move to the right, the \fbox{\tt -}
buttons to the left. The center fields {\tt X}, {\tt Y} and {\tt Z}
are no buttons but framed in similar way for pleasant viewing.

\index{3D Control Panel!Scale Panel}
In the {\tt scale} panel, the net can be shrunk or enlarged.


\subsubsection{Setup Panel}
\index{3D Control Panel!Setup Panel}

\begin{figure}[htbp]
\begin{center}
  \begin{minipage}{\textwidth}
    \screendump{0.6}{xgui_3D_figs/3D_SetupPanel.ps}
  \end{minipage}
  \caption{Setup Panel}
\end{center}
\end{figure}

In the {\tt base} column of the setup panel, the transformation
parameters can be set explicitly to certain values. The rotation angle
is given in degrees as a nine digit float number, the transposition
is given in pixels, the scale factor relative to 1. Upon opening the
window, the fields contain the values set by the transformation
panels, or the values read from the configuration file. The default
value for all fields is zero. The net is then displayed just as in the
2D-display.

In the {\tt step} column the step size for the transformations can be
set. The default for rotation is ten degrees, the default for
moving is 10 pixel. The scaling factor is set to 1.1.

In the {\tt aspect} field the ratio between edge length of the units and
distance between units is set. Default is edge length equals distance.

With  {\tt links} the scale factor for drawing links can be set. It is
set to 1.0 by default.

The \fbox{\tt DONE} button closes the panel and redraws the net.


\subsubsection{Model Panel}
\index{3D Control Panel!Model Panel}
 
In the model panel the representation of the units is set. With the
\fbox{\tt WIRE} button a wire frame model representation is selected. The
units then consist only of edges and appear transparent.


The \fbox{\tt SOLID} button creates a solid representation of the net.
Here all hidden lines are eliminated. The units' surfaces are
shaded according to the illumination parameters if no other value
determines the color of the units.

When the net is to be changed, the user is advised to use the wire frame
model until the desired configuration is reached. This speeds up the
display by an order of magnitude.


\subsubsection{Project Panel}
\index{3D Control Panel!Project Panel}
 
\begin{figure}[htbp]
\begin{center}
  \begin{minipage}{\textwidth}
    \screendump{0.75}{xgui_3D_figs/3D_ModelPanel.ps}
  \end{minipage}
  \hspace{2cm}
  \begin{minipage}{\textwidth}
    \screendump{0.75}{xgui_3D_figs/3D_ProjectPanel.ps}
  \end{minipage}
\caption{Model Panel (left) and Project Panel (right)}
\end{center}
\end{figure}

Here the kind of projection is selected.

\fbox{\tt PARALLEL} selects parallel projection, i.e.\
parallels in the original space remain parallel.

\fbox{\tt CENTRAL} selects central projection, i.e.\
parallels in original original space intersect in the display.

With the {\tt Viewpoint} fields, the position of the viewer can be
set. Default is the point  \mbox{(0, 0, -1000)} which is on the
negative z-axis. When the viewer approaches the origin the network
appears more distorted.


\subsubsection{Light Panel}
\index{3D Control Panel!Light Panel}
 
\begin{figure}[htbp]
\begin{center}
  \begin{minipage}{\textwidth}
     \screendump{0.75}{xgui_3D_figs/3D_LightPanel.ps}
  \end{minipage}
  \caption{Light Panel}
\end{center}
\end{figure}

In the light panel, position and parameters of the light source can be
set. The fields {\tt Position} determine the location of the source.
It is set to \mbox{(0, 0, -1000)} by default, which is the point of
the viewer. This means that the net is illuminated exactly from the
front.  A point in positive z-range is not advisable, since all
surfaces would then be shaded.

\quad \\
With the {\tt Ambient Light} fields, the parameters for the background
light are set.
\begin{tabbing}
\qquad {\tt Intensity} \quad \= sets the intensity of the background
brightness. \\
\quad \\
\qquad {\tt Reflection} \> is the reflection constant for the background
    reflection. (0 $\leq$ Ref. $\leq$ 1) \\
\quad \\
The fields {\tt Diffuse Light} determine the parameters for diffuse
reflection. \\
\quad \\
\qquad {\tt Intensity} \> sets the intensity of the light source. \\
\quad \\
\qquad {\tt Reflection} \> is the reflection constant for diffuse
    reflection. (0 $\leq$ Ref. $\leq$ 1) \\
\end{tabbing}


\subsubsection{Unit Panel}
\label{units-d3}
\index{3D Control Panel!Unit Panel}

\begin{figure}[htbp]
\begin{center}
  \begin{minipage}{\textwidth}
    \screendump{0.75}{xgui_3D_figs/3D_UnitPanel.ps}
  \end{minipage}
    \hspace{2cm}
  \begin{minipage}{\textwidth}
    \screendump{0.75}{xgui_3D_figs/3D_LinkPanel.ps}
  \end{minipage}
  \caption{Unit Panel (left) and Link Panel (right)}
\end{center}
\end{figure}

With the unit panel the representation of the units can be set. The
upper part shows the various properties that can be used to display
the values:

%\begin{tabular}{llp{10cm}}
%\quad & \quad & \quad \\
%\qquad & \fbox{\tt SIZE} & a value is represented by the size of the
%unit. The maximum size is defined by the {\tt Aspect} field in the
%setup panel. Negative and small positive values are not displayed.\\
%\quad & \quad & \quad \\
%\qquad & \fbox{\tt COLOR} & a value is represented by the color of the
%unit. A positive value is displayed green, a negative red. This option
%is available only on color terminals.\\
%\quad & \quad & \quad \\
%\qquad & \fbox{\tt TOP LABEL} & a value is described by a string in
%the upper right corner of the unit.\\
%\quad & \quad & \quad \\
%\qquad & \fbox{\tt BOTTOM LABEL} & a value is described by a string in
%the lower right corner of the unit.\\
%\quad & \quad & \quad \\
%\end{tabular}

\begin{itemize}
\item \fbox{\tt SIZE}: a value is represented by the size of the
unit. The maximum size is defined by the {\tt Aspect} field in the
setup panel. Negative and small positive values are not displayed.
\item \fbox{\tt COLOR}: a value is represented by the color of the
unit. A positive value is displayed green, a negative red. This option
is available only on color terminals.
\item \fbox{\tt TOP LABEL}: a value is described by a string in
the upper right corner of the unit.
\item \fbox{\tt BOTTOM LABEL}: a value is described by a string in
the lower right corner of the unit.
\end{itemize}

In the lower part the type of the displayed value, selected by a button
in the upper part, can be set. It is displayed by

%\begin{tabular}{llp{10cm}}
%\quad & \quad & \quad \\
%\qquad & \fbox{\tt ACTIVATION} & the current activation of the unit. \\
%\quad & \quad & \quad \\
%\qquad & \fbox{\tt INITIAL ACT.} & the initial activation of the unit. \\
%\quad & \quad & \quad \\
%\qquad & \fbox{\tt OUTPUT} & the output value of the unit. \\
%\quad & \quad & \quad \\
%\qquad & \fbox{\tt BIAS} & the threshold of the unit. \\
%\quad & \quad & \quad \\
%\qquad & \fbox{\tt NAME} & the name of the unit. \\
%\quad & \quad & \quad \\
%\qquad & \fbox{\tt NUMBER} & the number of the unit. \\
%\quad & \quad & \quad \\
%\qquad & \fbox{\tt Z-VALUE} & the z-coordinate of the unit. \\
%\quad & \quad & \quad \\
%\qquad & \fbox{\tt NOTHING} & no value. \\
%\quad & \quad & \quad \\
%\end{tabular}

\begin{itemize}
\item \fbox{\tt ACTIVATION}: the current activation of the unit. 
\item \fbox{\tt INITIAL ACT.}: the initial activation of the unit. 
\item \fbox{\tt OUTPUT}: the output value of the unit. 
\item \fbox{\tt BIAS}: the threshold of the unit.
\item \fbox{\tt NAME}: the name of the unit. 
\item \fbox{\tt NUMBER}: the number of the unit. 
\item \fbox{\tt Z-VALUE}: the z-coordinate of the unit. 
\item \fbox{\tt NOTHING}: no value. 
\end{itemize}

The options {\tt NAME}, {\tt NUMBER} and {\tt Z-value} can be used
only with the top or bottom label. The other values can be combined
freely, so that four values can be displayed simultaneously.
 

\subsubsection{Links Panel}
\index{3D Control Panel!Links Panel}

In the links panel the representation of the links can be switched on
and off with the buttons \fbox{\tt ON} and \fbox{\tt OFF}. The button
\fbox{\tt COLOR} forces color representation of the links (only with
color monitors), and the button \fbox{\tt LABEL} writes the weights
of the links in the middle.

In the {\tt fonts} part of the panel, the fonts for labeling the links
can be selected. The button \fbox{\tt SMALL} activates the  $5 \times
8$ font, the button \fbox{\tt BIG} the $8 \times 14$ font


\subsubsection{Reset Button}
\index{3D Control Panel!Reset Button}
 
With the \fbox{\tt RESET} button the values for moving and rotating
are set to zero. The scaling factor is set to one.

\subsubsection{Freeze Button}
\index{3D Control Panel!Freeze Button} 

The \fbox{\tt FREEZE} button keeps the network from being redrawn.



\subsection{3D-Display Window}
\index{3D Control Panel!3D Display Window}
\index{3D Display Window}
\index{Window!3D Display Window}

In the display window the network is shown (see figure
\ref{LinksSolid}). It has no buttons, since it is fully controlled by
the control panel. It is opened by the \fbox{\tt DISPLAY} button of
the control panel. When the control panel is closed, the display
window is closed as well.

{\bf Note:} The 3D-display is only a display window, while the
2D-display windows have a graphical editor integrated. There is also
no possibility to print the 3D-display via the print panel.






