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!