WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS

2,085 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,085
On SlideShare
0
From Embeds
0
Number of Embeds
373
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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 !

×