[an error occurred while processing this directive]
[an error occurred while processing this directive]

Einbinden von VRML/X3D Modellen in HTML

Die Integration von VRML-Szenen in HTML-Seiten ist grundsätzlich nicht viel aufwändiger als die Verwendung von Bildern.

Um Seiten mit VRML-Inhalt browser-, plugIn- und betriebssystemübergreifend nutzbar zu machen, müssen jedoch einige Überlegungen mehr angestellt werden.

Die VRML-Inhalte auf dieser Seite sind entsprechend den jeweils angegebenen Methoden in diese Seite eingebunden. Sie werden also je nach Browser und PlugIn unterschiedliches zu sehen bekommen. Als Beispiel Modell wird ein einfacher rotierender roter Quader vor grünem Hintergrund verwendet. Falls es zur Unterscheidung hilfreich ist, kommt eine Variante mit blauem Hintergrund zum Einsatz.

Darstellung in einem externen Fenster

Die einfachste Methode, Ihrem Besucher ein VRML-Modell zugänglich zu machen, besteht darin, auf die *.wrl Datei mit einem einfachen Link zu verweisen. Der Browser wird dann versuchen, das Modell fensterfüllend anzuzeigen.

Bitmap der VRML-Szene

Falls Sie ein VRML-PlugIn installiert haben, klicken Sie auf das Bild, um das Modell in einem neuen Fenster anzuzeigen.

<a href="/VRML/rotating-cube.wrl" target="_blank">
<img src="rotating-cube.png" style="width:180px; height:100px;" alt="Bitmap der VRML-Szene"/></a>


Sinnvoll einsetzbar ist diese Technik z.B.

Allerdings lassen Sie den Besucher recht alleine, falls er kein passendes Anzeigeprogramm zur Verfügung hat. Sie sollten also zumindest mit einem Hinweis auf dessen Notwendigkeit hinweisen.

Einbindung mit dem <embed>-Tag

Von Netscape wurde mit der Browser-Version 2.0 das <embed> Tag als proprietäre HTML-Erweiterung zum Einbinden von Multimedia-Inhalt eingeführt. Diese wird zwar von den meisten Browsern interpretiert (von IE seit Version 3.0 von 1996), wurde aber nie in den Standard übernommen und sollte daher eigentlich nicht mehr verwendet werden.

Über das Attribut pluginspage können Sie die Downloadseite eines Anbieters angeben, zu der der Browser weiterleiten kann, falls kein passendes PlugIn gefunden wird.

Testseite mit <embed> anzeigen
<embed src="http://www.immersive-sim.de/VRML/rotating-cube.wrl"
       type="model/vrml"
       pluginspage="http://www.parallelgraphics.com/cortona"
       width="180px" height="100px" />
<noembed>
<p>Inhalt in diesem Bereich wird von allen Browsern angezeigt, die das "embed"-Tag nicht kennen und zwar unabhängig davon, ob ein geeignetes Plugin vorhanden ist.</p>
</noembed>

Einbindung mit dem <object>-Tag

Die standardkonforme Methode, Multimedia-Objekte in eine HTML-Seite einzubinden ist die Verwendung des <object> Tags. Dies ist zwar mit den meisten Browsern möglich (mit Netscape seit Version 4 von 1997), allerdings nur mit einer browserabhängigen Syntax.

Je nachdem, welchen Browser Sie benutzen, werden Sie von den folgenden beiden VRML-Szenen nur eine sehen können (oder keines, falls Sie kein Plugin installiert haben).

Der im jeweiligen Quellcode grün gekennzeichnete Text wird nur angezeigt, falls das Starten der Applikation fehlschlägt. Statt oder ergänzend zum Text können Sie hier natürlich auch alternativen Inhalt z.B. in Form einer Abbildung der VRML-Szene anbieten. Dies ist ein sehr wichtiger Vorteil gegenüber dem <embed>-Tag, den Sie unbedingt nutzen sollten.

Netscape, Opera, Firefox,...-Methode:

Wenn Sie diesen Text lesen können, haben Sie kein VRML-Plugin installiert

<object type="model/vrml" data="rotating-cube.wrl">
<p>Wenn Sie diesen Text lesen können, haben Sie kein VRML-Plugin installiert</p>
</object>

Der IE wird mit diesem Code zwar ein PlugIn laden, allerdings kein Modell darstellen.

Internet Explorer-Methode:

Wenn Sie diesen Text lesen können, haben Sie kein VRML-Plugin installiert

<object type="model/vrml">
<param name="SRC" value="http://www.immersive-sim.de/VRML/rotating-cube.wrl"/>
<p>Wenn Sie diesen Text lesen können, haben Sie kein VRML-Plugin installiert</p>
</object>

Wie Sie sehen, erwartet der IE die Angabe der URI der VRML Datei nicht über das Attribut data innerhalb des <object> Tags, sondern in Form eines <param> Tags, was aber alle anderen Browser wiederum nicht verstehen. Das Attribut classid=" " (inclusive Leerzeichen zwischen den Anführungszeichen) ist notwendig, wenn BS Contact verwendet wird. Einige Viewer (Flux und Venues) finden die VRML Datei nicht, falls ein absoluter Pfad im value Attribut (value="/VRML/rotating-cube.wrl") verwendet wird. Es ist daher sicherer eine komplette URL (value="http://www.immersive-sim.de/VRML/rotating-cube.wrl") oder relative Pfade (value="../../../VRML/rotating-cube.wrl") zu verwenden.

Darüber hinaus bietet der IE noch die Möglichkeit, ein spezielles PlugIn zu erzwingen. Dies geschieht durch Angabe der für eine ActiveX Komponente eindeutigen Kennung: der CLSID. Diese CLSID wird im <object> Tag im Attribut classid angegeben.

Wenn Sie diesen Text lesen können, haben Sie entweder kein Cortona VRML-Plugin installiert, oder Sie benutzen keinen Internet Explorer

<object classid="CLSID:86A88967-7A20-11d2-8EDA-00600818EDB1"
   codebase="http://www.parallelgraphics.com/bin/cortvrml.cab#Version=4,2,0,93">
<param name="SRC" value="http://www.immersive-sim.de/VRML/rotating-cube.wrl">
<p>Wenn Sie diesen Text lesen können, haben Sie entweder kein <b>Cortona<b> VRML-Plugin installiert oder Sie benutzen keinen Internet Explorer</p>
</object>

Mit dem Attribut codebase können Sie den Aufruf eines vom jeweiligen Hersteller angebotenen Installers erreichen.

Für viele Multimediaformate, die zwingend eine bestimmte Applikation benötigen, ist diese Methode Standard. Sie sollten sie aber für VRML / X3D nur einsetzen, falls die von Ihnen angebotene VRML-Szene wirklich nur mit einem speziellen PlugIn darstellbar ist (siehe unser HowTo zur Verwendung der mask Option bei Cortona) oder dieses aus anderen Gründen (z.B. Multi User System) zwingend erforderlich ist.
Ein Besucher Ihrer Seite, der z.B. Contact installiert hat, wird nämlich nicht begeistert sein, wenn er ein zusätzliches Programm für Inhalte installieren soll, die er eigentlich mit dem bereits vorhandenen betrachten könnte. Die "benutzerfreundliche" Eigenschaft diverser Installationsroutinen, dieses neue PlugIn auch gleich als Defaultanwendung für diese Inhalte einzurichten, wird ebenfalls nicht dazu beitragen, diesen Besucher als neuen Fan Ihrer Seite zu gewinnen.

Als extrem nützlich erweist sich diese Möglichkeit jedoch für den Entwickler von VRML Szenen, da diese auf diese Art leicht mit unterschiedlichen Viewern getestet werden können.

CLSID für verschiedene Viewer

Cortona

86A88967-7A20-11d2-8EDA-00600818EDB1

BS Contact und Blaxxun Contact

4B6E3013-6E45-11D0-9309-0020AFE05CC8

Octaga

660D0125-4C92-4EDD-B7B4-B36857F1449E

Flux

918B202D-8E8F-4649-A70B-E9B178FEDC58

Venues

F42FFB57-FEF5-499B-A89B-776BDD29BBE1

Cosmo Player

06646724-BCf3-11D0-9518-00C04FC2DD79

World View

b4d99696-acb2-11d1-a635-00609753e802


Kombinierte Methoden

Auf Seiten mit VRML Inhalten sieht man oft Konstrukte dieser Art:

<object classid="CLSID:86A88967-7A20-11d2-8EDA-00600818EDB1"
   codebase="http://www.parallelgraphics.com/bin/cortvrml.cab#Version=4,2,0,93">
   <param name="SRC" value="http://www.immersive-sim.de/VRML/rotating-cube.wrl">
   <embed class="VRML" src="http://www.immersive-sim.de/VRML/rotating-cube-bgblue.wrl">
</object>

Übersetzt bedeutet das: falls der Benutzer zufällig den Internet Explorer verwendet und das Cortona PlugIn installiert hat, verwende die standardkonforme <object> Methode. Hat er kein Cortona PlugIn installiert, schlage ihm vor, es zu installieren. Wenn er das nicht will oder er einen anderen Browser verwendet, versuche mit dem veralterten und nicht standardkonformen <embed> dein Glück.

Abgesehen von der Tatsache, dass der Besucher mit sanfter Gewalt zur Verwendung eines speziellen Viewers gelenkt werden kann, ist damit gegenüber der ausschließlichen Verwendung des <embed>-Tags nichts gewonnen (zumindest seit der IE3.0 1996 das <embed>-Tag lernte). Aus nachvollziehbaren Gründen wird diese Vorgehensweise jedoch häufig von den Herstellern empfohlen und offensichtlich bereitwillig von vielen Webautoren übernommen.

Um auf die oben beschriebenen Inkompatibilitäten und Probleme ohne Java Script zu reagieren, weist dieses kaskadierende Anbieten unterschiedlicher Möglichkeiten jedoch in die richtige Richtung.

Unser Ziel ist eine standardkonforme Methode, die mit möglichst vielen Browsern und PlugIns funktioniert.

Ein naheliegender Gedanke ist daher, in den Bereich für alternativen Inhalt innerhalb des <object>-Tags die jeweils andere Syntaxvariante einzufügen.

<object classid="clsid:4B6E3013-6E45-11D0-9309-0020AFE05CC8"
        standby="Loading BS Contact VRML Viewer">
 <param name="SRC" value="http://www.immersive-sim.de/VRML/rotating-cube.wrl"/>
 <object class="VRML" type="model/vrml"
         data="http://www.immersive-sim.de/VRML/rotating-cube-bgblue.wrl">
    Wenn Sie diesen Text lesen können,
    haben Sie wahrscheinlich kein VRML-Plugin installiert
 </object>

</object>

Dies ist valider HTML Code. Er ist allerdings nicht anwendbar, da der Internet Explorer mit den verschachtelten <object>-Tags nicht zurecht kommt. Dies gilt nicht nur für VRML-Objekte sondern für <object>s im allgemeinen. Es ist also keine gute Idee, als alternativen Inhalt z.B. eine Flash Animation vorzusehen.

Also nochmal zurück. Wie wir oben schon bemerkt haben, muß dem IE die VRML Datei mit <param name="SRC" ...> übergeben werden, während sie die anderen Browser gerne über das Attribut data serviert bekommen. Offensichtlich ignorieren alle Browser die jeweils andere Datenquelle. Warum also nicht beides angeben?:

<object class="VRML" type="model/vrml" data="/VRML/rotating-cube.wrl">
 <param name="src" value="/VRML/rotating-cube-bgblue.wrl"/>
 <a href="/VRML/rotating-cube.wrl" target="_blank">
 <img src="rotating-cube.png" class="VRML" alt=""/>
 <p>Bitte klicken Sie auf das Bild, um das
    Modell in einem neuen Fenster anzuzeigen</p>

</object>

Als Notanker für Uralt Browser dient nicht <embed>, sondern die Link-Methode, was zu validem HTML führt.

In der Tat funktioniert diese einfache Lösung erstaunlich gut mit vielen von uns gestesteten Browsern und PlugIns. Als Spielverderber entpuppt sich jedoch BS/blaxxun Contact mit dem erforderlichen Attribut classid=" " (s.o.), das die Anzeige in nicht IE-Browsern zuverlässig verhindert.

"VRML Satay"-Methode:

Einen Ausweg aus diesem Dilemma bieten die mit dem Internet Explorer 5 eingeführten conditional comments. Inhalte innerhalb dieser Kommentare werden nur von IE-Versionen ab 5.0 interpretiert. Frühere IE-Versionen und alle anderen Browser sehen einen normalen, standardkonformen Kommentar und ignorieren den Inhalt.

Bitte klicken Sie auf das Bild, um das Modell in einem neuen Fenster anzuzeigen
<!--[if IE]>
<object style="width:180px; height:100px;" type="model/vrml" classid=" ">
 <param name="src" value="http://www.immersive-sim.de/VRML/rotating-cube.wrl"/>
<![endif]x-->
<!--[if !IE]> <-->

<object style="width:180px; height:100px;" type="model/vrml"
      data="/VRML/rotating-cube-bgblue.wrl">
<!--> <![endif]-->
 <param name="VRML_DASHBOARD" value="false"/>
 <param name="DASHBOARD" value="false"/>
 <a href="http://www.immersive-sim.de/VRML/rotating-cube.wrl" target="_blank">
 <img src="rotating-cube.png" style="width:180px; height:100px;" alt=""/></a>
 <p>Bitte klicken Sie auf das Bild, um das
    Modell in einem neuen Fenster anzuzeigen</p>

</object>

Damit sollten alle halbwegs modernen Browser zurechtkommen.
Das "x" hinter dem ersten [endif] ist übrigens kein Tippfehler, sondern ein Workaround für einen Bug im IE, der ansonsten diesen Kommentar im Browser darstellt, wenn kein PlugIn installiert ist.

Wir nennen diese Methode "VRML Satay" als Referenz an Drew Mclellan's 2002 vorgestellte Flash Satay Methode.


Die hier vorgestellte Methode ist unser Vorschlag, sich diesem (leider) nicht ganz einfachen Thema anzunähern. Wir sind daher dankbar für jedes Feedback - auch positivem (bitte immer Betriebssystem / Browser / Plugin incl. Version angeben).

zuletzt geändert: Thursday, 04-Aug-2005 10:28:12 CEST