SlideShare ist ein Scribd-Unternehmen logo
1 von 23
Downloaden Sie, um offline zu lesen
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 in 3D
Erfahrungsbericht
Architekturüberlegungen
Optimierungen
Entwicklungsstand
2
ohader

@ohader

Oliver_Hader
follow me
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
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);
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>
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 - Primer
Basis 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 - Primer
Cameras & 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 - Primer
Lights
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 - 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
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-
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
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
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)) {}
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);

}
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
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
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
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
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
!

Más contenido relacionado

Was ist angesagt?

Kann ich mit Grails Enterprise Applikationen umsetzen?
Kann ich mit Grails Enterprise Applikationen umsetzen?Kann ich mit Grails Enterprise Applikationen umsetzen?
Kann ich mit Grails Enterprise Applikationen umsetzen?Tobias Kraft
 
Enterprise 2.0 Portale mit Grails. Geht das?
Enterprise 2.0 Portale mit Grails. Geht das?Enterprise 2.0 Portale mit Grails. Geht das?
Enterprise 2.0 Portale mit Grails. Geht das?Tobias Kraft
 
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScriptJSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScriptOPEN KNOWLEDGE GmbH
 
JSF 2 Kompositkomponenten (JAX 2012)
JSF 2 Kompositkomponenten (JAX 2012)JSF 2 Kompositkomponenten (JAX 2012)
JSF 2 Kompositkomponenten (JAX 2012)Michael Kurz
 
Web-GUIs mit Vaadin
 Web-GUIs mit Vaadin Web-GUIs mit Vaadin
Web-GUIs mit Vaadingedoplan
 
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im VergleichWie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleichgedoplan
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der CloudTorsten Fink
 
Wieviel Client braucht das Web?
Wieviel Client braucht das Web?Wieviel Client braucht das Web?
Wieviel Client braucht das Web?gedoplan
 
Komponentenorientierte Webanwendungen mit wingS 2.0
Komponentenorientierte Webanwendungen mit wingS 2.0 Komponentenorientierte Webanwendungen mit wingS 2.0
Komponentenorientierte Webanwendungen mit wingS 2.0 Benjamin Schmid
 
Die neuen Bewertungskriterien von Google ab 05 / 2021
Die neuen Bewertungskriterien von Google ab 05 / 2021Die neuen Bewertungskriterien von Google ab 05 / 2021
Die neuen Bewertungskriterien von Google ab 05 / 2021Phil Marx
 
Go Fullstack: Webanwendungen mit Java EE 6 bauen (W-JAX 2011)
Go Fullstack: Webanwendungen mit Java EE 6 bauen (W-JAX 2011)Go Fullstack: Webanwendungen mit Java EE 6 bauen (W-JAX 2011)
Go Fullstack: Webanwendungen mit Java EE 6 bauen (W-JAX 2011)Michael Kurz
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend ArchitekturNico Steiner
 
Lean web architecture mit jsf 2.0, cdi & co.
Lean web architecture mit jsf 2.0, cdi & co.Lean web architecture mit jsf 2.0, cdi & co.
Lean web architecture mit jsf 2.0, cdi & co.adesso AG
 
PHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzePHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzeRalf Lütke
 
Wieviel client braucht das web
Wieviel client braucht das webWieviel client braucht das web
Wieviel client braucht das webgedoplan
 
Einführung in Windows Presentation Foundation
Einführung in Windows Presentation FoundationEinführung in Windows Presentation Foundation
Einführung in Windows Presentation Foundationchmoser79
 
Metadatenbasierte Validierung
Metadatenbasierte ValidierungMetadatenbasierte Validierung
Metadatenbasierte Validierungos890
 

Was ist angesagt? (20)

GWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der PraxisGWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der Praxis
 
Eintauchen in MVP mit GWT
Eintauchen in MVP mit GWT Eintauchen in MVP mit GWT
Eintauchen in MVP mit GWT
 
Kann ich mit Grails Enterprise Applikationen umsetzen?
Kann ich mit Grails Enterprise Applikationen umsetzen?Kann ich mit Grails Enterprise Applikationen umsetzen?
Kann ich mit Grails Enterprise Applikationen umsetzen?
 
Enterprise 2.0 Portale mit Grails. Geht das?
Enterprise 2.0 Portale mit Grails. Geht das?Enterprise 2.0 Portale mit Grails. Geht das?
Enterprise 2.0 Portale mit Grails. Geht das?
 
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScriptJSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
 
JSF 2 Kompositkomponenten (JAX 2012)
JSF 2 Kompositkomponenten (JAX 2012)JSF 2 Kompositkomponenten (JAX 2012)
JSF 2 Kompositkomponenten (JAX 2012)
 
Web-GUIs mit Vaadin
 Web-GUIs mit Vaadin Web-GUIs mit Vaadin
Web-GUIs mit Vaadin
 
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im VergleichWie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
 
Wieviel Client braucht das Web?
Wieviel Client braucht das Web?Wieviel Client braucht das Web?
Wieviel Client braucht das Web?
 
Komponentenorientierte Webanwendungen mit wingS 2.0
Komponentenorientierte Webanwendungen mit wingS 2.0 Komponentenorientierte Webanwendungen mit wingS 2.0
Komponentenorientierte Webanwendungen mit wingS 2.0
 
Die neuen Bewertungskriterien von Google ab 05 / 2021
Die neuen Bewertungskriterien von Google ab 05 / 2021Die neuen Bewertungskriterien von Google ab 05 / 2021
Die neuen Bewertungskriterien von Google ab 05 / 2021
 
Go Fullstack: Webanwendungen mit Java EE 6 bauen (W-JAX 2011)
Go Fullstack: Webanwendungen mit Java EE 6 bauen (W-JAX 2011)Go Fullstack: Webanwendungen mit Java EE 6 bauen (W-JAX 2011)
Go Fullstack: Webanwendungen mit Java EE 6 bauen (W-JAX 2011)
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur
 
Lean web architecture mit jsf 2.0, cdi & co.
Lean web architecture mit jsf 2.0, cdi & co.Lean web architecture mit jsf 2.0, cdi & co.
Lean web architecture mit jsf 2.0, cdi & co.
 
PHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzePHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-Ansätze
 
Wieviel client braucht das web
Wieviel client braucht das webWieviel client braucht das web
Wieviel client braucht das web
 
Elsholz stoll js_03_10
Elsholz stoll js_03_10Elsholz stoll js_03_10
Elsholz stoll js_03_10
 
Einführung in Windows Presentation Foundation
Einführung in Windows Presentation FoundationEinführung in Windows Presentation Foundation
Einführung in Windows Presentation Foundation
 
Metadatenbasierte Validierung
Metadatenbasierte ValidierungMetadatenbasierte Validierung
Metadatenbasierte Validierung
 

Andere mochten auch

3D Printing - A 2014 Horizonwatching Trend Summary Report
3D Printing - A 2014 Horizonwatching Trend Summary Report3D Printing - A 2014 Horizonwatching Trend Summary Report
3D Printing - A 2014 Horizonwatching Trend Summary ReportBill Chamberlin
 
ARCH. MOHANAD NABIL 20160211-min (1)
ARCH. MOHANAD NABIL 20160211-min (1)ARCH. MOHANAD NABIL 20160211-min (1)
ARCH. MOHANAD NABIL 20160211-min (1)Mohanad Nabil
 
Avatars at work: Lernen und arbeiten im Web 3D
Avatars at work: Lernen und arbeiten im Web 3DAvatars at work: Lernen und arbeiten im Web 3D
Avatars at work: Lernen und arbeiten im Web 3DHanno Tietgens
 
Modelado basado en imágenes
Modelado basado en imágenesModelado basado en imágenes
Modelado basado en imágenesMario Rodriguez
 
3D-DAY in Friedrichshafen
3D-DAY in Friedrichshafen3D-DAY in Friedrichshafen
3D-DAY in FriedrichshafenGeorg Eck
 
Teleimmersion
TeleimmersionTeleimmersion
Teleimmersionstudent
 
An Open Source solution for Three-Dimensional documentation: archaeological a...
An Open Source solution for Three-Dimensional documentation: archaeological a...An Open Source solution for Three-Dimensional documentation: archaeological a...
An Open Source solution for Three-Dimensional documentation: archaeological a...Giulio Bigliardi
 
Crime Scene Diagramming and Reconstruction by Det. Mike Anderson
Crime Scene Diagramming and Reconstruction by Det. Mike AndersonCrime Scene Diagramming and Reconstruction by Det. Mike Anderson
Crime Scene Diagramming and Reconstruction by Det. Mike AndersonPPI_Group
 
Shape from Distortion - 3D Digitization
Shape from Distortion - 3D DigitizationShape from Distortion - 3D Digitization
Shape from Distortion - 3D DigitizationVanya Valindria
 
OpenStreetMap in 3D - current developments
OpenStreetMap in 3D - current developmentsOpenStreetMap in 3D - current developments
OpenStreetMap in 3D - current developmentsvirtualcitySYSTEMS GmbH
 
Lecture 01 frank dellaert - 3 d reconstruction and mapping: a factor graph ...
Lecture 01   frank dellaert - 3 d reconstruction and mapping: a factor graph ...Lecture 01   frank dellaert - 3 d reconstruction and mapping: a factor graph ...
Lecture 01 frank dellaert - 3 d reconstruction and mapping: a factor graph ...mustafa sarac
 
Build Your Own 3D Scanner: The Mathematics of 3D Triangulation
Build Your Own 3D Scanner: The Mathematics of 3D TriangulationBuild Your Own 3D Scanner: The Mathematics of 3D Triangulation
Build Your Own 3D Scanner: The Mathematics of 3D TriangulationDouglas Lanman
 
Programación 3D y Modelado de Realidad Virtual para Internet con VRML 2.0
Programación 3D y Modelado de Realidad Virtual para Internet con VRML 2.0Programación 3D y Modelado de Realidad Virtual para Internet con VRML 2.0
Programación 3D y Modelado de Realidad Virtual para Internet con VRML 2.0Stephenson Prieto
 
Build Your Own 3D Scanner: Course Notes
Build Your Own 3D Scanner: Course NotesBuild Your Own 3D Scanner: Course Notes
Build Your Own 3D Scanner: Course NotesDouglas Lanman
 
3D GIS Lösungen für die Stadtplanung
3D GIS Lösungen für die Stadtplanung3D GIS Lösungen für die Stadtplanung
3D GIS Lösungen für die StadtplanungMatthias Liechti
 
Ar techniques@sergi grau
Ar techniques@sergi grauAr techniques@sergi grau
Ar techniques@sergi grauSergi Grau
 
Overview of 3D GIS Capabilties
Overview of 3D GIS CapabiltiesOverview of 3D GIS Capabilties
Overview of 3D GIS CapabiltiesErik Van Der Zee
 
Build Your Own 3D Scanner: 3D Scanning with Swept-Planes
Build Your Own 3D Scanner: 3D Scanning with Swept-PlanesBuild Your Own 3D Scanner: 3D Scanning with Swept-Planes
Build Your Own 3D Scanner: 3D Scanning with Swept-PlanesDouglas Lanman
 

Andere mochten auch (20)

3D Printing - A 2014 Horizonwatching Trend Summary Report
3D Printing - A 2014 Horizonwatching Trend Summary Report3D Printing - A 2014 Horizonwatching Trend Summary Report
3D Printing - A 2014 Horizonwatching Trend Summary Report
 
ARCH. MOHANAD NABIL 20160211-min (1)
ARCH. MOHANAD NABIL 20160211-min (1)ARCH. MOHANAD NABIL 20160211-min (1)
ARCH. MOHANAD NABIL 20160211-min (1)
 
Avatars at work: Lernen und arbeiten im Web 3D
Avatars at work: Lernen und arbeiten im Web 3DAvatars at work: Lernen und arbeiten im Web 3D
Avatars at work: Lernen und arbeiten im Web 3D
 
Modelado basado en imágenes
Modelado basado en imágenesModelado basado en imágenes
Modelado basado en imágenes
 
3D-DAY in Friedrichshafen
3D-DAY in Friedrichshafen3D-DAY in Friedrichshafen
3D-DAY in Friedrichshafen
 
Teleimmersion
TeleimmersionTeleimmersion
Teleimmersion
 
An Open Source solution for Three-Dimensional documentation: archaeological a...
An Open Source solution for Three-Dimensional documentation: archaeological a...An Open Source solution for Three-Dimensional documentation: archaeological a...
An Open Source solution for Three-Dimensional documentation: archaeological a...
 
Crime Scene Diagramming and Reconstruction by Det. Mike Anderson
Crime Scene Diagramming and Reconstruction by Det. Mike AndersonCrime Scene Diagramming and Reconstruction by Det. Mike Anderson
Crime Scene Diagramming and Reconstruction by Det. Mike Anderson
 
Shape from Distortion - 3D Digitization
Shape from Distortion - 3D DigitizationShape from Distortion - 3D Digitization
Shape from Distortion - 3D Digitization
 
OpenStreetMap in 3D - current developments
OpenStreetMap in 3D - current developmentsOpenStreetMap in 3D - current developments
OpenStreetMap in 3D - current developments
 
Lecture 01 frank dellaert - 3 d reconstruction and mapping: a factor graph ...
Lecture 01   frank dellaert - 3 d reconstruction and mapping: a factor graph ...Lecture 01   frank dellaert - 3 d reconstruction and mapping: a factor graph ...
Lecture 01 frank dellaert - 3 d reconstruction and mapping: a factor graph ...
 
Build Your Own 3D Scanner: The Mathematics of 3D Triangulation
Build Your Own 3D Scanner: The Mathematics of 3D TriangulationBuild Your Own 3D Scanner: The Mathematics of 3D Triangulation
Build Your Own 3D Scanner: The Mathematics of 3D Triangulation
 
Programación 3D y Modelado de Realidad Virtual para Internet con VRML 2.0
Programación 3D y Modelado de Realidad Virtual para Internet con VRML 2.0Programación 3D y Modelado de Realidad Virtual para Internet con VRML 2.0
Programación 3D y Modelado de Realidad Virtual para Internet con VRML 2.0
 
Acosutic Trail, GPS manos libres
Acosutic Trail, GPS manos libresAcosutic Trail, GPS manos libres
Acosutic Trail, GPS manos libres
 
Build Your Own 3D Scanner: Course Notes
Build Your Own 3D Scanner: Course NotesBuild Your Own 3D Scanner: Course Notes
Build Your Own 3D Scanner: Course Notes
 
3D GIS Lösungen für die Stadtplanung
3D GIS Lösungen für die Stadtplanung3D GIS Lösungen für die Stadtplanung
3D GIS Lösungen für die Stadtplanung
 
Ar techniques@sergi grau
Ar techniques@sergi grauAr techniques@sergi grau
Ar techniques@sergi grau
 
Overview of 3D GIS Capabilties
Overview of 3D GIS CapabiltiesOverview of 3D GIS Capabilties
Overview of 3D GIS Capabilties
 
PORTFOLIO 20160920 low
PORTFOLIO 20160920 lowPORTFOLIO 20160920 low
PORTFOLIO 20160920 low
 
Build Your Own 3D Scanner: 3D Scanning with Swept-Planes
Build Your Own 3D Scanner: 3D Scanning with Swept-PlanesBuild Your Own 3D Scanner: 3D Scanning with Swept-Planes
Build Your Own 3D Scanner: 3D Scanning with Swept-Planes
 

Ähnlich wie WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS

Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5kkramhoeft
 
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Christian Janz
 
Die besten 10 JavaScript Frameworks für moderne Web-Apps
Die besten 10 JavaScript Frameworks für moderne Web-AppsDie besten 10 JavaScript Frameworks für moderne Web-Apps
Die besten 10 JavaScript Frameworks für moderne Web-AppsDieter Ziegler
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEEBenjamin Schmid
 
Rapid Application Development mit Grails und AngularJS
Rapid Application Development mit Grails und AngularJSRapid Application Development mit Grails und AngularJS
Rapid Application Development mit Grails und AngularJSOPITZ CONSULTING Deutschland
 
WPF Dos n Don'ts - der WPF Rundumschlag
WPF Dos n Don'ts - der WPF RundumschlagWPF Dos n Don'ts - der WPF Rundumschlag
WPF Dos n Don'ts - der WPF RundumschlagHendrik Lösch
 
2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als Cache2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als CacheDaniel Fisher
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
MongoDB Munich 2012: Spring Data MongoDB
MongoDB Munich 2012: Spring Data MongoDBMongoDB Munich 2012: Spring Data MongoDB
MongoDB Munich 2012: Spring Data MongoDBTobias Trelle
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestBastian Feder
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsGregor Biswanger
 
JavaScript: Von einfachen Scripten zu komplexen Anwendungen
JavaScript: Von einfachen Scripten zu komplexen AnwendungenJavaScript: Von einfachen Scripten zu komplexen Anwendungen
JavaScript: Von einfachen Scripten zu komplexen Anwendungenmolily
 
Jax07 - Mixing Ajax Swing and Flash
Jax07 - Mixing Ajax Swing and FlashJax07 - Mixing Ajax Swing and Flash
Jax07 - Mixing Ajax Swing and Flashpersillie
 
EnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heuteEnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heutePhilipp Burgmer
 
Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015Manfred Steyer
 
Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Manfred Steyer
 

Ähnlich wie WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS (20)

Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
 
Die besten 10 JavaScript Frameworks für moderne Web-Apps
Die besten 10 JavaScript Frameworks für moderne Web-AppsDie besten 10 JavaScript Frameworks für moderne Web-Apps
Die besten 10 JavaScript Frameworks für moderne Web-Apps
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
 
Rapid Application Development mit Grails und AngularJS
Rapid Application Development mit Grails und AngularJSRapid Application Development mit Grails und AngularJS
Rapid Application Development mit Grails und AngularJS
 
WPF Dos n Don'ts - der WPF Rundumschlag
WPF Dos n Don'ts - der WPF RundumschlagWPF Dos n Don'ts - der WPF Rundumschlag
WPF Dos n Don'ts - der WPF Rundumschlag
 
2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als Cache2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als Cache
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
MongoDB Munich 2012: Spring Data MongoDB
MongoDB Munich 2012: Spring Data MongoDBMongoDB Munich 2012: Spring Data MongoDB
MongoDB Munich 2012: Spring Data MongoDB
 
AngularJs
AngularJsAngularJs
AngularJs
 
AngularJS
AngularJSAngularJS
AngularJS
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
JavaScript: Von einfachen Scripten zu komplexen Anwendungen
JavaScript: Von einfachen Scripten zu komplexen AnwendungenJavaScript: Von einfachen Scripten zu komplexen Anwendungen
JavaScript: Von einfachen Scripten zu komplexen Anwendungen
 
Jax07 - Mixing Ajax Swing and Flash
Jax07 - Mixing Ajax Swing and FlashJax07 - Mixing Ajax Swing and Flash
Jax07 - Mixing Ajax Swing and Flash
 
EnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heuteEnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heute
 
Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015
 
Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015
 
Net@night asp.net mvc
Net@night asp.net mvcNet@night asp.net mvc
Net@night asp.net mvc
 
Workshop Vue js
Workshop Vue jsWorkshop Vue js
Workshop Vue js
 

Mehr von Oliver Hader

T3DD23 Content Security Policy - Concept, Strategies & Pitfalls
T3DD23 Content Security Policy - Concept, Strategies & PitfallsT3DD23 Content Security Policy - Concept, Strategies & Pitfalls
T3DD23 Content Security Policy - Concept, Strategies & PitfallsOliver Hader
 
SAST für TYPO3 Extensions
SAST für TYPO3 ExtensionsSAST für TYPO3 Extensions
SAST für TYPO3 ExtensionsOliver Hader
 
Web Application Security Workshop (T3DD19)
Web Application Security Workshop (T3DD19)Web Application Security Workshop (T3DD19)
Web Application Security Workshop (T3DD19)Oliver Hader
 
Hacking TYPO3 v9 (T3DD19 edition)
Hacking TYPO3 v9 (T3DD19 edition)Hacking TYPO3 v9 (T3DD19 edition)
Hacking TYPO3 v9 (T3DD19 edition)Oliver Hader
 
TYPO3camp Munich 2018 - Keynote - "Wo woll'n mer denn hin?"
TYPO3camp Munich 2018 - Keynote - "Wo woll'n mer denn hin?"TYPO3camp Munich 2018 - Keynote - "Wo woll'n mer denn hin?"
TYPO3camp Munich 2018 - Keynote - "Wo woll'n mer denn hin?"Oliver Hader
 
TYPO3 CMS - Datenmodifikation & Event Sourcing (Masterarbeit)
TYPO3 CMS - Datenmodifikation & Event Sourcing (Masterarbeit)TYPO3 CMS - Datenmodifikation & Event Sourcing (Masterarbeit)
TYPO3 CMS - Datenmodifikation & Event Sourcing (Masterarbeit)Oliver Hader
 
TYPO3 Event Sourcing
TYPO3 Event SourcingTYPO3 Event Sourcing
TYPO3 Event SourcingOliver Hader
 
H4CK1N6 - Web Application Security
H4CK1N6 - Web Application SecurityH4CK1N6 - Web Application Security
H4CK1N6 - Web Application SecurityOliver Hader
 
TYPO3 Backstage Development
TYPO3 Backstage DevelopmentTYPO3 Backstage Development
TYPO3 Backstage DevelopmentOliver Hader
 
Web application security
Web application securityWeb application security
Web application securityOliver Hader
 
Contribute to TYPO3 CMS
Contribute to TYPO3 CMSContribute to TYPO3 CMS
Contribute to TYPO3 CMSOliver Hader
 
T3CON13DE - TYPO3 CMS Team
T3CON13DE - TYPO3 CMS TeamT3CON13DE - TYPO3 CMS Team
T3CON13DE - TYPO3 CMS TeamOliver Hader
 
TYPO3camp Regensburg: TYPO3 6.0
TYPO3camp Regensburg: TYPO3 6.0TYPO3camp Regensburg: TYPO3 6.0
TYPO3camp Regensburg: TYPO3 6.0Oliver Hader
 
TYPO3 Inline Relational Record Editing (IRRE)
TYPO3 Inline Relational Record Editing (IRRE)TYPO3 Inline Relational Record Editing (IRRE)
TYPO3 Inline Relational Record Editing (IRRE)Oliver Hader
 
TYPO3 4.6 & TYPO3 4.7
TYPO3 4.6 & TYPO3 4.7TYPO3 4.6 & TYPO3 4.7
TYPO3 4.6 & TYPO3 4.7Oliver Hader
 

Mehr von Oliver Hader (16)

T3DD23 Content Security Policy - Concept, Strategies & Pitfalls
T3DD23 Content Security Policy - Concept, Strategies & PitfallsT3DD23 Content Security Policy - Concept, Strategies & Pitfalls
T3DD23 Content Security Policy - Concept, Strategies & Pitfalls
 
SAST für TYPO3 Extensions
SAST für TYPO3 ExtensionsSAST für TYPO3 Extensions
SAST für TYPO3 Extensions
 
Web Application Security Workshop (T3DD19)
Web Application Security Workshop (T3DD19)Web Application Security Workshop (T3DD19)
Web Application Security Workshop (T3DD19)
 
Hacking TYPO3 v9 (T3DD19 edition)
Hacking TYPO3 v9 (T3DD19 edition)Hacking TYPO3 v9 (T3DD19 edition)
Hacking TYPO3 v9 (T3DD19 edition)
 
Hacking TYPO3 v9
Hacking TYPO3 v9Hacking TYPO3 v9
Hacking TYPO3 v9
 
TYPO3camp Munich 2018 - Keynote - "Wo woll'n mer denn hin?"
TYPO3camp Munich 2018 - Keynote - "Wo woll'n mer denn hin?"TYPO3camp Munich 2018 - Keynote - "Wo woll'n mer denn hin?"
TYPO3camp Munich 2018 - Keynote - "Wo woll'n mer denn hin?"
 
TYPO3 CMS - Datenmodifikation & Event Sourcing (Masterarbeit)
TYPO3 CMS - Datenmodifikation & Event Sourcing (Masterarbeit)TYPO3 CMS - Datenmodifikation & Event Sourcing (Masterarbeit)
TYPO3 CMS - Datenmodifikation & Event Sourcing (Masterarbeit)
 
TYPO3 Event Sourcing
TYPO3 Event SourcingTYPO3 Event Sourcing
TYPO3 Event Sourcing
 
H4CK1N6 - Web Application Security
H4CK1N6 - Web Application SecurityH4CK1N6 - Web Application Security
H4CK1N6 - Web Application Security
 
TYPO3 Backstage Development
TYPO3 Backstage DevelopmentTYPO3 Backstage Development
TYPO3 Backstage Development
 
Web application security
Web application securityWeb application security
Web application security
 
Contribute to TYPO3 CMS
Contribute to TYPO3 CMSContribute to TYPO3 CMS
Contribute to TYPO3 CMS
 
T3CON13DE - TYPO3 CMS Team
T3CON13DE - TYPO3 CMS TeamT3CON13DE - TYPO3 CMS Team
T3CON13DE - TYPO3 CMS Team
 
TYPO3camp Regensburg: TYPO3 6.0
TYPO3camp Regensburg: TYPO3 6.0TYPO3camp Regensburg: TYPO3 6.0
TYPO3camp Regensburg: TYPO3 6.0
 
TYPO3 Inline Relational Record Editing (IRRE)
TYPO3 Inline Relational Record Editing (IRRE)TYPO3 Inline Relational Record Editing (IRRE)
TYPO3 Inline Relational Record Editing (IRRE)
 
TYPO3 4.6 & TYPO3 4.7
TYPO3 4.6 & TYPO3 4.7TYPO3 4.6 & TYPO3 4.7
TYPO3 4.6 & TYPO3 4.7
 

WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS

  • 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 !