WebGL
Einführung in die bunte 3D-Welt

Martin Panknin
Agenda










Vorstellung
Motivation
3D Graphics Primer
Ein erstes WebGL Programm
Three.js
Import von Modellen...
Vorstellung

Martin Panknin
redPlant GmbH
 Die redPlant ist ein Düsseldorfer Startup im
Herzen der Rheinmetropole
 Gegründet im November 2011
 Wir ...
redPlant GmbH - Referenzen
 Vaillant City – Interaktive Messeinstallation
 Kooperation mit rmh new media GmbH

 redLigh...
Vaillant City

Martin Panknin
Vaillant City

Martin Panknin
Vaillant City

Martin Panknin
Vaillant City

Martin Panknin
redLights SSAL

Martin Panknin
redLights SSAL

Martin Panknin
Three.js Deferred

Martin Panknin
Motivation

Martin Panknin
Motivation
 Was ist WebGL?

Martin Panknin
Motivation





Was ist WebGL?
http://www.khronos.org/webgl/
http://de.wikipedia.org/wiki/WebGL
https://vsr.informatik...
Motivation
 Was ist WebGL?
 „WebGL is a drawing library.“
[Tony Parisi]

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

Martin Panknin
Motivation
 Ermöglicht Echtzeit 3D Grafiken innerhalb von
regulären Webseiten
 Hardware beschleunigt
 Alternative Techn...
Motivation
 Erfordert keine zusätzliche Plugin-Installation!
 Die API ist einfach und benutzerfreundlich
 var canvas = ...
Motivation
 Lässt sich problemlos mit bestehendem WebContent integrieren
 Platformunabhängigkeit
 Keine Lizenzkosten

M...
Motivation
Klassische Software
 Find download link
 Save download as
 Open download folder
 Click installer
 Click ye...
Motivation
WebGL Applikation
 Find launch link
 Click
 Enjoy application

Martin Panknin
Martin Panknin
3D Basics

Martin Panknin
3D Basics
 Echtzeit 3D beinhaltet viele technische Details
 Verfügbare Libraries verstecken viele dieser Details vor
dem...
Koordinatensysteme
 Webseiten benutzen 2D Koordinaten (WindowKoordinaten)
 <div> Elemente werden über x und y Koordinate...
Koordinatensysteme
 WebGL ist Y-Up!

Martin Panknin
Vertices, Polygone, Meshes





Häufigste Darstellungsform in WebGL sind Meshes
Meshes bestehen aus einem oder mehrere...
Vertices, Polygone, Meshes

Martin Panknin
Materialien, Texturen
 Polygonale Meshes definieren nur die reine
geometrische Form eines Objektes
 Optische Oberflächen...
Materialien und Texturen
 Wie reagiert eine Oberfläche auf ankommendes
Licht?
 Reflektivität, Absorption, Emission etc.
...
Materialien und Texturen

Martin Panknin
Transformationen und Matrizen
 Ein Model besteht aus vielen tausenden
Vertices
 Was muss man tun, um ein Mesh zu bewegen...
Transformationen und Matrizen
 Alle gängigen 3D-Systeme unterstützen
Transformationen
 Eine Transformation ist eine Oper...
Transformationen und Matrizen
 Transformationen werden in Form von Matrizen
angegeben

 Wir werden nicht weiter ins Deta...
Kameras, Perspektive und
Projektion
 Jede 3D Szene benötigt einen definierten
Blickpunkt
 Wird in Form einer virtuellen ...
Kameras, Perspektive und
Projektion
 Die Eigenschaften der Kamera bestimmen, wie
die 3D-Szene am Ende in der 2D-Ebene
dar...
Kameras, Perspektive und
Projektion

Martin Panknin
Shader
 In vielen anderen 3D-Systemen sind Shader
optional
 In WebGL sind sie zwingend erforderlich
 Der Entwickler mus...
Shader
 Shader sind kleine Code-Fragmente, mit denen
Teile der Rendering-Pipeline programmiert
werden können
 In WebGL g...
Shader
 GPU kennt Vertices, Texturen und Matrizen
 Es gibt GPU-seitig keine Konzepte wie zum
Beispiel „Licht“
 Der Entw...
Raw WebGL – Ein Beispiel






Erzeuge ein <canvas> Element
Initialisiere den Viewport
Definiere die Vertex-Buffer fü...
Raw WebGL – Ein Beispiel
 Code

Martin Panknin
Three.js
 Es existieren verschiedene Libraries für WebGL
Entwicklung (GLGE, SceneJS, CubicVR)
 Wir verwenden Three.js, d...
Three.js
 Abstraktion der puren WebGL Routinen
 Benutzt intuitive Objekte, wie z.B. Materialien,
Meshes oder Kameras
 T...
Getting Started







Download der Three.js Library von github
https://github.com/mrdoob/three.js/
Installation ein...
Three.js –Beispiel 1
 Gleiches Ergebnis wie im ersten reinen WebGL
Beispiel
 Aber nur 30 Zeilen Code anstatt 160
 Entwi...
Three.js – Beispiel 1
 Code

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

Tatsächliche 3D Geometrie
Einfache Lambert-Beleuchtung (später mehr)
Material mit Textur
...
Three.js – Beispiel 2
 Code

Martin Panknin
Three.js – Content Import
 Bisher wurde nur vordefinierte Geometrie
verwendet (Vertex-Buffer und Three.js
Geometrie)
 Im...
Three.js – Vorbereitung in
Blender
 Erstelle Geometrie
 Weise Materialien und Texturen zu
 Exportiere die Szene als OBJ...
Three.js – Konvertierung in
Binary JSON
 OBJ ist ASCII kodiert. Dateigröße ist abhängig
von der Komplexität des Modelles
...
Three.js – Import in eine 3D
Szene
 Es existieren Loaderklassen für verschiedene
Dateiformate
 Wir verwenden den BinaryL...
Three.js – Import in eine 3D
Szene
 Code

Martin Panknin
Three.js – Interaktion mit
Raypicking
 Interaktion fand bisher nur im DOM-Kontext statt
 Wie können wir Objekte direkt i...
Three.js – Interaktion mit
Raypicking
 Ausgehend von den 2D Window-Koordinaten
wird ein virtueller Strahl erstellt
 Dies...
Three.js – Interaktion mit
Raypicking

Martin Panknin
Three.js – Interaktion mit
Raypicking
 Code

Martin Panknin
Three.js – Interaktion mit
Kameramanipulation
 Bisher wurden die sichtbaren Elemente der
Szene animiert
 Wichtig ist auc...
Three.js – Interaktion mit
Kameramanipulation
 Code

Martin Panknin
Three.js – Couch Demo
 Bisher haben wir gesehen:
 Erstellen der Three.js Komponenten
 Vorbereitung und Import von Model...
Three.js – Demo
 Demo Couch
 Demo Fashion Mannequin

Martin Panknin
Three.js – Custom Shader
 Bisher fehlen uns noch die Shader
 Als Beispiel gibt es einen eigenen Per Pixel
Shader, der da...
Credits
 WebGL. Up and Running. Tony Parisi. O‘Reilly
 WebGL Beginners Guide. Diego
Cantor, Brandon Jones. Packt Publish...
Thanks for your attention!
Questions?

Martin Panknin
Nächste SlideShare
Wird geladen in …5
×

redPlant WebGL bei interactiveHH und t8y.com am 25.02.2014

1.552 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.552
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
12
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

redPlant WebGL bei interactiveHH und t8y.com am 25.02.2014

  1. 1. WebGL Einführung in die bunte 3D-Welt Martin Panknin
  2. 2. Agenda          Vorstellung Motivation 3D Graphics Primer Ein erstes WebGL Programm Three.js Import von Modellen Interaktion Shader Deferred Rendering Martin Panknin
  3. 3. Vorstellung Martin Panknin
  4. 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. 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. 6. Vaillant City Martin Panknin
  7. 7. Vaillant City Martin Panknin
  8. 8. Vaillant City Martin Panknin
  9. 9. Vaillant City Martin Panknin
  10. 10. redLights SSAL Martin Panknin
  11. 11. redLights SSAL Martin Panknin
  12. 12. Three.js Deferred Martin Panknin
  13. 13. Motivation Martin Panknin
  14. 14. Motivation  Was ist WebGL? Martin Panknin
  15. 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. 16. Motivation  Was ist WebGL?  „WebGL is a drawing library.“ [Tony Parisi] Martin Panknin
  17. 17. Motivation  Was ist WebGL?  „WebGL is a drawing library. On steroids...“ [Tony Parisi] Martin Panknin
  18. 18. Motivation  Ermöglicht Echtzeit 3D Grafiken innerhalb von regulären Webseiten  Hardware beschleunigt  Alternative Technologien (Quest3D, Unity3D, Silverlight3D...)  Warum WebGL? Martin Panknin
  19. 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. 20. Motivation  Lässt sich problemlos mit bestehendem WebContent integrieren  Platformunabhängigkeit  Keine Lizenzkosten Martin Panknin
  21. 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. 22. Motivation WebGL Applikation  Find launch link  Click  Enjoy application Martin Panknin
  23. 23. Martin Panknin
  24. 24. 3D Basics Martin Panknin
  25. 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. 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. 27. Koordinatensysteme  WebGL ist Y-Up! Martin Panknin
  28. 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. 29. Vertices, Polygone, Meshes Martin Panknin
  30. 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. 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. 32. Materialien und Texturen Martin Panknin
  33. 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. 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. 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. 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. 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. 38. Kameras, Perspektive und Projektion Martin Panknin
  39. 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. 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. 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. 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. 43. Raw WebGL – Ein Beispiel  Code Martin Panknin
  44. 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. 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. 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. 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. 48. Three.js – Beispiel 1  Code Martin Panknin
  49. 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. 50. Three.js – Beispiel 2  Code Martin Panknin
  51. 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. 52. Three.js – Vorbereitung in Blender  Erstelle Geometrie  Weise Materialien und Texturen zu  Exportiere die Szene als OBJ Datei Martin Panknin
  53. 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. 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. 55. Three.js – Import in eine 3D Szene  Code Martin Panknin
  56. 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. 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. 58. Three.js – Interaktion mit Raypicking Martin Panknin
  59. 59. Three.js – Interaktion mit Raypicking  Code Martin Panknin
  60. 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. 61. Three.js – Interaktion mit Kameramanipulation  Code Martin Panknin
  62. 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. 63. Three.js – Demo  Demo Couch  Demo Fashion Mannequin Martin Panknin
  64. 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. 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. 66. Thanks for your attention! Questions? Martin Panknin

×