Das virtuelle Autohaus

Kategorie: Interdisziplinär


Direkt zum Prototyp wechseln


Das Virtuelle Autohaus (kurz VAH) ist Thema meiner Master-Thesis. Dabei geht es darum eine 3D-Webanwendung zu entwickeln, die es dem Nutzer ermöglicht sich über ein Automobil zu informieren und das Fahrzeug gleichzeitg zu konfigurieren – insgesamt soll er es in all seinen Facetten erleben können.


Besondere Herausforderungen sind hier nicht nur technischer Natur. Es gilt ebenso, Kundenanforderungen zu ermitteln und zu befriedigen, auch muss die Benutzeroberfläche zur Dreidimensionalität der eigentlichen Anwendung passen. Reine Texte zu übernehmen und in Kästen einzublenden ist nicht immer zielführend, vielmehr soll möglichst viel am virtuellen Fahrzeug selbst demonstriert werden.


Zum Einsatz kommen dabei folgende Technologien bzw. Programme:

  • Blender – Modellierung des Fahrzeuges sowie der Umgebung
  • Browser – Test der Anwendung
  • GLSL ES – Shadersprache in WebGL-Anwendungen, besonders für realistische Oberflächen relevant
  • JavaScript – für die Interaktivität der Anwendung
  • Notepad++ – Schreiben des Codes
  • Paint Shop Pro – Texturen
  • WebGL – in moderne Browser integrierte Grafik-Schnittstelle, ohne Plug-in nutzbar

Die erste Phase war die der Vorbereitung auf eher theoretischer Ebene (u. a. Auswertung von Statistiken zu Anforderungen beim Neuwagenkauf), welche inzwischen praktisch abgeschlossen ist. Ein weiterer Punkt war der Bau des Ausstellungsobjektes, bei welchem es sich um einen VW Golf der aktuellen siebten Generation handelt – mehr zu diesem auf dessen eigener Seite. Der Prototyp des VAH selbst ist mittlerweile so weit vervollständigt, wie ich dies im Rahmen meiner Masterthesis angestrebt habe.


Hier gelangen Sie zum VAH-Prototyp.


Inhalt des Prototyps


Alle nachfolgenden Punkte sind im verlinkten Prototyp präsent. Dieser ist unkomprimiert knapp 4,5 MB groß, dieser Server ermöglicht jedoch eine komprimierte Übertragung. So oder so ist festzustellen, dass kein herkömmlicher Konfigurator auch nur annähernd so schnell und umfassend wie das VAH eine veränderte Konfiguration zu visualisieren vermag. Die Wartezeit hierfür liegt beim VAH im Bereich von Millisekunden – unabhängig von der Verbindungsgeschwindigkeit. Der Preis dafür ist die Beschränkung auf moderne Browser und eine hinreichend leistungsfähige Hardware beim Anwender.


Funktionalität

  • dreh- und zoombare 3D-Ansicht eines fünftürigen VW Golf VII, Ausstattungslinien Trendline und Highline
  • getrennte Konfiguration beider Linien mit folgenden Bestandteilen:
  • Lackfarbe
  • Innenausstattung (nur Highline)
  • Scheinwerfer (nur Trendline)
  • Felgen
  • Antrieb
  • Scheibentönung
  • Beschriftung der Heckklappe
  • automatische Berechnung des Gesamtpreises
  • Zurücksetzen der aktuellen Konfiguration
  • Anzeige des aktuellen Wiederherstellungscodes
  • Wiederherstellung einer Konfiguration per Zahlencode
  • Anzeige einer Zusammenfassung der aktuellen Konfiguration inkl. Maßangaben in 3D
  • Anzeige von Informationen zum Ladevolumen inkl. Beladungsbeispiel
  • Anzeige von Informationen zu Verbrauch und Effizienz der aktuellen Konfiguration
  • Türen können geöffnet werden, bei offenen Türen kann der Nutzer virtuell einsteigen
  • das Interieur ist allerdings nur rudimentär umgesetzt aufgrund beschränkter zeitlicher Ressourcen
  • dennoch ist diese Funktionalität ein weiterer Beleg für die hohe Flexibilität des VAH

Technik

  • ebenso wie dieses Portfolio ist das VAH durchgehend zweisprachig verfügbar, Umsetzung mittels PHP und JS
  • 3D-Darstellung mittels WebGL und GLSL ES
  • eine wichtige Rolle beim Erlernen dieser Technologien spielte neben meinem Studium (OpenGL und GLSL im Auslandssemester) der Blog Learning WebGL
  • für die Arbeit mit Transparenz sehr wichtig war ein Blog-Eintrag von Sergiu Craitoiu
  • wie viele andere WebGL-Anwendungen auch verwendet das VAH die JS-Bibliothek glMatrix
  • für eine vom Browser unabhängige und effiziente Aktualisierung des Bildschirminhaltes wird die JS-Bibliothek webgl-utils verwendet
  • für das Laden und Initialisieren von im Format Wavefront OBJ gespeicherten Modellen kommt der webgl-obj-loader zum Einsatz
  • Echtzeit-Schatten mittels Exponential Shadow Mapping
  • zum Speichern der Tiefenwerte wird eine vielerorts im Netz zu findende Pack-/Unpack-Methode ohne Autorenangabe verwendet
  • die Schattentexturen werden mittels einer von xissburg vorgestellten Methode in Shadern weichgezeichnet (separierte, hardware-beschleunigte Gauss'sche Filterung)
  • Beim per AJAX umgesetzten Laden der nötigen Ressourcen wird in mehreren Schritten die Kompabilität mit Browser und Hardware des Nutzers überprüft. Scheitert ein Test, wird das VAH nicht weiter initialisiert sondern der Nutzer mit einem Infofenster über den Fehler und Lösungsansätze informiert.
  • zwecks besserer Performanz sowie vernachlässigbarer optischer Unterschiede sind Reflexionen unter Verwendung einer statischen Cubemap implementiert
  • Metallic-Lackierungen verwenden die snoise()-Funktion aus der JS-Bibliothek webgl-noise
  • Animationen wurden mit Hilfe der JS-Bibliothek jQuery realisiert. Diese animiert dabei einen Zahlwert, welcher einen Winkel wie den einer Tür repräsentiert. Dieser Winkel wird in jedem Frame ausgelesen und entsprechend bei der Darstellung angewandt.
  • die Interaktion mit 3D-Objekten verwendet den Ansatz des Pickings
  • die 3D-Darstellung implementiert
  • für den Ikosaeder Lambert-Shading mit der schnellen Gouraud-Interpolation und einem einheitlichen Grau
  • für den Boden und die rotierenden Klappen Lambert-Shading mit der genaueren Phong-Interpolation und demselben Grauton
  • für das VAH-Logo und die Maßangaben Lambert-Shading mit Phong-Interpolation und eine einfache Diffuse-Textur
  • für alle anderen Objekte Phong-Shading mit Phong-Interpolation und simplen, separaten Diffuse-, Alpha-, Specularity- und Reflectivity-Texturen