𝟯𝗗-Schmuck-Konfigurator und AR-Erlebnis

Käufer von High-End-Schmuck benötigen mehr als nur flache Bilder. Sie möchten sehen, wie Gold das Licht reflektiert oder wie ein Diamantschliff in der Realität aussieht.

Mein Team und ich haben eine einsatzbereite E-Commerce-Plattform für einen Schmuckkunden entwickelt. Wir haben einen 3D-Konfigurator und eine Augmented Reality (AR)-Anprobe-Funktion erstellt. Wir haben dies so konzipiert, dass es in einem mobilen Browser läuft, ohne die Geräte zu überlasten.

Hier ist eine Übersicht, wie wir den technischen Prozess bewältigt haben.

Die Asset-Pipeline

Schmuck beginnt als schwere CAD-Dateien. Diese Dateien überschreiten oft 50 MB und enthalten Millionen von Polygonen. Diese können wir im Web nicht verwenden. Wir haben eine maßgeschneiderte Optimierungs-Pipeline entwickelt:

  • Remeshing: Wir haben Blender verwendet, um die Polygonanzahl zu reduzieren und gleichzeitig saubere Formen beizubehalten.
  • Baking von Details: Wir haben komplexe Geometrien in 2D-Normal Maps umgewandelt. Dies lässt die Beleuchtung detailliert erscheinen, ohne schwere Dateien hinzuzufügen.
  • PBR-Texturierung: Wir haben spezifische Maps für Roughness und Metalness festgelegt, um sicherzustellen, dass die Oberflächen echt aussehen.
  • Komprimierung: Wir haben die Assets im GLTF/GLB-Format exportiert. Wir haben die Google Draco-Komprimierung genutzt, um die Dateien von 50 MB auf unter 2 MB zu verkleinern.

Die Rendering-Engine

Wir haben Three.js verwendet, um eine direkte Verbindung zur GPU des Nutzers herzustellen. Um Metalle in Premium-Qualität erscheinen zu lassen, haben wir ein High-Dynamic-Range-Bild (HDRI) als Environment Map eingebunden. Dies ermöglicht es dem Metall, Echtzeit-Reflektionen anzuzeigen, während die Nutzer den Ring drehen.

Materialänderungen haben wir über Code gesteuert. Wenn ein Nutzer ein Metall auswählt, durchlaufen wir die GLTF-Szene und aktualisieren sofort die Werte für Farbe, Roughness und Metalness.

Augmented Reality (AR)

Wir haben einen Dual-Engine-Workflow für mobile Nutzer implementiert:

  • Android: Wir haben die Scene Viewer-Integration genutzt.
  • iOS: Wir haben Webstandards genutzt, um plattformübergreifende Unterstützung zu gewährleisten.

Die wichtigste Erkenntnis

Modernes Frontend-Engineering bedeutet, effiziente Pipelines aufzubauen. Man muss schwere Dateien in leichtgewichtige Assets umwandeln. Man muss sicherstellen, dass High-Fidelity-Erlebnisse in Standard-Mobilbrowsern funktionieren.

Haben Sie schon einmal interaktive 3D-Elemente gebaut oder WebXR in einem Projekt verwendet? Schreiben Sie mir Ihre Optimierungsmethoden in die Kommentare.

Quelle: https://dev.to/tharul/engineering-a-3d-customizer-ar-experience-for-a-jewelry-ecommerce-web-app-2fn4