23. Bayreuther 3D-Konstrukteurstag am 14.09.2022

Dieses Jahr findet der 3D-Konstrukteurstag an der Uni in Bayreuth wieder live vor Ort statt.

Und auch wir sind wieder dabei und freuen uns auf interessante Vorträge und spannende Gespräche.

Unser Vortrag dreht sich dieses mal nicht um 3D-PDF, sondern um die Verwendung von Open Source Technologien zum Aufbau eines 3D-Web-Shops.

Wir zeigen hier wie man mit Hilfe der Three.js Bibliothek, sowie dem beliebten Shop-System Woo-Commerce einen Online-Shop aufbauen kann. Über die Interaktion mit 3D-Baugruppen können im Browser Ersatzteile identifiziert und bestellt werden.

Ziel ist es zu erläutern, wie man kostengünstig einen 3D-Ersatzteilshops im Web basierend auf Open Source Standardtechnologien und WebGL seinen Kunden zur Verfügung stellen kann.

Wann:14.09.2022

Wo: Uni Bayreuth

Anmeldung und weitere Infos unter: http://konstrukteurstag.de/

Weitere Aussteller sind:

Vortrag Konstrukteurstag 2022 Uni Bayreuth

Ersatzteildokumentation schnell und einfach – mit 3D im Web

Vor der grauen Theorie schnell mal ausprobieren? Dann los…


Ist die Nutzung von 3D-CAD-Daten für Ersatzteildokumentation überhaupt sinnvoll?

  • Sicherheit der Daten
    • CAD-Daten werden schon auf Grund der Datengröße „ungenau“ verwende
    • Zusatzmechanismen reduzieren nochmals das Risiko des direkten Nachbaus
      • Skalierung/Verzerrung der Geometrie
      • Triangulierung der Oberfläche mit „Rauschen“ versehen
  • Digitale Durchgängigkeit: Vor- und Nachteile
    • Wenn keine Verbindung zwischen Artikeln und CAD Bauteilen hergestellt werden kann, ist eine Umsetzung nur schwer möglich
    • Wenn aber vorhanden, kann man die Vorteile voll nutzen.
  • Jahrelange Erfahrung der Nutzung von 3D-PDF bei unseren Kunden zeigt:
    • geringere Belastung der Service-Hotline
    • weniger Fehler/Fehlbestellungen durch digitale Durchgängigkeit → geringere Standzeiten der Maschinen beim Kunden
    • schnelleres Auffinden, bzw. bessere Identifikation der gesuchten Ersatzteile durch den Endkunden
    • geringerer Aufwand bei der Erstellung der Ersatzteildokumentation, evtl. sogar automatisierbar


Benötigte Werkzeuge – Shop Engine

Wollen Sie im Online Business durchstarten?

Dann sollten Sie sich evtl. mit Shoplösungen der Online Giganten wie Google, Amazon oder auch Adobe beschäftigen.

Wollen Sie hingegen Ihren Kunden eine einfachere / schnellere Ersatzteilbestellung ermöglichen

Dann lesen Sie weiter und verstehen Sie, das es mit einem sehr überschaubaren Aufwand und durch die Nutzung von Open Source Technologien ebenso günstig umsetzbar ist.

Wir haben uns aktuell bei Projekten für Shopware sowie WooCommerce entschieden, da diese in den Top 10 der Shop-Engines stehen, und zudem kostenfreie verwendbar sind.

Unser Demo Beispiel hier auf der Seite ist mit WooCommerce umgesetzt.

Infografik: Magento Nr.1 in stark fragmentiertem Markt | Statista
Mehr Infografiken finden Sie bei Statista

Benötigte Werkzeuge – 3D-CAD-Daten

  • WebGL – die Technologie für 3D Darstellung im Browser Web
    • Federführend Entwickelt von/mit Khronos Group (Industriekonsortium aus bspw. AMD, Intel, NVIDIA, SGI, Apple, Microsoft, Oracle – kümmert sich um offene Standards – weitere Infos…)
    • Seit einigen Jahren in allen wichtigen Browsern verfügbar (nicht MS IE ;-) )
    • threeJS (Open Source Library) wird von uns als Werkzeug eingesetzt zum schnellen Entwickeln des „3D-Viewers“ im Browser  
  • GLTF – Graphics Language Transmission Format (GLB – Binärversion)
    • Das aktuelle Standardformat für die Nutzung von 3D-Daten über WebGL im Browser
  • Konvertierung nativer CAD-Daten nach GLTF
    • Plugins für einige CAD-Systeme zum Export von GLTF
    • Auf Grund unserer Historie verwenden/empfehlen wir die Lösungen von Tetra4D (ursprünglich zum Erstellen von 3D PDFs) zum Konvertieren von nativen CAD-Daten. Diese bieten zudem die Möglichkeit, neben den 3D-HTML-Online Dateien auch eine Offline Variante als 3D-PDF herauszugeben.
Darstellung des Prozesses der Konvertierung nativer CAD-Daten nach GLTF über die Lösungen von Tetra4D Converter und das Serverbasierte Werkzeug Automate

Notwendige Dienstleistungen

Unterschiede in:

  • unternehmensspezifischen Strukturen des CAD-Daten
  • Aufbau des Artikelstamms
  • evtl. bereits bestehende Bestell- sowie Contentmanagement-Systeme, und sonstige Web-Plattformen

…führen zur Notwendigkeit von Anpassungen, wie bei jeder normalen Webseite auch.

Smit kann aber dann auch das volle Potential ausgeschöpft werden.


Komplette Übersicht über die notwendigen Schritte zur Erstellung eines 3D-Ersatzteil-Web-Shops mit allen Technologien, wie auch Datenkonvertierungen. Von CAD, über ERP das GLTF-Format und die Tetra4D-CAD-Konverter, bis hin zum fertigen Web Shop über bspw. WooCommerce oder Shopware, sowie der offline Nutzung von 3D-PDFs

Zusammenfassend kann man also sagen:

  • Die Erstellung eines 3D-Ersatzteil-Web-Shops ist kein Hexenwerk
  • Mit Hilfe von ein paar Open-Source-Technologien schnell und kostengünstig, wie aber auch zukunftssicher umzusetzen
  • Die Technologien sind alle bereits vorhanden und in den Browsern im Spielebereich, oder auch bei CAD-Herstellern wie Autodesk in einigen Online Tools erprobt.
  • Die Browser „sprechen“ alle bereits seit Jahren WebGL (auch auf Mobilgeräten!)

Es spricht also nicht mehr dagegen die Mitarbeiter der eigenen Firma, wie auch die Kunden durch ein einfaches und modernes Ersatzteilwesen effizient zu unterstützen.

Wenn Sie es jetzt noch schnell mal selber ausprobieren möchten, hier geht’s zum Demo-Shop…

Für weitergehende Fragen sowie Feedback freuen wir uns, wenn Sie auf uns zukommen.

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

Adobe deaktiviert Flash endgültig

Nun ist es also soweit. Das totgesagte Flash ist tatsächlich verschwunden. Einst eine Technologie von Macromedia, welche die Interaktivität und das Entertainment im Web so richtig in Schwung brachte, hat Adobe nun zum 01.01.2021 Flash in all seinen Produkten deaktiviert.

Das heißt, dass auch evtl. Flash Plugins im Browser genauso ihren Dienst quittieren, wie beispielsweise auch Flash Inhalte in PDFs nun nicht mehr anzeigbar sind.

Auf Grund häufiger Nachfragen diesbzgl. ist jedoch zu erwähnen, dass 3D Inhalte im PDF grundsätzlich erst einmal nichts mit Flash zu tun hatten, und daher noch immer wie gehabt funktionieren. Gleichwohl ist zu sagen, dass es möglich war auch die 3D Inhalte mit Flash-Funktionen zu erweitern (bspw. ein Flash Vordergrund in dem Menüs angezeigt wurden). Dies Inhalte funktionieren nun natüwlrich auch nicht mehr.

Um gleich weitere Bedenken bzgl. der evtl. ebenfalls in Frage stehenden Möglichkeit von 3D im PDF entgegenzuwirken: 3D im PDF ist bereits in einigen PDF-ISO-Spezifikationen als Standard gesetzt, und daher auch kaum mehr weg zu denken. Ganz im Gegenteil soll ja auch im neuen PDF/A Standard (A = Archivierung) der hoffentlich nun endlich mal verabschiedet wird, das 3D auch ein Teil der Spezifikation werden…