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/
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.
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.
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.
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.
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
Browser
WebGL 1 Unterstützung ab
WebGL 2 Unterstützung ab
Google Chrome Desktop
2011 (Jahr)
V56
Firefox Desktop
V4.0
V51
Safari Desktop
V6.0 (ab V8 automatisch aktiviert)
V12
Opera Desktop
V11 & V12 (2014 deaktiviert
V43
Internet Explorer Desktop
IE11 (teilweise ~97%)
Microsoft Edge
V10240
kurzfristig geplant
Firefox Mobile
V4 (nur Android)
Google Chrome Mobile
V25 (ab V 30 automatisch aktiviert)
Opera Mobile
V12 (nur Android)
Safari Mobile
iOS 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.
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:
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…)
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
Browser
WebGL 1 Unterstützung ab
WebGL 2 Unterstützung ab
Google Chrome Desktop
2011 (Jahr)
V56
Firefox Desktop
V4.0
V51
Safari Desktop
V6.0 (ab V8 automatisch aktiviert)
V12
Opera Desktop
V11 & V12 (2014 deaktiviert
V43
Internet Explorer Desktop
IE11 (teilweise ~97%)
Microsoft Edge
V10240
kurzfristig geplant
Firefox Mobile
V4 (nur Android)
Google Chrome Mobile
V25 (ab V 30 automatisch aktiviert)
Opera Mobile
V12 (nur Android)
Safari Mobile
iOS 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.
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:
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.
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…
