Diese Seminararbeit zum Thema Computergrafik und Visualisierung gibt einen Überblick über VRML (Virtual Reality Modelling Language) und dessen Entstehung und Entwicklung. Außerdem wird das Zusammenspiel von VRML mit anderen Programmiersprachen beschrieben. Des Weiteren wird die Weiterentwicklung von X3D (Extensible 3D) aufgezeigt. Hier wird eine Übersicht über den aktuellen Entwicklungsstand vorgestellt und auf die Unterschiede zum Vorgänger VRML eingegangen. Hierbei werden weiterhin mögliche zukünftige Entwicklungen dargestellt.
Autorenwerkzeuge zeigen auf, wie VRML bzw. X3D programmiert werden kann. Diese reichen vom einfachen Texteditor bis zu komplexen 3D Programmen.
Eine Auswahl an VRML bzw. X3D Betrachtern zeigt auf mit welcher Software sich VRML oder X3D Dateien darstellen lassen.

Anhand eines Beispielprojektes wird der Einsatz von VRML in der Praxis dargestellt. Ausgewählte Programmsegmente werden mit Quellcdoe erläutert, die Einblicke in die Möglichkeiten von VRML, wie beispielsweise Animation und Interaktion, geben. Zahlreichen Screenshots zeigen einen guten Überblick über die Struktur komplexer Projekte. Hierbei wurde das Brandenburger Tor, die Siegessäule und der Reichstag mit VRML programmiert. Auf der Straße des 17. Junis fahren beispielsweise Autos, die Szene lässt sich vom Tag- in den Nachtmodus wechseln und der Reichstag kann auch von Innen besucht werden.
Im Fazit wird abschließend aufgeführt, wie wir persönlich den Umgang mit VRML/X3D empfunden haben und die zukünftige Entwicklung abschätzen.

Bitte schreibt doch ein Kommentar, wenn euch die Dokumentation weitergeholfen hat oder eure Meinung über die heutige Sicht über VRML und X3D. Zum VRML & X3D Projekt

Ich zeige diese Technik anhand eines RSS Icons auf, da dieses einfach aufgebaut ist und sich der Umgang mit Vektoren gut erklären lässt.

Ich verwende Photoshop CS2 in englisch bei diesem Tutorial. Viele Erläuterungen sind mit Bildern dargestellt, so dass sie auch ohne Englischkenntnisse auf die deutsche Version übertragen werden können. Weiterhin ist Photoshop CS3 und CS4 ohne Einschränkung nutzbar.

1. Grundform erstellen

Zuerst erstellen wir eine neue Datei in 64×64 Pixeln und wählen das Rounded Rectangle Tool (U) in der Palette aus.

Hiermit erstellen wir ein Quadrat (Shift-Taste) mit einem Eckradius von 16px. Die Hintergrundfarbe spielt dabei keine Rolle.

2. Ebenen-Styles zuweisen

Diesem weisen wir nun per Doppelklick auf das Layer einen Style zu. Hierbei zeige ich beispielhaft das klassische Design in orange. Es werden Einstellungen in den Kategorien: Stroke, Gradient Overlay und Inner Glow gesetzt.

2.1 Stroke

Folgende Einstellungen müssen verändert werden. Alle anderen Einstellungen können unverändert bleiben.

• Size: 2px
• Position: Inside
• Fill Type: Gradient
• Farbwert untere Farbe: #cc621c
• Farbwert obere Farbe: #cc5e14

2.2 Gradient Overlay:

Hier werden folgende Einstellungen geändert:

• Angle: 125 Grad
• Gradient wie folgt:

• Linker Farbwert: #dc5e2c | Location: 0%
• Mittlerer Farbwert: #fc9e3c | Location: 50%
• Rechter Farbwert: #e47234 | Location: 100%

2.3 Inner Glow:

Hier werden folgende Einstellungen gesetzt:

• Blend Mode: normal
• Opacity: 100%
• Farbwert: #f49a54
• Technique: Precise
• Choke: 100%
• Size: 3px

Der bisherige Zwischenstand sollte wie folgt aussehen:

3. Arbeiten mit Shapes

Jetzt folgt der wesentliche Teil des Tutorials – die Erstellung des Iconinhalts mittels Shapes. Zuerst positionieren wir einen weißen Kreis in die linke untere Hälfte des Icons. Hierzu wählen wir das Ellipse Tool (U) in der Toolbar. Einen Kreis erhält man durch gleichzeitiges Drücken der Shift-Taste beim Aufziehen des Shapes. Der Kreis sollte einen Durchmesser von 13px haben. Danach wird eine vertikale Hilfslinie zur linken äußeren Kante des Kreises gezogen und eine horizontale Hilfslinie zur unteren Kante des Kreises. Diese vereinfachen die korrekte Erstellung der nachfolgenden Bögen.

Jetzt folgt die Erstellung der Bögen. Es wird abermals das Ellipse Tool (U) ausgewählt. Jetzt setzen wir den Mauszeiger in den Schnittpunkt der Hilfslinien und ziehen einen weißen Kreis auf mit gehaltener Shift- und Alt-Taste mit einem Radius von 60px. Durch gleichzeitiges Drücken der Alt-Taste wird der Kreis vom Mittelpunkt ausgehend aufgezogen.

Nun selektieren wir die Vector Mask im Layer des neu erstellten Kreises und wählen in der oberen Toolbar des Werkzeugs Ellipse Tool (U) die Funktion Substract from shape area (-).

Jetzt ziehen wir abermals ausgehend vom Schnittpunkt der Hilfslinien einen zweiten Kreis auf. Die Fläche dieses Kreises wird von der Fläche des ersten Kreises abgezogen. Der zweite Kreis solllte einen Radius von 40px haben. So haben wir einen weißen Ring in einem Layer erstellt. Die linke und untere Hälfte des Rings werden mit der gleichen Technik links und unterhalb der Hilfslininen abgeschnitten. Hierzu benutzen wir das Retangle Tool (U) und wählen abermals Substract from shape area aus.

Der Zwischenstand sollte demnach folgender Maßen aussehen:

Als nächstes duplizieren die Ebene mit dem erstellten Bogen (STRG + J).
Jetzt wird der zweite Bogen transformiert (STRG + T). Wichtig ist, dass die Vektor-Maske im Ebenenfenster nicht ausgewählt ist, sondern die Vorschau, da sonst die entsprechenden Funktionen in der oberen Toolbar ausgegraut sind. Beim Transformieren halten wir abermals die Tasten Shift und Alt gleichzeitig gedrückt. Der zweite Bogen sollte einen Durchmesser von 88px haben.

Wie jetzt zu sehen ist, hat der zweite Bogen eine größere Stärke als der Erste. Um dieses anzupassen muss das Path selection tool (A) in der Toolbar ausgewählt werden. Hiermit selektieren wir den inneren Kreis. Diesen Kreis transformieren (STRG+T) wir nun bei gleichzeitigem Drücken der Shift- und Alt-taste auf einen Radius von 70px.

Somit ist das RSS-Icon basierend auf auschließlich Vektoren fertig.

4. Icon transformieren

Das Icon kann nun problemlos in jede beliebige Größe skaliert werden. Hierzu kann der Image Size (STRG+Alt+i) Dialog verwendet werden. Das Icon sieht von 16×16 bis 128×128 Pixeln folgendermaßen aus.

Die Frage ist, wie fängt man an, welcher Weg ist effizient und effektiv? Zuerst muss natürlich das Layout erstellt werden. Ist dieses fertig, steht die Umsetzung in HTML und CSS an. Somit stehen zwei Dateien zur Verfügung – die “style.css” und die “index.html”. Für den Transfer nach WordPress stehen einem jetzt zwei Möglichkeiten zur Verfügung. Man kann sich ein bestehendes Theme nehmen und so anpassen, bis es dem eigenenem ähnelt oder man transferiert die WordPressbefehle in den bestehenden HTML Code.

Ich habe mich für letzteren Weg entschieden. Zuerst habe ich die bestehende HTML Datei so gesplittet, dass die üblichen Dateien von WordPress existierten. Also beispielsweise “header.php”, “sidebar.php” und “footer.php”. Somit hat man das Grundgerüst zur Verfügung. Von der Website www.texte.de kann man sich ein Template downloaden, welches notwendige Dateien aufzeigt, die ein Theme enthalten sollte und von jeglicher Gestaltung (CSS) befreit ist. Die entsprechenden CSS Klassen sind allerdings schon integriert. Vielen Dank an dieser Stelle an den Author. Hier steht eine deutsche und eine englische Variante zur Verfügung. Damit kann der notwendige WordPress-Code nachvollzogen werden oder ggf. in der WordPress Referenz nachgeschlagen werden.

Nachdem alle Dateien existieren und dem eigenem Layout angepasst worden sind, ist es Zeit für einige Plugins, um bespielsweise Galerien anzuzeigen, WordPress für SEO zu optimieren, deutsche Umlaute automatisch korrekt zu kodieren oder sich vor Spam besser zu schützen.

Was muss man mitbringen? HTML und CSS sollte man gut beherrschen, für PHP ist Basiswissen hilfreich. Javascript hingegen ist nicht erforderlich. Für das Design im Vorfeld sind Kenntnisse mit Bildbearbeitungsprogrammen nicht verkehrt.

Bei der Gestaltung meines ersten WordPress Blogs, der dem Thema virtuelle Welten gewidmet ist, habe ich ein bestehendes Theme genommen und angepasst. Auf diesem Weg kommt man dem eigenen Design zwar sehr nahe, allerdings, muss das bestehende Theme erstmal verstanden werden, damit man die Bestandteile anpassen kann. Das Design eines eigenen Themes erfordert im Vorfeld mehr Arbeit bzgl. CSS und HTML. Ist das aber das erstmal vorhanden geht die Übertragung zu WordPress leichter von der Hand.