3D જ્વેલરી કસ્ટમાઇઝર અને AR અનુભવ

હાઈ-એન્ડ જ્વેલરી ખરીદદારોને માત્ર સપાટ (flat) છબીઓ કરતાં વધુની જરૂર હોય છે. તેઓ જોવા માંગે છે કે સોનું પ્રકાશને કેવી રીતે પરાવર્તિત કરે છે અથવા હીરાનું કટ વાસ્તવિક જીવનમાં કેવું દેખાય છે.

મેં અને મારી ટીમે એક જ્વેલરી ક્લાયન્ટ માટે પ્રોડક્શન-રેડી ઈ-કોમર્સ પ્લેટફોર્મ બનાવ્યું છે. અમે 3D કસ્ટમાઇઝર અને ઓગમેન્ટેડ રિયાલિટી (AR) ટ્રાય-ઓન ફીચર બનાવ્યું છે. અમે તેને મોબાઈલ બ્રાઉઝરમાં ઉપકરણોને ક્રેશ કર્યા વગર કામ કરે તે રીતે બનાવ્યું છે.

અમે ટેકનિકલ પ્રક્રિયાનું સંચાલન કેવી રીતે કર્યું તે અહીં છે.

એસેટ પાઇપલાઇન (The Asset Pipeline)

જ્વેલરી ભારે CAD ફાઇલો તરીકે શરૂ થાય છે. આ ફાઇલો ઘણીવાર 50MB થી વધુ હોય છે અને તેમાં લાખો પોલિગોન (polygons) હોય છે. અમે તેને વેબ પર વાપરી શકતા નથી. અમે એક કસ્ટમ ઓપ્ટિમાઇઝેશન પાઇપલાઇન બનાવી:

  • Remeshing: અમે સ્વચ્છ આકારો જાળવી રાખીને પોલિગોન કાઉન્ટ ઘટાડવા માટે Blender નો ઉપયોગ કર્યો.
  • Baking Details: અમે જટિલ ભૂમિતિને (complex geometry) 2D Normal Maps માં રૂપાંતરિત કરી. આ ભારે ફાઇલો ઉમેર્યા વગર લાઇટિંગને વિગતવાર બનાવે છે.
  • PBR Texturing: સપાટી વાસ્તવિક લાગે તે સુનિશ્ચિત કરવા માટે અમે roughness અને metalness માટે ચોક્કસ મેપ્સ સેટ કર્યા.
  • Compression: અમે એસેટ્સને GLTF/GLB ફોર્મેટમાં એક્સપોર્ટ કર્યા. અમે 50MB ની ફાઇલોને 2MB થી ઓછી કરવા માટે Google Draco કમ્પ્રેશનનો ઉપયોગ કર્યો.

રેન્ડરિંગ એન્જિન (The Rendering Engine)

અમે યુઝરના GPU સાથે સીધું જોડાવા માટે Three.js નો ઉપયોગ કર્યો. ધાતુઓને લક્ઝરી-ગ્રેડ દેખાડવા માટે, અમે એન્વાયરમેન્ટ મેપ તરીકે હાઈ-ડાયનેમિક-રેન્જ ઈમેજ (HDRI) મેપ કરી. આનાથી જ્યારે યુઝર્સ રિંગ ફેરવે છે ત્યારે ધાતુ રીઅલ-ટાઇમ રિફ્લેક્શન બતાવી શકે છે.

અમે કોડ દ્વારા મટીરીયલના ફેરફારો સંભાળ્યા. જ્યારે યુઝર કોઈ ધાતુ પસંદ કરે છે, ત્યારે અમે GLTF સીનને ટ્રેવર્સ કરીએ છીએ અને રંગ, roughness અને metalness ની કિંમતો તરત જ અપડેટ કરીએ છીએ.

ઓગમેન્ટેડ રિયાલિટી (AR)

અમે મોબાઈલ યુઝર્સ માટે ડ્યુઅલ-એન્જિન વર્કફ્લો અમલમાં મૂક્યો:

  • Android: અમે Scene Viewer ઇન્ટિગ્રેશનનો ઉપયોગ કર્યો.
  • iOS: ક્રોસ-પ્લેટફોર્મ સપોર્ટ સુનિશ્ચિત કરવા માટે અમે વેબ સ્ટાન્ડર્ડ્સનો ઉપયોગ કર્યો.

પાઠ (The Lesson)

આધુનિક ફ્રન્ટએન્ડ એન્જિનિયરિંગ એ કાર્યક્ષમ પાઇપલાઇન્સ બનાવવાની બાબત છે. તમારે ભારે ફાઇલોને હળવા (lightweight) એસેટ્સમાં રૂપાંતરિત કરવી જોઈએ. તમારે સુનિશ્ચિત કરવું જોઈએ કે હાઈ-ફિડેલિટી અનુભવો સ્ટાન્ડર્ડ મોબાઈલ બ્રાઉઝર્સ પર કામ કરે.

શું તમે કોઈ પ્રોજેક્ટમાં ઇન્ટરેક્ટિવ 3D એલિમેન્ટ્સ બનાવ્યા છે અથવા WebXR નો ઉપયોગ કર્યો છે? મને કોમેન્ટ્સમાં તમારી ઓપ્ટિમાઇઝેશન પદ્ધતિઓ જણાવો.

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