3D జ్యువెలరీ కస్టమైజర్ మరియు AR అనుభవం

హై-ఎండ్ జ్యువెలరీ కొనుగోలుదారులకు కేవలం ఫ్లాట్ చిత్రాలు మాత్రమే సరిపోవు. బంగారం కాంతిని ఎలా ప్రతిబింబిస్తుంది లేదా డైమండ్ కట్ నిజ జీవితంలో ఎలా కనిపిస్తుందో వారు చూడాలనుకుంటారు.

నేను మరియు నా బృందం ఒక జ్యువెలరీ క్లయింట్ కోసం ప్రొడక్షన్-రెడీ eCommerce ప్లాట్‌ఫారమ్‌ను రూపొందించాము. మేము ఒక 3D కస్టమైజర్ మరియు Augmented Reality (AR) ట్రై-ఆన్ ఫీచర్‌ను సృష్టించాము. పరికరాలు క్రాష్ అవ్వకుండా మొబైల్ బ్రౌజర్‌లో పనిచేసేలా మేము దీనిని నిర్మించాము.

మేము సాంకేతిక ప్రక్రియను ఎలా నిర్వహించామో ఇక్కడ చూడండి.

The Asset Pipeline

జ్యువెలరీ అనేది భారీ CAD ఫైల్‌లుగా ప్రారంభమవుతుంది. ఈ ఫైల్‌లు తరచుగా 50MB కంటే ఎక్కువగా ఉంటాయి మరియు లక్షలాది పాలీగాన్‌లను కలిగి ఉంటాయి. వీటిని మేము వెబ్‌లో ఉపయోగించలేము. మేము ఒక కస్టమ్ ఆప్టిమైజేషన్ పైప్‌లైన్‌ను రూపొందించాము:

  • Remeshing: క్లీన్ షేప్‌లను అలాగే ఉంచుతూ పాలీగాన్ కౌంట్‌ను తగ్గించడానికి మేము Blenderను ఉపయోగించాము.
  • Baking Details: మేము సంక్లిష్టమైన జియోమెట్రీని 2D Normal Mapsగా మార్చాము. ఇది భారీ ఫైల్‌లను జోడించకుండానే లైటింగ్ వివరంగా కనిపించేలా చేస్తుంది.
  • PBR Texturing: ఉపరితలాలు నిజమైనవిగా కనిపించేలా చూడటానికి మేము roughness మరియు metalness కోసం నిర్దిష్ట మ్యాప్‌లను సెట్ చేసాము.
  • Compression: మేము అసెట్‌లను GLTF/GLB ఫార్మాట్‌లోకి ఎగుమతి చేసాము. 50MB ఫైల్‌లను 2MB కంటే తక్కువకు తగ్గించడానికి మేము Google Draco compressionను ఉపయోగించాము.

The Rendering Engine

వినియోగదారు యొక్క GPUకి నేరుగా కనెక్ట్ చేయడానికి మేము Three.jsని ఉపయోగించాము. లోహాలు లగ్జరీ-గ్రేడ్‌లో కనిపించేలా చేయడానికి, మేము ఒక high-dynamic-range image (HDRI)ని ఎన్విరాన్‌మెంట్ మ్యాప్‌గా మ్యాప్ చేసాము. దీనివల్ల వినియోగదారులు రింగ్‌ను తిప్పుతున్నప్పుడు లోహం రియల్-టైమ్ రిఫ్లెక్షన్‌లను చూపుతుంది.

మేము కోడ్ ద్వారా మెటీరియల్ మార్పులను నిర్వహించాము. వినియోగదారు ఒక లోహాన్ని ఎంచుకున్నప్పుడు, మేము GLTF సీన్‌ను ట్రావర్స్ చేసి రంగు, roughness మరియు metalness విలువలను తక్షణమే అప్‌డేట్ చేస్తాము.

Augmented Reality (AR)

మేము మొబైల్ వినియోగదారుల కోసం డ్యూయల్-ఇంజిన్ వర్క్‌ఫ్లోను అమలు చేసాము:

  • Android: మేము Scene Viewer ఇంటిగ్రేషన్‌ను ఉపయోగించాము.
  • iOS: క్రాస్-ప్లాట్‌ఫారమ్ సపోర్ట్‌ను నిర్ధారించడానికి మేము వెబ్ ప్రమాణాలను ఉపయోగించాము.

The Lesson

ఆధునిక ఫ్రంటెండ్ ఇంజనీరింగ్ అనేది సమర్థవంతమైన పైప్‌లైన్‌లను నిర్మించడం గురించి. మీరు భారీ ఫైల్‌లను తేలికపాటి అసెట్‌లుగా మార్చాలి. హై-ఫిడెలిటీ అనుభవాలు సాధారణ మొబైల్ బ్రౌజర్‌లలో పనిచేసేలా మీరు నిర్ధారించుకోవాలి.

మీరు ఏదైనా ప్రాజెక్ట్‌లో ఇంటరాక్టివ్ 3D ఎలిమెంట్స్‌ను నిర్మించారా లేదా WebXRని ఉపయోగించారా? మీ ఆప్టిమైజేషన్ పద్ధతులను కామెంట్లలో నాకు తెలియజేయండి.

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