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.
Falls Sie ein VRML-PlugIn installiert haben, klicken Sie auf das Bild, um das Modell in einem neuen Fenster anzuzeigen.
<img src="rotating-cube.png" style="width:180px; height:100px;" alt="Bitmap der VRML-Szene"/></a>
Sinnvoll einsetzbar ist diese Technik z.B.
- bei einer Modell Galerie, wo der Benutzer aufgrund von Vorschaubildern gezielt die für ihn interessanten Modelle anwählen kann
- bei großen Modellen, die sonst ein zügiges Laden der Seite verhindern
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.
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:
<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:
<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.
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:
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.
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?:
<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.
<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).
© immersive SIM engineering GmbH 2011
zuletzt geändert: Thursday, 04-Aug-2005 10:28:12 CEST