3D - Spiel mit der Technik, Tekom 2016

3D – Spiel mit der Technik

Neue Möglichkeiten in der 3D-Darstellung

Ergebnisse einer Untersuchung

C2, 2/F32

Vorstellung Agenda

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

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

Vorstellung Fachhochschule Wels Fakultäten der FH Oberösterreich

> HAGENBERG

Informatik, Medien, Kommunikation

> LINZ

Medizintechnik und Angewandte Sozialwissenschaften

> STEYR

Management

> WELS

Technik & Angewandte Naturwissenschaften

Vorstellung Fachhochschule Wels Fakultät für Technik & Angewandte Naturwissenschaften in Wels

Vorstellung Fachhochschule Wels Produktdesign und Technische Kommunikation

Vorstellung door2solution Vorstellung 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

1) Vorstellung

2) Projekte und Ziele

3) HTML5 / WebGL

4) Autodesk Forge




8) Zusammenfassung

9) Fragen

10) Links

Agenda

Vorstellung Fachhochschule Wels Projekt 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?

● 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)


● 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

Vorstellung

1) Vorstellung


3) HTML5 / WebGL

4) Autodesk Forge




8) Zusammenfassung

9) Fragen

10) Links

Agenda

Vorstellung HTML5 / 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]

Vorstellung HTML5 / WebGL

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)

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

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.

HTML5 / WebGL - Frontend

(2) Steuerung im Browser:

three.jsJavascript 3D librarythreejs.org

BabylonJS3D engine based on WebGL/Web Audio and JavaScriptbabylonjs.com

x3dom.orgInstant 3D the HTML WayFraunhofer Institut x3dom.org

ForgeAutodesk 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.Autodeskforge.autodesk.com/platform

Object (.obj) Collada (.dae) JSON(1) Dateiformate: (+ Material)

Vorstellung Agenda

1) Vorstellung


3) HTML5 / WebGL

4) Autodesk Forge




8) Zusammenfassung

9) Fragen

10) Links


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)


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!



Resultate:


Vorstellung Agenda

1) Vorstellung


3) HTML5 / WebGL

4) Autodesk Forge




8) Zusammenfassung

9) Fragen

10) Links


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

Vorstellung Fachhochschule Wels Projekt und Ziele: Welche Tools?

Free-CAD, Blender, Sketch-Up, .. Dassault Composer

3D PDFBabel3D

STEP

3D PDF

ObjectPARASM

Cortona3D

Dassault Composerdoor2parts

2DSVG

3DWebGL

Aufbereitung der Daten - Dassault Composer

Vorstellung Agenda

1) Vorstellung


3) HTML5 / WebGL

4) Autodesk Forge




8) Zusammenfassung

9) Fragen

10) Links

Beispiel einer Anwendung im Maschinenbau:

Die 3D Geometrien können aus dem PLM ergänzend automatisch prozessiert werden

door2parts / WebGL

WebGL

SVG

door2parts / WebGL

Beispiel einer Anwendung im Maschinenbau:

Hinteres Bild: X-Ray Funktion, man sieht die Geometrie ist vollständig erhalten (v.s. entkernen)

Vorstellung 3D PDF v.s. Web-GL

HTML5 Anwendungim Browser

3D PDF

● 3D PDF als Austauschformat geeignet● 3D PDF als Zielformat nicht optimal

Vorstellung Agenda

1) Vorstellung


3) HTML5 / WebGL

4) Autodesk Forge




8) Zusammenfassung

9) Fragen

10) Links

Vorstellung Fachhochschule Wels Rechtliche 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!!

!

Vorstellung Agenda

1) Vorstellung


3) HTML5 / WebGL

4) Autodesk Forge




8) Zusammenfassung

9) Fragen

10) Links

Vorstellung Vor-/ Nachteile PlugIn v.s. HTML5

APP / PlugIn HTML5 mit WebGL

Vo

rtei

leN

ach

teile

● 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

● 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)

Vorstellung Marktentwicklung

WebGL ist nicht 1:1 zum 3D drucken geeignet sondern es ist hier noch eine spezifische Aufbereitung der Daten erforderlich

Vorstellung Anwendungsbereiche 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 | ...

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

Beispiel: Virtual Reality mit Smartphone

Google Cardboard

Vorstellung Google 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!

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

Vorstellung Agenda

1) Vorstellung


3) HTML5 / WebGL

4) Autodesk Forge




8) Zusammenfassung

9) Fragen

10) Links

Fragen?

Stellen Sie bitte Ihre Frage, wir fragen dann bei Google nach

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

[email protected]

+43 1 997113300

http://visu03.honestly.de

Vorstellung Ausgewä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.comgenaue Quellenangaben auf Nachfrage

http://dor2solution.at

http://dor2solution.at

http://www.solidsolutions.ch/

http://www.cad.at/

http://www.solidsolutions.ch/

https://www.khronos.org

https://www.khronos.org

http://www.iso.org/iso/catalogue_detail.htm?csnumber=59902



http://www.babylonjs.com/Demos/SIMD/



http://carvisualizer.plus360degrees.com/threejs/



http://www.cortona3d.com/de/cortona3d-solo



3D - Spiel mit der Technik, Tekom 2016

Engineering

Transcript of 3D - Spiel mit der Technik, Tekom 2016