Obwohl wir in diesem Buch keine Einführung in die Hypertext-Beschreibungssprache HTML liefern können und wollen, sollte die Schnittstelle zu diesem dominierenden Dokumenttyp auf dem World Wide Web jedem Worldbuilder bekannt sein. Es ist zudem - zumindest derzeit - in nahezu allen Anwendungszusammenhängen sinnvoll und notwendig, VRML- und HTML-Dokumente zu einem aufeinander abgestimmten Informationssystem zu kombinieren. Aus diesem Grund wollen wir im folgenden nicht nur demonstrieren, wie verschiedene Dokumenttypen aus VRML-Umgebungen heraus aufgerufen werden, sondern ebenso, wie sich letztere in HTML-Umgebungen integrieren lassen.
Der gegenseitige Aufruf beider Dokumenttypen läßt sich anhand der jeweils zuständigen Anweisung im VRML- und HTML-Quellcode darstellen. Hierbei verwenden wir anstelle der vollständigen URLs erneut relative Adressen. Das folgende Beispiel zeigt, wie eine HTML-Datei ,,text.htm" aus einer VRML-Umgebung und eine VRML-Datei ,,grafik.wrl" aus einer HTML-Umgebung aufgerufen wird.
Anchor { url
"text.htm" children [ Shape { geometry Box {} } ] }
<A HREF="grafik.wrl">
Virtuelle Welt </A>
Während im VRML-Code der Hyperlink mit dem Gruppenknoten Anchor nach der oben beschriebenen Methode auf das grafische Primitiv Quader übertragen wird, umschließen die HTML-Steuerelemente (engl. Tags) <A HREF> und </A> den Text Virtuelle Welt, der im Browser als sichtbarer Hypertext-Link erscheint. Eine Aktivierung der jeweiligen Links führt zum entsprechenden Wechsel des Browser-Typs. Für die als Plug-in realisierten VRML-Viewer bedeutet dies, daß sie vom kontrollierenden HTML-Browser entsprechend ge- bzw. entladen werden.
Zur parallelen Darstellung von VRML- und HTML-Dokumenten in einem Browser bietet sich die Einbettung virtueller in HTML-Umgebungen an. Dieses Verfahren setzt derzeit den Einsatz des HTML-Browsers Netscape Navigator ab Version 3.0 voraus, wobei sich dieser jedoch ohnehin einer weiten Verbreitung erfreut. Der von Netscape Navigator unterstützte HTML-Sprachumfang wurde u.a. dergestalt erweitert, daß sich ein als Plug-in realisierter VRML-Viewer wie eine Abbildung auf einer HTML-Page plazieren läßt. Dies geschieht mit Hilfe des speziellen Tags <EMBED>.
n Die folgende HTML-Datei demonstriert, wie sich die VRML-Datei ,,viewpoint.wrl" als Einbettung integrieren läßt. Der umgebende Text könnte dabei beispielsweise Erklärungen zur Funktionsweise des VRML-Viewers liefern. Wenn Sie die Datei ,,embed.htm" in Netscape Navigator 3.0 öffnen und den VRML-Viewer WorldView als Plug-in aktiviert haben, ergibt sich die in Abbildung 8.2 gezeigte Mixtur aus HTML- und VRML-Dokument.
Listing 8.1
<HTML>
<! Datei: EMBED.HTM
<! Einbettung von VRML in HTML
<TITLE>Demonstration des EMBED-Tags</TITLE>
<BODY>
<CENTER>
<H2>HTML und VRML</H2>
<EMBED SRC="viewpnt.wrl" BORDER=none WIDTH=400 HEIGHT=300>
<P><B>
H<FONT SIZE=-1>INWEISE</FONT>
</B><BR>
Vor sich sehen Sie im VRML-Viewer die Szene "Der Kirchof".
Benutzen Sie zur Navigation die entsprechenden Steuerelemente.
<P>Viel Spaß dabei!<P>
<HR>Dies ist nur ein Beispiel!<HR>
</CENTER>
</BODY>
</HTML>
Eine weitere Möglichkeit, HTML- und VRML-Dokumente gleichzeitig darzustellen, besteht in der Verwendung des Frame-Konzepts. Dieses wird von den HTML-Browsern Netscape Navigator ab Version 2.0 und Microsoft Internet Explorer ab Version 3.0 unterstützt und erlaubt die Unterteilung des Browser-Fensters in verschiedene Segmente. In die einzelnen Frames können beliebige WWW-Dokumente geladen werden, so daß sich ein wie oben beschriebenes Informationssystem aus verschiedenen - voneinander unabhängigen oder miteinander verbundenen - Dokumenttypen aufbauen läßt.
n Unserer Kirchhofszene treu
bleibend, wollen wir im folgenden ein exemplarisches Informationssystem
wie in Abbildung 8.3
aufbauen, das sich aus zwei Frames zusammensetzt. Im linken Frame ist der
VRML-Viewer geladen, der die bekannte 3D-Szene darstellt. Auf der rechten
Seite befindet sich im HTML-Format eine einführende Erklärung
zum System. Mit Hilfe verschiedener Hyperlinks bzw. Hypertext-Links
läßt sich durch die Verbindung der beiden Frames eine Art von
,,Textur-Infosystem" entwickeln. Klickt der Cybernaut in der
VRML-Umgebung auf eines der texturierten Basisobjekte, erscheint auf der
rechten Seite ein korrespondierender Erklärungstext zur verwendeten
Textur. Aus Demonstrationszwecken ist es per Mausklick auf die Laterne
zudem möglich, die Kirchhofszene zu verlassen und eine andere
virtuelle Welt aufzurufen. Diese enthält eine Kugel, die wiederum
als Hyperlink zur Rückkehr auf den Kirchhof dient. Um auch die
internen Hyperlinks zu Viewpoints vorzustellen, läßt sich per
Klick auf den virtuellen Boden ein direkter Sprung in die
,,Froschperspektive" vollziehen. Zur Realisierung des Textur-Infosystems werden
mehrere Dateien mit unterschiedlichen Funktionen benötigt. Zu Beginn
gilt es, das Browser-Fenster in zwei Bereiche zu unterteilen und dabei
den linken Frame mit der VRML-Datei ,,anchor.wrl" und den rechten
Frame mit der HTML-Datei ,,hinweis.htm" zu füllen. Diese
Aufgabe übernimmt die HTML-Datei ,,anchor.htm". Listing 8.2 Nachdem der Anzeigebereich des Browsers mit der
Anweisung <FRAMESET
COLS="50%,*"> gleichmäßig unterteilt wurde,
werden in die mit Links und Rechts bezeichneten Frames die entsprechenden
Dateien geladen. Wie sämtliche weiteren HTML-Dateien auch, setzt
sich ,,hinweis.htm" aus Standard-Code zusammen, den wir zum
Verständnis des Zusammenspiels der Dokumente nicht näher
erläutern brauchen. Im Mittelpunkt des Interesses steht vielmehr die
VRML-Datei ,,anchor.wrl", die sämtliche aus der virtuellen
Umgebung heraus aufrufbaren Hyperlinks
enthält. Um den innerhalb des Knotens Shape texturierten Objekten der Kirchhofszene einen Hyperlink
zuzuweisen, müssen erstere als Kindknoten im Feld children dem
entsprechenden Knoten Anchor untergeordnet werden. Der bereits bekannte
Quellcode der 3D-Szene wird demnach folgendermaßen
erweitert: Listing 8.3
Sämtliche texturierten Objekte der Datei
,,anchor.wrl" sind nach demselben Schema mit einer
korrespondierenden HTML-Datei verbunden. Der jeweilige Knoten
Anchor umschließt das im
Knoten Shape aufgeführte Objekt und definiert anhand dreier Felder
spezifische Eigenschaften. Im Feld parameter wird das Ziel-Frame Rechts
festgelegt, so daß die über das Feld url aufgerufene
HTML-Datei im rechten Anzeigebereich des Browsers erscheint. Der Anzahl
der verwendeten Texturen entsprechend, gibt es vier verschiedene
HTML-Dateien, die per Hyperlink aktiviert werden können:
,,turm.htm", ,,seite.htm", ,,dach.htm" und
,,laub.htm". Das Feld description liefert die entsprechenden
Beschreibungen zu den Hyperlinks im Browser. Da die gesamte Laterne als Hyperlink zur zweiten
VRML-Datei ,,anchor_2.wrl" dienen soll, werden beide Bestandteile
Lampe und Mast vom Gruppenknoten
Anchor umschlossen. Hierbei entfällt die
Notwendigkeit, ein Ziel-Frame anzugeben, da die aufzurufende VRML-Datei
im gleichen Anzeigebereich wie die Kirchhofszene erscheinen soll (Links).
Die Datei ,,anchor_2.wrl" enthält lediglich eine Kugel, die per
Hyperlink die Möglichkeit zur Rückkehr auf den Kirchhof
bietet. Zur Demonstration des internen Hyperlinks wird
schließlich der Boden der
Kirchhofszene mit einer bestimmten Kameraposition verbunden. Der
entsprechende Viewpoint wurde zuvor mit der Anweisung DEF als
Froschperspektive bezeichnet, so daß dieser bei Auslösung des
Links referenziert und eingenommen werden kann.
VRML- und HTML-Dokument in verschiedenen Frames
<HTML>
<! Datei ANCHOR.HTM: Frame-Aufbau
<! Teilt das Browser-Fenster in zwei Bereiche
<TITLE>Textur-Infosystem: Kombination aus HTML und
VRML</TITLE>
<FRAMESET COLS="50%,*">
<FRAME SRC="Anchor.wrl"
NAME="Links">
<FRAME SRC="Hinweis.htm"
NAME="Rechts">
</FRAMESET>
</HTML>
#VRML V2.0 utf8
# Datei ANCHOR.WRL: Hyperlinks mit Anchor
...
DEF Boden Transform { # Boden - Anfang
translation 0 -1 1
children [
Anchor { # Hyperlink
url "#Froschperspektive"
description "Sprung zum Viewpoint
Froschperspektive"
children [
Shape {
appearance Appearance { material Material {
diffuseColor .01 .025 .001 }}
geometry Box { size 14 0 8 }
}
]} # Anchor
]} # Boden - Ende
DEF Laterne Transform { # Laterne - Anfang
translation -2.5 0 2.5
children [
Anchor { # Hyperlink
url "anchor_2.wrl"
description "Eintritt in eine neue
VRML-Welt"
children [
PointLight {} # Punktlicht
DEF Lampe Shape {
appearance Appearance { material Material {
emissiveColor 1 1 1 }}
geometry Sphere { radius .1 }
} # Lampe
DEF Mast Transform {
translation 0 -0.55 0
children [
Shape {
appearance Appearance { material Material {
ambientIntensity 1
diffuseColor .3 .9 1 }}
geometry Cylinder {
radius .05
height .9 }
}
]} # Mast
]} # Anchor
]} # Laterne - Ende
DEF Kirche Transform { # Kirche - Anfang
translation 0 0 0
children [
Anchor { # Hyperlink
parameter "target=Rechts"
url "seite.htm"
description "Hinweise zur Seite-Textur"
children [
DEF Raum Shape {
appearance Appearance { # Textur statt Material
texture ImageTexture {
url "seite.jpg"
repeatS FALSE repeatT FALSE }} # Verzerren
geometry Box { size 4 2 2 }
} # Raum
]} # Anchor
DEF Dach Transform {
rotation 1 0 0 0.785 # 45 Grad-Drehung
translation 0 1 0
children [
Anchor { # Hyperlink
parameter [ "target=Rechts" ]
url "dach.htm"
description "Hinweise zur Dach-Textur"
children [
Shape {
appearance Appearance { # Textur statt
Material
texture ImageTexture { url "dach.jpg"
}}
geometry Box { size 3.95 1.75 1.75 }
}
]} # Anchor
]} # Dach
DEF Turm Transform {
translation -1.7 2 0 # -2 1.5 0
children [
Anchor { # Hyperlink
parameter "target=Rechts"
url "turm.htm"
description "Hinweise zur Turm-Textur"
children [
Shape {
appearance Appearance { # Textur statt
Material
texture ImageTexture {
url "turm.jpg"
repeatS FALSE repeatT FALSE }} #
Verzerren
geometry Box { size 1 6 1 } # 1 5 1
}
]} # Anchor
]} # Turm
DEF Kuppel Transform {
translation -1.7 6 0 # -2 5 0
children [
Anchor { # Hyperlink
parameter "target=Rechts"
url "dach.htm"
description "Hinweise zur Dach-Textur"
children [
Shape {
appearance Appearance { # Textur statt
Material
texture ImageTexture { url "dach.jpg"
}}
geometry Cone {
bottomRadius 0.6
height 2 }
}
]} # Anchor
]} # Kuppel
]} # Kirche - Ende
DEF Baum Transform { # Baum - Anfang
translation 3 -0.8 3
children [
DEF Stamm Shape {
appearance Appearance { material Material {
diffuseColor .15 .13 .1 }}
geometry Cylinder {
height 0.5
radius 0.1 }
}# Stamm
DEF Krone Transform {
translation 0 0.7 0
children [
Anchor { # Hyperlink
parameter "target=Rechts"
url "laub.htm"
description "Hinweise zur Laub-Textur"
children [
Shape {
appearance Appearance { # Textur statt Material
texture ImageTexture { url "laub.gif"
}}
geometry Sphere { radius 0.5 }
}
]} # Anchor
]} # Krone
]} # Baum - Ende
]} # Group