𝟯𝗗-sieradenconfigurator en 𝗔𝗥-ervaring

Kopers van high-end sieraden hebben meer nodig dan alleen platte afbeeldingen. Ze willen zien hoe goud het licht reflecteert of hoe een diamantslijpvorm er in het echt uitziet.

Mijn team en ik hebben een productiebestendig e-commerceplatform gebouwd voor een sieradenklant. We hebben een 3D-configurator en een Augmented Reality (AR) 'try-on'-functie ontwikkeld. We hebben dit zo gebouwd dat het in een mobiele browser werkt zonder dat apparaten vastlopen.

Hieronder lees je hoe we het technische proces hebben aangepakt.

De Asset Pipeline

Sieraden beginnen als zware CAD-bestanden. Deze bestanden overschrijden vaak de 50 MB en bevatten miljoenen polygonen. Deze kunnen we niet op het web gebruiken. We hebben een aangepaste optimalisatie-pipeline gebouwd:

  • Remeshing: We hebben Blender gebruikt om het aantal polygonen te verminderen terwijl de vormen strak bleven.
  • Baking Details: We hebben complexe geometrie omgezet in 2D Normal Maps. Hierdoor ziet de verlichting er gedetailleerd uit zonder zware bestanden toe te voegen.
  • PBR Texturing: We hebben specifieke maps ingesteld voor roughness en metalness om ervoor te zorgen dat oppervlakken er echt uitzien.
  • Compressie: We hebben assets geëxporteerd naar het GLTF/GLB-formaat. We hebben Google Draco-compressie gebruikt om bestanden te verkleinen van 50 MB naar minder dan 2 MB.

De Rendering Engine

We hebben Three.js gebruikt om direct verbinding te maken met de GPU van de gebruiker. Om metalen een luxe uitstraling te geven, hebben we een high-dynamic-range image (HDRI) als environment map toegepast. Hierdoor vertoont het metaal realtime reflecties terwijl gebruikers de ring draaien.

We hebben materiaalaanpassingen via code afgehandeld. Wanneer een gebruiker een metaal selecteert, doorlopen we de GLTF-scene en updaten we onmiddellijk de waarden voor kleur, roughness en metalness.

Augmented Reality (AR)

We hebben een workflow met twee engines geïmplementeerd voor mobiele gebruikers:

  • Android: We hebben Scene Viewer-integratie gebruikt.
  • iOS: We hebben webstandaarden gebruikt om cross-platform ondersteuning te garanderen.

De Les

Moderne frontend engineering draait om het bouwen van efficiënte pipelines. Je moet zware bestanden omzetten in lichtgewicht assets. Je moet ervoor zorgen dat high-fidelity ervaringen werken in standaard mobiele browsers.

Heb jij interactieve 3D-elementen gebouwd of WebXR gebruikt in een project? Laat me je optimalisatiemethoden weten in de reacties.

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