In diesem Tutorial wird erklärt, wie man 3D-Szenen (z.B. VRML-Dateien *.wrl, oder Shout3D-Dateien *.s3d oder anfy3D-Dateien *.a3d) in Videos, animierte gifs oder in Java-3D-Applets umsetzt. Ziel ist es, dass jeder User - auch ohne 3D-PlugIns - die geschaffenen 3D-Szenen bestmöglich betrachten kann. Natürlich kann ein solches Applet oder Video nicht alle Nuancen der Originalzsenen wiedergeben, aber der User kann einen besseren Eindruck davon gewinnen, als wenn er nur unbewegte Bilder sieht! Einige Beispiele sollen diese Möglichkeiten verdeutlichen:

Rendervideos
Bsp.:    Mpeg-Video ( mystisch_logo.mpeg )
            Mov-Video ( kirche3.mov )
            DivX-Video ( pyramidenstumpf_geschnitten.divX )

Animierte Bilder
Bsp.: animiertes gif

Java-3D-Applets
Bsp.: 3D-Anywhere-Applet
Bsp.: Anfy-3D (Java-3D)
Bsp.: Anfy-3D-Player

360^o Panorama-Bilder
Bsp.: PixAround-Applet
Bsp.: Metamorphose-Applet

Tutorial Teil 1: Erzeugung von Rendervideos
Tutorial Teil 2: Erzeugung von animierten Bildern
Tutorial Teil 3a Java-3D-Applets: Vorbearbeitung der VRML-Szene
Tutorial Teil 3b Java-3D-Applets: Anfy3DPlayer
Tutorial Teil 3c Java-3D-Applets: 3D-Anywhere
Tutorial Teil 4a PixAround-Applet
Tutorial Teil 4b Metamorphose-Applet

Ich gehe in diesem Tutorial davon aus, dass der Leser in der Lage ist mit einem geeigneten 3D-Programm 3D-Szenen selbst zu erzeugen bzw. zu gestalten. Sollte das nicht der Fall sein, muss der Leser sich zuerst mit der 3D-Programmierung auseinandersetzten ( siehe Tutorial: Bedienung des Programmes Spazz3D ).Dieses Tutorial will nun zeigen, wie eine solche fertige Szene genutzt werden kann, um z.B. animierte Logos für Webseiten zu erzeugen.

Nun fügt man eine Animation hinzu - z.B. eine Rotation um die vertikale Achse. Ich habe die Animationsdauer 4s gewählt.

Jedes 3D-Programm verfügt über die Option aus einer Animation ein Viedeo zu erzeugen 
(oder zu rendern - Keyframes einstellen!- oder zu exportieren ...):

Ich habe mich für 5 Frame pro Sekunde entschieden - in Zusammenhang mit der Animationslänge von 4 Sekunden ergibt das 20 Einzelbilder die für dieses Video gerendert werden müssen:

Das fertige Avi-Video kann nun mit einem Videobearbeitungsprogramm z.B. VirtualDub (Freeware) in jedes andere Format konvertiert (und damit auch komprimiert!) werden - vorausgesetzt der entsprechende Video-Codex ist installiert:

Beim Abspeichern als DivX z.B. wird das Video von 2,6 mb auf 48 kb komprimiert!

Somit kann man 3D-Szenen und Animationen praktisch in jedes Videoformat überführen, welches man wünscht!

Ergebnis als DivX-Video anschauen: 3dlogo.divX

Auf Homepages verwendet man nun jedoch meistens animierte Bilder im Gif-Format. Dazu kann man nahezu jedes Programm verwenden, welches zur Bearbeitung von animierten Gifs vorgesehen ist - auch eine Vielzahl von Freeware-Programmen stehen dafür zur Verfügung. Ich arbeite zu diesem Zweck mit dem Gif-Animator von Microsoft, weil der ohnehin bei der Frontpageinstallation mitgeliefert wird. Man wählt unter dem Menüpunkt Öffnen das gerenderte Avi-Video aus:

Da mein Beispielvideo mit 5 Frame pro Sekunde und 4 Sekunden Animationsdauer gerendert wurde werden nun 20 Frames in den Gif-Animator geladen:

Unter dem Menü-Reiter Animation werden folgende Einstellungen vorgenommen:

Das bedeutet - logischerweisen - ,dass unser animiertes Gif in einer endlos-Schleife andauernd wiederholt wird.

So sieht das Ergebnis dann aus ( 22kb ):

Der Punkt Hintergrund wiederherstellen ist übrigens erst interessant, wenn wir ein transparentes Gif erzeugen wollen. Dann wird der Hintergrund (nämlich auch der vorhergehende Frame) immer mit angezeigt - deshalb muss man hier diese Option auf Hintergrund wiederherstellen einstellen. Ausserdem muss man hier beachten, dass diese Änderung - wie auch die Veränderung der Dauer der Bilddarstellung - für alle Frames gültig sein müssen!

Das fertige animierte Gif sieht transparent nun so aus (der Speicherbedarf hat sich dadurch übrigens nicht verändert und liegt immer noch bei 22kb):

Um 3D-Szenen als 3D-Java Applets darstellen zu können benötigt man am einfachsten VRML-Dateien (also *.wrl). Ein Problem, welches es mit den beiden Programmen gibt die ich benutze ist folgendes: Es werden keine VRML-Simples sondern nur Meshs angezeigt - in Spazz3D heissen diese IFS (Index Face Setting). 

Um alle Objekte der Szene gleichzeitig in IFS umzuwandeln - ohne jedoch im Editor auf die Vorzüge anderer Funktionen zu verzichten - stellt man einfach bei den VRML-Export-Optionen folgendes ein:

Wenn man nun die Szene als VRML-World exportiert ...

... hat man eine *.wrl-Datei mit der man weiter arbeiten kann!

Eines der bekanntesten Java-Konstruktions-Programme ist Anfy. Dieses Programm kann eine unglaubliche Anzahl von Applets erzeugen und ist dabei völlig kostenlos - aber wenn man das fertige Applet auf der Webseite anklickt öffnet sich ein Werbefenster. Wenn man sich jedoch registrieren lässt erhält man einen Registrier-Code. Diesen kann man später eingeben, um die Werbeeinblendung auszuschalten.
Unter anderem stehen verschiedene 3D-Applets zur Auswahl. Ich arbeite in diesem Tutorial mit dem Anfy3DPlayer:

Nachdem ich diesen ausgewählt habe startet der Wizard. In diesem öffne ich die abgespeicherte *.wrl-Datei. Wenn nichts zu sehen ist liegt das meistens an der fehlenden Beleuchtung - Anfy unterstützt kein Headlight! Also am besten den Punkt load illumination ausstellen:

Mit dem Menüpunkt preview kann man eine Vorschau des Applets starten - der Videorecorder VCR spielt die Animation ab. So erhält man einen ersten Eindruck wie das Applet aussehen wird! Anhand der nächsten Karteikarten-Reiter können nun verschiedene Faktoren beeinflusst werden:

Wenn das soweit eingestellt ist, dann kann die 3D-Szene für das Applet exportiert werden. Dazu stehen das a3x-Format und das a3d-Format zur Verfügung. An dieser Stelle sollte man sich für das a3d-Format entscheiden, da dieses später bei der HTML-Generierung ohnehin angelegt wird und darüberhinaus auch kleinere Dateien erzeugt:

Besonders wichtig sind nun noch die Einstellungen der Grösse und der Interaktion. Die Einstellung interaction walk  erlaubt es dem Anwender des fertigen Applets später sich in der3D-Szene zu bewegen:

Zum Schluss wird nun die gesamte Szene als Applet exportiert: deploy scene - der Wizard erzeugt nun die HTML-Datei und die 3da-Datei. Beim anschliessenden Aufruf der HTML-Datei solte man dann das Applet mit der 3D-Szene sehen:

Die weitaus elegantere Variante ist die Erzeugung von 3D-Anywhere-Applets. Diese Applets können mit einem Ladebalken, wählbaren Menüs und sehr vielen scriptbasierten Optionen auf der Webseite aufwarten. Als Java-Konstruktionstool verwenden wir dabei den 3DAnywhere-Designer. Die 3D-Szene kann in Form von VRML-Dateien (IFS beachten - siehe oben) oder 3da-Dateien geladen werden. In meinem Beispiel habe ich wieder die VRML-Datei 3dlogo.wrl geladen und diese wiederum als 3dlogo.3da abgespeichert:

Danach kann man schon den HTML-Generator starten. Die abgespeicherte Datei ist bereits als Scene File aufgeführt und die Toolbar ist auf default.tbf (ist neben einigen anderen im Designer mit enthalten) eingestellt. Das lasse ich so wie es ist.

Unter dem Karteikarten-Reiter HTML Controls verbergen sich die bereits erwähnten scriptbasierten Optionen für die Webseite. Ich empfehle auf alle Fälle die Option Camera selection listbox zu aktivieren, da die Steuerung des Applets wie z.B. Zoomen oder Rotation nur funktioniert, wenn der Viewpoint None aktiviert ist! Die Einstellung Flat/Wire On Drag radio buttons sollte man bei umfangreicheren Szenen einstellen, um den Rechenaufwand des Applets im Rahmen zu halten:

Wenn das alles erledigt ist kann über den Button Generate die fertige Webseite erzeugt werden.

Alle bisher gezeigten Möglichkeiten der 3D-Präsentation beziehen sich in erster Linie auf die Wiedergabe von dreidimensionalen Objekten, die gewissermassen von aussen betrachtet werden können. Die Panorama-Applets eignen sich demgegenüber mehr für die bessere Visualisierung von komplexen Welten wie z.B. 3D-Chat-Rooms. Man kann hier sozusagen von innen die Welt rundum betrachten.

Für die Erzeugung von Panorama-Ansichten von virtuellen Welten benötigt man zuallererst ein 360^o-Panorama-Bild. Dieses wird im Allgemeinen aus Einzelbildern - die möglichst passgenau aufeinander folgen - zusammengesetzt. Dabei ist die Screen-Copy-Funktion von Windows oder die Screen-Capture-Funktion von vielen Freewareprogrammen sehr hilfreich. In Zusammenarbeit mit den meisten Grafikprogrammen ist das Panoramabild schnell zusammengesetzt. Das Freeware-Programm IrfanView beispielsweise verfügt über die Funktion Panorama-Bild erstellen:

Sind jedoch noch mehr Bearbeitungen notwendig kann man die Bilder auch per Hand zusammenfügen und die Übergänge nachbearbeiten. Im Endergebniss sollte dann ein Panoramabild entstanden sein, das nahtlos 360^o abdeckt. Auch Anfang und Ende des Bildes müssen zueinander passen!

Wenn man das Panorama-Bild hat, dann braucht man nur noch das PixAround-Applet: (download: uPixScreen.jar ). Der Inhalt dieses komprimierten Files muss in den Ordner entpackt werden, in dem sich auch das Panorama-Bild befindet und in den man auch die Webseite (neues HTML-Dokument) abspeichert. Nun kommt das Einbinden des Applets in den Html-Quelltext. Der entsprechende HTML-Code sieht folgendermassen aus (Die wichtigen Einträge sind rot erläutert):

<applet code="uPixScreen.class" archive="uPixScreen.jar" width=300 height=250> <--- Anfang Applet
<param name=url value="panorama_adventurewelt.jpg">                                        <--- Name der Bilddatei
<param name=autoPan value="yes">                                                                      <--- Automatisches Rotieren
<param name=startYaw value="0.0">
<param name=startPitch value="0.0">
<param name=startFov value="50.0">                                                                    <--- Verzögerung der Rotation
<param name=partialStitch value="no">
<param name=horFov value="360.0">
<param name=viewtype value="1">
<param name=hq value="1">
</applet>                                                                                                               <--- Ende Applet

Das wars auch schon! Wenn das Applet ordnungsgemäss in eine Webseite eingebunden wurde, dann sollte das Ergebnis so aussehen: 

Dieses zweite Panorama-Applet zeichnet sich durch einige wesentliche Unterschiede zu dem PixAround-Applet aus:
Das PixAround-Applet kann zwar zoomen, aber ansonsten ist es eher einfach gehalten.
Das Metamorphose-Applet kann zwar nicht zoomen, aber dafür unterstützt es Panoramas aus Einzelbildern (besseres Ladeverhalten!) und animierte Sequenzen!!! Ausserdem kann die Benutzeroberfläche individuell angepasst werden und somit sieht dieses Applet doch besser aus als das PixAround-Applet. Dafür ist es aber auch etwas schwieriger einzubinden.

Um das Rad nicht neu zu erfinden gehe ich hier nicht im Einzelnen auf den Umgang mit den Parametern dieses Applets um sondern verweise auf die Seite:
http://www.3quarks.com/Applets/Metamorphose/index-de.html
Auf dieser Homepage wird der Namen Metamorphose erklärt, das Applet zum Download angeboten und die Beschreibung der Applet-Parameter auf eine sehr ausführliche Art und Weise vorgenommen! Ich habe dem nix mehr hinzuzufügen :)

Bereits nach wenigen Minuten habe ich meine Adverture-Welt darstellen können - man beachte den animierten Wasserfall!

Das zweite Beispiel zeigt dieselbe Welt, aber in sieben Einzelbilder zerlegt, um den Ladevorgang zu optimieren. Leider geht dabei die Animation verlogen. Man muss also Prämissen setzen ...