Das Dokument bietet einen umfassenden Überblick über WebGL und seine Anwendung zur Erstellung von 3D-Grafiken im Browser, einschließlich einer Diskussion über Frameworks wie three.js und Babylon.js, deren Vor- und Nachteile sowie Beispiele für deren Nutzung in der 3D-Modellierung. Es beschreibt auch Optimierungstechniken, die zur Verbesserung der Performance von 3D-Anwendungen beitragen können, sowie die Architektur und Interaktion von Modellen in einer 3D-Szene. Abschließend wird die Bedeutung von Blender für die Erstellung von 3D-Modellen und die Optimierung von Geometrie und Materialien hervorgehoben.

1. WebGL - 3D im Browser
Oliver Hader
30.06.2015
Open Web User Group Oberfranken
WebGL - 3D im Browser

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Open Web User Group Oberfranken
WebGL - 3D im Browser
Vielen Dank
!