3D PRODUKT- PRÄSENTATION IM WEB - HS-Offenburg€¦ · PRÄSENTATION IM WEB Analyse anhand einer...

3D PRODUKT-PRÄSENTATION IM WEBAnalyse anhand einer Konzeption &Entwicklung von Prototypen

[ BACHELOR THESIS ]Bearbeitungszeitraum01.12.2010 bis 31.03.2011

[ VERFASSER ]Linus Fütterer, B.A.Medien und InformationswesenHochschule Offenburg

[ BETREUENDE DOZENTEN ]Prof. Dr. Roland RiemppDipl.-Ing. (FH) Benjamin Braun

ii |

Inhaltsverzeichnis

1 Vorwort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2 3D im Internet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62.1 Reichweite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62.2 Umsetzung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.2.1 Rechenbeispiel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.3 Produktverkauf in 3D . . . . . . . . . . . . . . . . . . . . . . . . . . 10

3 Gestaltung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143.1 Objekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153.1.1 Gestaltungsart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163.2 Farbe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213.2.1 Farben im Marketing . . . . . . . . . . . . . . . . . . . . . . . . . . 233.3 Komposition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

4 Interaktivität . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284.1 Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324.1.1 Flash Player . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324.2 3D Frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344.2.1 Alternativa3D . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

5 Alternativen zu Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . 425.1 Microsoft Silverlight . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435.1.1 Moonlight . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455.2 Unity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465.2.1 Peugeot RCZ Webspecial . . . . . . . . . . . . . . . . . . . . 475.3 WebGL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505.3.1 Browserunterstützung . . . . . . . . . . . . . . . . . . . . . . . . . . 52

| iii

6 Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 586.1 Molehill . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 596.2 Grafikkarten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 626.2.1 DirectX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

7 Vision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 727.2.1 AtelierPfisterApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 747.2.2 Ray-Ban: Virtual Mirror . . . . . . . . . . . . . . . . . . . . . . . . . 76

8 Projektablauf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 808.1 Konzeption . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 818.2 3D Modelling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 868.3 Export/Import . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 878.4 Animation in Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 888.4.1 Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 948.4.2 Animation der 3D Objekte . . . . . . . . . . . . . . . . . . . . 988.5 Erkenntnisse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

9 Perspektive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

Quellenverzeichnis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

Prototyp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

Eidesstattliche Erklärung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

iv | Abbildungen

Abbildungsverzeichnis

◄ Abbildung 1.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Avatardefiniert2009denMaßstabfür3D im Kino neu

◄ Abbildung 1.2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Seit 1996 wurden die meisten Charak-tere von Konsolen dreidimensional

◄ Abbildung 2.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Die Entwicklung von 3D im Internet wurde lange aufgrund technischer Hürden gebremst

◄ Abbildung 2.2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Ausstattung privater Haushalte mit In-ternetzugang und Breitbandanschluss

◄ Abbildung 2.3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

360°FotografiealsErsatzzuechten3DDarstellungen

◄ Abbildung 2.4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Klassische360°FotografieeinesAutos

Abbildungen | v

Abbildung 2.5 ► . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Das Interesse an 3D Produktpräsenta-tionen ist momentan sehr zurückhal-tend

Abbildung 3.1 ► . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Sehr detaillierte und realistisch textu-rierte 3D Automodelle

Abbildung 3.2 ► . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Das Bosch Innovation Special beinhal-tetein3DObjektimInfografik-Stil

Abbildung 3.3 ► . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Abstraktion durch Veränderung der Farbe und den Einsatz von futuristisch undcleananmutendenReflexionen

Abbildung 3.4 ► . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Monochromer Phosphor-Screen von IBM

Abbildung 3.5 ► . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

RGB-Farbdreieck

vi | Abbildungen

◄ Abbildung 3.6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Vergleich der Farbmischungen

◄ Abbildung 3.7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Beispiel von Farb- und Layout- varianten, derjeweiligen Zielgruppe angepasst

◄ Abbildung 3.8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Die Sinusmilieus 2010 in Deutschland

◄ Abbildung 4.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

360° Ansicht des selbst gestalteten 3D Modells

◄ Abbildung 4.2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Trendige Gewinne als zusätzlicher Anreiz

◄ Abbildung 4.3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

EffizientesSpeicherneinzelnerRGB-Werte von Texturen ist eine Alternative zum Speichern ganzer Texturen

Abbildungen | vii

Abbildung 4.4 ► . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Das Spiel MAX Racer nutzt Alternativa3D 8

Abbildung 4.5 ► . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

Gelungene Webseite durch Alternativa3D 7

Abbildung 4.6 ► . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

Die geringe Polygonanzahl ist an Rad undKotflügelgutzuerkennen

Abbildung 4.7 ► . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Dreidimensionale Navigation

Abbildung 5.1 ► . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Detailreiches und ästhetisches 3D Modell des Peugeot RCZ

Abbildung 5.2 ► . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Vor allem an abgerundeten Stellen wird die hohe Polygonanzahl deutlich

viii | Abbildungen

◄ Abbildung 5.3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Durch ausgeklügelte Fahrphysik wirkt der PeugeotbeimFahrenäußerstlebendig

◄ Abbildung 5.4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

Mit Unity iPhone und Unity Android bedient Unity Technologies den Mark für Smartphones

◄ Abbildung 5.5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Demonstration einer 3D Szene in WebGL

◄ Abbildung 5.6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

DiefünfgroßenBrowserteilensichimJanuar 2011 mehr als 98% des Markts

◄ Abbildung 6.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

Hardwarebeschleunigung soll 3D Flash-Inhalten zukünftig auf die Sprünge helfen

◄ Abbildung 6.2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Flash Videospiel MAX Racer, vorge-stellt auf der Adobe MAX 2010

Abbildungen | ix

Abbildung 6.3 ► . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

Der Markt wir von nur zwei Herstellern beherrscht

Abbildung 7.1 ► . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

Die Atelier Pfister App auf iPhone & iPad

Abbildung 7.2 ► . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Anwendungsbeispiel der Atelier Pfister App

Abbildung 7.3 ► . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

Installation des Plugins zur Benutzung des Virtual Mirror von Ray-Ban

Abbildung 7.4 ► . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

Der Virtual Mirror von Ray-Ban

Abbildung 8.1 ► . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

Mindmap zum Produktionsablauf einer 3D Produktpräsentation

x | Abbildungen

◄ Abbildung 8.2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

Struktur eines Projekts in FlashDevelop, beide Bibliotheken referenziert

◄ Abbildung 8.3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

Funktionsweise der 3D Engine Alternativa3D 7

◄ Abbildung 8.4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

Kamera-Algorithmus auf dem Papier entwickelt

◄ Abbildung 8.5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

Konzept für die Navigation im 3D Raum

◄ Abbildung 8.6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

Konzept für das Design und die Inter-aktivität eines 3D Objeks

Abbildungen | xi

2 | Vorwort

Wahrig - Deutsches Wörterbuch

▲ Abbildung 1.1Avatar definiert 2009den Maßstab für 3Dim Kino neuhttp://www.insidekino.com

Foto von http://www.exil-kieler.net/2009/12/

1 Vorwort

„drei-di-men-sio-nal [Adj.] mit drei Dimensionen ver-sehen, räumlich;“

Auf dem Bildschirm kann man die Entwicklung von 3D Inhalten in verschiedene Richtungen erkennen. Es gibt einerseits die passive Unterhaltung durch dreidimensi-onale Filme, die ihren Fortschritt vor allem Hollywood zu verdanken hat. Auf der anderen Seite gibt es die aktive Unterhaltung, vertreten durch 3D Videospiele auf Konsolen oder dem Computer, die ihre Wurzeln in Japan hat.

Die Verwendung der dritten Dimension zu Werbe-zwecken, welche im Vergleich mit den beiden Unter-haltungsmedien noch einen kräftigen Nachholbedarf verspürt, hat als Medium vorwiegend das Internet.

Die Entwicklung von 3D in der Filmindustrie erlebte ih-ren Durchbruch im Jahr 1995 mit dem ersten komplett in3DgestaltetenAnimationsfilm Toy Story von Pixar, deraufComputergrafikspezialisiertenAbteilungderWalt Disney Company. Toy Story spielte über 190 Mio US-Dollar ein (Kerlow, 2004).

2009 sprengt der von James Cameron gedrehte Film Avatar sämtliche Kassenrekorde (mehr als 2,7 Mrd US-Dollar). Ein Grund für den Erfolg: Der mit visuellen Ef-fekten gespickte Film wurde in 3D in einer sehr hohen Qualität gedreht.Durchein äußerst ausgereiftes 3DStereoskopie-Aufnahmeverfahren verschmelzen real gedrehte Szenen perfekt mit den am Computer er-stellen 3D Modellen und Effekten.

Vorwort | 3

▲ Abbildung 1.2Seit 1996 wurden die meisten Charaktere von Konsolen dreidi-mensionalGrafik von http://gamefront.com

Das Internet hinkt bei der 3D Darstellung anderen Medien hin-terher

Bei Videospielen sieht die Entwicklung sehr ähnlich aus. 3D Spiele haben sich seit Jahren etabliert und könnenseitmehrals15JahreneinegroßeAnzahlvonAnhängern begeistern.

Die PlayStation von Sony und die Sega Saturn sind schon seit Ende 1994 auf dem Markt, Nintendo hatte sein Debüt Anfang 1996 mit dem Nintendo 64 (Fos-ter, 2009). Alle Spielekonsolen wurden im japanischen Markt gelauncht, brachten über die Jahre eine Unzahl an Spielen mit sich und wurden mehrfach hinsichtlich 3D Qualität und Bedienung erneuert.

In puncto Interaktivität markierte die Nintendo Wii 2006 die Spitze. Durch Infrarot-Sensoren und einen Be-schleunigungsmesser kann man die Wii als Pionier der dreidimensionalen Steuerung im Videospielesektor bezeichnen.

Wie man sieht, ist 3D in der Computerspiele-Branche und in der Filmbranche seit Mitte der 1990er Jahre vertreten und hat sich in den vergangenen 15 Jah-renaußerordentlichgutetabliert. InbeideBranchenwerden Milliardenumsätze erzielt und ein weltweiter Markt abgedeckt.

Da ist es umso erstaunlicher, dass ein im Verhältnis noch sehr junges Medium, das Internet, den beiden oben genannten Unterhaltungsmedien bei der Ver-breitung von 3D Inhalten deutlich hinterherhinkt.

Gerade in der Präsentation von Produkten ist von echtem 3D im Internet noch recht wenig zu sehen.

4 | Vorwort

Das Thema wird noch immer stiefmütterlich behan-delt, obwohl die Voraussetzungen auf wirtschaftlicher und technologischer Ebene durchaus gegeben sind.

Durch leistungsfähigere Hardware und immer schnel-ler werdende DSL Leitungen eignet sich das Internet mehr und mehr für dreidimensionale Visualisierung. Es entstehen völlig neue Möglichkeiten der Gestaltung, die vor allem durch verbesserte technische Gege-benheiten vorangetrieben werden.

Durch die Erweiterung des Internet in die dritte Di-mension sind neue Interaktionen mit den Usern mög-lich.Produktkonfigurationen,narrativeHandlungsab-läufesind ingleichemMaßerealisierbarwie intuitiveNavigation.

Mein Forderung lautet also:

MEHR 3D FÜRS INTERNETDas Ziel meiner Arbeit ist es, einen Überblick über die aktuelle Situation von 3D Inhalten im Hinblick auf Pro-duktpräsentationen im Internet zu geben.

Hierbei möchte ich, dem Studiengang Medien & Informationswesen entsprechend, nicht nur einen As-pekt des Themas beleuchten, sondern vielmehr einen Querschnitt durch die gesamte Situation schaffen. Aus diesem Grund beziehe ich verschiedene Berei-che, die 3D im Internet betreffen, in meine Arbeit mit ein.

Vorwort | 5

Einige Kapitel sollen lediglich als Teaser einen kurzen Ausblick über den Tellerrand schaffen, auf andere werde ich hingegen tiefer eingehen.

Die Spanne der Themen reicht von der Gestaltung mit einer kreativen wie visuellen Sichtweise, zu wirtschaft-lichen Aspekten, über die 3D Inhalte betreffenden Technologien der Hardware bis hin zur Programmie-rung auf der Informationsebene.

Außerdemwerde ichGründe fürdenErfolg von3DProduktpräsentationen anhand von Beispielen und Theorien erläutern und den Prozess der Erstellung an-hand einer Konzeption und der Produktion eines Pro-totypen erklären. n

6 | 3D im Internet

3D steckt noch in den Kinderschuhen

▲ Abbildung 2.1Die Entwicklung von 3D im Internet wurde lange aufgrund tech-nischer Hürden ge-bremstFoto von http://sueddeutsche.de

2 3D im Internet

Wie ich schon im Vorwort kurz erwähnte, steckt 3D im Web zum jetzigen Zeitpunkt, also um die Jahreswen-de 2010/2011, noch in den Kinderschuhen. Da stellt sich automatisch die Frage, warum das so ist und seit wann es überhaupt dreidimensionale Inhalte im Web gibt. Ein sehr wichtiger Faktor für die erfolgreiche Ver-breitung von Technologien wie die 3D Visualisierung im Internet ist die Reichweite des Mediums. Der Grund dafür ist folgernder: Die Umsetzung neuer Technolo-gien bedarf einer Menge an Geld. Investitionen in neue Technologien sind nur dann lukrativ, wenn mit ihnen ein breite Masse erreicht wird. Ein Markt muss gefunden werden. Und dafür sind seit langem die Weichen gestellt.

2.1 Reichweite

In Deutschland ist seit Jahren eine positive Entwick-lung hinsichtlich der Verbreitung des Internet und so-mit der medialen Reichweite erkennbar.

Laut statistischem Bundesamt (2009) lag der Anteil der deutschen Haushalte mit Internetanschluss 2002 bei 43 % und erreichte 2008 einen Anteil von 69 %. Die-ser positiven Entwicklung liegt eine ausgezeichnete Infrastruktur zu Grunde, die eine schnelle Datenüber-tragung ermöglicht. Denn der Hauptgrund für einen Mangel an dreidimensionalen Inhalten im Internet lag eine lange Zeit an der schlechten Datenübertra-gungsrate.

3D im Internet | 7

2000 wurden in Dtld.die ersten DSL-Flatra-tes angeboten

◄ Abbildung 2.2Ausstattung privater Haushalte mit Inter-netzugang und Breit-bandanschluss Eigene Abb. nach Quelle: Bauer 2009

Mit einem analogen Modem waren Webseiten auf die Darstellung von Text und sehr gering aufgelösten Bildern beschränkt, da die Übertragungsrate maximal 56 kbit/s betrug. ISDN-Anschlüsse zur digitalen Über-tragung der Daten haben die Geschwindigkeit immer noch auf 128 kbit/s beschränkt. Von 3D Darstellung im Internet war man also rein technisch noch weit ent-fernt.

Erst als 1999 die ersten Haushalte an DSL-Leitungen angeschlossen wurden, waren die technischen Vor-aussetzungen für eine angemessene Übertragung ge-schaffen. Bei den ersten DSL-Leitungen der Telekom lag die Übertragungsgeschwindigkeit zwar noch bei knapp 1000 kbit/s, welche auch noch teuer bezahlt werden wollten, aber schon im Jahr 2000 wurde der MarktvergrößertunddieerstenDSL-Flatrateswurdenin Deutschland verkauft, was die Verbreitung von DSL beschleunigte.

1730

3850

71 73

2003 200820072006200520042002

51

6965615857

43

-

100%Anteil Internet an Haushalten gesamtAnteil Breitband an Internetanschlüssen

8 | 3D im Internet

Pixelbasiertes oder vektorbasiertes 3D?

Abbildung 2.3 ►360° Fotografie alsErsatz zu echten 3D DarstellungenEigene Abbildung

Im Jahr 2003 lag der Anteil an DSL-Anschlüssen bei 17%. Bis 2006 waren ungefähr 50% aller deutschen In-ternetanschlüsse eine Breitbandverbindung. 2008 lag die Verbreitung bei stattlichen 73% (Bauer, O., 2009). Heute liegt die Verfügbarkeit von DSL-Anschlüssen deutschlandweit bei über 90%. Den technischen Pro-blemen der Datenübertragung sind wir also längst Herr geworden.

2.2 Umsetzung

Da stellt sich die Frage, warum wir heute immer noch relativ wenig 3D im Internet zu sehen bekommen. ZwarstößtmanaufdenmeistenWebseitenvonFahr-zeugherstellern auf 360° Präsentationen ihrer Modelle, doch diese sind momentan allesamt pixelbasiert und täuschen lediglich eine 3D Ansicht vor. Hergestellt wurden diese Ansichten, die man meist mit der Maus bewegen kann, durch die sogenannte 360° Produkt-fotografie. Hier wird eine gewisse Anzahl von Fotosgeschossen, während sich das abzulichtende Objekt aufeinerDrehscheibebefindet.

Dadurch wird eine gewisse Anzahl von Fotos erstellt, die durch das Bewegen des Mauszeigers oder das Kli-cken eines Pfeils in der entsprechenden Reihenfolge

3D im Internet | 9

▲ Abbildung 2.4Klassische 360° Foto-grafieeinesAutosScreenshots von http://volvocars.com

Die Grenzen der 360° FotografiesindbeimThema Interaktivität schnell erreicht

in Flash „abgespielt“ werden. Für den Benutzer wird das Modell räumlich dargestellt.

Der Nachteil dieser pixelbasierten Methode zur Er-zeugung von Räumlichkeit ist die Tatsache, dass die Modelle nach dem Fotoshooting, welches an sich schon eine Menge an Personal, Zeit und somit Kosten verursacht, nur noch in geringem Maße angepasstoder verändert werden kann. So können durch Foto-retusche Schatten erzeugt, oder Farben angepasst werden. Aber der Blickwinkel auf das Modell, also die Betrachtungsweise, ist im Nachhinein nicht veränder-bar. Auch eine Rotation über mehr als eine Achse ist selten umsetzbar, da die Anzahl an benötigter Fotos exponentiell ansteigen würde.

2.2.1 Rechenbeispiel

Füreinerelativflüssige,vollständigeDrehungüberdieY-Achse benötigt man mindestens 25 Fotos. Auf diese Weise fängt man den Blick natürlich nur aus einer Posi-tion ein, was mit einem horizontalen Kameraschwenk um das Objekt herum vergleichbar ist.

Wünscht man die Möglichkeit einer Rotation über eine weitere Achse (vertikaler 360° Schwenk), so wür-de sich die Anzahl im schlimmsten Falle quadrieren, damanschließlich für jedePositionwieder25Bilderfür diese Achse benötigte.

Auf diese Weise landet man bei einer dynamischen Produktansicht schnell im dreistelligen Bereich an be-nötigtenFotografien,waseinerseitsdenAufwandinsUnermessliche treibt und andererseits die Speicher-größeexplodierenlässt.n

10 | 3D im Internet

Mangelnde Interaktivität bei der

360°Fotografie

Verschärfter Konkurrenzkampf durch die Vielzahl

an Onlineshops

Wie dieses Beispiel verdeutlicht, sind der 360° Fotogra-fieGrenzenbeider Interaktivitätgesetzt.Momentanist siedennochäußerstpopulär,daausästhetischerSicht die Ergebnisse äußerst überzeugend sind. Daam Computer generierte 3D Modelle durch die Ver-besserungvonSchattenwurf,Reflexionen,Einsatzvonverschiedenen Lichtquellen aber immer realistischer und ästhetischer werden und somit schon bald auf Augenhöhe mit der 360° Produktfotografie ziehen,seheichinder360°FotografiekeineZukunft.

Vor allem die Tatsache, dass man vektorbasierte Modelle im Nachhinein nach Belieben verändern kann und der kreativen, interaktiven Verwendung so-mit nichts im Wege steht, hat mich davon überzeugt, meine Arbeit der vektorbasierten 3D Präsentation von Produkten zu widmen.

Fest steht, dass dreidimensionale Visualisierungen im Internet generell zu einer gesteigerten Aufmerksam-keit beim Nutzer führen, was sich in positiver Weise beim Onlineverkauf von Produkten widerspiegelt. Die erhöhte Aufmerksamkeit ist allerdings nur ein Vorteil der 3D Präsentation von Produkten. n

2.3 Produktverkauf in 3D

Der Kampf um die Kundschaft war noch nie so schwer wie heute. Die Schwelle zur Gründung eines eigenen Onlineshops, einer Imageseite für das eigene Unter-nehmen, oder einer Seite zur Akquise von Kunden für eine angebotene Dienstleistung, sinkt stetig.

3D im Internet | 11

Mit 3D kann man sich von der Masse absetzen

3D Produktansichten als Ersatz für die haptische Ebene

Der Grund hierfür liegt in neu aufkommenden Tech-niken und den dazu immer besser werdenden Hilfs-mitteln. Vorgefertigte Templates für mietbare On-lineshops, die von Anbietern für ein vergleichsweise geringesBudgetsogargepflegtwerden,machenesEinsteigern besonders leicht. So ist es nicht verwunder-lich, dass Onlineshops wie Pilze aus dem Boden sprie-ßenundeinPreiskampfausgebrochenist,derSeines-gleichen sucht.

Es gilt also, sich im positiven Sinne von der breiten Masse abzuheben und durch Außergewöhnliches,wie zum Beispiel interaktive 3D Produkte, den Nutzer zu animieren, auf der Webseite zu bleiben. Eine ge-konnt gestaltete Webseite schafft zudem ein positives Image. Die Verwendung von 3D Content hebt dieses Image meist zusätzlich an.

Der Grund hierfür ist, dass man Produkte, die man im Internet erstehen möchte, meistens noch nicht „live“ gesehen hat. Es fehlt die haptische Ebene, die Aus-kunft über Wertigkeit, Verarbeitung, die verwendeten MaterialienundMaßeeinesProduktsgibt.

Eines,odermehrerehochauflösendeFotosmiteinerausführlichen, schriftlichen Beschreibung sind zwar ein guter Anfang, um dem Mangel an Haptik positiv ent-gegenzuwirken, oder zumindest etwas zu verringern, dennoch wird dem potentiellen Kunden jegliche Form von Interaktion vorenthalten, die er in einem Ge-schäftinseinerUmgebungvorfindenwürde.

12 | 3D im Internet

Auch im Internet gilt: Qualität schafft

Vertrauen

Meist entscheidet das Bauchgefühl

Gerade in der Anonymität und der Weite des Internets ist es also immens wichtig, Vertrauen mit potentiellen Kunden, den Webseitenbesuchern, aufzubauen.

Bei einem Onlineshop erreicht man Vertrauen einer-seits durch gängige Methoden wie PayPal-Zahlungs-verfahren, ein TÜV- oder Trusted Shops Siegel, ein rechtsgültiges Impressum mit gültiger Steuernummer, eine gültige Anschrift und ein ordentliches, seriösen Seitenlayout. Durch die Verwendung von interaktiven 3D Produktmodellen, kann man jedoch einen zusätz-lichen „Aha-Effekt“ und somit Professionalität und Se-riosität vermitteln.

Denn viele der oben genannten objektiven und prüfbaren Sicherheitsfaktoren werden von Kunden nicht überprüft. Meist entscheidet das sogenann-te Bauchgefühl über Ver- oder Misstrauen, welches durch weiche, subjektive und meist visuelle Faktoren bestimmt wird.

Die 3D Visualisierung eines Produkts, gepaart mit ei-ner umfangreichen Produktbeschreibung, liefert po-tentiellen Kunden also ein Plus an Informationen, was Seriosität schafft und im Idealfall kaufentscheidend sein kann. Das Ziel der Verkaufsförderung wäre somit erreicht.

Es bleibt also zu hoffen, dass sich die momentane Scheu vor der Platzierung von Produkten in 3D bald in ein starkes Interesse verwandelt. n

3D im Internet | 13

▲ Abbildung 2.5Das Interesse an 3D Produktpräsentati-onen ist momentan sehr zurückhaltendEigene Abbildung

3D sucks!??

14 | Gestaltung

Die visuelle Ebene als Entscheidungsfaktor

Was ist gutes Design?

KlareZieldefinition

3 Gestaltung

Der Gestaltung von 3D Produktpräsentationen im Web widme ich ein eigenes Kapitel, da diese aus meiner Sicht den Hauptgrund für den Erfolg oder das Misslingen eines 3D Projekts darstellt. Denn Konsu-menten werden seit Jahrzehnten von der Medienwelt trainiert, auf die visuelle Ebene besonders emotional anzusprechen. Sie wurden für das Thema sensibilisiert. Man sollte also bei einer Produktpräsentation im Web auf die Welle mit aufspringen, die Film, Fernsehen und Print bereits erfolgreich ins Rollen gebracht haben.

Da Design eine sehr subjektive Angelegenheit ist, gibt es natürlich keine allgemeingültige Regel, welche be-stimmt, ob eine 3D Präsentation gelungen oder miss-raten ist. Es gibt allerdings einige Regeln und Gestal-tungsgrundlagen, die den Gestaltungsprozess in die richtige Richtung führen. Wenn man die Wirkung der einzelnen Faktoren eines Designs versteht, kann man mit ihnen gezielt arbeiten und den gewünschten Ef-fekt erzielen.

Man sollte also von vorne herein wissen, was für eine Wirkung die 3D Präsentation auf den Benutzer haben soll. Möchte ich beispielsweise eine edle Anmutung im klassischen Sinne, ein neutrales und konservati-ves Erscheinungsbild, eine moderne, sterile Wirkung (clean design) oder aber eine verspielte, polarisieren-de Optik erzeugen?

Diese Frage nach der Art der Gestaltung einer Web-seite mit 3D Inhalt steht ganz am Anfang und beein-

Gestaltung | 15

Aufschlüsseln bis ins kleinste Detail

1 s. K. 4 Interaktivität2 s. K. 6 Performance

flusst den Gestaltungsprozess von Grund auf. Dennauf der Basis der Gesamtwirkung der Webseite sollten alle Einzelteile des Designs gestaltet werden. Man ar-beitetsichquasivonAußennachInnen,vomGrobenbis hin zum kleinsten Detail.

Diese Art der Umsetzung, also das Aufschlüsseln ei-nes Design in kleine Einzelteile, ist zwar sehr aufwen-dig, aber eben sehr gut kontrollierbar. In den folgen-den Absätzen erkläre ich die Wirkung verschiedener Gestaltungsmittel und Bestandteile einer 3D Produkt-präsentation.

3.1 Objekt

Das 3D Objekt im Sinne des dargebotenen Produkts steht im Mittelpunkt der Präsentation, es ist der Grund für die Erstellung der Webseite. Für die Erstellung die-ses3DObjektswirdimWorkflowderProduktpräsenta-tion meist sehr viel Mühe und Zeit investiert. Es ist somit sehr wichtig, wie es gestaltet wird. Aus diesem Grund sollten noch vor dem Beginn der Erstellung etliche Fra-gen geklärt werden.

Welche Funktion soll das 3D Objekt haben? Steht die Übermittelung von Informationen im Vordergrund oder hat die Ästhetik Vorrang? Wie hoch wird der Grad an Interaktivität sein? 1 Welche Grenzen bei der Gestaltung werden aus technischer Sicht gezogen? 2 Welche Qualität ist überhaupt darstellbar?

Für die Gestaltung eines dreidimensionalen Produkts

16 | Gestaltung

Die Realistische Dar-stellung eines 3D Mo-

dells erfordert eine hohe Anzahl von Po-lygonen sowie hoch auflösendeTexturen,

was die Performance negativbeeinflusst

kann man die Gewichtung auf verschiedene Aspek-te legen. Jede Art der Gestaltung hat hierbei gewisse Vor- und Nachteile. Im folgenden Unterkapitel diffe-renziere ich zwischen verschiedenen Arten der Ge-staltung, beleuchte ihre Unterschiede bezüglich der Wirkungsweise sowie ihre Stärken und Schwächen.

3.1.1 Gestaltungsart

Geht es um die Vermittlung von Information, ist meist eine fotorealistische Darstellung, also möglichst eine „1:1-Umsetzung“ eines Produkts in ein digitales 3D Ob-jekt, die beste Variante.

BeidieserProduktvorschausindeinehoheAuflösungundeinegroßeDetaildichtebesonderswichtig.Das3D Modell sollte eine hohe Polygonanzahl besitzen, um die Originalform des Objekts detailgetreu wiederzu-geben. Die Texturen sollten in einer besonders hohen Auflösungerstelltwerden,umdenfotorealistischenEin-druck nicht durch Artefakte und Verpixelung zu trüben. BesonderswichtigisteinehoheAuflösungbeiinterak-tiven Modellansichten, die eine Zoom-Ansicht bereit-stellen. Selbst wenn bei einer Standardansicht das 3D Produkt noch sehr realistisch erscheint, bekommt man schonbeigeringerVergrößerungsehrschnelleinver-schwommenes, verpixeltes Ergebnis. Daher gilt es, das Ziel der Verwendung gleich von Beginn an klarzustel-len. Anders herum gilt es natürlich, nicht mit Kanonen aufSpatzenzuschießen.Beieinerkleinen3DProduk-tansicht, beispielsweise 300x200 Pixel, muss man keine 5 Megapixel umfassende Textur verwenden, welche

Gestaltung | 17

◄ Abbildung 3.1Sehr detaillierte und realistisch texturierte 3D Automodellehttp://www.doschde-sign.com/products/3d/Cars_2010_USA.html

1 siehe K. 5.2 Unity

die Ladezeit verlängert und die Performance unnötig verlangsamt.

Die realitätsnahe, dreidimensionale Darstellung von Produkten ist ganz klar die Königsdisziplin der 3D Computergrafik. DieMaßstabstreue und die Vielfaltan Details fordert allerdings ihren Tribut in der Erstel-lungszeit und momentan bei der Performance. Denn das Zielmedium Internet birgt einige Hürden für die Darstellung von komplexen, speicher- und renderlas-tigen Inhalten. Deshalb führt im Moment kein Weg an aufwendigen Plugins 1 vorbei, die dem Browser weit-

18 | Gestaltung

Funktionsorientierte 3DGrafik

Abbildung 3.2 ►Das Bosch Innovation Special beinhaltet ein 3D Objekt im Infogra-fik-Stilhttp://www.kircher-burkhardt.com/infogra-phics/BOSCH-IXO.html

reichende Hardwareunterstützung ermöglichen. Als Vorteil sehe ich klar die mögliche Konkurrenz zur 360 Grad Fotografie,welche über kurz oder langdurchdie fotorealistische Darstellung von 3D Modellen er-setzt werden könnte. Wird ein 3D Modell noch durch interaktive Elemente ergänzt, stellt das einen klaren VorteilgegenüberderProduktfotografiedar.

Der Nachteil ist momentan lediglich die Perfor-mance.

Wenn man den Schwerpunkt einer 3D Präsentation eher auf die Funktionsweise eines Produkts setzen möchte, als Zweck also klar die Informationsvermitt-lung in erklärender Weise steht, gibt es neben der fotorealistischen Darstellung einen zweiten Weg der Umsetzung: Eineschemenhafte,grafischillustrierteFunktionsab-

bildung. Diese ist besonders hilfreich, wenn komple-xe Details oder Vorgänge nur schwer mit Bildern und Worten erklärt werden können.

Gestaltung | 19

Grafischanmuten-de 3D Modelle sind besonders im techni-schen Sektor beliebt

Ästhetische Darstel-lung zur Erzeugung von Image

Bei dieser Art von Gestaltung kann man gezielt für den Präsentationszweck unwichtige Details weglassen, um den wichtigen Elementen mehr Beachtung zu schen-ken. Man lenkt das Auge des Benutzers durch gezielte Akzentuierung.

ImtechnischenBereichistdiesegrafischanmutendeArt und Weise der Gestaltung von 3D Objekten sehr verbreitet. Bei Bedarf kann diese Gestaltungsvarian-te auch mit interaktiven Elementen erweitert werden, was den Bezug zum Benutzer deutlich erhöht. Hier als Beispiel mit Textfeldern durch „Roll-Over“.

Der Vorteil dieser Gestaltungsart ist einerseits eine größereÜbersichtlichkeitgegenübereiner fotorealis-tischen Darstellungsweise durch geringere Detailtiefe und andererseits eine deutlich besserer Performance, da Texturen einfacher gehalten werden können und die Wirkung trotz geringerer Polygonanzahl sehr an-sprechend sein kann.

Als Nachteil sehe ich die eingeschränkte Verwend-barkeit. Manche Produkte verlieren ihre ästhetische Wirkung, wenn beispielsweise Reflexionen auf derOberflächefehlen,oderDetailswegfallen.

Eine weitere Möglichkeit für die Gestaltung eines 3D Produkts ist eine Darstellung mit der Gewichtung auf künstlerisch, ästhetischen Aspekten. Diese Darstel-lungsweise ist vorrangig der Erzeugung von Image verschrieben,dieEinhaltungvonMaßstäbenoderdiekorrekte Abbildung der Realität ist nicht nötig. Solan-ge eine ästhetisch ansprechende Optik erreicht wird, kann der Abstraktionsgrad beliebig hoch sein.

20 | Gestaltung

Abbildung 3.3 ►Abstraktion durch Veränderung der Far-be und den Einsatz von futuristisch und clean anmutenden Reflexionenhttp://flo-mo.com/en/index.php

Die Gestaltung sollte dem Zweck der

Verwendung angepasst sein

Der Vorteil dieser kreativen Art der Gestaltung ist eine sehr hohe Zielgruppenaffinität, indem man den Stilder Darstellung wie gewünscht anpasst.

Als Nachteil kann eine eventuelle Enttäuschung auf Kundenseite sein, falls erzeugte Erwartungen des digi-talen 3D Produkts in der Realität nicht erfüllt werden.

Jede Art der Umsetzung hat bei situationsgerechter Verwendung ihre Berechtigung, solange der Zweck und das Ziel der Produktpräsentation und die anzu-sprechendeZielgruppeklardefiniertsind.Ganzegalauf welche Art oder in welchem Stil ein 3D Objekt gestaltet wird, gibt es dennoch einige konstante Fak-toren,welchedieQualitäteinesObjektbeeinflussen.So spielt die richtige Farbwahl beispielsweise eine be-deutende Rolle in der Gestaltung von 3D Objekt und dazugehörigem Layout. n

Gestaltung | 21

▲ Abbildung 3.4Monochromer Phos-phor-Screen von IBM1 Bit Farbtiefe, auch Monochrom genannt

http://it-material.de

▲ Abbildung 3.5RGB-FarbdreieckDas schwarze Dreieck entspricht den 3 Grund-farben, das weiße Drei-eck zeigt die angepass-te Farbdarstellung

Eigene Abb., nach Küthe und Küthe, 2002

3.2 Farbe

Bevor man Farbe als Gestaltungsmittel einsetzt, sollte man sich zuerst den Darstellungsmöglichkeiten des Zielmediums bewusst sein. Diese sind im Falle des In-ternets und somit des Computers, der die Webseiten schließlichaufeinemMonitordarstellt,erstseitgerau-mer Zeit auf einem hohen Niveau.

Erst Anfang der 1990er Jahre bescherte IBM der Gra-fikkarte die Anzeigemodi SVGA und XVGA, welche erstmals eine Farbtiefe von 16 Bit bzw. 32 Bit boten, für die kommerzielle Verwendung erschwinglich wa-ren und somit die privaten Haushalte bedienten (Eick-mann, 2004, S.19).

16 Bit Farbtiefe, auch als High Color bekannt, kann 216 und demnach 65.536 Farben darstellen. 32 Bit setzt sich aus 24 Bit True Color, eine Darstellung von 224 somit 16,7 Millionen Farben und zusätzlich einen 8 Bit Alphakanal zusammen. Die späteren Standards UVGA, SXGA und UXGAkönnenhöhereAuflösungendarstellen und bieten je nach Ausführung die glei-chen Farbtiefen.

Allen gemeinsam ist auch die Darstellung sämtlicher Farben aus dem RGB-Farbraum, was der additiven Farbmischung entspricht (siehe Abb. 3.6, S.22).

Laut Küthe und Küthe (2002) hat dieser Farbraum, welcher eigentlich RGV für Rot-Grün-Violett heißenmüsste (Blau ist eine Grundfarbe von CMYK), Schwä-chen in der Darstellung von Grün und Rot, da das Farbdreieck für ein akzeptables Gelb angepasst wur-de. Dieser Tatsache sollte man sich bei der Gestaltung stets bewusst sein.

22 | Gestaltung

Abbildung 3.6 ►Vergleich der Farbmi-schungen:Additive (RGB) und sub-traktive (CMYK) Farbmi-schung (v.l.n.r.)

Eigene Abb., nach Küthe und Küthe, 2002

Die Bedeutung von Farbe wird oftmals

unterschätzt

Nachdem die Möglichkeiten des Zielmediums abge-steckt sind, beginnt die kreative Gestaltung mit einer Vielfalt an Farben. Diese sollte wohl überlegt sein, denn die Bedeutung von Farbe wird oft unterschätzt. So bricht laut Küthe und Küthe (2002) Farbe die Form, sie löst eine Gestalt auf. Eine nicht unerhebliche Ge-setzmäßigkeit, die von einigen Tierarten als Tarnunggenutzt wird. Da man im Webdesign allerdings dem Auge durch klare Formen und Farben schmeicheln sollte, gilt es, eine Koexistenz von Farbe und Form zu schaffen.

So kann man gezielt das Auge des Betrachters rei-zen und fordern indem man durch Farbe und Form eine Spannung erzeugt. Außerdem kann man denBetrachter navigieren und ihm durch klare Strukturen und Farben Seriosität und Übersicht vermitteln.

Das nächste Unterkapitel zeigt verschiedene Gestal-tungswege, die dem jeweiligen Zweck angepasst sind. So sollte sich die Farbwahl für eine klassische Produktpräsentation von der einer modernen und fre-chen unterscheiden.

Gestaltung | 23

▲ Abbildung 3.7Beispiel von Farb- und Layoutvarianten, der-jeweiligen Zielgruppe angepasstDer obere graue Rand stellt das Browser-Menü dar, die Kugel steht für das 3D Objekt

Eigene Abbildung

3.2.1 Farben im Marketing

(1) Die linke Abbildung zeigt ein sehr klassisch gehalte-nesLayout,welcheseinegroßeSpannevonProduk-ten in Szene setzen kann. Durch eine entsprechend harmonische, gediegene Farbpalette wird die seriö-se, klassische Wirkung verstärkt.

Das 3D Objekt steht nicht in farblicher Konkurrenz zu seinem direkten Hintergrund, sondern hebt sich nur leicht davon ab. Die Produktbühne (Gelbtöne) har-moniertmitdemäußerenLayout.

Diese Form der Gestaltung von Farbe und Layout solleinegroßeZielgruppeansprechen.JungundAltder Mittelschicht sollten erreicht werden, wir sprechen vom Mainstream. Deshalb verzichtet man bei dieser Variante auf jegliche Experimente bezüglich Farbe und Anordnung. Aus diesem Grund habe ich im Bei-spiel ein gedecktes Blau mit einem leichten Violett-Stich gewählt, das als harmonisches Komplement zum Gelb mit dem orangenen Objekt funktioniert.

24 | Gestaltung

Zielgruppe nach Sinusmilieu: Bürgerliche MitteAltersgruppe: 25 - 65 JahreMögliches Produkt: fastalles,dagroßeZielgruppe

(2) Sollte eine Produktpräsentation eher jung und sty-lisch werden, so kann die Farbwahl mehr polarisieren. Knallige,außergewöhnlicheFarbkombinationenkön-nen hier verwendet werden.

Zum Beispiel ein stechendes Grün auf sehr dunklem Grund, was einen starken Hell-Dunkel-Kontrast er-zeugt. In Kombination mit dem kräftigen Magenta er-zeuge ich eine farbliche Spannung zwischen Rahmen und Produktbühne. Ein auffällig gestaltetes Layout un-terstützt diese Farbkombination zusätzlich.

Diese freche, moderne Gestaltung soll eine erlebni-sorientierte Zielgruppe ansprechen, die im „Hier und Jetzt“ lebt.

Zielgruppe nach Sinusmilieu: Hedonistisches MilieuAltersgruppe: 14 - 25 JahreMögliches Produkt: Mobiltelefon/Smartphone

(3) Die letzte Komposition strahlt eine schlichte Ele-ganz aus. Viel Leerraum ist vorhanden und Farben setzen eher Akzente, als dass sie Flächenfarbe sind. Das ganze Layout ist stark reduziert und verschafft dem Produkt durch die zurückhaltende Eleganz ei-nen einzigartigen Auftritt. Lediglich das kräftige Rot verleiht der Seite eine starke Wirkung, es erhöht somit den Wiedererkennungswert. Für eine ausgewogene Darstellung wird der goldenen Schnitt in mehreren Elementen verwendet.

Gestaltung | 25

▼ Abbildung 3.8Die Sinusmilieus 2010 in DeutschlandGrafik von http://steinbauer-strate-gie.de/tag/sinus-milieu/

Diese Art der Präsentation funktioniert nur mit einem sehr ästhetischen, ausdrucksstarken 3D Objekt. Die Zielgruppe sollte einen gewissen Hang zum Schönen, EdlenoderAußergewöhnlichenhaben.

Zielgruppe nach Sinusmilieu: Milieu der PerformerAltersgruppe: 30 - 49 JahreMögliches Produkt: Designer-Möbel

Um sich die Sinusmilieus noch einmal ins Gedächtnis zurufen,hierdiepassendeGrafik.n

26 | Gestaltung

Eine Webseite ist ein Konstrukt aus Einzel-

teilen

Ziel ist ein in sich schlüssiges

Erscheinungsbild

3.3 Komposition

Wie aus dem Kapitel 3.2.1 Farben im Marketing her-vorgeht, ist die Farbe alleine nicht ausschlaggebend für die Gesamtwirkung, obwohl sie der Form den Rang abläuft. Da eine Webseite, die ein Objekt präsentiert, ein Konstrukt aus verschiedenen Einzelteilen ist, sollte man alle Teile in die Gestaltung mit einbeziehen. Im Falle einer Produkt-Webseite sind das einige Kompo-nenten.

Sie besteht aus einem Navigationsbereich, textuellen Informationen,grafischenElementenwieLogos,Iconsoder einfachen Blöcken, Leerraum und schließlichProduktdarstellungen.

Da die Webseite vom Benutzer als Ganzes wahrge-nommen wird, gilt es, ein ganzheitlich schlüssiges Er-scheinungsbild zu erschaffen. Durch gekonntes Ein-setzen der einzelnen Komponenten kann man mit den räumlichen Beziehungen spielen und dadurch visuell Spannung, Ruhe oder Kraft erzeugen und das Auge der Besucher der Webseite gezielt lenken. Die Einbindung des 3D Objekts in die Webseite, also die sinnvolle Integrierung des dreidimensionalen Objekts ins meist zweidimensionale Weblayout, ist demnach vongroßerBedeutung.

Wie aus dem letzten Kapitel ersichtlich, sollte man die farbliche Abstimmung dem Zweck der Seite anpas-sen. So können Farben bewusst in Kontrast zueinander gesetzt werden, sei es in der Helligkeit oder dem Farb-

Gestaltung | 27

Fazit zur Gestaltung

ton. Damit man sich bei der Umsetzung einer Websei-te mit der Farbabstimmung nicht verzettelt, ist es sinn-voll, schon in der Konzeptions- oder Entwurfsphase ein Spektrum an Farben auszuwählen.

Im Webdesign von 3D Produktpräsentationen sind 3D Elemente auf ästhetische und sinnvolle Weise mit Text und Informationen der Webseite zu verbinden. Das Ziel ist ein ganzheitliches Layout und Design (Be-aird, 2008). n

Die Gestaltung von Webseiten ist ein Thema, über das es ebenso viele Bücher gibt, wie Meinungen. Ich habe das Thema auf die Gestaltung von Produktsei-ten heruntergebrochen und trotzdem eine viel zu großeMengean Informationen undMeinungen re-cherchiert. Deshalb versuche ich, diesen komplexen Prozess abschließend in drei Sätze zusammenzufas-sen:

Es geht bei der Gestaltung einer Webseite, die als 3D Produktpräsentation fungiert, um die Gestaltung des 3D Produkts, des Layouts und der Komposition dieser beiden Teile, die mediale Integration. Beim gesamten Entstehungsprozess ist es sehr wichtig, den Zweck der Webseite, welcher das Produkt und somit die Zielgrup-pe beinhaltet, nicht aus den Augen zu verlieren. Denn dieser ist letztendlich ausschlaggebend für die Art der Gestaltung. n

28 | Interaktivität

Interaktivität fängt im Internet beim Maus-

klick an

Aktivierung durch Interaktivität

4 Interaktivität

Interaktivität zwischen einem Menschen und einem Medium besteht immer dann, wenn der Mensch in ir-gendeinerWeiseEinflussaufdenInhaltdesMediumshat. Das Internet, welches den sogenannten neuen Medien angehört (Plag & Riempp, 2006), stellt im Be-zugaufInteraktivitäteinneuesMaßauf.

Dabei streckt sich der Begriff Interaktivität im Inter-net vom einfachen Mausklick bis hin zur Augmented Reality, die meiner Meinung nach momentan am an-deren Ende der Skala steht.

Im speziellen Fall der 3D Produktpräsentation ist mir je-doch eine wechselseitige Beziehung von Interaktivität aufgefallen:

Bedeutet Interaktivität normalerweise eine gewisse Möglichkeit der Kontrolle oder Steuerung seitens des Benutzers, so ist meiner Meinung nach, im optimalen Falle, auch eine unterbewusste Steuerung des Benut-zers möglich, indem der interaktive Inhalt den Nutzer im Sinne psychologischer Aktivierung dazu animiniert, eine gewisse Interaktion einzugehen, die bestimmte Inhalte preisgibt.

Erwähnte ich in Kapitel 2.3 Produktverkauf in 3D noch die gesteigerte Aufmerksamkeit durch eine dreidi-mensionale Visualisierung, so geht Interaktivität noch einen Schritt weiter.

Sie kann den Benutzer in eine Art Handlung einbin-den, die dem Produkt zugute kommt. Man kann in diesem Zusammenhang von einem Mehrwert zur rein

Interaktivität | 29

„Selbst ist der User“

Erhöhte Akzeptanz durch Interaktivität

visuellen Ebene sprechen, da einerseits durch die In-teraktion die Verweildauer gesteigert und anderer-seits die Erinnerung an das Produkt erhöht wird, da sich der Nutzer aktiv damit auseinander setzt.

Wenn sich ein Benutzer einige Produktfotos anschaut, sich demnach „durch eine Galerie klickt“, bleibt ihm dies mit Sicherheit nicht im Gedächtnis.

Kann er sich allerdings im dreidimensionalen Raum einzelne Produkte oder Produktdetails ansehen, in-dem er beispielsweise den Blickwinkel selbst steuert, bestimmt er somit den Informationsablauf selbst und kann sich neues Wissen explorativ aneignen.

DieseArt der freienGestaltungdes Informationsflus-ses seitensdesBenutzers stößt indenmeistenFällenauf eine erhöhte Akzeptanz und erzeugt eine deut-lich gesteigerte Sensibilisierung bezüglich des gezeig-ten Inhalts (Wiedmann et al., 2004). Lediglich manche User wünschen sich weniger Aktivität im Internet und würden eine eher passive Informationsvermittlung be-vorzugen.

Wie gut eine interaktive 3D Produktpräsentation funk-tionieren kann, zeige ich am nächsten Beispiel, dem Nissan Juke Studio. Hier wird der Benutzer optimal ak-tiviert, Content selbst zu erzeugen, was die Dauer auf derMicrositevonNissanerhöht.AußerdemwirddieWerbebotschaft elegant verpackt und somit unterbe-wusst im positiven Sinne wahrgenommen.


Abbildung 4.1 ►360°Ansicht des selbst gestalteten 3D Mo-dellsScreenshot

http://www.nissangra-phics.com/juke/start.php

Juke Studio

Ein wunderbares Beispiel von Interaktivität in einer 3D Produktpräsentation ist das sogenannte Juke Studio, das durch die Agentur TBWA\Chiat\Day ins Leben gerufen wurde.

Das Juke Studio ist eine Microsite, auf der man ei-nen Nissan Juke selbst gestalten kann. Mit Hilfe einiger Werkzeuge lässt sich eine eigene, kreative und poppi-ge Lackierung erstellen.

Das Motto der Webseite lautet:

DESIGN YOUR OWN JUKE

Ziel dieser kreativen Erstellung von User Generated Contente ist es, ein Design zu erschaffen, das von an-deren Teilnehmern beste Bewertungen erhält und so-mit andere Designs im Ranking hinter sich lässt.


▲ Abbildung 4.2Trendige Gewinne als zusätzlicher AnreizScreenshot

http://www.nissangra-phics.com/juke/prizes.php

Das Showcase Video mit Tristan Eaton ist u.a. hier zu sehen:http://creativity-online.com/work/nissan-juke-studio/22552

Als Motivationsspritze zur Teilnahme gibt es neben Ruhm und Ehre auch etliche Sachpreise sowie als Hauptpreis sogar einen Nissan Juke zu gewinnen.

Da die zeichnerischen Fähigkeiten der meisten Nut-zer natürlich nicht dazu ausreichen, ein ästhetisch anspruchsvolles Design zu erzeugen, haben sich die WerbeprofisausL.A.etwasganzbesondereseinfallenlassen:

Die User können mit vorgefertigten Schablonen arbei-ten, die von professionellen Künstlern kreiert wurden. Jim Mahfood, Jeremyville and Tristan Eaton gestalte-tenjeeinSetangrafischenElementen,diedendreiverschiedenen Fahrmodi des Nissan Juke entspre-chen. So gibt es die Themen Sport, Eco und Normal.

Passend zu einem außergewöhnlichen Auto schafftdiese Microsite einen hippen Werbeauftritt, der per-fekt auf eine junge, dynamische Zielgruppe geschnei-dert wurde. Die Zusammenarbeit mit Künstlern, das Gewinnspiel als zusätzlicher Trigger, die Möglichkeit der kreativen Entfaltung am 3D Produkt selbst und letztlich die perfekte Kombination der einzelnen Fak-toren kommen dem Image und den Verkaufszahlen des Autos sicher sehr zu Gute. n


http://adobe.com/Flash

4.1 Flash

Wie die eben erwähnten Erschaffer der Nissan Juke Microsite, habe auch ich mich in meiner Arbeit über 3D Präsentationen im Internet auf die Technologie Flash konzentriert, da Flash momentan und in der nä-heren Zukunft die meistgenutzte und am weitesten verbreitete Technologie für Rich Media Content im Internet ist und bleibt.

Die Ursache für diese Tatsache liegt meiner Meinung nach einerseits in einer sehr großen Gemeinschaftvon Flash-Entwicklern, die sich seit Jahren im Internet auf Foren und ähnlichen Kommunikationsplattformen austauschen.

Andererseits spielt die Verbreitung des Adobe Flash Players als Browser-Plugin eine weitere wichtige Rol-le.DenndiegroßeAbdeckungdurchdasproprietäreFlash-Plugin ermöglicht Millionen von Benutzern welt-weit einen problemlosen Zugang zu auf Flash basier-ten Webinhalten, was aus wirtschaftlicher Sicht na-türlich unglaublich wichtig ist, da alle diese Benutzer potentielle Kunden darstellen könnten. AußerdemistFlash, gerade im Vergleich zu neu auf-

kommenden Technologien, sehr ausgereift und viel-fältig nutzbar.

4.1.1 Flash Player

Der Schlüssel, der die Tür zu Flash-Inhalten, öffnet ist der Adobe Flash Player. Für den Webbrowser steht dieser als proprietäres Plugin zur Verfügung.

Die Voraussetzung für eine einwandfreie Darstel-


lung von 3D Inhalten ist eine Version ab Flash Player 9, welche im Juni 2006 mit dem Erscheinen der Adobe Creative Suite CS3 erschien. Erst diese Version garan-tiert die volle Unterstützung von ActionSpript 3.0 durch die ActionScript Virtual Machine 2 (AVM2).

Im Oktober 2008 folgte die nächste Vollversion, der Adobe Flash Player 10, welcher in der graphischen Darstellung von bewegten Inhalten nochmals verbes-sert wurde.

Die aktuellste Version, der Adobe Flash Player 10.2, ist seit Januar 2011 als Download verfügbar. Kurz nachdem im April 2010 die Adobe Creative Suite 5 veröffentlicht wurde, gab es noch eine Version 10.1. n

Der weiten Verbreitung des Flash Players ist die Popu-larität von Flash-Inhalten zu verdanken. Da die Mög-lichkeiten der 3D Erstellung in Flash allerdings sehr be-grenzt sind, ist es unumgänglich, eine zusätzliche 3D Engine für Flash zu benutzen, die durch verschiedene 3D Frameworks vertreten wird.

In den letzten Jahren haben sich etliche dieser Frameworks gebildet. Einige haben sich im hart um-kämpften Markt etabliert. Bekannte Frameworks wä-ren Papervision3D, Alternativa3D, Away3D, Away3D-Lite, Yogurt3D oder Sandy3D.

Im Rahmen dieser Arbeit habe ich mich mit Papervi-sion3D, Away3D, Away3DLite und Alternativa3D be-schäftigt. Der Prototyp entstand letzten Endes in Al-ternativa3D,wasgrößtenteilsausSympathiegründengeschah, da sich die verschieden Frameworks nicht allzugroßunterscheiden.n


4.2 3D Frameworks

Ein Framework ist eine Art Programmiergerüst. Bei den von mir recherchierten 3D Frameworks handelte es sich um Open Source Projekte, d.h. viele Programmie-rer weltweit kännen kostenfrei Implementierungen realisieren, die durch die Struktur des Frameworks auf Klassen zugreifen können und somit sämtliche 3D Pa-rameter nutzen können.

Die 3D Frameworks grenzen sich von herkömmlichen Flash-Klassenbibliotheken ab, da diese lediglich das Benutzen von Klassen und Funktionen zulassen, wel-che von Adobe Flash Entwicklern implementiert wur-den. Sie werden intern von Adobe entwickelt.

Die 3D Frameworks hingegen ermöglichen ein ak-tives Mitarbeiten am Code, welcher stets verändert und erweitert wird. Daher gibt es verschiedene Versio-nen und Unterversionen, von denen einige so speziell sind, dass diese irgendwann nicht mehr weiter entwi-ckelt werden und somit deren Bedeutung wieder ver-schwindet.

Man kann sich diese Versionen wie die Äste eines Baumes vorstellen. Neben dem Stamm (trunk), der die Hauptlinie bzw. die herkömmlichen Versionen ei-nes Programmes repräsentiert, gibt es eben auch ver-schiedene Abzweigungen, die Äste (branch), welche je nach Erfolg erweitert werden.

Damit man stets mit der aktuellsten Version arbeitet, ist es sinnvoll, einen SVN Client (Subversion Client) zu Hilfe zu nehmen, welcher die Downloads der ver-

3D Frameworks ver-vollständigen Flash

Trunk and Branches

Versions- management


Flash

Flex

FlashDevelop

schiedenen Versionen managed. Dieser greift auf die Versionen in Google Code zu.

Arbeiten kann man mit einem auf Flash basierenden 3D Framework auf drei verschiedene Weisen.

DawärenatürlichdieArbeitineineroffiziellenAdobe Flash Version ab Creative Suite 3. Hier muss man unter den ActionScript Export-Einstellungen die Klassen des Frameworks, meist in einer Bibliotheksdatei vorhan-den, mit der internen Bibliothek des Flash-Dokuments verknüpfen.

Unter dem Adobe Flex Builder funktioniert die Ver-knüpfung ähnlich. In den Projekteigenschaften kann man dem ActionScript-Pfad die gewünschte Biblio-theskdatei hinzufügen.

Eine weitere Möglichkeit ist die Arbeit mit FlashDeve-lop. Ich habe bei der Erstellung des 3D Prototypen diese Variante gewählt, da man im kostenlosen Flas-hDevelop sehr komfortabel alle Assets in einer Ord-nerstruktur ablegen kann, die in einem Projekt zusam-mengefasst wird.

Die genaue Erstellung eines Projekts mit dem Frame-work Alternativa3D erkläre ich in Kapitel 8 Projektab-lauf. Die Fähigkeiten eines 3D Frameworks folgen ebenfalls beispielhaft an Alternativa3D im folgenden Kapitel.


http://alternativaplat-form.com

Alternativa3D 7 ist die aktuelle Gratisversion

des 3D Frameworks

4.2.1 Alternativa3D

Alternativa3D ist, wie schon erwähnt, ein 3D Frame-work, der Flash zur Integrierung und Animation von 3D Modellen auf die Sprünge hilft. AlternativaPlatform, ein russisches Unternehmen mit Hauptsitz in Perm, be-schreibt sich selbst als Entwickler von technischen Lö-sungen für Multiplayer-Spiele im Internet.

Mit Alternativa3D veröffentlichte das Unternehmen seine erste 3D Engine im Mai 2008 als Version 5. Die zur Verwendung benötigten Klassen in Form einer Bib-liotheksdatei stehen seither als kostenfreier Download zur Verfügung.

Im April 2010 wurde Alternativa3D 7 erstmals als Pre-Release im Internet veröffentlicht (AlternativaPlat-form). Laut AlternativaPlatform sind die Möglichkeiten der Anwendung von Alternativa3D sehr vielfältig. Sie reichen von der Gestaltung dreidimensionaler Web-seiten über 3D Minianwendungen im Web 2.0 Bereich bis hin zu komplexen Multiplayer Games im Webbrow-ser.

Nach Angaben der Entwickler von Alternativa3D 7 beherrscht die 3D Engine von Version 7 die gleichzei-tige Anzeige von 12000 Polygonen, was beim Flash Player 10.1einverhältnismäßigschnellesundeffekti-ves Rendern verspricht.

Diese Darstellungsleistung wird, mangels Hard-warebeschleunigung der GPU, durch einige Tricks der Entwickler erreicht.


So beherrscht Alternativa3D 7 zur Verbesserung der Performance das sogenannte MIP 1 Mapping. Dabei werdenTexturennur in ihrervollenAuflösungdarge-stellt, wenn sich das betreffende 3D-Objekt in der NähedervirtuellenKamerabefindet.WirddieDistanzvergrößert, also Objekte immer kleiner dargestellt,werdenTexturennichtmehr in ihrervollenAuflösungverwendet,eswirdaufeinekleinereAuflösungzurAn-zeige zurückgegriffen. MIP Maps haben maximal 30% mehr Speicherbedarf, als die am höchsten aufgelöste Textur alleine. Das Plus an Speicherbedarf ist also ver-hältnismäßiggeringunddieRenderzeitwirderheblichverkürzt. Eine geringere Artefaktbildung bei Mustern und mehr optische Tiefe, analog zur Schärfentiefe der Fotografie,sindzweipositiveNebeneffektedieserAn-tialiasing Technik.

Das gleiche Prinzip wird bei geometrischen Berech-nungen verfolgt und angewandt. Geometrische Poly-gonberechnungen werden stark vereinfacht, sobald sich ein Objekt von der Kamera entfernt. Die Struktur wird durch eine geringere Anzahl an Polygonen an-gezeigt, was ebenfalls die Performance erhöht.

Man spricht bei diesen Methoden der intelligenten Darstellung im 3D-Bereich von Level of Detail, Detail-stufen in der virtuellen Darstellung von Raum.

Im Vergleich zur kommenden Version Alternativa3D 8, welche auf der nächsten Flash Player Generation ba-siert, kann man bei Alternativa3D 7 trotz cleverer Me-thoden bei der Darstellung allerdings kaum von Per-formance sprechen. Die neueste Engine soll es laut AlternativaPlatform auf über 3 Millionen Polygone bei

1 MIP ist die Abk. von multum in parvo, was viel auf kleinem Platz bedeutet

▲ Abbildung 4.3Effizientes Speicherneinzelner RGB-Werte von Texturen ist eine Alternative zum Spei-chern ganzer Textu-renEigene Abb., nach

http://relisoft.com/


flüssigerDarstellungbringen.EinekompatibleGrafik-karte ist natürlich die Voraussetzung dafür.

Ein Beispiel, wie gut und schnell selbst ein anspruchs-volles und detailreiches 3D Spiel mit dem kommen-den, Molehill API gespickten Flash Player, gerendert wird, ist MAX Racer. Diese kleine Autorennen Simulati-on wurde von AlternativaPlatform eigens für die Messe Adobe MAX 2010, welche vom 23.10 bis zum 27.10.10 in Los Angeles stattfand, entwickelt, um schon jetzt die Möglichkeiten und das Potential der Kombination des 3D Framework und des nächsten Flash Player auf-zuzeigen (Epishin, 2010).

Dabei wird Alternativa3D 8 die intuitive API von Ver-sion 7 so gut es geht beibehalten, um den Umstieg so einfach wie möglich zu gestalten. Die API ist für an Adobe FlashgewohnteAnwenderohneallzugroßeUmstellung zu bedienen, da die Hierarchie und die Eigenschaften von 3D-Objekten denen der display-Objects-Klasse aus Flash entsprechen. 3D-Objekte können in der von Flash bekannten Weise verändert werden - man kann die selben Parameter, wie z.B. transformation, alpha oder blend mode, darauf an-wenden. Zudem sind die verwendbaren MouseEvents ebenfalls gleich zu denen in Flash.

▲ Abbildung 4.4Das Spiel MAX Racer nutzt Alternativa3D 8Screenshot

Große Ansicht unter Abb. 6.2, S.61


◄ Abbildung 4.5Gelungene Webseite durch Alternativa3D 7http://iq.toyota.ru/

Toyota lQ Webspecial

Eine mit Alternativa3D 7 realisierte, sehr gelungene Webseite, ist das Webspecial für den Toyota IQ. Auf dieser explorativen Webseite wird meiner Meinung nach der dreidimensionale Aspekt des Webangebots sehr gelungen eingesetzt.

NacheinemkurzenImagefilmalsTeaserfürdieWeb-seitefindetmansichineinerabstrakten3D-Weltwie-der. Diese Welt ist in den Farben Violett und Weißgehalten und besteht eigentlich nur aus einem Hin-tergrund und einer Ebene, welche die Seite durch einen Horizont optisch unterteilt. Der Horizont ist hier-bei leicht gebogen, was an eine Hemisphäre erinnert und dem Betrachter in gewisser Weise bekannt vor-kommt.DasgesamteErscheinungsbild istaußerdemsehr schlicht gehalten, was den Augen des Betrach-ters und mit Sicherheit auch der Performance zu Gute kommt. So wirkt das Gesamtbild, das Layout der Seite, sehr schick und elegant, aber ebenso entspannend.


▲ Abbildung 4.6Die geringe Polygo-nanzahl ist an Rad und Kotflügel gut zuerkennenScreenshot

http://iq.toyota.ru

Navigiert wird auf der Hauptseite lediglich per Cur-sortasten, was am Anfang etwas ungewöhnlich er-scheint. Ein Hinweis auf deren Gebrauch erscheint al-lerdings gleich zu Beginn. Ohne diesen Hinweis könnte ein unerfahrener Benutzer annehmen, dass die Web-seite nicht funktioniert.

Man navigiert also, indem man einen Toyota IQ per Pfeiltasten im dreidimensionalen Raum bewegt. Als Navigationshilfe ist auf der linken Seite ein kleines Radar angeordnet, welches auf die vorhandenen Menüpunkte hinweist.

DieMenüpunkte sind selbsterklärendeGrafiken, diesich somit eine zusätzliche, textuelle Beschreibung er-sparen. Sie schweben mit einer langsamen Bewegung über dem Boden und wirken dadurch sehr leicht. Vi-suell sind die Grafiken zwar im dreidimensionalenRaum angeordnet, allerdings wurden sie selbst zwei-dimensional umgesetzt. Sie sind lediglich mit einem 3D-Effekt versehen. Hier wurde höchstwahrscheinlich derflüssigenPerformanceVorranggewährtunddermangelnden Hardwareunterstützung Tribut gezollt.

Gleiches gilt für das 3D-Modell des Fahrzeugs. Es be-sitzt zwar Details wie Schattenbildung und sogar phy-sische Parameter, die eine Federung des Fahrwerks si-mulieren, die Polygonanzahl ist allerdings gering. Gut zu erkennen ist dies an den Radhäusern, welche nicht rund, sondern leicht eckig erscheinen. Insgesamt ist die Qualität des Modells aber ordentlich.


◄ Abbildung 4.7Dreidimensionale Na-vigationScreenshot

http://iq.toyota.ru

Fährt man mit dem Toyota IQaneinendergrafischenMenüpunkte heran, so öffnet sich automatisch die dazu gehörige Detailansicht mit zusätzlichen Informa-tionen. Man bewegt sich also interaktiv zwischen den gebotenen Informationen.

Was den aktuellen Stand der Technik von 3D Pro-duktpräsentationen gut beschreibt ist die folgende Tatsache: Der Menüpunkt „360°“ beherbergt eine 360-Grad-Ansicht, die noch mit der herkömmlichen, auf Pixel basierenden Methode der 360-Grad-Pro-duktfotografie erstellt wurde. Hier wird erneut klar,dass Flash ohne die Unterstützung der Grafikkarterecht schwach auf der Brust ist.

Dennoch stellt die Imageseite des Toyota IQ eine äußerstgelungene Integration von3D ineineWeb-seite dar. Nicht zuletzt dank des modernen, frischen Looks und dem spielerischen Bedienkonzepts. n

42 | Alternativen

Fast alle RIAs erfor-dern den Download

eines Plugins

3 ernstzunehmende Alternativen zu Flash

5 Alternativen zu Flash

Zusätzlich zu den in Kapitel 4 Interaktivität erwähnten, zahlreich auftretenden 3D Frameworks, die alle auf der Technologie Flash basieren, gibt es noch etliche andere „Flash-freie“ Wege, unter deren Verwendung man interaktive 3D Inhalte fürs Internet produzieren kann.

Die meisten Rich Internet Applications, also interaktive Applikationen im Internet, benötigen jedoch fast alle ebenfalls ein proprietäres Plugin, welches dem Brow-ser mehr Zugriffsrechte auf der lokalen Hardware ver-schafft,um3DInhalteflüssigdarzustellen.

Im Rahmen dieser Arbeit, die sich vor allem auf die Flash basierte Medienproduktion bezieht, habe ich mich zusätzlich mit drei Alternativen beschäftigt.

Da wäre einmal Silverlight, Microsoft‘s Antwort auf Ad-obe Flash und selbst ernannter Hauptkonkurrent.

Zum anderen Unity, eine noch sehr junge Techno-logie von der Firma Unity Technologies, die sich vor allem auf die Produktion von High Quality 3D Inhalten spezialisiert hat und eine eigene Entwicklungsumge-bung gleich mitbringt.

Letztlich stelle ich noch WebGL vor, ein neuer auf JavaScript basierender Standard, der die einzige Alternative darstellt, die ohne die Installation eines Plugins auskommt. Bei der Darstellung von 3D steckt WebGL allerdings noch in der Entwicklung.

Alternativen | 43

Es geht mir im folgenden Kapitel vor allem um den Trend in der Branche, den Konkurrenzkampf um Kun-denunddenEinflussvontechnischenHürden,dieeszur Umsetzung neuester Ideen und Technologien zu erklimmen gilt. Denn bei der heutigen Geschwindig-keit des Wechsels von Trends und Technologien soll-te man sich nicht die Scheuklappen aufsetzen und sich nur einer einzigen Produktionsweise verschreiben, sondern die Augen offen halten für andere Möglich-keiten in der Erschaffung von 3D Webcontent.

5.1 Microsoft Silverlight

Microsoft Silverlight ist eine Erweiterung für Browser zur Nutzung von Rich Internet Applications. Bei der Pro-duktion geht Silverlight einen eigenen Weg:

Die Programmlogik ist weitestgehend von der Ge-staltung getrennt gehalten, was ein paralleles Arbei-ten von Desigern und Programmierern vereinfachen soll.

Die aktuelle Version der Rich Media Technologie ist Microsoft Silverlight 4, welche im April 2010 erstmals vorgestellt wurde. Laut Microsoft soll Version 4 dreimal so schnell sein als Version 3, welche im Juli 2009 auf den Mark kam. Damit soll Silverlight konkurrenztech-nisch näher an Flash heranrücken. Und in manchen Aspekten bietet Microsoft Silverlight 4 Vorteile zu Flash.

So berichtet Borck (2010), dass die Integrierung von Bearbeitungswerkzeugen in Visual Studio 2010 deut-

http://silverlight.net

44 | Alternativen

Silverlight und Flash bieten in den kom-menden Versionen eine Hardwarebe-

schleunigung von 3D

Was ist mit Linux?

lich besser gelöst ist als von Adobe Flash. Sicher wird die Qualität der Entwicklungsumgebung immer sehr subjektiv wahrgenommen und ist auch eine Gewohn-heitsangelegenheit, aber die Verbindung von Design und Programmlogik stellt sich in Visual Studio 2010 deutlich übersichtlicher und durchdachter dar.

Die im Gegenteil zu Flash vorhandene Verbindung mit den Servertechnologien .Net, COM, und WCF sieht Borck (2010) allerdings nicht unbedingt als Vorteil an. Die fehlende Serverabhängigkeit von Flash gleicht es mit der dadurch entstehenden Felxibilität und Mobili-tät aus - ein Umstand, der heute nicht unerheblich ist.

In der Reichweite kommt das Silverlight Plugin an den Hauptkonkurrenten mit dem Flash Player als Ab-spielplattform erwartungsgemäß nicht heran, waszurecht einen der Hauptgründe gegen Silverlight für viele Werbende darstellt.

Bei der Hardwareunterstützung von 3D Inhalten muss man sich, wie bei Flash, momentan noch etwas ge-dulden. Als Antwort zum kommenden, unter dem Codenamen Molehill bekannten, Flash Player 11 hat Microsoft, Silverlight 5 angekündigt. Die noch in der ersten Hälfte 2011 erscheinende Version wird dann, genau wie der Flash Player 11, die 3D Beschleunigung mittels GPU unterstützen (Ihlenfeld, 2010).

Da Microsoft Silverlight auf Linux Systemen nicht läuft, ist in diesem Zusammenhang die OpenSource Re-alisierung Moonlight zu nennen, welche die von Mi-crosoft nicht geschaffene Kompatibilität von Silver-light Applikationen auf Linux ermöglicht.

Alternativen | 45

http://mono-project.com/Moonlight

5.1.1 Moonlight

Moonlight ist die OpenSource Implementierung von Microsoft Silverlight. Das Framework der Mono-Platt-form wurde speziell für Linux und auf Unix basierende Betriebssysteme entwickelt, um Silverlight-Applika-tionen auf den Betriebssystemen lauffähig zu ma-chen. Die Entwickler von Moonlight haben es eben-falls geschafft, die Grafikkarte zur Beschleunigungdreidimensionaler Objekte zu verwenden. In Zukunft wird auch das Rendern von Oberflächen schnellervonStattengehen,daüberdieGrafikkarteTexturenin den Zwischenspeicher geladen werden können. Thoma (2010) beschreibt einen weiteren Vorteil von Moonlight gegenüber Silverlight. So wird Moonlight alle Pixel-Shader der GPU verwenden können, Silver-light 5 von Microsoft wird dagegen nur auf einige Shader zurückgreifen. n

46 | Alternativen

5.2 Unity

Die Geschichte von Unity Technologies schreibt sich so überschaubar wie erfolgreich:

Im Jahr 2001 begann die Entwicklung an Unity, einer Entwicklungsumgebung für Videospiele. 2005 wurde Version 1 erstmals veröffentlicht, schon 2007 folgte Unity 2.0. Das Modell, eine Entwicklungsumgebung für jedermann zu schaffen und somit die Spieleentwick-lung nicht in der eigenen Firma zu betreiben, sondern weltweit, verhilft dem Unternehmen zu einer rasend schnellen Verbreitung der eigenen Technologie und somitzueinerimmergrößerwerdendenBekanntheit.Dieses Business-Modell hat seither die Branche der Spieleentwicklung revolutioniert. „Do it yourself“ ist an-gesagter denn je, die Spiele-Communities wachsen.

Als 2008 eine Version der Software für das iPhone gelauncht wird und Unity Technologies zum autorisier-ten Middleware-Anbieter 1 für Nintendo Wii ernannt wird,verdreifachtsichdieGrößedesbisdahersehrüberschaubaren Unternehmens. 2009 erscheint die erste kostenlose Version der Software, die allerdings der Pro-Version in einigen Aspekten nachsteht. Auch in diesem Jahr verdreifacht sich die Mitarbeiterzahl.Im September 2010 wird schließlich die aktuellste

Version, Unity 3 (auch Unity³), veröffentlicht und eine Partnerschaft mit Electronic Arts angekündigt.

Heute hat Unity mehr als 100 Festangestellte, kann weltweit mehr als 250.000 Entwickler 2 aufweisen und hat eine beachtliche Referenz an Kunden. Coca Cola, Disney, LEGO und Microsoft reihen sich bereits ein.

http://unity3d.com

1 Middleware ist eine Zwischenanwendung [vermittelt zwischen 2 Software-Ebenen]

2 Die deutsche Unity Community im Netz:http://unity-insider.de/

Alternativen | 47

▼ Abbildung 5.1Detailreiches und äs-thetisches 3D Modell des Peugeot RCZScreenchot

http://helloenjoy.com/

Wie auch bei Flash, benötigt man zum Darstellen von Unity-Inhalten einen Web Player, ein Plugin zur Kom-munikation mit der lokalen Computerhardware, den Unity Web Player. Dieser konkurriert zwar noch nicht mit dem Flash Player, die Anzahl an Installationen auf Webbrowsern überschritt 2010 allerdings die beachtli-che Anzahl von 35 Millionen.

5.2.1 Peugeot RCZ Webspecial

Das die für Spiele entwickelte Software auch zu Wer-bezwecken verwendet wird, beweist die Brüsseler Zweigstelle der Londoner Werbeagentur EURO RSCG 4D eindrucksvoll. Die Agentur hat 2010 für Peugeot die Microsite des Sportcoupés Peugeot RCZ konzi-piert.Unterstützungbekamsiedurchdie3DProfisdesLondoner 3D-Studios HelloEnjoy, welche die Umset-zung einer interaktiven 3D Produktpräsentation des Sportwagens realisiert haben.

48 | Alternativen

▲ Abbildung 5.2Vor allem an abge-rundeten Stellen wird die hohe Polygonan-zahl deutlichScreenshot

Vgl. Abbildung 4.6, S.40

Abbildung 5.3 ►Durch ausgeklügelte Fahrphysik wirkt der Peugeot beim Fahren äußerstlebendigScreenshot

Bei dieser dreidimensionalen Visualisierung sind die Vorzüge von Unity³ zu Flash gut erkennbar.Das Modell ist äußerst detailliert ausgeführt, was

aufeine sehrhoheAnzahlvonPolygonenschließenlässt. Die Lichteffekte der Scheinwerfer, welche einer-seits durch aufwendige Lichtsetzung in Szene gesetzt werden und andererseits beim Bewegen des Modells einen eleganten Lichtschweif hinter sich her ziehen, sind wortwörtlich als Highlight zu erwähnen. Auffal-lend sind auch die Spiegelungen auf dem Fahrzeug-lack, die von unglaublicher Brillianz sind.Die realistischeFahrphysikschaffteinesehrfließen-

de Interaktion vom Benutzer zum Modell. Das Fahr-zeug lässt sich per Navigationstasten der Tastatur sehr spontan und selbstverständlich im virtuellen Show-room bewegen - hier zahlt sich die Spezialisierung und die damit einhergehende Erfahrung von Unity Tech-nologies auf Videospiele aus. Zusätzlich kann man per gedrückter Maustaste die Kamera um das Coupé herum bewegen. Ohne den Eingriff eines Benutzers verändert die Kamera selbstständig und dynamisch den Blickwinkel auf das 3D Modell.

Alternativen | 49

▲ Abbildung 5.4Mit Unity iPhone und Unity Android bedient Unity Technologies den Markt für Smart-phonesMontage nach Screenshots

Mit dem Webspecial für Peugeot erschufen die Ent-wickler unter Verwendung von Unity³ eine meiner Meinung nach ästhetisch perfekte 3D Produktpräsen-tation, die auf diese Weise momentan (Flash Player 10.2) mit Flash schlichtweg nicht möglich ist. Ein Grund mehr, warum sich Entwickler in Zukunft an Unity³ nicht nur zur Spieleentwicklung, sondern auch zu Präsenta-tionszwecken von Produkten, bedienen sollten. n

Laut Schweickhardt (2010) hat Unity Technologies nicht nur für Desktops und Notebooks einiges anzu-bieten. Im Markt für Smartphones wird der Name Unity auch immer populärer.

3D Applikationen und 3D Videospiele-Applikationen sind sehr gut umsetzbar, da die Software Unity³ bei-spielsweise den Accelerometer des iPhones auslesen und Multitouch-Gesten nutzen kann. Seit 2008 ist Unity iPhone auf dem Markt und beschert Unity Technologies bereits mehr als 1000 Spiele im App Store von iTunes. Was Schweickhardt im März 2010 bereits vermutete, nämlich die Unterstützung des Betriebssystems Android, wurde schon Ende Juni 2010 Realität. Und wieder nicht ohne Folgen: Den Einstieg ins Betriebssystem Android beschreibt Unity Technologies neben dem iPhone als Zielplattformalseiner ihrergrößtenWachstumsfakto-ren. n

50 | Alternativen

http://www.khronos.org/webgl/

WebGL ... Web Gra-phics Library

5.3 WebGL

Die Verbreitung des Flash Player ist weltweit führend im Vergleich zu alternativen Plugins, was der Techno-logie von Adobe bei kommerziellen Projekten eindeu-tig einen großen Vorteil in der Reichweite auf demMarkt beschert. Aus rein wirtschaftlichen Gründen wird demnach Flash anderen Technologien meist vorgezogen. Mit der Weiterentwicklung des sich mo-mentannochinderEntwicklungbefindlichenHTML 5, taucht allerdings ein weiterer Standard auf, der es in sich haben könnte. Denn ein Weg der 3D Darstellung im Web ohne die Verwendung eines proprietären Plu-gins, ist alleine aus Gründen der Zielgruppenerreich-barkeitäußerstinteressant.

WebGL, entwickelt von der Khronos Group, ist eine Programmierschnittstelle für die Erstellung von 3D In-halten, die eine Plugin-freie, hardwarebeschleunigte 3D Darstellung im Browser ermöglicht. Realisiert wird dies durch die Integration von OpenGL ES 2.0 in Ja-vaScript. Der Unterschied zu herkömmlichen 2D Ja-vaScript-Grafikfunktionen ist der Zugriff auf die Gra-fikkarte des Computers zur Beschleunigung des 3DContents.

Eingebettet wird WebGL im Canvas-Element von HTML 5. Das Canvas-Element ist eine virtuelle Zeichen-fläche,eineArtBitmap-LeinwandfürVektorgrafiken,die durch JavaScript zum Leben erweckt wird.

<canvas id=“WebGL-canvas“ style=“border: none;“ width=“500“ height=“500“></canvas>

Alternativen | 51

◄ Abbildung 5.5Demonstration einer 3D Szene in WebGLScreenshot

http://www.glge.org/collada-now-suppor-ted/

Angestrebt wird bei WebGL ebenfalls die vollständige Kompatibilität mit COLLADA, was den Import von ex-tern erstellten 3D-Modellen ermöglichen wird. In eini-gen Prototypen lassen sich 3D Modelle durch COLLA-DA bereits importieren und darstellen, allerdings noch nicht animieren (Stand: 15.12.10).

Da die Grundvoraussetzung für die noch sehr junge Technologie jedoch ein Browser ist, der sie unterstützt, erklärt sich das folgende Unterkapitel zu WebGL von selbst.

Update: Anfang März 2011 hat die Khronos Group den neuen 3DGrafik-StandardWebGL 1.0 erstmals aufderinSanFranciscostattfindendenGame Deve-lopers Conference, eine der wichtigsten Veranstal-tungen für Spieleentwickler und -designer, öffentlich freigegeben.

52 | Alternativen

▲ Abbildung 5.6DiefünfgroßenBrow-ser teilen sich im Ja-nuar 2011 mehr als 98% des Markts Eigene Abb., nach Browser-Statistik.de

http://www.google.com/chrome

1 Compiler wandeln Quellcode in Byteco-de oder Maschinen-

sprache um

5.3.1 Browserunterstützung

Da WebGL eine Plugin-freie Hardwarebeschleuni-gung von 3D Inhalten ermöglicht, ist die Unterstüt-zung seitens der Plattformen, also den Webbrowsern, besonders wichtig. Denn wo man bisher einfach die Browserfunktionen durch ein Plugin erweitern konnte, heißtesbeiWebGL seitens der Browser von vornher-ein entweder „ja“ oder „nein“.

WebGL ist in der praktischen 3D Anwendung noch nicht marktreif. Aktuell (Dez 2010) zählt WebGL noch zu den experimentellen Implementierungen der Brow-ser. Allerdings ist, dem Konkurrenzkampf der Brow-ser sei Dank, ein äußerst positiver Trend in Richtung HTML 5 -Kompatibilität erkennbar.

In den folgenden Absätzen gehe ich auf die für WebGL relevante Entwicklung der fünf wichtigsten In-ternetbrowser ein, den Mozilla Firefox, Microsofts Inter-net Explorer, Apple‘s Safari Browser, Google Chrome und Opera (browser-statistik.de).

Nach Ihlenfeld (2010) hat Google Chrome WebGL in der Betaversion Chrome 9.0.597.19 standardmäßigaktiviert, was darauf schließen lässt, dass die kom-mende Version Chrome 9 von Google, WebGL voll unterstützen wird. Der Browser nutzt die Schnittstelle OpenGL ES 2.0 zum Hardware-Zugriff.Update: Anfang Februar 2011 hat Google Version 9 von Chrome veröffentlicht und wie bereits angekün-digt, wird WebGL unterstützt.

49%

29%

9,5%7,4%

Mozilla Firefox

Internet Explorer

SafariChromeOpera

3,5%

Alternativen | 53

Hohe Fluktuationsrate bei Google Chrome:Sep. 2010 - Chrome 6 Okt. 2010 - Chrome 7 Dez. 2010 - Chrome 8 Feb. 2011 - Chrome 9 Mär. 2011 - Chrome 10

http://mozilla-europe.org/de/

Nächstes Update: Anfang März 2011 ist Google Chro-me 10 erschienen. Ein Beleg für den harten Wettbe-werb um die Gunst potentieller Nutzer ist der schnelle Versionswechsel heutiger Browser. In Chrome 10 wur-de zudem die JavaScript-Engine durch die Verwen-dung eines schnelleren Compilers 1 verbessert, was somit auch zur Performancesteigerung in WebGL bei-trägt.

Seit Februar 2011 wird bei Google Chrome WebGL voll unterstützt. Da die Versions-Updates bei Chrome automatisch im Hintergrund ablaufen, ist die Dauer zur Etablierung einer neuen Version sehr schnell und somit die Abdeckung der privaten Haushalte mit der aktuellsten Version sehr hoch. So lag der Anteil von Google Chrome 9 schon wenige Tage nach der Ver-öffentlichung bei etwa 88% (browser-statistik.de).

Bei der Mozilla Foundation ist der gleiche Trend er-kennbar, wenn er auch hier etwas gemächlicher ver-läuft. Ab der Betaversion Firefox 4 Beta 7 ist WebGL ebenfalls aktiviert und greift per OpenGL ES 2.0 auf die Hardware zu. Die noch vor April 2011 erscheinen-de Browserversion Mozilla Firefox 4 wird WebGL voll unterstützen. Jedenfalls unter den Betriebssystemen von Microsoft und Apple.

Laut Thoma (2011) sieht die Zukunft von WebGL un-ter Linux noch nicht ganz so rosig aus: Firefox 4 wird auf Linux vorerst weder WebGL, noch das zur Hard-warebeschleunigung nötige OpenGL, unterstützen. Mozilla-Entwickler Zbarsky begründet die mangelnde WebGL-Unterstützung mit fehlerhaften Treibern unter Linux, die durch die 3D Beschleunigung zu Darstel-

54 | Alternativen

http://apple.com/de/safari/

lungsfehlern oder sogar Programmabstürzen führen können. Dennoch ist für Linux Benutzer Licht am Hori-zont erkennbar. Laut MozillawirdschonfleißigandenProblemen gearbeitet. Und vielleicht schafft schon die nächste Version des Browsers, demnach Firefox 5, Abhilfe. Diese Version soll laut Mike Beltzner, Hauptver-antwortlicher für die Mozilla-Entwicklung, schon bald auf die gerade erschienene Version 4 folgen. Denn zukünftige Versionen sollen in deutlich kürzeren Inter-vallen veröffentlicht werden. Beltzner spricht sogar von nur dreimonatigen Zyklen.

Update: Seit 22.03.2011 gibt es auch bei Firefox mit Version 4 grünes Licht für WebGL bei den meisten Be-nutzern.

Seit Juni 2010 ist Safari 5 sowohl für Mac OS X als auch für Windows auf dem Markt. Nach Aussagen der Khro-nos Group kann man die WebGL-Unterstützung in der aktuellen Version von Safari durch die Erweiterung mit dem WebKit Nightly Builds, das am 11.03.2011 er-schien, auf Mac OS X 10.6 freischalten (Khronos.org). Standardmäßig wird WebGL allerdings nicht unter-stützt.

Die Entwicklerversion Safari-Version 5.1 für das kom-mende Mac OS X Lion 10.7 besitzt den Menüpunkt WebGL, der die Aktivierung per „Knopfdruck“ ermög-licht (Miller, 2011).

Wie man sieht ist Safari noch weit von dem Stand entfernt, den Firefox und Chrome bereits erreicht ha-ben. Wann WebGL als Standard beim Safari-Browser Einzug halten wird, lässt sich momentan schlecht sa-gen.

Alternativen | 55

http://de.opera.com/

Beim Browser von Opera Software sieht die Sache ähnlich aus. Zwar gibt es bereits seit etwa drei Jahren eine Betaversion des Browsers mit einer Implemen-tierung von 3D im HTML5-Element Canvas, allerdings unterstützt erst die aktuelle Entwicklerversion Opera 11.50 den Standard WebGL. Und das, obwohl sich Opera seit Jahren für die Standardisierung von Web-GL beteiligt (Ihlenfeld, 2011). Dies lag zum Teil an der Konzentration auf die Verbesserung des hauseigenen Softwarerenderers, der seit Opera 10.50 (März 2010) einer der schnellsten Softwarerenderer darstellt.

Positiv zu erwähnen ist die volle Kompatibilität mit sämtlichen Betriebssystemen, wie Windows, Mac OS X und Linux (vgl. Firefox 4). Laut Opera-Entwickler Johansson wird selbst bei Smartphones mit OpenGL ES 2.0 die Hardwarebeschleunigung funktionieren. Diesen Vorteil zu anderen Browsern wie zum Beipiel Firefox 4, welcher Direct2D, Direct3D und OpenGL kombiniert und somit nur unter Windows Vista und Windows 7 den vollen Funktionsumfang bei der Hard-wareunterstützung bietet, gilt es zu nutzen und in einer Vollversion zu veröffentlichen. Denn momentan steht die Testversion 11.50, welche OpenGL übrigens vor-aussetzt, lediglich für Windows bereit.

Doch laut Ihlenfeld (2011) sieht die Zukunft auch hier vielversprechend aus: Direct3D soll als Fallback inte-griert werden, damit Hardware-Rendering unter Win-dows ohne die Installation zusätzlicher Treiber funktio-niert.

Jetzt bleibt lediglich abzuwarten, wann die erste öffentliche Version von Opera erscheint, welche die oben erwähnte Technologie auch beinhaltet. Denn

56 | Alternativen

http://internet-explo-rer9.de

für die noch 2011 erscheinende Version 11.10 ist der Verzicht auf WebGL angesagt.Update: Am 17.03.2011 erscheint die Betaversion Opera 11.10, WebGL funktioniert nicht.

Die im März 2009 veröffentlichte Version 8 des Internet Explorers von Microsoft unterstützt WebGL nicht. Die-seTatsacheschließtdieKombinationvonWebGL und dem hausinternen Browser von Windows auf dem mo-mentan noch relativ weit verbreiteten Betriebssystem Windows XP aus, da zukünftige Versionen des Internet Explorers zu Windows XP nicht mehr kompatibel sind (Pakalski 2010).

Wer also in Zukunft in den Genuss von WebGL im Inter-net Explorer kommen möchte, muss mindestens Win-dows Vista oder eine aktuellere Version des Betriebs-systems sein Eigen nennen. Doch seit dem 15.03.2011, das Erscheinungsdatum des Internet Explorer 9, gibt es für die Nutzer von Windows Vista oder Windows 7 keine Neuerung bezüglich WebGL. Denn auch die aktuelle Version 9 unterstützt die 3D Programmschnitt-stelle nicht. Zwar beherrscht der Browser Hardwarebe-schleunigung zum deutlich schnelleren Seitenaufbau, doch funktioniert dies lediglich für Texte, Videos und Grafikanimationenin2D(Ihlenfeld2011).

Da die Versionszyklen des Internet Explorers deutlich größersindalsdieandererBrowser,wiebeispielswei-se Chrome und Firefox, wird es wohl noch eine Weile dauern, bis WebGL unterstützt wird. Ein Rückschlag für WebGL, da der Internet Explorer trotz fallender Nutzer-zahlen immer noch etwa ein Drittel des Markts für sich gewinnen kann.

Alternativen | 57

Das Fazit zum Wettbewerb der Internetbrowser be-züglich WebGL ist ein durchwachsenes:

Auch wenn das Gros der Webbrowser den Weg für WebGL geebnet hat, mit Mozilla Firefox 4 und Goog-le Chrome 9, 10 und 11, werden im April 2011 schon mehr als 50% der User einen WebGL-kompatiblen Browser nutzen. Damit ist eine Abdeckung von über 90%, die der Flash Player vorweisen kann, noch lange nicht erreicht. Bei Opera und SafaribefindetsichdieUnterstützung noch in der Testphase, der Internet Ex-plorer bietet keinerlei Möglichkeiten an.

Bis sich genügend Entwickler mit der Materie ver-traut gemacht haben und WebGL wirtschaftlich, also beispielsweise zu Werbezwecken verwendet wird, vergeht mit Sicherheit noch einige Zeit.

Dennoch könnte WebGL in Zukunft zu einem Kon-kurrenten des Flash Plugins werden. Es bleibt allerdings abzuwarten, wie sich Flash in der Zwischenzeit entwi-ckelt. n

58 | Performance

▲ Abbildung 6.1Hardwarebeschleu-nigung soll 3D Flash-Inhalten zukünftig auf die Sprünge helfenEigene Abbildung

6 Performance

Dem Mangel an 3D Inhalten im Internet (siehe Kapi-tel 2.3 Produktverkauf in 3D) liegt vor allem folgendes Problem zugrunde:

Eine langsame Performance von 3D Inhalten, wel-che sich durch unschönes Ruckeln und Haken des Dargestellten bemerkbar macht.

Die Ursache für dieses Problem liegt vor allen Dingen an einer fehlenden Hardwarebeschleunigung. Bei komplexen Darstellungen von 3D können einzelne Objekte samt Texturen, Licht und Schatten nicht mehr zur Laufzeit gerendert werden, da Softwarerenderer trotz ausgefeilter Rendering-Techniken ohne die Un-terstützung der Grafikkarte recht schnell an ihr Leis-tungslimit gelangen.

Die einzige Lösung für dieses Problem ist die Anbin-dungdesBrowsersandieGrafikkarte.Möglichistdieszum Beispiel über ein Plugin, welches über 3D Pro-grammierschnittstellenmitderGrafikkarte kommuni-ziert und die einzelnen Arbeitsschritte des Rendering somit von der CPU, die normalerweise vom Browser angesteuert wird, auf die GPU auslagert.

Im Zusammenhang mit Flash gibt es hierfür eine Lö-sung. Und zwar die nächste Flash Player Version, wel-che unter dem Codenamen Molehill seit einiger Zeit entwickelt wird.

Performance | 59

Hardwarebeschleu-nigung für alle Ent-wickler

6.1 Molehill

Molehill ist die von Adobes Entwicklern stammende Bezeichnung für eine Reihe an APIs, die in der nächs-ten Version des Adobe Flash PlayerVerwendungfin-den werden.

Nach Presseangaben von Adobe wird die Integra-tion von Molehill in den Flash Player erstmals in einer öffentlichen Beta-Version im zweiten Quartal 2011 für den Verbraucher angeboten werden. Zur selben Zeit sollen die neuen 3D-APIs auch für Adobe Air bereitge-stellt werden. Der Adobe Flash Builder sowie das Flex SDK werden ebenfalls kompatibel für Molehill sein.

Diese Kompatibilität kommt den 3D Entwicklern ent-gegen, da auf diese Weise AS3-Programmierer und Flashdesigner ihre Projekte mit den gewohnten Pro-grammen kreieren können.

Ein weiterer, wichtiger Schritt in Richtung OpenSour-ce ist die Tatsache, dass Adobe die neuen APIs auch für die gängigsten 3D-Frameworks wie Alternativa3D, Away3D, Flair3D, Sophie3D oder Yogurt3D zur Verfü-gungstellenwird.SowirddeningroßenZahlenvertre-tenen Entwickler-Communities im Internet das Tor zu einer schnellen, dreidimensionalen Zukunft mit Flash geöffnet.

Die bisherigen in Flash Player 10 und 10.1 integrierten 3D-APIs werden auch in Zukunft, also nach Beendi-gung der Beta-Phase, unterstützt werden, um Ab-wärtskompatibilität zu gewähren. Meiner Meinung nach wird diese Möglichkeit in Zukunft allerdings wohl

60 | Performance

1 Ein Vergleich der Zahlen:

Der Flash Player 10.1 soll einige tausend

Dreiecke ohne Z-Buf-fer bei 30 FPS be-

rechnen können. Der Nachfolger mehrere

hunderttausend Drei-ecke bei 60 FPS.

kaum mehr genutzt, da die Performance der aktu-ellen Flash Player 10.1 (Stand 01.02.11) für die ästhe-tische Darstellung animierter 3D-Objekte mangels Hardwareunterstützung nicht ausreicht.

Genau hier setzt die nächste Version, vermutlich Ver-sion 11 Beta, des Flash Players ein. Die sich teilweise noch in der Entwicklung befindlichen 3D-APIs sindnach Adobe in der Lage, mehrere hunderttausend Dreiecke bei 60 Hertz in voller HD-Auflösung zu ren-dern 1.

Erreicht wird diese enorme Leistungssteigerung beim RenderndurchdieUnterstützungmittelsderGrafikkar-te. Die APIs verschaffen sich durch ein Plugin Zugriff aufdiverseFunktionenderGrafikkarte(GPU)undla-gern somit die anfallenden Aufgaben des 3D-Ren-derns vom Hauptprozessor (CPU) aus.

Für den Fall, dass ein Endgerät keine 3D-Unterstützung besitzt, will Adobe ein automatisches Fallback imple-mentieren, das die 3D Berechnungen wieder an die CPU vermittelt. Dieses Fallback wird vom SwiftShader, ein von der Firma Transgaming entwickeltes Software GPU Toolkit, das die Arbeit des 3D Rendering durch-führt, übernommen.

SwiftShader passt sich je nach Betriebssystem modu-lar an die jeweilige API an. Bei Windows ist dies DirectX 9, bei Mac OS X und Linux ist es OpenGL 1.3. Selbst auf mobilen Endgeräten ist die Fallbacklösung durch die Verbindung des SwiftShader mit OpenGL ES 2.0 funk-tionsfähig.

Performance | 61

Abbildung 6.2 ►Flash Videospiel MAX Racer, vorgestellt auf der Adobe MAX 2010Screenshot

http://www.youtube.com/watch?v=tgwi0lWgX8w

Die Funktionsweise und der Aufbau der 3D APIs soll denen von WebGL sehr ähnlich sein. Einen Vorteil gegenüber dem neuen Standard der Khronos Group sieht Adobe in der Browser- und Plattformunabhän-gigkeit ihres Plugins. Diese Sicherheit kann von WebGL in näherer Zukunft nicht geboten werden (siehe Ka-pitel 5.3.1 Browserunterstützung). So müssen Flash-Ent-wickler in Zukunft keine Rücksicht auf die Zielplattform geben. Das Ergebnis ihrer Arbeit wird stets konsistent bleiben.

Update:

Am 27. Februar 2011 hat Adobe eine erste Pre-Version des Flash Player 11 veröffentlicht. Auf Adobe Labs, der hausinternen Plattform für Previews, Prereleases und Beta-Software, kann man seither die Flash Player Incubator Debug Installers für sämtliche Browser und Betriebssysteme herunterladen.

Die als Adobe Flash Player Incubator bezeichne-te Version 11.0.0.58 besitzt bereits die neuen Molehill

62 | Performance

Das neue Flex SDK-Buildbefindetsich

noch in Entwicklung und kann demnach noch Bugs und nicht

fertig gestellte Fea-tures enthalten

http://opensource. adobe.com

1 Das neueste Build des Flex SDK ist

498MBgroß,dasAltelediglich 260MB

Es scheint, als habe sich einiges getan

APIs, die dem Browser die 3D Hardwarebeschleuni-gung ermöglichen.

Um den neuen Flash Player mit Adobe Flex SDK zu ver-wenden, muss man allerdings ein paar Änderungen in den Einstellungen des betreffenden Projekts vorneh-men.

Man muss unter Adobe Open Source das neueste Flex Hero Build, das Build 4.5.0.19786 1, herunterladen. Nachdem man es installiert hat, muss man im Flash Builder oder in FlashDevelop dem Projekt, welches die neue Version 11.0.0.58 zur Veröffentlichung ver-wenden soll, den neuen AS3-Compiler zuweisen. Das geschieht, indem man die auf Adobe Labs erhältli-che Bibliotheksdatei playerglobal.swc, Version 13, mit dem Compiler Befehl „-swf-version=13“ unter „additi-onal Compiler arguments“ dem Projekt hinzufügt.

Nachdem diese Änderungen vorgenommen wurden, sollte im Regelfall die neue Testversion, das Flash Play-er 11 Incubator Build, Flash-Inhalte im Browser anzei-gen.DurcheinekleineFußnotegibtsichdieTestversi-on stets zu erkennen. n

6.2 Grafikkarten

Da Molehill der nächsten Flash Player Version den Zu-gangzuGrafikkartenermöglicht,tretendiesemehrinden Vordergrund. Denn das Rendern und die Darstel-lung von 3D Inhalt wird in Zukunft vollständig von der

Performance | 63

Ein Bussystem mit ho-her Bandbreite ist für einen schnellen Da-tentransfer zwischen CPU und GPU zustän-dig

1999 erschafft NVIDIA mit der GeForce-256 die erste GPU

Grafikkarteerledigtwerden.SiewirddurchdenVersi-onswechsel also noch wichtiger, wird also vermehrt in den Vordergrund treten.

DiePerformancevongrafischenInhaltenistschonim-merstarkvonderLeistungderGrafikkarteabhängig.Deshalb gehe ich im folgenden Abschnitt auf den AufbauunddieEntwicklungvonGrafikkartenein.

Eine Grafikkarte ist eine Platine, die direkt mit demMotherboard des Computers durch eine Steckverbin-dung verbunden ist. Die grundlegenden, die Perfor-mancebeeinflussendenFaktorenundKomponentenvonGrafikkarten sindnachEickmann (2004)die fol-genden:AngesprochenwirddieGrafikkartedurchdasBus-

system.AuchwennesnichtzurGrafikkartegehört,istesmaßgeblichmitihrerLeistungverbundenundwirddeshalb in diesem Kontext erwähnt. Ein Bussystem ist für den Datentransfer zwischen einzelnen Kompo-nenten des Computers zuständig. Wie schnell dieser Transfer von Daten abläuft, hängt von der Bandbrei-tedesSystemsab.EineschnelleGrafikkartereichtfüreine hohe Performance demnach nicht aus. Ein lang-sames Bussystem würde den Flaschenhals darstellen, derdieLeistungbzw.dieSchnelligkeitderGrafikkarteausbremst. Aus diesem Grund hängt die Entwicklung vonGrafikkarten seit jehermit der von Bussystemeneng zusammen. War die Transfergeschwindigkeit von GrafikbussystemenAnfangder1990erJahrenochaufweit unter 500 MB/s beschränkt, lag sie im Jahr 2003 schon bei über 4000 MB/s.

64 | Performance

DerGrafikspeicheristfür die Informations-

verarbeitung auf der Grafikkartezuständig

DerGrafikprozessorübernimmt die lo-

gische Berechnung sämtlicher Parameter

1995 bringt NVIDIA den ersten 3D Gra-

fikchipfürConsumerheraus

DiewichtigstenBestandteileaufderGrafikkarteselbstsindderGrafikprozessorundderGrafikspeicher.Die-se beiden Teile sind letztendlich ausschlaggebend für dieLeistungsfähigkeiteinerGrafikkarte.

DerGrafikspeicher ist fürdieTaktgeschwindigkeitso-wie für die Latenzzeiten verantwortlich, also die Ge-schwindigkeit der Informationsverarbeitung.

Die Latenzzeit ist die Zeitspanne zwischen dem In-put vonDaten inden SpeicherderGrafikkarte unddem Output nach der Speicherung. Je schneller die-ser Vorgang abgeschlossen ist, desto höher ist der Da-tenaustausch. Gerade bei vielen kleinen Zugriffen auf dieGrafikkarteistdieLatenzzeitausschlaggebendfürdie Gesamtperformance.

Die Taktfrequenz bestimmt die höchstmögliche Bandbreite und die Transferrate von Daten in der Gra-fikkarte.DieGrößedesGrafikspeichersbestimmtauchFarbtiefeundAuflösungderKarte.DerGrafikspeicherdientdemGrafikprozessorzurDatenablage.

DerGrafikprozessor,dasGehirnderGrafikkarte,über-nimmt Rechenprozesse des Hauptprozessors. Sämtli-chegrafischeBerechnungen,diezurDarstellungnot-wendig sind, werden hier erledigt.

Mitte der 1990er Jahre wurde der Grafikprozessordurch 3D-Beschleuniger erweitert. Nach Eickmann (2004) war es NVIDIA, die 1995 den ersten 3D-Gra-fikchip fürprivate EndkundenaufdenMarktbrach-te. Der GrafikchipNV1 fristete allerdings ein kurzes Dasein, da er die Polygonbeschleunigung nicht be-

Performance | 65

Der Voodoo-Chip von 3Dfx Interactive stellte 1995 neue Per-formancerekorde auf

1999 entwickelt NVI-DIA die berühmte GeForce-256-Serie

Sie galt als erste GPU

herrschte, welche durch die DirectX-API von Microsoft bereits zuvor eingeführt und zudem von den meisten 3D Programmierern angenommen wurde.

1996 entwickelte das Unternehmen 3Dfx Interactive einenAdd-On-Grafikchip,alsoeineZusatzkartezur2DGrafikkarte,namensVoodoo. Dieser stellte die Perfor-manceallerbisherigen3D-GrafikkartenindenSchat-ten (Wiltscheck, 1998).

Das Prinzip des Voodoo-Chip, nämlich geometri-sche Polygonberechnungen und Texturberechnun-gen voneinander getrennt zu rendern, wird noch heu-te angewandt.

1999 schafft NVIDIA mit ihrer GeForce-256-Serie einen weiterenMeilensteininderEntwicklungvonGrafikkar-ten. Die wichtigste Neuerung dieser Karte ist die soge-nannte Transform-and-Lighting-Einheit.

Die T&L war erstmals in der Lage, Geometrieberech-nungenausderCPUaufdenGrafikprozessorderGra-fikkarteauszulagern.Bisherwurdendieschongerech-neten Polygon- und Texturdaten lediglich gerendert und als Pixel dargestellt. Die Rechenarbeit des Gra-fikchipsübernahmzudemauchBeleuchtungsberech-nungen (Lighting).

Mit der GeForce-256-Serie wurde somit der Grund-stein zur Berechnung mittels Shadern gelegt. Durch dieGeometrieberechnungenimGrafikprozessorgaltdie GeForce-256 als erste Graphics Processing Unit (GPU).

66 | Performance

▲ Abbildung 6.3Der Markt wir von nur zwei Herstellern be-herrschtScreenshot

http://pcmasters.de

1 IGP ist die Abk. für Integrated Graphics

Prozessor, was eine Onboard-Lösung be-

deutet

Heute teilen sich lediglich zwei Hersteller fast den komplettenMarktfürdiskreteGrafikkarten(alsokeineOnboard-GrafikkartenimProzessor).

NVIDIA und AMD mit seinen Volumenmodellen der ATI-Serien beherrschen seit Jahren fast vollständig denGrafikkartenmarkt.Dabeiwar NVIDIA lange Zeit tendenziell erfolgreicher, bis AMD Ende 2009 erste Di-rectX 11-fähige Chips auf den Markt brachte (Trulson, 2010).

So war nach Aussagen von Mercury Research das kanadische Unternehmen AMD im Geschäftsjahr 2010 erstmals NVIDIA überlegen, 51% zu 49% Marktanteilen (ebenfalls ohne die Berücksichtigung von IGPs1). NVI-DIA brachte erst ein halbes Jahr später erste Modelle heraus, die kompatibel zu DirectX 11 waren.

Wieder einmal entscheidet eine Technologie über den wirtschaftlichen Erfolg von Hardware. Ein Grund mehr, sich die Entwicklung von DirectX einmal genau-er anzuschauen. n

6.2.1 DirectX

DirectX ist eine Sammlung von APIs, die von Microsoft Windows für multimediale Anwendungen entwickelt wurden. Der Einsatz dieser APIs ist vor allem auf 2D und 3D Darstellung beschränkt.

Ich erwähne DirectX als Unterkapitel des Kapitels 6.2 Grafikkarten, da DirectX eine API ist, die Programmie-rern direkten Zugriff auf die Hardware des Computers erlaubt.

Performance | 67

Um die DirectX Ver-sion unter Windows herauszufinden, gibt man unter „Start/Ausführen“ einfach „dxdiag“ ein und startet somit das DirectX-Diagnosepro-gramm. Hierfindetmanet-liche Informationen über Hardware und Treiber.

Die Entstehung der COM-basierten APIs begann 1995. Hier wurde DirectX 1.0 erstmals von Microsoft Windows veröffentlicht.

Mit der Version DirectX 2.0 wurde 1996 die 3D-API Di-rect3D eingeführt, welche DirectX zu 3D-Funktionalität verhalf. Da aktuell allerdings lediglich die Versionen ab DirectX 9.0c von Windows unterstützt werden, steige ich bei dieser Version ein.

DirectX 9.0c erschien erstmals Ende 2004 und deckt heute lediglich ältere Windows Betriebssystemversio-nen ab, da diese nicht kompatibel zu neueren Versi-onen sind. Es beschränkt sich heute somit auf die Be-triebssysteme Windows 98, Me und 2000. DirectX 9.29 erschien Mitte 2010 und deckt seither die Windows Versionen XP und Server 2003, welche vorher eben-falls von DirectX 9.0c abgedeckt wurden.

Ab Version 9 kam als Neuerung die sogenannte High Level Shading Language (HLSL) hinzu, welche dieProgrammierungvon3DEffektenund3DGrafikenerleichterte (Thorn, 2005). Die 9er Versionen waren die letzten Versionen, welche zu allen DirectX unterstüt-zendenGrafikkartenkompatibelwaren.

Ab Version 10 wurde die Beziehung und somit die Ab-hängigkeit zwischen der API und den Entwicklungen derGrafikkartenstärker.

DirectX 10 ist nur noch zu Windows Vista und Windows 7 kompatibel. Es erschien Anfang 2007 und brach-te nur eine wichtige Neuerung mit sich, die 3D-API

68 | Performance

DirectX hat erstmals größereAuswirkun-gen auf den Markt

derGrafikkarten

DirectX mit Multitasking Fähigkeit

Direct3D 10. Diese hatte es allerdings aus zwei Ge-sichtspunkten in sich:

Durch die Verwendung des Windows Display Driver Model (WDDM) und des Shader Model 4.0 sowie strengeren Regeln zum Erlangen der Kompatibilität mit DirectX 10,musstendieGrafikkartenhersteller ei-nengrößerenAufwandbetreiben,umdievolleFunk-tionalität der 3D-API gewährleisten zu können und die Mindestanforderung zu erfüllen.

Ohne diese Gewährleistung der Funktionalität durch die Implementierung von bestimmten Funktionen, die sogenannten cap-bits zum Abfragen von Funktions-kombinationen, wäre ein Bestehen auf dem hart um-kämpften Markt mit einer hohen Fluktuation unmög-lich. Die 3D-API führt somit seit ihrer Einführung zu einer VeränderungaufdemMarktderGrafikkarten.Siever-schärfte den Wettbewerb.

Einen Vorteil verschafft diese Neuerung allerdings den 3D Entwicklern, die sich nun nicht mehr um die cap-bits-Funktionen kümmern müssen.

Und auch der Performance machte DirectX 10 Bei-ne. Das im letzten Absatz erwähnte WDDM ist für die grafischen Effekte abWindows Vista zuständig und ermöglichtdemGrafikprozessorerstmalsMultitasking.Wie Woods (2007) berichtet, handelt es sich allerdings nurumeinkooperativesMultitasking.Dasheißt,dassder Wechsel zugeteilter Ressourcen nicht vom Prozes-sor, sondern von der Anwendung selbst kommt. Trotz dieses Mankos konnten mit DirectX 10 also erstmals

Performance | 69

Geometrieberech-nungen auf der GPU

Vertex-Shader sind für Bewegungen und Deformation zustän-dig

Pixel-Shader sind das letzte Glied in der Grafikpipeline

mehrere grafikintensive Anwendungen zeitgleichausgeführt werden, was in der Anwendung zu einem deutlichen Performanceschub führte.

Der Einsatz des Shader Model 4.0 in derGrafikkartebrachte erstmals einen Geometry-Shader mit sich. Dies ermöglichte Geometrieberechnungen auf Di-rectX 10 fähigen Grafikkarten. Bisher mussten dieseauf der CPU durchgeführt werden. Einen Pixel-Shader und einen Vertex-Shader hatten bereits die Versionen 8 und 9. Generell sind die Shader-Versionen unterein-ander nicht kompatibel.

Der Vertex-Shader verändert die Geometrieberech-nungen, genauer gesagt die Eckpunkte (vertices) vonObjekten,undrechnetdenEinflussvonLichtquel-len mit ein. Typische Beispiele um die Aufgabe des Vertex-Shaders zu beschreiben, sind Bewegungen von Wasseroberflächen oder die Deformation vonObjekten.

Der Pixel-Shader ist das letzte Glied im Ablauf der Gra-fikpipeline. Er erhält die Ausgabedaten desVertex-Shaders, ist also eng mit diesem verknüpft (Wigard, 2010). Der Pixel-Shader verändert alle Elemente, die gerendert werden. Sämtliche Oberflächen werdender 3D Situation angepasst - diese Veränderung tritt zum Beispiel bei Schattierungen, Spiegelungen oder Transparenz auf.

Laut Winkler (2005) basiert das Funktionsprinzip von Pixel-Shadern auf der Veränderung von Bildpunkten, also der pixelweisen Farbveränderung des Bildes.

70 | Performance

Ende 2009 erscheint DirectX 11

Da ein Bild einer 3D Szene aus mehreren Objekten bzw. Fragmenten aufgebaut wird, ist die korrekte Bezeichnung des Pixel-Shaders eigentlich Fragment-Shader, weil dieser das Gesamtbild fragmentweise aufbaut.

Im Oktober 2009 erschien schließlich das aktuelle DirectX 11. Auch das Erscheinen dieser Version führ-te zueinemWandelderVerkaufszahlenvonGrafik-karten. Nach Schnurer (2009) war NVIDIA bei den Verkaufszahlen bis Mitte 2009 meist Marktführer vor AMD (siehe auch Kapitel 6.2 Grafikkarten). Da die NVIDIA-Chips lediglich kompatibel zu DirectX 11 wa-ren (durch volle DirectX 10-Kompatibilität von DirectX 11), allerdings die neu hinzugekommenen Funktionen nicht unterstützten, lag der Trend Ende 2009 deutlich in Richtung AMD.

Bei einer Suchabfrage auf Geizhals.de erkannte Schnurer, dass die Kunden eindeutig zum Kauf von AMD Grafikkarten tendierten, einen NVIDIA-Chip suchte er vergebens auf den vorderen Verkaufsrän-gen. n

Dieses Kapitel über die Entwicklung der Performance in der 3D-Computergrafik und -animation hättemitLeichtigkeit einen deutlich größeren Umfang errei-chen können, oder wäre gar einer Abschlussarbeit würdig. Da ich mit meiner Bachelorthesis allerdings eindeutlichgrößeresFeldabdecke,habeichdiemirwichtig erscheinenden Faktoren erklärt, welche die Performancevon3DInhaltenimInternetbeeinflussen.

Performance | 71

Wenn Computer stark genug sind und die Technolo-gienindemMaßeaufeinanderabgestimmtwerden,sodass dreidimensionaler Rich Media Content mit ei-nerflüssigenPerformanceimInternetdargestelltwer-den kann, dann ist endlich genügend Freiraum für vermehrten und kreativen Einsatz von 3D Präsentati-onen im Internet.

Auf diesem Ansatz baut auch das nächste Kapitel auf. Unter dem Thema Vision zeige ich, vor allem an-hand zweier Beispiele, einige Ideen und Lösungen auf,wie3DPräsentationenimInternetzeitgemäßum-gesetzt werden und was sich in Zukunft noch entwi-ckeln kann. n

72 | Vision

Einer Vision sollte keine Technologie

im Wege stehen

Augmented Reality erweitert das Internet

um eine Ebene

7 Vision

Wenn die Polygonanzahl und die Textur, also die bei-den qualitätsbeeinflussenden Faktoren, die Perfor-mance nicht mehr verschlechtern, sind der Kreativität kaum mehr Grenzen gesetzt. Wenn 3D Inhalte schnell und einfach für jedermann im Web zugänglich sind, dann lohnen sich ausgefallene Ideen, die 3D Inhalte sinnvoll in eine Produktpräsentation eingliedern.

Das Beispiel des Nissan Juke Studios aus Kapitel 4 Inter-aktivität geht meiner Meinung zufolge in die richtige Richtung. Es bindet den Nutzer stark an ein Produkt und lässt ihn an der Produktpräsentation teilhaben. Die Verwendung des 3D Modells ermöglicht diese In-teraktion erst.

Natürlich kann das Ganze auch eine Stufe weiter ge-hen:

Ein äußerst zukunftsträchtiges Anwendungsbeispielvon dreidimensionalen Produkten im Internet ist die In-tegration in eine erweiterte Realität, der sogenannten Augmented Reality. Gerade hier ist das Potential für eine kreative Entwicklung und Integration dreidimen-sionaler Elemente fast unbegrenzt.

Die Vanija GmbH, eine Züricher Werbeagentur, wel-che sich auf die Realisierung interaktiver Erlebniswel-ten im Internet konzentriert, hat hier bereits einige Pro-jekte realisiert. Zwei interessante Projekte, welche ich als besonders innovativ und visionär ansehe, werde

Vision | 73

Zukünftige Versio-nen von Flash sollten die Realisierung von Augmented Reality erleichtern

ich kurz beschreiben. Auch wenn beide nicht barrie-refreizugänglichsind,seheichhiereingroßesPoten-tial für die Zukunft. Das erste Projekt ist nur als Smart-phone-Applikation realisiert worden, was demnach das Herunterladen der kompletten App erfordert. Das zweite Projekt wurde zwar fürs Internet, also für eine Browserumgebung konzipiert, benötigt aber ein spe-zielles Plugin, welches weit von jener Popularität des Flash Players entfernt ist und demnach im Regelfall ebenfalls erst heruntergeladen werden muss.

Mit der Weiterentwicklung und Verbesserung des Flash Players könnten die folgenden Beispiele auch durch Flash realisiert werden und somit eine gestei-gerte Popularität erreichen.

Für die Zukunft sehe ich diese Art der Umsetzung von 3DalseinedergroßenGewinner,dasie3Danspre-chend verpacken und mit einer tollen Idee verbin-den. Denn ein Projekt ist erst dann erfolgreich, wenn es sämtliche Aspekte der Medienproduktion erfüllt.

Eine ausgeklügelte Logik, die durch moderne Tech-nologie umgesetzt wird, ein wirkungsvolles Marketing, das durch clevere Ideen und Konzeption erreicht wird und letzten Endes eine ansprechende Optik.

74 | Vision

Abbildung 7.1 ►Die Atelier Pfister App auf iPhone & iPadScreenshot

http://www.vanija.ch/ 2010/08/atelier-pfister-app-mehr-als-nur-design/

7.2.1 Atelier Pfister App

Die Atelier Pfister App ist eine Gratisapplikation, die speziell für das iPhone und das iPad von Apple entwi-ckelt wurde. Eine Webversion für den Browser gibt es leider nicht.

Zum Hintergrund: Das Atelier Pfister ist eine Schweizer Möbel-Design-schmiede, die sich im oberen Preissegment positio-niert hat. Dennoch zielt das Möbelunternehmen auf eine moderne und junge Zielgruppe ab. Die Applika-tion ist eine Art Umzugs- oder Einrichtungshilfe. Und die Umsetzung der Idee ist so simple wie genial:

Mit der App kann man die Möbel des Atelier Pfister in einem Raum seiner Wahl dreidimensional arrangieren und betrachten. Das Sortiment besteht aus mehr als 70 Artikeln, passend für Wohnzimmer, Schlafzimmer, Arbeitszimmer und Küche. Alle Gegenstände wurden als 3D-Modelle umgesetzt.

Vision | 75

▲ Abbildung 7.2Anwendungsbeispiel der Atelier Pfister AppScreenshots nach Showcase-Video „Mobile AR mit Foto und 3D Objekten“

http://www.vanija.ch/web-mobile/mobile-augmented-reality/

Die Anwendung funktioniert im einzelnen folgender-maßen:

MitderKameradesiPhoneschießtmaneinFotovomeinzurichtenden Raum.

Als nächsten Schritt kann man sich aus dem virtuel-len Katalog Einrichtungsgegenstände aussuchen und imselbstfotografiertenRaumplatzieren.Damitderei-genen Kreativität keine Grenzen gesetzt sind, lassen sich die Modelle beliebig skalieren und drehen.

Mit ein bisschen Geschick und räumlichem Sehver-mögen lässt sich auf diese Weise ein leeres Zimmer in einigen Minuten mit den dreidimensionalen Möbeln vom Atelier Pfister einrichten.

Die Erweiterung mit Informationen zu den Designern der Möbelstücke, ein möglicher E-Mail Versand des selbst erstellten virtuellen Fotos, die Anbindung an Fa-cebook und natürlich ein Atelier Pfister-Finder vollen-den die edel anmutende Applikation gekonnt.

Da die aktuelle Version des iPad (Stand: Jan 2011)noch keine Kamera besitzt, ist der Transfer des Fotos vom iPhonenötig, fallsmaneinenselbst fotografier-ten Raum auf dem iPad gestalten möchte.

Die Umsetzung dieser kreativen Idee blieb nicht unbe-lohnt. Im Februar 2011 gewinnt Vanija mit ihrer Pfister App den ADC Silber Würfel, eine Auszeichnung des Art Directors Club Schweiz. Dieser Preis stellt damit die bisher beste Ehrung für ein App überhaupt dar. n

76 | Vision

▲ Abbildung 7.3Installation des Plug-ins zur Benutzung des Virtual Mirror von Ray-Banhttp://www.ray-ban.com/germany/sci-ence/virtual-mirror

7.2.2 Ray-Ban: Virtual Mirror

Das zweite Projekt ist der Virtual Mirror, den Vanija für Ray-Ban umgesetzt hat. Hierbei handelt es sich um eine Webanwendung, die mit Hilfe der Webcam drei-dimensionale Modelle von Sonnenbrillen virtuell auf das Gesicht des Nutzers projiziert.

Um den Virtual Mirror benutzen zu können, muss erst ein Plug-In heruntergeladen und installiert werden. Der gesamte Vorgang dauert etwa eine Minute.

Nach einem kurzen Kompatibilitätstest folgt der Download, welcher bei vorhandenem Breitbandan-schluss wenige Sekunden dauert.

Die Installation startet darauf automatisch, dauert aber mindestens 30 Sekunden.

Am Ende folgt noch eine sogenannte Hardwareprü-

Vision | 77

Die Bedienung des Virtual Mirror ist selbst-erklärend

Ein Webcam ist in je-dem Fall erforderlich

fung, wahrscheinlich die Prüfung zur 3D-Kompatibilität derGrafikkarte.

Das positive an der Prozedur ist die Tatsache, dass man nur einmal durch einen Mausklick das Herunterladen bestätigen muss. Dem Benutzer werden „Klickorgien“ erspart. Allerdings muss man sich eben etwas gedul-den, bevor man die kleine Webanwendung erleben kann.

Ist der Virtual Mirror einmal installiert, stellt einem die Bedienung der 3D Augmented Reality-Anwendung vor keine Rätsel. Alles funktioniert selbsterklärend; die Benutzerfreundlichkeit ist einwandfrei.

Sobald man sich selbst mittels Webcam mit dem virtu-ellen Spiegel verbunden hat, wird das erste 3D Modell einer Sonnenbrille auf dem eigenen Gesicht ange-zeigt.

In Echtzeit wird die Brille dem Gesicht angepasst, was bedeutet, dass die Brille mit dem Gesicht skaliert und der Ansichtswinkel angepasst wird. Nähert man sich der Webcam mit dem Gesicht, wodurch die-ses im Virtual Mirrorgrößerwird,soerscheintdieBrilleauchineinergrößerenAnsicht.

Diese automatische Skalierung funktioniert zwar nicht stufenlos, ist aber dennoch gekonnt umgesetzt. Wenn man den Kopf dreht oder neigt, wird dies ebenfalls erfasst und das 3D Model der Brille wird über 3 Achsen rotiert. So kann man sich die Brille auch in einer leich-ten Seitenansicht ansehen.

78 | Vision

Abbildung 7.4 ►Der Virtual Mirror von Ray-Banhttp://www.ray-ban.com/germany/sci-ence/virtual-mirror

Ein interaktives Erlebnis

Der Virtual Mirror ermöglicht dem Benutzer, die Bril-lenmodelle von Ray-Ban interaktiv zu erleben, anstatt sie nur auf Fotos zu betrachten. Man kann das Pro-dukt am eigenen Körper ansehen, was eine Bindung zwischen Produkt und potentiellem Kunden aufbaut. Diese Bindung lässt mit Sicherheit den ein oder ande-ren potentiellen Kunden zum Käufer werden, Gesetz dem Fall, dass das virtuelle Erlebnis gefällt.

AußerderZeitunddesAufwandsfürdenDownload,die Installation und die Prüfung des Plugins, ist der Virtual MirrormeinerMeinungnacheineäußerstver-kaufsfördernde und markenbindende Webanwen-dung, die eine Augmented Reality mit einer 3D Pro-duktpräsentation gekonnt verbindet. Mit Sicherheit wird man in Zukunft des Öfteren auf Anwendungen solcherArtimInternetstoßen.n

Vision | 79

Gesteigerte Interakti-vität für die Zukunft

Wenn dank Hardwarebeschleunigung die Perfor-mance von 3D-Inhalten nicht mehr den Flaschenhals darstellt, sind auch mit Flash, Applikationen mit auf-wendig gestalteten 3D Elementen in Verbindung mit einer Augmented Reality möglich.

Diese bedeutet einen weiteren Grad an Interaktion zwischen Anwendung und Benutzer, was meiner Mei-nungnachdefinitiveinHauptmerkmalderVisionei-ner 3D Produktpräsentation im Internet darstellt. n

80 | Projektablauf

Die Gliederung die-ses Kapitels dient

lediglich dem logi-schen Verständnis ei-

nes Projektablaufs

8 Projektablauf

Dieses Kapitel ist sehr praktisch ausgelegt und erläu-tert mögliche Vorgehensweisen zur Erstellung einer 3D Produktpräsentation mit der Zielplattform Flash.

Die Gliederung dieses Kapitels orientiert sich an der chronologischen Erstellung der einzelnen Arbeitsschrit-te, soweit diese erforderlich ist. So steht beispielsweise am Anfang die Konzeptionsphase und am Ende die Einbindung in HTML zur Anzeige im Browser. Die Zwi-schenschritte erfordern allerdings keineswegs die von mir gewählte Gliederung. Ganz im Gegenteil:

Ein positiver Aspekt bei der Erstellung einer 3D Präsen-tation in Flash ist die weitestgehende Unabhängig-keit der einzelnen Arbeitsschritte. Im Arbeitsalltag, bei dem an Projekten eigentlich immer im Team gearbei-tet wird, ist somit eine parallele Erstellung durchaus denkbar.

So könnte das 3D Modelling zeitgleich mit der Er-stellung von Interaktivität durch ActionScript-Pro-grammierungstattfinden,dadiesemiteinfachen3DDummies (z.B. ein einfacher Würfel) arbeiten kann. Natürlich erfordert solch eine Arbeitsweise ein gut durchdachtes, komplexes Projektmanagement, wel-ches im Agenturleben oftmals durch Versionsmanga-gement und andere Projektmangagement-Software erleichtert wird.

Da der Flash Player 11 (mit 3D Hardwareunterstützung) zum Zeitpunkt dieser Arbeit (Dezember 2010 bis März

Projektablauf | 81

Verwendete Techno-logie

EinweißesBlattPa-pier als Grundlage jeglicher Projekte

2011) noch nicht veröffentlicht wurde, basiert und orientiert sich die Erstellung des Prototyps hinsichtlich der Erstellung eines 3D-Objekts am aktuellen Stand der Technik, welche leider nur eine begrenzte Anzahl anPolygonenflüssigdarstellenkann(sieheKapitel6. 1 Molehill). Diese besteht aus der aktuellen Adobe CS5 Plattform mit dem Flash Player 10.2 als Browser-schnittstelle für die Darstellung von Flash-Inhalten. Die verwendete Programmiersprache ist demnach Ac-tionScript 3.0, was den aktuellen Entwicklungsstand bezüglich der Flash-Programmierung darstellt. Das 3D Framework Alternativa3D 7, welches die Erstellung von 3D Inhalten für Adobe Flash ermöglicht, habe ich zur Erstellung des Prototypen ebenfalls verwendet.

8.1 Konzeption

Wie bei jedem Projekt ist die Konzeptionsphase ein äußerstwichtigerTeil,derkeinesfallsunterschätztwer-den sollte.

Die Arbeit der Konzeptionsphase sollte meiner Mei-nungnachstetsaufeinemweißenBlattPapierstatt-finden.DennbeiderkreativenPhasederKonzeptiongilt es ganz besonders, sich nicht durch Software und technische Hürden beschränken zu lassen.

Bei einem am Computer erstellten Konzept ver-liert man die eigentliche inhaltliche und visuelle Idee leichtausdenAugenund fügt sichgewissermaßenden Schienen der Technologie.

82 | Projektablauf

Eine Konzeption sollte alle wichtigen Fakto-

ren eines Projekts ent-halten

Es gilt also, sich voll und ganz auf das gewünschte Er-gebnis zu konzentrieren (Beaird 2008, p. 10).

Bei einer Konzeption mit 3D Inhalten sollte man sich allerdings keineswegs nur auf die Gestaltung des 3D Objekts beschränken. Wie schon in Kapitel 3.3 Kom-position erläutert, ist die Gesamtkomposition, also das Layoutumden3DInhalt,maßgeblichentscheidendfür den Erfolg einer dreidimensionalen Produktpräsen-tation im Internet. Und dafür gilt es die Zielgruppe und das Ziel des Projekts genau festzulegen.

Einige wichtige Punkte gilt es in der Konzeptionsphase auf jeden Fall zu beachten:

Farbgebung,GrößeundMengean3DObjektensoll-ten grob geklärt werden.

Das Layout des Gesamtprodukts sollte in die Gestal-tungebensomiteinfließenwiedieArtderNavigation,also alles was das User Interface betrifft.

Textuelle Informationen zu den 3D Modellen sollte man ebenfalls berücksichtigen. Man hat die Wahl, sie direkt in die SWF mit einzubinden, oder je nach Layout den Text in die HTML-Bereiche zu setzten.

Hat man das Ziel klar formuliert, gilt es den technischen Aufwand abzuschätzen. Dabei sollten unbedingt die Möglichkeiten der zu verwendenden Technologien, der dazu benötigten Software, der Kommunikation zwischen einzelnder Programme und somit das Ziel-format abgesteckt werden.

Projektablauf | 83

Eine Mindmap sorgt für Ordnung in der Konzeption

Bei der Konzeption von Projekten gilt der Leitsatz: Je größer das Projekt, desto sorgfältiger sollte die Kon-zeptionsphase durchgeführt werden.

Eine von mir erstellte Mindmap zur Erstellung einer 3D Produktpräsentation im Internet erklärt die Zusammen-hänge zwischen einzelnen Aspekten in der Produktion anschaulich. Auf der Basis dieser Mindmap habe ich sämtliche weiter Schritte aufgebaut. n

84 | Projektablauf

Projektablauf | 85

Die

se

Min

dm

ap

vera

nsch

aulic

ht

eine

lo

gisc

he

StrukturdesWorkflow

seiner3DPräsentationinFl

ash.

Die

rote

n Pf

eile

sind

unb

edin

gt e

rford

erlic

he S

chrit

-te

, die

in ih

rer A

bfol

ge w

ie d

arge

stel

lt ab

lauf

en. D

ie

grau

en B

erei

che

glie

der

n sic

h so

zusa

gen

an d

en

Prod

uktio

nspr

ozes

s an.

▲ A

bbild

ung

8.1

Min

dm

ap zu

m P

rod

uktio

ns-

abla

uf

eine

r 3D

Pr

oduk

t-pr

äsen

tatio

nEi

gene

Abb

ildun

g

(die

se G

rafik

hab

e ic

h in

ähn

-lic

her F

orm

im R

ahm

en d

es

Kollo

quiu

ms v

erw

end

et)

86 | Projektablauf

OpenSource Soft-ware als Einstiegsdro-ge in die 3D Compu-

tergrafik

Das Potential von 3D Software kann im

Internet noch nicht ausgeschöpft

werden

8.2 3D Modelling

Die Erstellung von 3D Modellen füllt ganze Bücher und isteinäußerstzeitaufwändigerProzess.Ichhabemichim Vorfeld zu meiner Bachelorthesis eingehend mit Ci-nema 4D 11 beschäftigt, welches an der Hochschule Offenburg durch ein Tutorial zum Kennenlernen ange-boten wird.

SokonnteichstellvertretendfürandereProfi-3D-Soft-ware, wie zum Beispiel 3ds Max oder Maya, einen Ein-blick in die schier grenzenlose Gestaltungsfreiheit die-ser Programme erlangen.

Günstige Programme wie Swift3D sind eher auf den Einsatz im Internet abgestimmt, bieten in der Qualität aber deutlich weniger.

OpenSource 3D Programme, wie Google SketchUp oder Blender können zwar vom Funktionsumfang und der Präzision nicht mit den kostspieligen, jahrelang verbesserten 3D Programmen mithalten, sind aber dennoch eine gute Wahl um in die Welt der 3D Com-putergrafikeinzusteigen.

Die Möglichkeiten zur Erzeugung von High Quality 3D Inhalten sind mit einem Programm wie Cinema 4D unglaublich. Sie überschreiten momentan die Darstel-lungsmöglichkeiten durch Flash im Internet deutlich. Aus diesem Grund habe ich mich dazu entschlossen, das 3D Modelling lediglich im Produktionsablauf zu er-wähnen. n

Projektablauf | 87

http://collada.org/

1 COLLADA steht für collaborative design activity

2 COLLADA-Doku-mente haben die Dateiendung .dae

8.3 Export/Import

Für den Export und Import aus verschiedensten 3D Programmen wurde Ende 2004 COLLADA 1 ins Leben gerufen. Es ist ein auf XML basierendes, offenes For-mat für den Datenaustausch zwischen 3D Program-men.

Es werden unter anderem Informationen über 3D Vek-toren, Texturen und weitere Einstellungen zu 3D Mo-dellen in einem Dokument festgehalten. Laut COL-LADA werden sogar Schatten und andere Effekte, Animationen und Bewegungen übermittelt.

Damit die Kommunikation zwischen zwei Programmen mit Hilfe eines erstellten DAE 2-Dokuments reibungslos funktioniert, haben sich an diesem Speicherformat et-licheUnternehmender3DComputergrafikbeteiligt.So wurde unter Beteiligung vieler Hersteller, aber auch Communities, ein Datenbankschema entwickelt, das über eine bestimmte Nomenklatur verfügt und eine feste Struktur besitzt.

So können selbst OpenSource-Frameworks wie Alternativa3D über COLLADA 3D Modelle importie-ren, auch wenn bezüglich Skalierung und Platzierung manchmal einige Probleme auftauchen. Diese Para-meter sollte man nachträglich anpassen. Aus diesem Grund empfiehlt sich auch die Verwendung eineseigenen Containers, durch den man das importierte Modell besser kontrollieren kann. n

88 | Projektablauf

Die Arbeit mit einem 3D Framework funk-

tioniert nur mit exter-nen AS3-Dokumente

8.4 Animation in Flash

DerwichtigsteTeildesWorkflowszurfertigen3DPrä-sentation ist die Einbindung und die Animation des 3D Objekts in Flash. Nur so kann man eine gewünschte Interaktivität kreieren und einer statischen, linear ab-laufenden 3D Animation Leben einhauchen.

Als ersten Schritt gilt es, ein neues AS3 Projekt anzule-gen, da sämtliche AS3-Klassen aus Flash für die 3D En-ginezurVerfügungstehensollten,damitmangrößt-mögliche Gestaltungsfreiheit hat.

Nun sollte man die aus dem Internet geladene 3D En-gine dem Flash Projekt hinzufügen. Um auf die Biblio-thek zugreifen zu können, muss diese in den ActionS-cript-Einstellungen hinzugefügt und somit importiert werden.

Der nächste Schritt ist die Erstellung einer neuen AS3- Klasse, mit deren Klassenname man das externe AS3-Script dem eigentlichen Flash Dokument zuweist.

GearbeitetwirdschließlichmiteinemleerenFlashDo-kument und dem externen AS3 Skript, das sämtliche Klassen von Flash benutzt und diese durch die Ver-wendung der speziellen 3D Klassen des verwendeten 3D-Frameworks erweitert.

Die MovieClip-Klasse isthierbeivonsehrgroßerBe-deutung, da durch diese Klasse alle Elemente mit der von Flash bekannten addChild()-Methode, der Bühne zugewiesen werden.

Projektablauf | 89

http://flashdevelop.org

FlashDevelop ist ein komfortables Werk-zeug zur Erstellung von Flash Inhalten

Da meiner Meinung nach die Arbeit, also die Projekt-erstellung sowie die Programmierung und die an-schließende Veröffentlichung einer 3D Präsentation,im kostenlosen Quellcode-Editor FlashDevelop einfa-cher und komfortabler abläuft als in Flash CS5, werde ich mich im nächsten Unterkapitel auf FlashDevelop beziehen. Natürlich unterscheidet sich die Vorgehens-weise der beiden Programme nicht grundlegend, sie weicht lediglich in einigen Details voneinander ab.

FlashDevelop

Die kostenfreie Software FlashDevelop ist ein Quell-code Editor, der die Programmiersprachen Action-Script 2, ActionScript 3 und HaXe unterstützt.Außerdem bietet FlashDevelop eine ausgereifte

Code Completion, also die automatische Vervollstän-digung von Befehlen und Anweisungen, für die oben genannten Sprachen sowie für die Auszeichnungs-sprache HTML und die Metasprachen XML und MXML.Dasfürmanche3DEnginesäußerstsinnvolleVersi-

onsmanagement ist durch den integrierten SVN-Cli-ents ebenfalls möglich. So arbeitet man stets mit der aktuellsten Version eines Frameworks.

Mit Hilfe des integrierten Projektmanagers kann man ganze Projekte übersichtlich erstellen, indem man ein-zelne AS3-Dateien anlegen kann und eine übersicht-liche Ordnerstruktur für die verwendeten Assets und Bibliotheken erstellen kann.

Die genaue Vorgehensweise für die Erstellung einer interaktiven 3D Flash-Applikation erkläre ich in den

90 | Projektablauf

▲ Abbildung 8.2Struktur eines Projekts in FlashDevelop, bei-de Bibliotheken refe-renziertScreenshot

folgenden Absätzen anhand der Verwendung der 3D Engine Alternativa3D 7.

Als ersten Schritt erstellt man ein neues AS3 Projekt, welchem man einen Namen und Speicherort zuweist. FlashDevelop stellt nun automatisch eine vorgefer-tigte Struktur von Ordnern und Dateien bereit. Die-se Struktur besteht aus den Ordnern „bin“(Binaries), „lib“(Library) und „src“(Source),inderstandardmäßigdie AS3-Datei „Main.as“ angelegt wird, welche als zentrales AS3-Dokument fungiert.

Als zweiten Schritt gilt es, dem Projekt die Klassen von Flash und die Klassen der 3D Engine zuzuweisen, um deren Funktionsumfang durch die Verwendung von Objekten, Methoden und Funktionen zu erhalten. Die Klassen kann man im Register „Properties“ hinzufügen. Für die Flash-Klassen fügt man im Untermenü „Class-paths“ den Klassenpfad der Flash-Bibliothek hinzu. Diesersiehtstandardmäßigwiefolgtaus:

C:\Programme\Adobe\Adobe Flash CS5\Common\Confi-guration\ActionScript 3.0\projects\Flash\src

Das Zuweisen der Bibliothek von Alternativa3D erfolgt im Untermenü „Compiler Options“ unter dem Menü-punkt „SWC Libraries“. Hier fügt man den Pfad zur Al-ternativa-Bibliotheksdatei hinzu.

NachdieserKonfigurationdesAS3-Projekts kann man direkt loslegen und die Vorteile von Flash und Alterna-tiva3D in einem Dokument nutzen.

Projektablauf | 91

◄ Abbildung 8.3Funktionsweise der 3D Engine Alternativa3D Eigene Abbildung

Um eine SWF mit dreidimensionalem Inhalt zu erstel-len, sollte man jedoch zuerst die Funktionsweise von Alternativa3D verstehen. Denn ein gewisses Grund-gerüst, welches einige Komponenten zwingend erfor-dert, muss jede AS3-Datei enthalten.

Zum einen bedarf es eines Containers, dem man 3D Objekte hinzufügen kann. Dieser Object3DContainer schaff die Voraussetzung für das Erstellen eines dreidi-mensionalen Objekts. Zum anderen muss man eben jenes 3D Objekt erzeugen und dem Container zuwei-sen.

Damit die beiden Komponenten dargestellt werden können ist letztlich noch die Camera3D nötig, mit der man mittels der View-Methode eine Ansicht erzeugen kann.

Da ein Bild bekanntlich mehr als tausend Worte sagt, folgt hier eine Darstellung der Grundbestandteile ei-ner 3D-Szene von Alternativa3D.

Y

X

ZCamera3D

Object3DContainer

View 3D Objekt

92 | Projektablauf

Diese drei Faktoren, der 3D-Container, das 3D-Objekt unddieKamera,mussmanschließlichinderrichtigenFunktionerstellenundkonfigurieren,damitüberhauptetwas Sichtbares dargestellt wird.

Eine sinnvolle Struktur des Programmiercodes, mit kurzen Beschreibungen der einzelnen Teile, habe ich im folgenden Abschnitt erstellt.

//////QUELLCODE////////////////////////////////

package {

//Klassen importieren

import alternativa.**.**;

...

import flash.**.**;

...

//Flash-Eigenschaften vererben

public class Main extends Sprite

{

//Variablen definieren

**

//Main-Funktion starten

public function Main()

{

initEngine();

initScene();

}

protected function initEngine():void

{

//Camera3D erstellen

camera = new Camera3D();

camera.view = new View(...);

Projektablauf | 93

addChild(camera.view);

container.addChild(camera);

...

//3D-Container erstellen

container = new Object3DContainer();

//Rendering der Bühne zuweisen

stage.addEventListener(Event.ENTER_ FRAME, onEnterFrame);

}

protected function initScene():void

{

//3D-Objekt erstellen...

box = new Box(...);

//...und dem 3D-Container hinzufügen

container.addChild(box);

...

}

protected function onEnterFrame(e:Event):void

{

//Scene rendern

camera.render();

}

}

}

/////ENDE//////////////////////////////////////

Hat man dieses Grundgerüst einmal erstellt, kann man die einzelnen Funktionen erweitern.

Die Funktion initEngine() dient hierbei, wie der Name schon verrät, als Initialisierungsfunktion der 3D-Engine. Hier sind sämtliche, unbedingt benötigten Programm-

94 | Projektablauf

Die Kamera ist für den Bildausschnitt

zuständig

teile enthalten. Die Kamera samt ihres Bildausschnitts wird erstellt, ausgerichtet und ein Container, der 3D Objekte in sich aufnehmen kann und auf den man die Kamera richtet, wird ebenfalls initiiert.

In der initScene() Funktion werden dann die eigent-lichen Objekte erstellt. Hierbei bieten sich zwei mög-liche Erstellungsarten. Man kann verschiedene geo-metrische 3D Grundobjekte, die von Alternativa3D in seiner eigenen Bibliothek angeboten werden, ver-wenden, oder mithilfe des COLLADA-Protokolls ein in einer externen 3D Software erstelltes Objekt importie-ren.

Die onEnterFrame() Funktion startet später das Ren-dering der 3D Szene.

8.4.1 Navigation

Passend zu meiner 3D Szene habe ich mir eine sta-tischeKamerapositionerstellt.Dasheißt,dieKamerabefindetsichstetsaneinerStelleundschwenktbeiei-nem entsprechenden Input des Benutzers nach oben, nach unten, nach rechts oder nach links. Die Kombi-nationen aus einer vertikalen und einer horizontalen Bewegungsrichtung sind ebenfalls möglich.

Wichtig bei der ästhetischen Ausführung des Schwenks warmireinefließendeBewegungmiteinerBeschleu-nigung im Bewegungsablauf. Für diese Art von Bewe-gungen kommt bei Flash eigentlich nur die Tween-Klasse in Frage.

Projektablauf | 95

Tweens ermöglichen fließendeBewegun-gen

▼ Abbildung 8.4Kamera-Algorithmus auf dem Papier ent-wickeltEigene Abbildung

Da ein Tween jeweils einen Start- und einen Endpunkt enthalten muss, taucht bei einer freien Beweglichkeit der Kamera folgendes Problem auf. Die Werte, wel-che in den Tween geschrieben werden, müssen jedes mal nicht nur ersetzt, sondern auch zuvor gespeichert werden. Die Arbeit mit Variablen, deren Werte ge-speichert und je nach Bedarf überschrieben werden, ist also unumgänglich.

Bei der Entwicklung eines solchen Algorithmus ist es wie bei der Konzeption sinnvoll, erstmal ein Blatt Pa-pier zur Entwicklung der Logik zu verwenden.

96 | Projektablauf

Abbildung 8.5 ►Konzept für die Navi-gation im 3D RaumEigene Abbildung

Die Umsetzung dieser Kamerabewegung erfordert die Übergabe der aktuellen Mauszeigerposition (e.stageX und e.stageY aus der Klasse MouseEvent). Damit man Bedingungen für die einzelnen Tweens erstellen kann, istesaußerdemnötig,diegesamteaktiveFläche inmehrere Bereiche einzuteilen.

Durch das Aufstellen von verschachtelten Bedin-gungen habe ich die verschiedenen Bewegungs- tweens kombiniert.

Ich habe mich für eine Einteilung in acht Bereiche ent-schieden. So gibt es die rein vertikalen und die rein ho-rizontalen Navigationsmöglichkeiten und jeweils die Kombination beider, also diagonale Bewegungen.

Bei der Art der Eingabe habe ich mich gegen eine Steuerung mit der Tastatur entschieden, da der durchschnittliche Nutzer meiner Meinung nach beim SurfenimInternetzugroßenTeilenlediglichdieMaus

Projektablauf | 97

Die Tastatur wird im Internet recht wenig verwendet

Vermeiden von stän-digem Rendern der gesamten Szene

Feedback ist für den User sehr wichtig

Navigation sollte übersichtlich gestal-tet sein

zur Interaktion verwendet. Meist wird die Tastatur nur zur Eingabe in der Adresszeile des Browsers nutzt. Das Verwenden von Lesezeichen reduziert die Funktion der Tastatur im Internet zusätzlich. Außerdem erscheint die dreidimensionale Steue-

rung mit der Tastatur für ungeübte Nutzer recht kom-pliziert, was wahrscheinlich eine geringere Akzeptanz des gezeigten Inhalts zur Folge hätte. Die Zielgruppe würde durch die Bedienung des Inhalts eingeschränkt.

Die Navigation durch Mausklicks bietet sich somit an, da eine Mausverfolgung (Blickwinkel der Kamera ver-folgt die Mausbewegung ohne zu klicken) einerseits deutlich rechenintensiver (ständig neuer Bildaufbau) ist und zudem recht schnell nervig erscheint (nach ei-genen Tests). Wenn man per Klick die Kamera um ein paar Grad schwenkt ist die Bedienung des 3D Inhalts deutlich ruhiger. Das Auge nimmt sich automatisch mehr Zeit zur Betrachtung der gezeigten Produkte.

Damit der Nutzer die Navigation versteht, habe ich Navigationspfeile erstellt, die je nach Position des Mauszeigers die Richtung der nächsten möglichen Bewegung anzeigen. Für ausreichendes Feedback ist somit gesorgt.

Aus Gründen der Übersichtlichkeit habe ich die ur-sprünglichen acht auf vier Pfeile reduziert und die zusätzlichen Bereiche den Pfeilen für „Rechts“ und „Links“ hinzugefügt. Sichtbar werden die jeweiligen Navigationselemente erst durch Maus-Hover des zu-geordneten Bereichs. n

98 | Projektablauf

Der Import von 3D Modellen ist noch

suboptimal

3D Dummies aus Performancegründen

8.4.2 Animation der 3D Objekte

An diesem Punkt bringt einem die Ideenentwicklung auf dem Papier, also die konzeptionelle Erarbeitung, lediglich bei groben Fragen weiter. Denn die Wirkung nach der Implementierung ist meist eine andere als die Vorgestellte. Deshalb habe ich für diesen Arbeits-schritt eher die „Try and Error“ Methode verwendet.

Beim Import von 3D Modellen durch COLLADA habe ich viel Zeit aufgewendet und im Verhältnis dazu au-ßer einer Menge an Erkenntnissen, recht wenig er-reicht.

Das liegt vor allem daran, dass ich mit verschiede-nen im Internet kostenfrei erhältlichen 3D Modellen gearbeitet habe. Die Skalierung und die Polygonan-zahl variierte somit sehr stark, was einerseites Proble-me in der Gestaltung und andererseits in der Perfor-mance mit sich brachte.

Aus Performancegründen habe ich letztlich teilweise auf die Verwendung von 3D Dummies zurückgegrif-fen, da sonst die gesamte Polygonanzahl deutlich zu hoch geworden wäre, was ohne Hardwarebeschleu-nigung zum Stocken der Animation führt.

Teilweise war die Darstellung auf über 50.000 Poly-gone angestiegen und die Anzeigegeschwindigkeit auf unter 5 Frames pro Sekunde gesunken.

So blieb mir nichts anderes übrig, als mich auf die Interaktivität zu beschränken und mit einfachen 3D Platzhaltern zu arbeiten.

Projektablauf | 99

◄ Abbildung 8.6Konzept für das De-sign und die Interakti-vität eines 3D Objeks Eigene Abbildung

Den im dreidimensionalen Raum platzierten Produk-ten habe ich durch die Mausverfolgung allerdings et-was Leben eingehaucht.

Fährt der Benutzer über eines der Gegenstände, dreht sich dieser in der Bewegungsrichtung mit. Damit erzeugt es Aufmerksamkeit beim Benutzer, eine Art „Hallo, hier bin ich!“.KlicktmaneinObjektan,vergrößertessichmitei-

nem Bounce-Effekt und die Kamera richtet sich au-tomatisch darauf. Mit dem Scrollrad der Maus kann man ebenfalls „ranzoomen“.

100 | Erkenntnisse

Die verschiedenen 3D Frameworks unter-scheiden sich nicht sehr stark

Konzentration auf Browserspiele

8.5 Erkenntnisse

Um einen Einblick in die Möglichkeiten der interakti-ven 3D Präsentation im Internet zu bekommen, habe ich einen Großteil meiner Zeit in die praktische Er-forschung verschiedener Produktionstechniken ge-steckt. So habe ich Anfangs viel mit verschiedenen 3D Frameworks gearbeitet und experimentiert.

Das Résumé dieser Erkundungen ist die Erkenntnis, das keiner der OpenSource-Frameworks aus der Mas-se hervorsticht, sondern Stärken und Schwächen le-diglich verteilt sind. Meiner Meinung nach ist Alterna-tiva3D auf einem guten Weg, weshalb ich mich auch für die Arbeit mit diesem Framework entschieden habe. Allen gemein ist die Konzentration auf brow-serintegrierte Videospiele, was mich auf ein noch mangelndes Interesse für 3D Produktpräsentationen schließenlässt(sieheS.13,Abb. 2.5). Genau hier gilt es in Zukunft mehr zu entwickeln, damit nicht nur eine sehr junge Generation von Videospielern in den Ge-nuss von 3D Inhalten im Internet kommt.

Ebenso wünschenswert wäre eine bessere Vermark-tung der Frameworks mit übersichtlicheren und de-taillierteren Dokumentationen und einer verbesserten Onlinehilfe. Im Laufe meiner Arbeit am Prototyp be-merkte ich manchmal, dass die gewünschte Funkti-onalität im betreffenden Framework überhaupt nicht möglich ist.

Erkenntnisse | 101

EinegenaueZieldefi-nition ist sehr wichtig

Ein gründliches Abstecken des Ziels ist, wie bei den meisten Medienproduktionen, also sehr wichtig, um im weiteren Verlauf des Projekts nicht vor Ungeklärt-heiten zu stehen. So bemerkte ich recht schnell, das eine von mir geplante 3D Produktpräsentation in ge-plantem Umfang und Qualität nicht umsetzbar ist. Deshalb habe ich mich für eine prototypische Reali-sierung entschieden. n

102 | Perspektive

9 Perspektive

Die Entwicklung und Anwendung von Adobe Flash sollte sich meines Erachtens in Zukunft noch mehr auf technisch anspruchsvolle Rich Media Anwendungen konzentrieren, um konkurrenzfähig zu bleiben.

Da HTML 5 bei der Entwicklung von WebGL nicht schläft, werden simple Animationen schon in naher Zukunft mit HTML 5 realisierbar. Seit zwei Monaten hat WebGL bereits einen festen Platz bei Google Chrome, seit Mitte März 2011 auch im Firefox 4. Dennoch wer-den die Entwicklungen von WebGL stets langsamer von Statten gehen als bei Flash, da WebGL aus einem riesigen Konsortium entsteht und Adobe Flash ein im Verhältnis überschaubares Privatunternehmen ist. Denn die seit 2004 begonnene Arbeit an HTML 5 wird biszuroffiziellenW3C-Standardisierung mindestens bis 2022 andauern (Borck, 2010). Diesen Vorsprung sollten die Entwickler von Flash für sich nutzen.

Aber die Konkurrenz von unten ist auch da. Aufstre-bende Unternehmen wie Unity Technologies bieten schon jetzt High Quality 3D Content an und können sich durch Spezialisierung ein festes Standbein schaf-fen.

Bei einem Medium wie dem Internet, dass sich so schnell entwickelt und verändert, ist es fast unmöglich, Zukunftsprognosen und Perspektiven aufzustellen.

Ich sehe die Technologie Flash allerdings in den nächsten Jahren nicht auf dem Abstellgleis, da der Flash Player ein unglaublich starkes und etabliertes Plugin darstellt, was der Reichweite und somit der An-

Perspektive | 103

erkennung in der Wirtschaft sehr zugute kommt.AußerdemgibtesriesigeCommunities,diemitden

von mir verwendeten 3D Frameworks teils einzigartige Entwicklungen hervorbringen. So wäre beispielswei-se ein hauseigenes, zuverlässiges 3D Framework von Adobe Flash vielleicht eine interessante Neuerung für Online-Agenturen, bei denen nur reine Flash-Nutzung angesagt ist.

Letztlich wird natürlich nicht nur das marktstrategische Geschick der einzelnen Partien über den Erfolg ent-scheiden. Wie bei meinen Recherchen des Öfteren klar wurde, stellt die Entwicklung neuer Technologien stets einen wichtige Erfolgsfaktor dar.

Es bleibt also spannend, sowohl in der Zukunft von 3D im Internet, als auch bei den beteiligten Plattfor-men.

Nur eines steht fest: Die Verbraucher im Internet wer-denvondenEntwicklungenprofitieren.n

104 | Quellen

Quellenverzeichnis

Asanger, A., 2009. Cinema 4D 11: Das Praxisbuch zum Lernen und Nachschlagen. Bonn: Galileo Press

Bauer, O., 2009. Informationsgesellschaft in Deutsch-land. Statistisches Bundesamt: Wiesbaden

Beaird, J., 2008. Gelungenes Webdesign: Eine prakti-sche Einführung in die Prinzipien der Webseitengestal-tung. Heidelberg: dpunkt.verlag

Borck, J., 2010. InfoWorld review: Microsoft Silverlight 4 vs. Adobe Flash 10.1. http://www.infoworld.com/d/developer-world/infoworld-review-microsoft-silver-light-4-vs-adobe-flash-101-260(Stand:21.03.11)

Eickmann, U., 2004. Untersuchung der Echtzeitfähig-keit von Budget-Grafikkarten. Norderstedt: GRIN Ver-lag

Epishin, R., 2010. Alternativa3D 8: Engine for Flash with hardware 3D. http://flashflex.com/alternativa3d-8- engine-for-flash-with-hardware-3d/(Stand:29.01.11)

Ernst, N., 2009. Grafikeffekte von DirectX-11 und -10 im Videovergleich. http://www.golem.de/0912/71861.html (Stand: 29.02.11)

Florio, C., 2009. ActionScript 3.0 for Adobe Flash CS4 Professional: Classroom in a book. Berkeley, Califor-nia: Adobe Press (Peachpit)

Quellen | 105

Foster, W. & Boehm, C., 2009. Spielkonsolen und Heim-computer: 1972 - 2009. 3.erw.Aufl.,Utting:Gameplan

Gerstäcker, K., 2006. Und sie drehen sich doch: 3D-Objekte in Flash. Visual-X, Vol. 14, pp.52-59

Hahne, A., 2009. Webstandards: Was in einem Web ohne Flash möglich ist. http://www.netzwelt.de/news/ 80040-webstandards-web-ohne-flash-moeglich.html(Stand: 06.01.11)

Hickson, I., 2010. HTML5: A vocabulary and associa-ted APIs for HTML and XHTML. Editor‘s Draft 03.02.11, http://dev.w3.org/html5/spec/ (Stand: 08.02.11)

Ihlenfeld, J., 2011. 3D im Browser: WebGL 1.0 ist fer-tig. http://www.golem.de/1103/81890.html (Stand: 15.03.2011)

Ihlenfeld, J., 2010. 3D-Grafik: Chrome aktiviert Web-GL. http://www.golem.de/1012/80188.html (Stand: 09.01.11)

Ihlenfeld, J., 2011. Browser: Internet Explorer 9 ist fer-tig. http://www.golem.de/1103/82038.html (Stand: 21.03.2011)

Ihlenfeld, J., 2011. Browser: Vorschau auf Opera mit WebGL und Hardwarebeschleunigung. http://www.golem.de/1103/81813.html (Stand: 17.01.11)

106 | Quellen

Ihlenfeld, J., 2010. Webapplikationen: Microsoft kün-digt Silverlight 5 an. http://www.golem.de/1012/ 79858.html (Stand: 07.02.11)

Kerlow, I.V., 2004. The Art of 3D Computer Animation and Effects.3.Aufl.,NewJersey:JohnWiley&Sons

Küthe, E. & Küthe, F., 2002. Marketing mit Farben: Gelb wie der Frosch.1.Aufl.,Wiesbaden:Gabler.

Maher, D., 2009. Die Geschichte von PlayStation. http://www.historyofplaystation.com (Std: 17.12.10)

Milewski, B., 2006: Reliable Software. MIP Mapping. http://www.relisoft.com/science/graphics/mip.html (Stand: 03.03.2010)

Miller, B., 2011. Neue Versionen: Firefox, Thunderbird, Google Chrome und Safari 5.1 mit WebGL. http://www.macnews.de/software/neue-versionen-firefox-thunderbird-google-chrome-und-safari-5-1-mit-web-gl-132188 (Stand: 15.03.2011)

o.V. 2011: Art Directors Club Schweiz. Award Gewin-ner. http://www.adc.ch/ (Stand: 15.02.11)

o.V. 2011: Browser-Statistik.de. Browser-Marktanteile im Januar 2011. http://www.browser-statistik.de/marktanteile/2011/januar/ (Stand: 10.03.11)

Quellen | 107

o.V.2010:Flashflex.com.Alternativa company announces new licensing terms for its innovative technology Alternativa3D 7.http://flashflex.com/al-ternativa-company-announces-new-licensing-terms-for-its-innovative-technology-alternativa3d-7/ (Stand: 21.12.10)

o.V. 2011: Microsoft. DirectX Developer Center. http://msdn.microsoft.com/en-us/directx/ (Stand: 20.02.11)

o.V. 2011: NVIDIA Corporation. GeForce 256 - The World‘s First GPU. http://www.nvidia.de/page/ge-force256.html (Stand: 18.02.11)

o.V. 2009: Papervision3D. Archive for the ‘News’ Category. http://blog.papervision3d.org/category/news/ (Stand: 11.12.10)

o.V. 2010: Vanija GmbH. Atelier Pfister App: Mehr als nur Design. http://www.vanija.ch/2010/08/atelier-pfister-app-mehr-als-nur-design/(Stand:09.02.11)

o.V. 2010: Vanija GmbH. Tissot macht sich Augmen-ted Reality zu Nutze. http://www.vanija.ch/2010/08/tissot-macht-sich-augmented-reality-zunutze/ (Stand: 09.02.11)

Pakalski, I. 2010. Internet Explorer 9 gibt es nicht für Windows XP. http://www.golem.de/1003/73871.html (Stand: 18.01.2011)

108 | Quellen

Plag, F. & Riempp, R., 2006. Interaktives Video im Internet mit Flash: Konzeption und Produktion von Vi-deos für das WWW. Berlin: Springer-Verlag.

Schauff, V., 2001. Die Geschichte der Grafikkarte. http://alt.3dcenter.org/artikel/graka-geschichte/ (Stand: 15.02.11)

Schnurer, G., 2009. Umbruch im Grafikkarten-Markt. http://www.heise.de/ct/meldung/Umbruch-im-Grafikkarten-Markt-850486.html,Hannover:HeiseZeitschriften

Schweickhardt, H., 2010. Unity for iPhone: Spielerische 3-D-Welten. S.43, Ausgabe 02.10, Weave (Magazin)

Strohm, P., 2011. WebGL: 3D im Browser. http://www.peter-strohm.de/webgl/(Stand: 10.03.11)

Thoma, J., 2011. Firefox: Bislang keine Hard-warebeschleunigung für Linux. http://www.golem.de/1101/80782.html (Stand: 10.03.2011)

Thoma, J., 2010. Freier Silverlight-Klon: GPU-Beschleu-nigung für Moonlight. http://www.golem.de/1011/ 79655.html (Stand: 08.02.11)

Thorn, A., 2005. DirectX 9 Graphics: The Definitive Gui-de to Direct3D. Plano: Wordware Publishing

Quellen | 109

Trulson, P., 2010. AMD überholt Nvidia seit langem wieder im Grafikmarkt. http://www.pcmasters.de/hardware/review/amd-ueberholt-nvidia-seit-langem-wieder-im-grafikmarkt.html(Stand:24.03.11)

Wiedmann, K., Buxel, H., Frenzel, T., Walsh G., 2004. Konsumentenverhalten im Internet: Konzepte - Erfah-rung - Methoden.1.Aufl.,Wiesbaden:Gabler.

Wigard, S., 2010. Spieleprogrammierung mit DirectX 11 und C++.1.Aufl.,Heidelberg:HüthigJehleRehm

Wiltscheck, R., 1998. Grafikkarten für 3D-Spiele: Voo-doo-Chip soll den Markt verzaubern. http://www.channelpartner.de/index.cfm?pid=148&pk=607550 (Stand: 18.02.11)

Winkler, P., 2005. Computer Lexikon 2005: Alle Fach-begriffe zu jedem Thema. München: Markt+Technik Verlag

Woods, P., 2007. Mehr 3D für alle - Windows Vista: Neue Grafikfähigkeiten durch WDDM. http://www.netzwelt.de/news/75162_2-windows-vista-neue-gra-fikfaehigkeiten-wddm.html#a3(Stand:20.02.11)n

110 | Prototyp

Prototyp

Die prototypische 3D Produktpräsentation befindetsich auf dem beiliegenden Datenträger und ist zusätz-lich auf meiner Webseite unter ...

http://www.leiness.de/de/projekte.html

... im Menüpunkt „3D“ verfügbar. n

Erklärung | 111

Eidesstattliche Erklärung

Hiermit versichere ich eidesstattlich die vorliegende Bachelor Thesis selbstständig und lediglich unter Be-nutzung der angegebenen Quellen und Hilfsmittel verfasst zu haben.

Ich erkläre weiterhin, dass die vorliegende Arbeit nicht im Rahmen eines anderen Prüfungsverfahrens einge-reicht wurde.

Linus Fütterer am 31. März 2011 in Achern. n

3D PRODUKT- PRÄSENTATION IM WEB - HS-Offenburg€¦ · PRÄSENTATION IM WEB Analyse anhand einer...

Documents

Transcript of 3D PRODUKT- PRÄSENTATION IM WEB - HS-Offenburg€¦ · PRÄSENTATION IM WEB Analyse anhand einer...