WebGL - 3D im Browser

Oliver Hader
30.06.2015
Open Web User Group Oberfranken
WebGL - 3D im Browser
Open Web User Group Oberfranken
WebGL - 3D im Browser
Überblick
WebGL Basics
Frameworks
three.js
BabylonJS
iisys Gebäude i...
Open Web User Group Oberfranken
WebGL - 3D im Browser
WebGL Basics
2009 Khronos Group & Mozilla - 2010 Google
2011 erste V...
Open Web User Group Oberfranken
WebGL - 3D im Browser
WebGL: JavaScript
Erzeugen von „3D Objekten“
Verknüpfen mit Vertex &...
Open Web User Group Oberfranken
WebGL - 3D im Browser
WebGL: Shader
Vertex Shader: Positionierung auf 2D Ebene
Fragment Sh...
Open Web User Group Oberfranken
WebGL - 3D im Browser
Frameworks!
native WebGL Entwicklung = Quatsch!
High-Level API für g...
Open Web User Group Oberfranken
WebGL - 3D im Browser
three.js - „Große Freiheit“
bekanntes und gereiftes Framework
2010 v...
Open Web User Group Oberfranken
WebGL - 3D im Browser
BabylonJS - „WebGL Game Creation“
angeblich bessere Performance als ...
Open Web User Group Oberfranken
WebGL - 3D im Browser
BabylonJS - Primer
Basis Geometrie
Sphere, Plane, Cube, Line
Cylinde...
Open Web User Group Oberfranken
WebGL - 3D im Browser
BabylonJS - Primer
Cameras & Collision
Ellipsoid
sonstige Objekte
Ph...
Open Web User Group Oberfranken
WebGL - 3D im Browser
BabylonJS - Primer
Lights
HemisphericLight
DirectionalLight
SpotLigh...
Open Web User Group Oberfranken
WebGL - 3D im Browser
BabylonJS - Primer
Effekte & Post-Processing
Anaglphy für 3D Brillen...
Open Web User Group Oberfranken
WebGL - 3D im Browser
iisys Gebäude in 3D
Master Internet Web Science Studienarbeit
Gruppe...
Open Web User Group Oberfranken
WebGL - 3D im Browser
Blender 3D Model
Designer für komplexe Szene
übersichtlicher als Que...
Open Web User Group Oberfranken
WebGL - 3D im Browser
Blender 3D Model
Verhalten durch Namenskonvention
Door.Entrance_Firs...
Open Web User Group Oberfranken
WebGL - 3D im Browser
Software Architektur
require.js Dependency Injection











Vere...
Open Web User Group Oberfranken
WebGL - 3D im Browser
Software Architektur
Fokus auf lose Kopplung & Komponenten - Separat...
Open Web User Group Oberfranken
WebGL - 3D im Browser
Optimierung
Instanzen für 3D Objekte verwenden
für wiederkehrende Ob...
Open Web User Group Oberfranken
WebGL - 3D im Browser
Optimierung
Octrees zur Positionsbestimmung
Würfel mit acht Unterwür...
Open Web User Group Oberfranken
WebGL - 3D im Browser
Entwicklungsstand
BabylonJS Glitches
merkwürdiges Lichtverhalten
meh...
Open Web User Group Oberfranken
WebGL - 3D im Browser
Fazit
BabylonJS gut geeignet für schnelle Resultate
im 3D Funktionsu...
Open Web User Group Oberfranken
WebGL - 3D im Browser
Quellen & Links
22
Grundlagen
Browser Support: http://caniuse.com/#f...
Open Web User Group Oberfranken
WebGL - 3D im Browser
Vielen Dank
!
Nächste SlideShare
Wird geladen in …5
×

WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS

1.731 Aufrufe

Veröffentlicht am

Kurzer Überblick und Einführung in das Thema WebGL & 3D Darstellung im Browser im Rahmen eines Vortrags am Institut für Informationssysteme der Hochschule Hof - iisys in Kooperation mit der Open Web User Group Oberfranken und dem IT-Cluster Oberfranken. Vortrag vom 30.06.2015

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.731
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
372
Aktionen
Geteilt
0
Downloads
4
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS

  1. 1. WebGL - 3D im Browser
 Oliver Hader 30.06.2015 Open Web User Group Oberfranken WebGL - 3D im Browser
  2. 2. Open Web User Group Oberfranken WebGL - 3D im Browser Überblick WebGL Basics Frameworks three.js BabylonJS iisys Gebäude in 3D Erfahrungsbericht Architekturüberlegungen Optimierungen Entwicklungsstand 2 ohader
 @ohader
 Oliver_Hader follow me
  3. 3. Open Web User Group Oberfranken WebGL - 3D im Browser WebGL Basics 2009 Khronos Group & Mozilla - 2010 Google 2011 erste Version WebGL-Spezifikation basiert auf OpenGL ES 2.0 und JavaScript benötigt HTML5 Canvas Element - WebGL kein W3C Standard 3
  4. 4. Open Web User Group Oberfranken WebGL - 3D im Browser WebGL: JavaScript Erzeugen von „3D Objekten“ Verknüpfen mit Vertex & Fragement Shader 4 var gl = canvas.getContext("experimental-webgl");
 var vertexShader = createShaderFromScriptElement(gl, "2d-vertex-shader");
 var fragmentShader = createShaderFromScriptElement(gl, "2d-fragment-shader");
 var program = createProgram(gl, [vertexShader, fragmentShader]);
 gl.useProgram(program);
 
 var positionLocation = gl.getAttribLocation(program, "a_position");
 var buffer = gl.createBuffer();
 gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
 // -1.0, -1.0 = bottom left
 // 1.0, 1,0 = top right
 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
 -1.0, -1.0, 1.0, -1.0, -1.0, 1.0,
 -1.0, 1.0, 1.0, -1.0, 1.0, 1.0]), gl.STATIC_DRAW);
 gl.enableVertexAttribArray(positionLocation);
 gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
 
 gl.drawArrays(gl.TRIANGLES, 0, 6);
  5. 5. Open Web User Group Oberfranken WebGL - 3D im Browser WebGL: Shader Vertex Shader: Positionierung auf 2D Ebene Fragment Shader: Farbeigenschaften zuweisen 5 <script id="2d-vertex-shader" type="x-shader/x-vertex">
 attribute vec2 a_position;
 void main() {
 gl_Position = vec4(a_position, 0, 1);
 }
 </script>
 
 <script id="2d-fragment-shader" type="x-shader/x-fragment">
 void main() {
 gl_FragColor = vec4(0,1,0,1); // green
 }
 </script>
  6. 6. Open Web User Group Oberfranken WebGL - 3D im Browser Frameworks! native WebGL Entwicklung = Quatsch! High-Level API für gängige WebGL Features Abstraktion, Kapselung & Schichtentrennung Verwenden von vorgegebenen Komponenten Shader eher als letztes Mittel zur Optimierung Fokus auf 3D Aspekte, nicht auf Low-Level-Details 6
  7. 7. Open Web User Group Oberfranken WebGL - 3D im Browser three.js - „Große Freiheit“ bekanntes und gereiftes Framework 2010 von ActionScript nach Javascript umfangreiche und sehr gute Dokumentation leichtgewichtig & entkoppelt für Entwicklung intern sehr starke Kopplung an GLSL Scene, Camera, Lights, Material, Texture Object, Geometry (Plane, Cube, Sphere, …) Loader: OBJ, MTL, glTF, Babylon, JSON Exporter: 3DS Max, Blender, FBX, OBJ 7
  8. 8. Open Web User Group Oberfranken WebGL - 3D im Browser BabylonJS - „WebGL Game Creation“ angeblich bessere Performance als three.js 2013 von Microsoft Mitarbeitern gestartet mittelmäßige Dokumentation & Beispiele mittelschwergewichtiges Framework integrierte Physics Engine und Controls Unterstützung üblicher 3D Features Umfang im Vergleich zu three.js reduziert Loader: Babylons JSON & Sandbox Support Exporter: 3DS Max, Blender, Unity, XNA/OBJ 8
  9. 9. Open Web User Group Oberfranken WebGL - 3D im Browser BabylonJS - Primer Basis Geometrie Sphere, Plane, Cube, Line Cylinder, Torus, TorusKnot Meshes & SubMeshes InstancedMeshes Materials StandardMaterial ShaderMaterial Textures 9
  10. 10. Open Web User Group Oberfranken WebGL - 3D im Browser BabylonJS - Primer Cameras & Collision Ellipsoid sonstige Objekte Physics OimoJS & cannon.js Animations nur KeyFrame, kein Morph Video Integration Sound mit Distanzeffekt 10
  11. 11. Open Web User Group Oberfranken WebGL - 3D im Browser BabylonJS - Primer Lights HemisphericLight DirectionalLight SpotLight PointLight ShadowMap positioniertes, gerichtetes Licht Projektion auf Untergrund Sandbox & Shader Playground 11
  12. 12. Open Web User Group Oberfranken WebGL - 3D im Browser BabylonJS - Primer Effekte & Post-Processing Anaglphy für 3D Brillen sepia / schwarz-weiß / Blur Lens Flares diverse Farbanpassungen Screen Space Ambient Occlusion
 (Schatten durch Tiefen) eigene Effekte via Shader 12
  13. 13. Open Web User Group Oberfranken WebGL - 3D im Browser iisys Gebäude in 3D Master Internet Web Science Studienarbeit Gruppenarbeit mit neun sieben Studenten Modellierung des iisys Gebäudes Mapping von Materialien & Texturen diverse Interaktionsmöglichkeiten diverse Geräuscheffekte Optimierung der Performance 13 Blender BabylonJS Verhalten -model- -view- -controller-
  14. 14. Open Web User Group Oberfranken WebGL - 3D im Browser Blender 3D Model Designer für komplexe Szene übersichtlicher als Quellcode Definition von Eigenschaften Definition von Normalen Definition von Drehachsen Definition von Materialien
 und Texturen Export als JSON für BabylonJS
 mittels Export-Plugin (Python) „Fertig!“ 14
  15. 15. Open Web User Group Oberfranken WebGL - 3D im Browser Blender 3D Model Verhalten durch Namenskonvention Door.Entrance_First_Right.001
 Type {“.“ SubType} {“_“ Attribute} Type: Door Subtype: Entrance Attributes: [First, Right] wird durch JavaScript Controller ausgewertet Zuweisung an entsprechendes Domain Model 15
  16. 16. Open Web User Group Oberfranken WebGL - 3D im Browser Software Architektur require.js Dependency Injection
 
 
 
 
 
 Vererbung über JavaScript Prototyping Inversion of Control AppController nur zum einmaligen Komponieren Models entscheiden selbst über Verhalten 16 ColissionManager Camera Model EventListener SceneOptimizer Overrides Mesh EntityManager BabylonJS <Whatever>Loader AppController Settings jQuery require.js AMD JavaScript HTML5 Canvas WebGL define('iisys/model/Door/Entrance',
 ['../../app', 'iisys/model/Door'],
 function(app, abstractDoor) {} require(['iisys/model/Door/Entrance'],
 function(EntranceDoor)) {}
  17. 17. Open Web User Group Oberfranken WebGL - 3D im Browser Software Architektur Fokus auf lose Kopplung & Komponenten - Separation of Concerns Models registrieren eigene Interaktionsmöglichkeit
 
 
 
 
 Camera aktiviert EventListener 17 iisys.model.Door.prototype.setupInteractions = function() {
 abstractModel.prototype.setupInteractions.apply(this, arguments);
 collisionManager.register(
 iisys.service.CollisionManager.Types.Door, this, this);
 }; iisys.camera.Person.prototype.initialize = function () {
 // ... collisionManager.applyTo(this.collisionInteractor,
 iisys.service.CollisionManager.Types.Door);
 collisionManager.applyTo(this.collisionEllipsoid,
 iisys.service.CollisionManager.Types.Room);
 }
  18. 18. Open Web User Group Oberfranken WebGL - 3D im Browser Optimierung Instanzen für 3D Objekte verwenden für wiederkehrende Objekte lediglich andere Position/Ausrichtung z.B. Tische, Stühle, Türen, Fenster, … Details und Größe von Texturen reduzieren von 90 MB bei 6000x6000px zu 2 MB bei 1000x1000px MipMaps für dynamischen Detailgrad BabylonJS SceneOptimizer 18 „normal“ mit 655 Draw Calls Mesh Instanzen mit 365 Draw Calls
  19. 19. Open Web User Group Oberfranken WebGL - 3D im Browser Optimierung Octrees zur Positionsbestimmung Würfel mit acht Unterwürfeln Kameraposition und Sichtbarkeit viele, gleichverteilte Meshes Optimierung der Sichtbarkeit eigene Gruppierung z.B. „Tische eines Raums“ nur Raum-Sichtbarkeit relevant wirkt auf „Raum-Inhalt“ 19
  20. 20. Open Web User Group Oberfranken WebGL - 3D im Browser Entwicklungsstand BabylonJS Glitches merkwürdiges Lichtverhalten mehrfache Materialien „durchsichtige Objekte“ wegen
 unvollständigem Export aus Blender (Normalenvektoren) merkwürdiges Schattenverhalten & Performance-Probleme „Schatten“ in BabylonJS Beispielen sind meist „aufgemalt“ Einblick in Entwicklungsstand: http://www.iisys.inpublica.net/ 20
  21. 21. Open Web User Group Oberfranken WebGL - 3D im Browser Fazit BabylonJS gut geeignet für schnelle Resultate im 3D Funktionsumfang allerdings schlechter als three.js Licht, Schatten, Skelettanimation, Morphing teilweise sind Schatten „Fakes“ bei BabylonJS Beispielen 3D im Browser bleibt trickreiche Illusion der Wirklichkeit Komponentendenken während Modellierung in Blender wichtig Performance & Detailgrad sind die Knackpunkte GLSL Kenntnisse hilfreich, aber nicht erforderlich 21
  22. 22. Open Web User Group Oberfranken WebGL - 3D im Browser Quellen & Links 22 Grundlagen Browser Support: http://caniuse.com/#feat=webgl WebGL Basics: http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/ Frameworks & Libraries three.js & Demos: http://threejs.org/ BabylonJS & Demos: http://www.babylonjs.com/ BabylonJS Export Plugins: https://github.com/BabylonJS/Babylon.js/tree/master/Exporters BabylonJS Playground: http://babylonjs-playground.azurewebsites.net/ BabylonJS Shader Playground: http://www.babylonjs.com/cyos/ iisys Gebäude in 3D Blender: https://www.blender.org/ JavaScript Dependency Injection: http://requirejs.org/ Performance: https://github.com/BabylonJS/Babylon.js/wiki/Optimizing-performances-with-octrees Octree: https://de.wikipedia.org/wiki/Octree Entwicklungsstand: http://www.iisys.inpublica.net/
  23. 23. Open Web User Group Oberfranken WebGL - 3D im Browser Vielen Dank !

×