Code-Beispiele zum Download: http://stage.redplant.de/interactivehh/vortrag_interactivehh_webgl.7z Hallo Zusammen, endlich ist es wieder Zeit für ein neues interactiveHH-Meeting. Diesmal zum Thema “WebGL”. Echtzeit 3D im Web ist eigentlich nichts Neues. Seit vielen Jahren ist es bereits möglich, interaktiven, hardwarebeschleunigten 3D-Content innerhalb von Browserumgebungen zu nutzen. Dies erforderte in der Regel jedoch immer separate Plugins, die seitens des Users installiert werden mussten. Oftmals eine unglaubliche Hürde, die hohe Absprungquoten verursacht. WebGL hingegen erfordert keine zusätzliche Installation und steigert enorm das Level an grafischer Qualität und Interaktionsmöglichkeiten, die nativ im Browser genutzt werden können. Faszinierende 3D-Grafiken, wie man sie aus aktuellen AAA-Spielen kennt, können direkt in Webseiten integriert werden. Die Verbreitung von WebGL ist zurzeit zwar noch sehr eingeschränkt, insbesondere im Hinblick auf mobile Endgeräte, jedoch wird sich dies in Zukunft mit hoher Wahrscheinlichkeit ändern. Denn mittlerweile haben alle großen Browserhersteller (inkl. Microsoft) WebGL-Support in ihr Entwicklungsprogramm aufgenommen. WebGL ist Bestandteil der HTML5 Spezifikation. Die Integration in eine HTML-Seite erfolgt über das canvas-Element, doch an dieser Stelle enden die Gemeinsamkeiten mit der klassischen Web- Programmierung. In dieser Session möchten wir einen Einstieg in die Entwicklung von WebGL-Anwendungen unter Verwendung der three.js Library geben. —————- Nach einem kurzen Theorieteil zum Thema Echtzeit 3D werden wir uns verstärkt mit praktischen Beispielen beschäftigen. —————- Aufbauend auf grundlegenden Themen wie zum Beispiel Kameramanipulation, Beleuchtung und Import von 3D Modellen nähern wir uns im späteren Verlauf fortgeschrittenen Themen. —————- Custom-Shader, Screen-Space Effekte oder Deferred-Rendering sind hier mögliche Themenbereiche. Die redPlant GmbH ist ein Düsseldorfer Startup im Herzen der Rheinmetropole mit dem Spezialgebiet 3D-Echtzeit. Gegründet wurde aus dem Studium heraus im Dezember 2011. Seitdem konzentriert sich das Team aus Kreation und Entwicklung auf alles was bunt, interaktiv und dreidimensional ist. http://www.redplant.de

1. WebGL
Einführung in die bunte 3D-Welt
Martin Panknin

2. Agenda









Vorstellung
Motivation
3D Graphics Primer
Ein erstes WebGL Programm
Three.js
Import von Modellen
Interaktion
Shader
Deferred Rendering
Martin Panknin

3. Vorstellung
Martin Panknin

4. redPlant GmbH
 Die redPlant ist ein Düsseldorfer Startup im
Herzen der Rheinmetropole
 Gegründet im November 2011
 Wir entwickeln alles was bunt, interaktiv und
dreidimensional ist
Martin Panknin

5. redPlant GmbH - Referenzen
 Vaillant City – Interaktive Messeinstallation
 Kooperation mit rmh new media GmbH
 redLights SSAL – Unity3D Plugin
 Echtzeit Flächenlichter für Unity Entwickler
 Deferred Rendering – Three.js
 Beitrag zur OpenSource Engine Three.js
Martin Panknin

6. Vaillant City
Martin Panknin

7. Vaillant City
Martin Panknin

8. Vaillant City
Martin Panknin

9. Vaillant City
Martin Panknin

10. redLights SSAL
Martin Panknin

11. redLights SSAL
Martin Panknin

12. Three.js Deferred
Martin Panknin

13. Motivation
Martin Panknin

14. Motivation
 Was ist WebGL?
Martin Panknin

15. Motivation




Was ist WebGL?
http://www.khronos.org/webgl/
http://de.wikipedia.org/wiki/WebGL
https://vsr.informatik.tuchemnitz.de/mediawiki/images/2/2d/Presentatio
nWebGL.pdf
 http://www.interfaceag.com/open/andreass/was-ist-webgl-undwarum-der-ganze-hype/
Martin Panknin

16. Motivation
 Was ist WebGL?
 „WebGL is a drawing library.“
[Tony Parisi]
Martin Panknin

17. Motivation
 Was ist WebGL?
 „WebGL is a drawing library. On steroids...“
[Tony Parisi]
Martin Panknin

18. Motivation
 Ermöglicht Echtzeit 3D Grafiken innerhalb von
regulären Webseiten
 Hardware beschleunigt
 Alternative Technologien
(Quest3D, Unity3D, Silverlight3D...)
 Warum WebGL?
Martin Panknin

19. Motivation
 Erfordert keine zusätzliche Plugin-Installation!
 Die API ist einfach und benutzerfreundlich
 var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
 var gl = canvas.getContext('experimental-webgl');
 Kein übertriebener Boilerplate Code, keine
Makefiles etc...
Martin Panknin

20. Motivation
 Lässt sich problemlos mit bestehendem WebContent integrieren
 Platformunabhängigkeit
 Keine Lizenzkosten
Martin Panknin

21. Motivation
Klassische Software
 Find download link
 Save download as
 Open download folder
 Click installer
 Click yes, yes, yes, enter path, more yes
 Wait
 Close installer
 Find installed application
 Launch Application
 Wait for auto-update
 Enjoy application
codeflow.org
Martin Panknin

22. Motivation
WebGL Applikation
 Find launch link
 Click
 Enjoy application
Martin Panknin

23. Martin Panknin

24. 3D Basics
Martin Panknin

25. 3D Basics
 Echtzeit 3D beinhaltet viele technische Details
 Verfügbare Libraries verstecken viele dieser Details vor
dem Benutzer
 Grundlegendes Wissen der Komponenten ist aber
hilfreich






Koordinatensysteme
Vertices, Polygone und Meshes
Materialien, Texturen und Lichter
Transformationen und Matrizen
Kameras, Perspektiven und Projektionen
Shader
Martin Panknin

26. Koordinatensysteme
 Webseiten benutzen 2D Koordinaten (WindowKoordinaten)
 <div> Elemente werden über x und y Koordinaten
positioniert
 Ein 3D Koordinatensystem fügt eine neue Dimension z
hinzu, die für die Tiefe steht
 Wie weit ist ein Punkt vom Betrachter entfernt
 Der Schritt von 2D zu 3D ist straight forward
Martin Panknin

27. Koordinatensysteme
 WebGL ist Y-Up!
Martin Panknin

28. Vertices, Polygone, Meshes




Häufigste Darstellungsform in WebGL sind Meshes
Meshes bestehen aus einem oder mehreren Polygonen
Polygone bestehen aus Vertices
Ein Vertex ist ein x, y, z Triplet und definiert eine
Koordinate im 3D-Raum
 Meshes werden in der Regel auch als Models
bezeichnet
Martin Panknin

29. Vertices, Polygone, Meshes
Martin Panknin

30. Materialien, Texturen
 Polygonale Meshes definieren nur die reine
geometrische Form eines Objektes
 Optische Oberflächeneigenschaften werden
über Materialien beinflusst
 Zum Beispiel: Farbe, Gloss oder Texturen
 Texturen können darüber hinaus für
fortgeschrittene Effekte verwendet werden
 Zum Beispiel: Bump-Mapping
Martin Panknin

31. Materialien und Texturen
 Wie reagiert eine Oberfläche auf ankommendes
Licht?
 Reflektivität, Absorption, Emission etc.
 All diese Eigenschaften werden unter dem
Begriff Material zusammengefasst
Martin Panknin

32. Materialien und Texturen
Martin Panknin

33. Transformationen und Matrizen
 Ein Model besteht aus vielen tausenden
Vertices
 Was muss man tun, um ein Mesh zu bewegen?
 Ich muss alle Vertices modifizieren und die
Position im Raum ändern
 Iteration über alle Vertices?
 Was, wenn ich das ursprüngliche Model
wiederherstellen möchte?
Martin Panknin

34. Transformationen und Matrizen
 Alle gängigen 3D-Systeme unterstützen
Transformationen
 Eine Transformation ist eine Operation, mit dem
ein komplettes Modell räumlich manipuliert
kann, ohne über die einzelnen Vertices iterieren
zu müssen
 Operationen sind Translation, Rotation und
Skalierung
Martin Panknin

35. Transformationen und Matrizen
 Transformationen werden in Form von Matrizen
angegeben
 Wir werden nicht weiter ins Detail gehen, denn
Three.js abstrahiert die ganze Komplexität
Martin Panknin

36. Kameras, Perspektive und
Projektion
 Jede 3D Szene benötigt einen definierten
Blickpunkt
 Wird in Form einer virtuellen Kamera
angegeben
 Kamera beschreibt Position und Orientierung
des Betrachters relativ zur Szene
 Virtuelle Kameras ermöglichen FoV, Aspect
Ratio, Perspektivische Verzerrung etc.
Martin Panknin

37. Kameras, Perspektive und
Projektion
 Die Eigenschaften der Kamera bestimmen, wie
die 3D-Szene am Ende in der 2D-Ebene
dargestellt wird.
 Sie bestimmt auch, was gerendert wird, und
was nicht
 Elementarer Bestandteil sind zwei Matrizen
 View Matrix - Beinhaltet die Pose der Kamera im 3DRaum
 Projection Matrix - Beschreibt, wie genau die 3DKoordinaten auf die 2D-Ebene projiziert werden.
Martin Panknin

38. Kameras, Perspektive und
Projektion
Martin Panknin

39. Shader
 In vielen anderen 3D-Systemen sind Shader
optional
 In WebGL sind sie zwingend erforderlich
 Der Entwickler muss Shader schreiben!
 Viele Libraries beinhalten jedoch fertige Shader
für die meisten Anwendungsfälle
Martin Panknin

40. Shader
 Shader sind kleine Code-Fragmente, mit denen
Teile der Rendering-Pipeline programmiert
werden können
 In WebGL gibt es Vertex- und Fragmentshader
 Shader sind nicht dazu gedacht, zusätzliche
Arbeit zu verursachen
 Sie geben dem Entwickler volle Kontrolle über
jeden einzelnen Vertex und Pixel
Martin Panknin

41. Shader
 GPU kennt Vertices, Texturen und Matrizen
 Es gibt GPU-seitig keine Konzepte wie zum
Beispiel „Licht“
 Der Entwickler muss sich darum kümmern, wie
genau die Interaktion zwischen
Transformationen, Materialien und Lichtern
aussieht
Martin Panknin

42. Raw WebGL – Ein Beispiel





Erzeuge ein <canvas> Element
Initialisiere den Viewport
Definiere die Vertex-Buffer für die Geometrie
Bestimme die View- und Projektionsmatrizen
Schreibe Shader, die das Zeichenverhalten
implementieren
 Initialisiere die Shader mit den gewählten
Parametern
 Zeichne die Szene
Martin Panknin

43. Raw WebGL – Ein Beispiel
 Code
Martin Panknin

44. Three.js
 Es existieren verschiedene Libraries für WebGL
Entwicklung (GLGE, SceneJS, CubicVR)
 Wir verwenden Three.js, da es die meisten
Features unterstützt
 Three.js ist eine benutzerfreundliche High-Level
API, die auf WebGL basiert
Martin Panknin

45. Three.js
 Abstraktion der puren WebGL Routinen
 Benutzt intuitive Objekte, wie z.B. Materialien,
Meshes oder Kameras
 Three.js ist Objektorientiert
 Beinhaltet Module für Animation, Special Effects
und Interaktion
 Three.js rechnet für den Entwickler
 Built-In Unterstützung für verschiedenste
Dateiformate
Martin Panknin

46. Getting Started






Download der Three.js Library von github
https://github.com/mrdoob/three.js/
Installation eines lokalen Webservers (XAMPP)
http://www.apachefriends.org/de/index.html
Kopiere Three.js in das htdocs Verzeichnis
Enjoy the examples (100+)
Martin Panknin

47. Three.js –Beispiel 1
 Gleiches Ergebnis wie im ersten reinen WebGL
Beispiel
 Aber nur 30 Zeilen Code anstatt 160
 Entwickler arbeitet mit High-Level Klassen
 Technische Details sind verborgen
(Matrizen, Vertex-Buffer, Shader etc.)
Martin Panknin

48. Three.js – Beispiel 1
 Code
Martin Panknin

49. Three.js – Beispiel 2





Tatsächliche 3D Geometrie
Einfache Lambert-Beleuchtung (später mehr)
Material mit Textur
Renderloop (Nur für dynamische Szenen)
Animation und Interaktion
Martin Panknin

50. Three.js – Beispiel 2
 Code
Martin Panknin

51. Three.js – Content Import
 Bisher wurde nur vordefinierte Geometrie
verwendet (Vertex-Buffer und Three.js
Geometrie)
 Im produktiven Geschäft wird Content in der
Regel in speziellen Tools vorbereitet
 Z.B. Photoshop für Texturen, 3DS oder Blender
für 3D-Modelle, Unwrapping etc.
 Transfer über entsprechende Austauschformate
(FBX, OBJ etc.)
Martin Panknin

52. Three.js – Vorbereitung in
Blender
 Erstelle Geometrie
 Weise Materialien und Texturen zu
 Exportiere die Szene als OBJ Datei
Martin Panknin

53. Three.js – Konvertierung in
Binary JSON
 OBJ ist ASCII kodiert. Dateigröße ist abhängig
von der Komplexität des Modelles
 OBJ kann direkt geladen werden
 Konvertierung in binäres Format, um Dateigröße
und somit Ladezeiten zu minimieren
 Three.js beinhaltet die entsprechenden Tools
 Ergebnis sind zwei Datein. Meta-Informationen
sowie die eigentlichen Geometriebuffer
Martin Panknin

54. Three.js – Import in eine 3D
Szene
 Es existieren Loaderklassen für verschiedene
Dateiformate
 Wir verwenden den BinaryLoader
 Lade die Modeldatei in ein Geometrie-Objekt
 Erzeuge ein Mesh-Objekt aus der Geometrie
 Füge das neue Mesh der Szene hinzu
Martin Panknin

55. Three.js – Import in eine 3D
Szene
 Code
Martin Panknin

56. Three.js – Interaktion mit
Raypicking
 Interaktion fand bisher nur im DOM-Kontext statt
 Wie können wir Objekte direkt im 3D-Raum
selektieren?
 Das geschieht durch das sog. Ray-Picking
Martin Panknin

57. Three.js – Interaktion mit
Raypicking
 Ausgehend von den 2D Window-Koordinaten
wird ein virtueller Strahl erstellt
 Dieser Strahl zeigt ausgehend von der
Bildebene direkt in die 3D-Szene
 Schritt für Schritt wird untersucht, welche
Objekte geschnitten werden und in welcher
Reihenfolge
 Das Objekt mit der geringsten Distanz zur
Kamera wird „gepickt“
Martin Panknin

58. Three.js – Interaktion mit
Raypicking
Martin Panknin

59. Three.js – Interaktion mit
Raypicking
 Code
Martin Panknin

60. Three.js – Interaktion mit
Kameramanipulation
 Bisher wurden die sichtbaren Elemente der
Szene animiert
 Wichtig ist auch die Kontrolle der virtuellen
Kamera
 Three.js beinhaltet verschiedene Klassen für die
Manipulation der Kameras
 Im Beispiel verwenden wir die TrackballControls
Martin Panknin

61. Three.js – Interaktion mit
Kameramanipulation
 Code
Martin Panknin

62. Three.js – Couch Demo
 Bisher haben wir gesehen:
 Erstellen der Three.js Komponenten
 Vorbereitung und Import von Modellen und
Texturen
 Animation einzelner Elemente
 Interaktion durch Raypicking
 Kameramanipulation
 Kombiniert mit klassischen HTML-Elementen
 Bruchteil der WebGL Features
Martin Panknin

63. Three.js – Demo
 Demo Couch
 Demo Fashion Mannequin
Martin Panknin

64. Three.js – Custom Shader
 Bisher fehlen uns noch die Shader
 Als Beispiel gibt es einen eigenen Per Pixel
Shader, der das Lambert Beleuchtungsmodell
implementiert
Martin Panknin

65. Credits
 WebGL. Up and Running. Tony Parisi. O‘Reilly
 WebGL Beginners Guide. Diego
Cantor, Brandon Jones. Packt Publishing
 www.codeflow.org. Florian Bösch
 https://github.com/mrdoob/three.js/
Martin Panknin

66. Thanks for your attention!
Questions?
Martin Panknin