Vortrag Uni-Bayreuth K-Tag 2021

theorie3.De – Andreas Vogel

  • gegründet 2005
  • jahrelange Erfahrung aus dem 3D-CAD und Viewing Bereich gearbeitet bei/für:
    • Autodesk
    • Actify
    • Adobe
    • Tetra4D
  • Spezialisiert auf 3D in der technischen Dokumentation
  • Seit 2005 3D-PDF
  • Seit kurzem WebGL
  • Lösungen basierend auf Standards, aber nicht von der Stange

3D-PDF

Herausstellungsmerkmale:

  • Darstellung von 3D-CAD-Daten integriert in ein PDF auch im freien Adobe Reader (fast überall installiert)
  • Vielfältige Konvertierungsmöglichkeiten
    • ursprünglich Adobe Acrobat 3D
    • zwischenzeitlich viele andere Lösungen zur Erstellung
    • auch direkter Export aus den meisten CAD-Systemen
  • PDFs sind bereits in den meisten Unternehmensprozessen integriert
  • Übliche PDF-Funktionen wie Formularfelder können wie gewohnt genutzt/kombiniert werden
  • Große Anpassungsmöglichkeit über JavaScript
    • jedes PDF kann zu einem eigenen „CAD-Viewer“ werden mit genau den Funktionen die der Endnutzer braucht, und auch nur diese

Problem:

Auf Mobilgeräten kaum nutzbar, da zu wenige Anwendungen 3D PDF unterstützen (auch Adobe Reader auf mobil nicht…)


Softwarelösungen die wir anbieten:


Tetra4D – im Einzelnen


Beispiele

3D PDF Beispiele (auch zu Simlab…)

Tetra4D Automate HTML Monolithisch für lokale Ausführung (Download)

Tetra4D Automate HTML als universeller Viewer


Hintergründe zu WebGL

Federführend bei den Entwicklungen ist die Khronos Group (Industrikonsortium aus bspw. AMD, Intel, NVIDIA, SGI, Apple, Microsoft, Oracle – kümmert sich um offene Standards – weitere Infos…)

  • 2011: Erste offizielle Version wird vorgestellt
  • 2012: Autodesk kündigt an die meisten ihrer Applikationen in die Cloud zu portieren. Diese Laufen auf lokalen WebGL Clients
  • 2017: WebGL 2 (basierend auf OpenGL ES3)

Browserunterstützung

BrowserWebGL 1 Unterstützung abWebGL 2 Unterstützung ab
Google Chrome Desktop2011 (Jahr)V56
Firefox Desktop V4.0V51
Safari Desktop V6.0 (ab V8 automatisch aktiviert)V12
Opera Desktop V11 & V12 (2014 deaktiviertV43
Internet Explorer Desktop IE11 (teilweise ~97%)
Microsoft EdgeV10240kurzfristig geplant
Firefox MobileV4 (nur Android)
Google Chrome MobileV25 (ab V 30 automatisch aktiviert)
Opera MobileV12 (nur Android)
Safari MobileiOS 8

Und übrigens wie im Beispiel oben drüber zum Download gezeigt (Tetra4D Automate HTML Monolithisch für lokale Ausführung) sind die HTML-Dateien mit WebGL Inhalt auch lokal, also ohne Server lauffähig.


Und jetzt noch ein wenig Animation im „3D-HTML“…

Basierend auf dem three.js Open Source SDK/JavaScript-Framework habe ich einen Importer geschrieben, der ein Beispiel aus dem XVL Studio 3D CAD Corel Edition (oder nur kurz XVL-Studio) in den three.js-Editor importiert.

Das Modell, respektive die Exportdaten (Modell als VRML/WRL und zwei CSV-Dateien, welche die Animationsbeschreibung enthalten) wurden mir dankenswerter Weise von der Firma Salzer3D basierend auf den Anforderungen eines gemeinsamen Kunden zur Verfügung gestellt.

Da es durchaus interessant ist wie dort die Animationserstellung erfolgt, hier ein kurzes Video dazu:

Wenn Sie das, was ich Ihnen Live gezeigt habe selbst ausprobieren möchten, dann sind hier die Daten dazu, bzw. eine kurze Anleitung.

  • Sie benötigen folgende Daten (hier als ZIP downloaden):
    • Geometrie: TT-4000 Engine_Mat.wrl
    • Prozessablauf: TT-4000 Engine_Mat_Erstellungsobjektgruppenliste.csv
    • Definition der Animationsgruppen: TT-4000 Engine_Mat_Prozess.csv
  • Den three.js-Editor auf unserer Seite haben wir ein wenig überarbeitet, und daher können Sie nun über:
    • Menüleiste => File => Import XVL Animation
    • Hier können Sie gleich alle 3 Dateien auswählen, wobei ein Importieren nacheinander auch möglich ist. Die Reihenfolge ist dabei vollkommen egal.
    • Klicken Sie dann in der Menüleiste => File => Integrate XVL Animation in Scene
    • Dann könnten Sie das ganze Modell in der rechten Seitenleiste im Reiter Szene noch um 90 Grad um die X-Achse drehen (Hilft sehr beim ordentlichen navigieren im 3D. Bedienung linke, rechte- Maustaste und Rädchen für drehen, verschieben und zoomen)
  • In der Menüleiste => Add können Sie dann sinnvollerweise noch ein paar Lichter hinzufügen
  • Gerne ändern Sie auch in der rechten Seitenleiste unter Material die Farben und das Material der Bauteile
  • Zum Abspielen der Animation können Sie ebenfalls in der rechten Seitenleiste im Reiter Animation play drücken
  • Um die Datei als JSON File zu exportieren gehen Sie wieder in der Menüleiste über File => Publish
  • Die JSON Datei können Sie dann in einigen bereits frei verfügbaren Playern integrieren, die hierfür dann wieder in die Webseite eingebaut werden müssen (irgendwoher muss die Steuerung ja kommen)

Übrigens ganz wichtig!!! Die Daten bleiben dabei auf Ihrem Rechner. Diese werden nur in die „JavaScript Engine“ auf der Webseite geladen. Aber nur in ihrem lokalen Browser. Dort wird alle in eine SQLite Datenbank (Oder adäquate DB je nach Browser) geladen

Weiterhin finden Sie hier die Links zu den Ergebnisseiten, die nur als erste Ideen für die mögliche Einbindung von WebGL Elementen in bestehende HTML-Seiten/Dokumente dienen sollen:

Einbindung ganz einfach zwischen Textblöcken

Einbindung in eine Slideshow

Und noch ein paar allgemeine WebGL Standardbeispiele zum Ausprobieren

Und nun?

Wenn Sie bereits eigene XVL-Daten haben, und es mit Ihren Daten ausprobieren möchten, sind ein paar Dinge zu beachten. => Melden Sie sich einfach bei mir.

Wenn Sie eigene Ideen haben, und wissen möchten, ob diese umsetzbar sind => Melden Sie sich einfach bei mir.

Wenn Sie doch erst einmal noch mehr zu 3D-PDF wissen möchten. => Melden Sie sich bei mir.

Wie Sie erkennen können, würde ich mich freuen, wenn Sie sich bei mir melden, und wenn es auch nur ist um Feedback zu geben.

Vielen Dank,

Andreas Vogel

andreas.vogel@theorie3.de

0179-7074451

theorie3.De – Andreas Vogel

  • gegründet 2005
  • jahrelange Erfahrung aus dem 3D-CAD und Viewing Bereich gearbeitet bei/für:
    • Autodesk
    • Actify
    • Adobe
    • Tetra4D
  • Spezialisiert auf 3D in der technischen Dokumentation
  • Seit 2005 3D-PDF
  • Seit kurzem WebGL
  • Lösungen basierend auf Standards, aber nicht von der Stange

3D-PDF

Herausstellungsmerkmale:

  • Darstellung von 3D-CAD-Daten integriert in ein PDF auch im freien Adobe Reader (fast überall installiert)
  • Vielfältige Konvertierungsmöglichkeiten
    • ursprünglich Adobe Acrobat 3D
    • zwischenzeitlich viele andere Lösungen zur Erstellung
    • auch direkter Export aus den meisten CAD-Systemen
  • PDFs sind bereits in den meisten Unternehmensprozessen integriert
  • Übliche PDF-Funktionen wie Formularfelder können wie gewohnt genutzt/kombiniert werden
  • Große Anpassungsmöglichkeit über JavaScript
    • jedes PDF kann zu einem eigenen „CAD-Viewer“ werden mit genau den Funktionen die der Endnutzer braucht, und auch nur diese

Problem:

Auf Mobilgeräten kaum nutzbar, da zu wenige Anwendungen 3D PDF unterstützen (auch Adobe Reader auf mobil nicht…)


Softwarelösungen die wir anbieten:


Tetra4D – im Einzelnen


Beispiele

3D PDF Beispiele (auch zu Simlab…)

Tetra4D Automate HTML Monolithisch für lokale Ausführung (Download)

Tetra4D Automate HTML als universeller Viewer


Hintergründe zu WebGL

Federführend bei den Entwicklungen ist die Khronos Group (Industrikonsortium aus bspw. AMD, Intel, NVIDIA, SGI, Apple, Microsoft, Oracle – kümmert sich um offene Standards – weitere Infos…)

  • 2011: Erste offizielle Version wird vorgestellt
  • 2012: Autodesk kündigt an die meisten ihrer Applikationen in die Cloud zu portieren. Diese Laufen auf lokalen WebGL Clients
  • 2017: WebGL 2 (basierend auf OpenGL ES3)

Browserunterstützung

BrowserWebGL 1 Unterstützung abWebGL 2 Unterstützung ab
Google Chrome Desktop2011 (Jahr)V56
Firefox Desktop V4.0V51
Safari Desktop V6.0 (ab V8 automatisch aktiviert)V12
Opera Desktop V11 & V12 (2014 deaktiviertV43
Internet Explorer Desktop IE11 (teilweise ~97%)
Microsoft EdgeV10240kurzfristig geplant
Firefox MobileV4 (nur Android)
Google Chrome MobileV25 (ab V 30 automatisch aktiviert)
Opera MobileV12 (nur Android)
Safari MobileiOS 8

Und übrigens wie im Beispiel oben drüber zum Download gezeigt (Tetra4D Automate HTML Monolithisch für lokale Ausführung) sind die HTML-Dateien mit WebGL Inhalt auch lokal, also ohne Server lauffähig.


Und jetzt noch ein wenig Animation im „3D-HTML“…

Basierend auf dem three.js Open Source SDK/JavaScript-Framework habe ich einen Importer geschrieben, der ein Beispiel aus dem XVL Studio 3D CAD Corel Edition (oder nur kurz XVL-Studio) in den three.js-Editor importiert.

Das Modell, respektive die Exportdaten (Modell als VRML/WRL und zwei CSV-Dateien, welche die Animationsbeschreibung enthalten) wurden mir dankenswerter Weise von der Firma Salzer3D basierend auf den Anforderungen eines gemeinsamen Kunden zur Verfügung gestellt.

Da es durchaus interessant ist wie dort die Animationserstellung erfolgt, hier ein kurzes Video dazu:

Wenn Sie das, was ich Ihnen Live gezeigt habe selbst ausprobieren möchten, dann sind hier die Daten dazu, bzw. eine kurze Anleitung.

  • Sie benötigen folgende Daten (hier als ZIP downloaden):
    • Geometrie: TT-4000 Engine_Mat.wrl
    • Prozessablauf: TT-4000 Engine_Mat_Erstellungsobjektgruppenliste.csv
    • Definition der Animationsgruppen: TT-4000 Engine_Mat_Prozess.csv
  • Den three.js-Editor auf unserer Seite haben wir ein wenig überarbeitet, und daher können Sie nun über:
    • Menüleiste => File => Import XVL Animation
    • Hier können Sie gleich alle 3 Dateien auswählen, wobei ein Importieren nacheinander auch möglich ist. Die Reihenfolge ist dabei vollkommen egal.
    • Klicken Sie dann in der Menüleiste => File => Integrate XVL Animation in Scene
    • Dann könnten Sie das ganze Modell in der rechten Seitenleiste im Reiter Szene noch um 90 Grad um die X-Achse drehen (Hilft sehr beim ordentlichen navigieren im 3D. Bedienung linke, rechte- Maustaste und Rädchen für drehen, verschieben und zoomen)
  • In der Menüleiste => Add können Sie dann sinnvollerweise noch ein paar Lichter hinzufügen
  • Gerne ändern Sie auch in der rechten Seitenleiste unter Material die Farben und das Material der Bauteile
  • Zum Abspielen der Animation können Sie ebenfalls in der rechten Seitenleiste im Reiter Animation play drücken
  • Um die Datei als JSON File zu exportieren gehen Sie wieder in der Menüleiste über File => Publish
  • Die JSON Datei können Sie dann in einigen bereits frei verfügbaren Playern integrieren, die hierfür dann wieder in die Webseite eingebaut werden müssen (irgendwoher muss die Steuerung ja kommen)

Übrigens ganz wichtig!!! Die Daten bleiben dabei auf Ihrem Rechner. Diese werden nur in die „JavaScript Engine“ auf der Webseite geladen. Aber nur in ihrem lokalen Browser. Dort wird alle in eine SQLite Datenbank (Oder adäquate DB je nach Browser) geladen

Weiterhin finden Sie hier die Links zu den Ergebnisseiten, die nur als erste Ideen für die mögliche Einbindung von WebGL Elementen in bestehende HTML-Seiten/Dokumente dienen sollen:

Einbindung ganz einfach zwischen Textblöcken

Einbindung in eine Slideshow

Und noch ein paar allgemeine WebGL Standardbeispiele zum Ausprobieren

Und nun?

Wenn Sie bereits eigene XVL-Daten haben, und es mit Ihren Daten ausprobieren möchten, sind ein paar Dinge zu beachten. => Melden Sie sich einfach bei mir.

Wenn Sie eigene Ideen haben, und wissen möchten, ob diese umsetzbar sind => Melden Sie sich einfach bei mir.

Wenn Sie doch erst einmal noch mehr zu 3D-PDF wissen möchten. => Melden Sie sich bei mir.

Wie Sie erkennen können, würde ich mich freuen, wenn Sie sich bei mir melden, und wenn es auch nur ist um Feedback zu geben.

Vielen Dank,

Andreas Vogel

andreas.vogel@theorie3.de

0179-7074451

0 Kommentare

Hinterlasse einen Kommentar

An der Diskussion beteiligen?
Hinterlasse uns deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert