Gemeinsame Studie mit der Fachhoschschule Wels zum Einsatz von WebGL und Collada (Wavefront) in der technischen Dokumentation und Ersatzteilkataloge. Die vorliegende Folie wurde auf der Tekom Jahrestagung 2016 im Rahmen eines Fachvortrages vorgestellt

1. 3D – Spiel mit der Technik
Neue Möglichkeiten in der 3D-Darstellung
Ergebnisse einer Untersuchung
C2, 2/F32

2. VorstellungAgenda
1) Vorstellung
2) Projekt und Ziele
3) HTML5 / WebGL
4) Autodesk Forge
5) Dassault Composer
6) door2parts / WebGL
7) Rechtliche Aspekte
8) Zusammenfassung
9) Fragen
10) Links

3. Vorstellung
Ing. Robert Siegel, MBA
Geschäftsführer door2solution software
gmbh
Ersatzteilkataloge und technischer
eCommerce für Industrie und Handel
Johannes Ritt
Lektor an der Fachhochschule Oberösterreich
für technische Darstellung, CAD und PDM
Technischer Leiter für den Bereich
CAD/PDM/PLM bei T-Systems (Hansa PLM)
Vorstellung

4. Vorstellung Fachhochschule WelsFakultäten der FH Oberösterreich
> HAGENBERG
Informatik, Medien,
Kommunikation
> LINZ
Medizintechnik und
Angewandte
Sozialwissenschaften
> STEYR
Management
> WELS
Technik &
Angewandte
Naturwissenschaften

5. Vorstellung Fachhochschule WelsFakultät für Technik & Angewandte Naturwissenschaften in Wels

6. Vorstellung Fachhochschule WelsProduktdesign und Technische Kommunikation

7. Vorstellung door2solutionVorstellung door2solution software gmbh
● Softwarehaus gegründet 2004 aus Wien
● Spezialisierung auf technischen eCommerce
● Namhafte Kunden aus dem Bereich Anlagen- und Maschinenbau
● Tätig in AT, DE, CH, NL, UK, CZ
● Projekte im Umfeld von PLM, CAD, ERP, Web
● Kompetente Partner
● Open Source (Linux, Java, My-SQL, ..) und offene Standards
C2, 2/F32

8. 1) Vorstellung
2) Projekte und Ziele
3) HTML5 / WebGL
4) Autodesk Forge
5) Dassault Composer
6) door2parts / WebGL
7) Rechtliche Aspekte
8) Zusammenfassung
9) Fragen
10) Links
Agenda

9. Vorstellung Fachhochschule WelsProjekt und Ziele: Was ist möglich?
http://www.babylonjs.com/Demos/SIMD/ Anwendung im Bereich Ersatzteilkatalog
?
Es gibt eine Technik, die sich im Spiele Bereich stark entwickelt und
verbreitet, die aber vom professionellen Bereich - konkret in der Technik - eher
ignoriert wurde. Jetzt drängen aber mehr und mehr Schnittstellen und
Anwendungen auf den Markt: WebGL
⇒ Wie lässt sich das konkret nutzen, wie kann man das einsetzen?

10. ● Objekte können im Browser
manipuliert werden
Vorstellung Fachhochschule Wels
● Triangulation ist ein mögliches und
häufiges Verfahren im
Zusammenhang mit WebGL wenn
Daten aus Fremdsystemen
übernommen werden
Projekt und Ziele: Wie funktioniert das?
⇒ Triangulation ● Es können Objekte via Java-Script
oder JSON auch erstellt werden
(Volumensmodelle)

11. Vorstellung Fachhochschule Wels
● Extraktion und Aufbereitung aus dem CAD
● Überblick Tools
● Format der Schnittstellendatei (Step v.s. Collada, Object, JSON)
○ Attribute (Teilenummern)
○ Material (Farbe, Transparenz und Textur)
○ Qualität und Dateigröße
○ Optimierung und Komprimierung
○ Automatisierungsgrad und Integration in einen möglichen Workflow
○ Standardisierungsgrad (Investitionsschutz)
● Frontend Funktionalität
○ three.js, babylon.js oder Autodesk Forge?
○ Interaktion mit Objekten im HTML5 Kontext
○ Möglichkeiten der Animation
○ Steuerung im Browser (Gesten)
○ Ladezeit, Rendering Qualität und Performance
○ Kompatibilität (Apple, Microsoft, Android)
Projekt und Ziele: Wie geht das?
⇒ Fragestellung in einzelne Aspekte aufgliedern

12. Vorstellung
1) Vorstellung
2) Projekte und Ziele
3) HTML5 / WebGL
4) Autodesk Forge
5) Dassault Composer
6) door2parts / WebGL
7) Rechtliche Aspekte
8) Zusammenfassung
9) Fragen
10) Links
Agenda

13. VorstellungHTML5 / WebGL
WebGL - Web Graphics Library - ist eine JavaScript basierende
Programmierbibliothek für Anwendungen die direkt im Browser, also ohne
Plug-In, laufen und 3D Objekte rendern. Durch ergänzende Java-Script
Bibliotheken (zB three.js) wird die Programmierung vereinfacht, man kann
Objekte manipulieren.
WebGL ist ein externer (nicht W3C) Bestandteil von HTML5 und wird von
allen gängigen Browsern - PC und mobil - unterstützt.
COLLADA als Austauschformat wurde ISO Standard [ISO/PAS 17506:2012]

14. VorstellungHTML5 / WebGL

15. WebGL im HTML5
● WebGL läuft im HTML5 im Browser
● Es ist eine ungleich höhere Integration und
Interaktion möglich, als dies mit Plug-In
Lösungen möglich ist
WebGL
HTML
WebGL
HTML
open: helmade.com - individuelle Helm Konfiguration
(combeenation.com)
links: demo.door2parts.com/svg - Ersatzteilkatalog auf Basis SVG
und WebGL (door2solution.com)

16. Quelle: jeromeetienne.github.io/videobrowser4learningthreejs
HTML5 im WebGL im HTML5
Hier wird HTML5 life Content (auch
Videos) in WebGL eingebettet. Die
ganze Szene ist weiterhin interaktiv
● WebGL läuft in einem HTML5 Container:
● Man kann aber auch umgekehrt HTML5
Elemente integrieren:
○ Videos
○ Texte
○ Navigation/Menü
○ Formulare
○ Übersetzungen
○ ...
HTML
WebGL
HTML
WebGL
HTML

17. Quelle: http://caniuse.com/#search=WebGL
HTML5 / WebGL - Kompatibilität
⇒ Test in verschiedenen Browsern: erstaunlich positiv
Ab Ende 2015 beginnen
die Browser Hersteller
Canvas und WebGL zu
unterstützen.
Brauchbare und stabile
Versionen von three.js
Collada mittlerweile ISO
Standard.
Immer mehr Tools und
Schnittstellen am Markt.

18. HTML5 / WebGL - Frontend
(2) Steuerung im Browser:
three.js
Javascript 3D library
threejs.org
BabylonJS
3D engine based on WebGL/Web Audio and JavaScript
babylonjs.com
x3dom.org
Instant 3D the HTML Way
Fraunhofer Institut
x3dom.org
Forge
Autodesk has established a set of cloud services, APIs, and SDKs, so developers can quickly create the data,
apps, experiences, and services that power the future of making things.
Autodesk
forge.autodesk.com/platform
Object (.obj) Collada (.dae) JSON
(1) Dateiformate:
(+ Material)

19. VorstellungAgenda
1) Vorstellung
2) Projekte und Ziele
3) HTML5 / WebGL
4) Autodesk Forge
5) Dassault Composer
6) door2parts / WebGL
7) Rechtliche Aspekte
8) Zusammenfassung
9) Fragen
10) Links

20. Vorstellung Fachhochschule Wels
Laut Hersteller:
● Unterstützt alle gängigen CAD Formate nativ
● kein PlugIn nötig
● einfache Handhabung
● übernimmt Eigenschaften wie Material, Gewicht…
Aktueller Status: LIVE
Lösungsansatz 1: View & Data API von Autodesk (Forge)

21. Vorstellung Fachhochschule Wels
Resultate:
● CAD native Daten funktionieren nur bei einzelnen Teilen, hier auch mit Metadaten
● neutrale Formate wie stp möglich aber ohne Metadaten
● über “dwf” Schnittstelle auch nur ohne Metadaten möglich
Nachteile:
● System noch nicht ausgereift
● sehr grosse Differenz von Herstellerangaben zu aktuellem Funktionsumfang
● Daten werden in Übersee konvertiert
● noch kein Geschäftsmodell verfügbar
Fazit: Sehr interessanter und vielversprechender Ansatz, aber aktuell noch nicht verwendbar!
Lösungsansatz 1: View & Data API von Autodesk (Forge)

22. Vorstellung Fachhochschule Wels
Resultate:
Lösungsansatz 1: View & Data API von Autodesk (Forge)

23. VorstellungAgenda
1) Vorstellung
2) Projekte und Ziele
3) HTML5 / WebGL
4) Autodesk Forge
5) Dassault Composer
6) door2parts / WebGL
7) Rechtliche Aspekte
8) Zusammenfassung
9) Fragen
10) Links

24. Vorstellung Fachhochschule Wels
Funktionsweise:
● konvertiert native Daten in eigenes Format
● starke Reduktion der Datenmenge
● bietet Möglichkeiten zum Verwalten von Ansichten, Explosionsdarstellungen und Animationen
● ...viele Funktionalitäten für die technische Dokumentation
Export Möglichkeiten:
● Sichern im internen (smg) Format oder als exe paket
● Sichern von 2d ansichten als svg mit link Bauteil - Stückliste
● Veröffentlichen als
○ pdf
○ HTML (jeweils PlugIn nötig!!!)
● über Object- Datei direkte Verwendung im Web möglich!!!
Lösungsansatz 2: Dassault Systemes (Catia) Composer

25. Vorstellung Fachhochschule WelsProjekt und Ziele: Welche Tools?
Free-CAD, Blender, Sketch-Up, .. Dassault Composer
3D PDF
Babel3D
STEP
3D
PDF
ObjectPAR
ASM
Cortona3D

26. Dassault Composer
door2parts
2D
SVG
3D
WebGL
Aufbereitung der Daten - Dassault Composer

27. VorstellungAgenda
1) Vorstellung
2) Projekte und Ziele
3) HTML5 / WebGL
4) Autodesk Forge
5) Dassault Composer
6) door2parts / WebGL
7) Rechtliche Aspekte
8) Zusammenfassung
9) Fragen
10) Links

28. Beispiel einer
Anwendung im
Maschinenbau:
Die 3D Geometrien
können aus dem PLM
ergänzend
automatisch
prozessiert werden
door2parts / WebGL
WebGL
SVG

29. door2parts / WebGL
Beispiel einer
Anwendung im
Maschinenbau:
Hinteres Bild: X-Ray
Funktion, man sieht
die Geometrie ist
vollständig erhalten
(v.s. entkernen)

30. Vorstellung3D PDF v.s. Web-GL
HTML5
Anwendung
im Browser
3D PDF
● 3D PDF als Austauschformat geeignet
● 3D PDF als Zielformat nicht optimal

31. VorstellungAgenda
1) Vorstellung
2) Projekt und Ziele
3) HTML5 / WebGL
4) Autodesk Forge
5) Dassault Composer
6) door2parts / WebGL
7) Rechtliche Aspekte
8) Zusammenfassung
9) Fragen
10) Links

32. Vorstellung Fachhochschule WelsRechtliche Aspekte
Urheberrecht /
Nutzungsrecht:
● Normteile von CAD Systemen haben oft die Einschränkung zur Nutzung in der
Konstruktion
● Nutzungsrecht von Lieferanten-Geometrien!
→ Rechtliche Klärung erforderlich!!
!

33. VorstellungAgenda
1) Vorstellung
2) Projekt und Ziele
3) HTML5 / WebGL
4) Autodesk Forge
5) Dassault Composer
6) door2parts / WebGL
7) Rechtliche Aspekte
8) Zusammenfassung
9) Fragen
10) Links

34. Vorstellung
Vor-/ Nachteile PlugIn v.s. HTML5
APP / PlugIn HTML5 mit WebGL
VorteileNachteile
● Keine Installation
● Im Browser, einfache Interaktion mit HTML
● Einfachere Integration
● Geräteunabhängig
● Mehr Softwareentwickler am Markt
● Offline auch realisierbar
● Offen und standardisiert
● Höhere Spezialisierung ist möglich
● Interessant bei sehr Performance intensiven
Anwendungen
● Vertrieb via Store (zB Spiele)
● Gute Offline Konzepte
● Properitäre Daten, aber dafür kleiner
● Installation
● PlugIn teilweise browserabhängig
● APP teilweise geräteabhängig
● Vertrieb via Store (zB Corporate Apps)
● Teilweise proprietär
● Teurere Entwicklung
● Performance bei komplexen Geometrien
● Teilweise höhere Dateigrößen
● Neue Technologie daher beschränkte Erfahrung

35. ● Das Thema 3D wird nun millionen Web Programmierern zugänglich
● Immer mehr Tools unterstützen WebGL
● Initiativen in Forschung und Standardisierung
● Leichtere Integration in Cloud services durch HTML5 (zB SAP Hana)
● Google Cardboard macht VR simpel und billig
● Höhere Bandbreiten geeignet für grössere Datenmengen
● Kompatibilitätsprobleme bei Plug-In Ansätzen fallen jetzt weg
● 3D Druck bekommt höhere Bedeutung (Vorstufe zum Drucken ist Visualisierung)
VorstellungMarktentwicklung
WebGL ist nicht 1:1 zum
3D drucken geeignet
sondern es ist hier noch
eine spezifische
Aufbereitung der Daten
erforderlich

36. VorstellungAnwendungsbereiche WebGL
Technische Dokumentation:
- Beschreibende Dokumente (Betriebsanleitung, Servicehandbuch, ..)
- Ersatzteilidentifikation
- Simulation (Reparatur- und Wartungshandbücher, ..)
Vertrieb:
- Simulation
- Konfigurationsmanagement
- Produktdarstellung in 3D
Technologie:
- 3D für sich alleinstehend
- 3D in einem VR Kontext (Smartphone + Google-Cardboard)
- 3D in einem augmented Reality Kontext (Tablet mit Kamera)
- Co-Working
Marketing:
- 3D Objekte in Spiele- und Architekturdatenbanken (Product Placement)
Maschinenbau | Anlagenbau | Architektur | Spiele | Medizin | F&E | ...

37. Lessons learned - Dezember 2015 bis November 2016
● Spannende Technologie mit sehr viel Kreativpotential
● Hohes Interesse bei allen Stakeholdern
● Marktreif, überraschend stabil und performant
● Einfache und gut dokumentierte Programmierung
● Probleme die Bezeichner richtig aus dem CAD zu
bekommen
● Unübersichtliche Situation was Tools und deren Funktionen
wie auch die möglichen Dateiformate betrifft, Try & Error

38. Beispiel: Virtual Reality mit Smartphone
Google Cardboard

39. VorstellungGoogle Cardboard - VR mit Ihrem Smartphone
?
Besuchen Sie unseren Stand 2/F32 in Halle C2 und
erleben Sie wie spielerisch einfach Technik
sein kann. Bringen Sie ihr Smartphone mit!
Solange der Vorrat reicht!
Wir senden es Ihnen gerne zu!
FALSCH!

40. Danksagung
Besonderer Dank gilt unserem Projektteam aus dem
Fachhochschul Studiengang Produktdesign und Technische
Kommunikation der FH-Wels wie auch deren Professoren:
Eder-Pajazetovic Vildana
Jamrozek Estera
Pejdah Alda
Schnell Maria
Zuderell Karim Michael

41. VorstellungAgenda
1) Vorstellung
2) Projekt und Ziele
3) HTML5 / WebGL
4) Autodesk Forge
5) Dassault Composer
6) door2parts / WebGL
7) Rechtliche Aspekte
8) Zusammenfassung
9) Fragen
10) Links

42. Fragen?
Stellen Sie bitte Ihre Frage, wir
fragen dann bei Google nach

43. Sagen Sie uns bitte, wie Ihnen der Vortrag
gefallen hat. Wir freuen uns auf Ihr
Feedback per Smartphone oder Tablet
unter http://visu03.honestly.de
oder sprechen Sie mit uns:
Ihre Meinung ist uns wichtig!
Das Bewertungstool steht auch nach der Tagung zur Verfügung!
C2, 2/F32
office@door2solution.at
+43 1 997113300

44. VorstellungAusgewählte Links
Vortragende und Partner in dem Umfeld:
● fh-ooe.at/campus-wels/studiengaenge/bachelor/produktdesign-und-technische-kommunikation/
● door2solution.at
● solidsolutions.ch | cad.at | xplm.de
Standards, Libraries:
● khronos.org
● iso.org/iso/catalogue_detail.htm?csnumber=59902
● threejs.org | babylonjs.com | x3dom.org
Demos:
● babylonjs.com/Demos/SIMD/
● carvisualizer.plus360degrees.com/threejs
● heroforge.com | helmade.de
● jeromeetienne.github.io/videobrowser4learningthreejs
● vr.google.com/cardboard | vr.door2parts.com
● beta.unity3d.com/jonas/DT2/
Tools:
● babel3d.com |webgl-publisher.com
● freecadweb.org | blender.org | sketchup.com
● developer.autodesk.com
● cortona3d.com/de/cortona3d-solo
● 3ds.com/de/produkte-und-services/catia/produkte/composer
Bildmaterial: teilweise ©fotolia.com
genaue Quellenangaben auf Nachfrage