WebGL - 3D im BrowserOliver Hader
30.06.2015
Open Web User Group Oberfranken
WebGL - 3D im Browser
Open Web User Group Oberfranken
WebGL - 3D im Browser
ÜberblickWebGL Basics
Frameworks
three.js
BabylonJS
iisys Gebäude in 3D
Erfahrungsbericht
Architekturüberlegungen
Optimierungen
Entwicklungsstand
2
ohader@ohader
Oliver_Hader
follow me
Open Web User Group Oberfranken
WebGL - 3D im Browser
WebGL Basics2009 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
Open Web User Group Oberfranken
WebGL - 3D im Browser
WebGL: JavaScriptErzeugen 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 rightgl.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);
Open Web User Group Oberfranken
WebGL - 3D im Browser
WebGL: ShaderVertex 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>
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
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
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
Open Web User Group Oberfranken
WebGL - 3D im Browser
BabylonJS - PrimerBasis Geometrie
Sphere, Plane, Cube, Line
Cylinder, Torus, TorusKnot
Meshes & SubMeshes
InstancedMeshes
Materials
StandardMaterial
ShaderMaterial
Textures
9
Open Web User Group Oberfranken
WebGL - 3D im Browser
BabylonJS - PrimerCameras & Collision
Ellipsoid
sonstige Objekte
Physics
OimoJS & cannon.js
Animations
nur KeyFrame, kein Morph
Video Integration
Sound mit Distanzeffekt
10
Open Web User Group Oberfranken
WebGL - 3D im Browser
BabylonJS - PrimerLights
HemisphericLight
DirectionalLight
SpotLight
PointLight
ShadowMap
positioniertes, gerichtetes Licht
Projektion auf Untergrund
Sandbox & Shader Playground
11
Open Web User Group Oberfranken
WebGL - 3D im Browser
BabylonJS - PrimerEffekte & 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
Open Web User Group Oberfranken
WebGL - 3D im Browser
iisys Gebäude in 3DMaster 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-
Open Web User Group Oberfranken
WebGL - 3D im Browser
Blender 3D ModelDesigner für komplexe Szene
übersichtlicher als Quellcode
Definition von Eigenschaften
Definition von Normalen
Definition von Drehachsen
Definition von Materialienund Texturen
Export als JSON für BabylonJSmittels Export-Plugin (Python)
„Fertig!“
14
Open Web User Group Oberfranken
WebGL - 3D im Browser
Blender 3D ModelVerhalten durch Namenskonvention
Door.Entrance_First_Right.001Type {“.“ SubType} {“_“ Attribute}
Type: Door
Subtype: Entrance
Attributes: [First, Right]
wird durch JavaScript Controller ausgewertet
Zuweisung an entsprechendes Domain Model
15
Open Web User Group Oberfranken
WebGL - 3D im Browser
Software Architekturrequire.js Dependency Injection
Vererbung über JavaScript Prototyping
Inversion of Control
AppController nur zum einmaligen Komponieren
Models entscheiden selbst über Verhalten
16
ColissionManagerCamera Model
EventListener
SceneOptimizer Overrides Mesh
EntityManagerBabylonJS
<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)) {}
Open Web User Group Oberfranken
WebGL - 3D im Browser
Software ArchitekturFokus 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);}
Open Web User Group Oberfranken
WebGL - 3D im Browser
OptimierungInstanzen 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
Open Web User Group Oberfranken
WebGL - 3D im Browser
OptimierungOctrees 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
Open Web User Group Oberfranken
WebGL - 3D im Browser
EntwicklungsstandBabylonJS Glitches
merkwürdiges Lichtverhalten
mehrfache Materialien
„durchsichtige Objekte“ wegenunvollstä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
Open Web User Group Oberfranken
WebGL - 3D im Browser
FazitBabylonJS 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
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/
Open Web User Group Oberfranken
WebGL - 3D im Browser
Vielen Dank!