𝗖𝗼𝗻𝗳𝗶𝗴𝘂𝗿𝗮𝘁𝗼𝗿𝗲 𝗝𝗲𝘄𝗲𝗹𝗿𝘆 𝟯𝗗 𝗲𝗱 𝗘𝘀𝗽𝗲𝗿𝗶𝗲𝗻𝘇𝗮 𝗔𝗥

Gli acquirenti di gioielli di alta gamma hanno bisogno di qualcosa di più di semplici immagini piatte. Vogliono vedere come l'oro riflette la luce o come appare dal vivo il taglio di un diamante.

Il mio team ed io abbiamo costruito una piattaforma eCommerce pronta per la produzione per un cliente nel settore della gioielleria. Abbiamo creato un configuratore 3D e una funzione di prova virtuale in Realtà Aumentata (AR). L'abbiamo progettato per funzionare nei browser mobile senza mandare in crash i dispositivi.

Ecco come abbiamo gestito il processo tecnico.

La Pipeline degli Asset

I gioielli partono come pesanti file CAD. Questi file spesso superano i 50MB e hanno milioni di poligoni. Non possiamo usarli sul web. Abbiamo costruito una pipeline di ottimizzazione personalizzata:

  • Remeshing: Abbiamo usato Blender per ridurre il numero di poligoni mantenendo forme pulite.
  • Baking dei dettagli: Abbiamo trasformato geometrie complesse in Normal Maps 2D. Questo permette di ottenere un'illuminazione dettagliata senza aggiungere file pesanti.
  • Texturing PBR: Abbiamo impostato mappe specifiche per roughness e metalness per garantire che le superfici sembrino reali.
  • Compressione: Abbiamo esportato gli asset in formato GLTF/GLB. Abbiamo utilizzato la compressione Google Draco per ridurre i file da 50MB a meno di 2MB.

Il Motore di Rendering

Abbiamo usato Three.js per connetterci direttamente alla GPU dell'utente. Per far apparire i metalli di alta gamma, abbiamo mappato un'immagine ad alta gamma dinamica (HDRI) come mappa ambientale. Ciò consente al metallo di mostrare riflessi in tempo reale mentre gli utenti ruotano l'anello.

Abbiamo gestito i cambiamenti dei materiali tramite codice. Quando un utente seleziona un metallo, attraversiamo la scena GLTF e aggiorniamo istantaneamente i valori di colore, roughness e metalness.

Realtà Aumentata (AR)

Abbiamo implementato un workflow a doppio motore per gli utenti mobile:

  • Android: Abbiamo utilizzato l'integrazione con Scene Viewer.
  • iOS: Abbiamo utilizzato gli standard web per garantire il supporto cross-platform.

La Lezione

L'ingegneria frontend moderna consiste nel costruire pipeline efficienti. Bisogna convertire file pesanti in asset leggeri. Bisogna garantire che esperienze ad alta fedeltà funzionino sui comuni browser mobile.

Hai mai costruito elementi 3D interattivi o usato WebXR in un progetto? Raccontami i tuoi metodi di ottimizzazione nei commenti.

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