3D நகை தனிப்பயனாக்கி மற்றும் AR அனுபவம்

உயர்தர நகை வாங்குபவர்களுக்கு வெறும் தட்டையான படங்கள் மட்டும் போதாது. தங்கம் ஒளியை எவ்வாறு பிரதிபலிக்கிறது அல்லது வைரத்தின் வெட்டு (diamond cut) நிஜ வாழ்க்கையில் எப்படி இருக்கும் என்பதை அவர்கள் பார்க்க விரும்புகிறார்கள்.

நானும் எனது குழுவும் ஒரு நகை வாடிக்கையாளருக்காகத் தயார் நிலையில் உள்ள (production-ready) ஒரு eCommerce தளத்தை உருவாக்கினோம். நாங்கள் ஒரு 3D தனிப்பயனாக்கி (customizer) மற்றும் Augmented Reality (AR) மூலம் அணிந்து பார்க்கும் (try-on) வசதியை உருவாக்கினோம். சாதனங்கள் செயலிழக்காமல் (crashing) மொபைல் உலாவியிலேயே (mobile browser) இயங்கும் வகையில் இதை நாங்கள் உருவாக்கினோம்.

தொழில்நுட்பச் செயல்பாட்டை நாங்கள் எவ்வாறு கையாண்டோம் என்பது இதோ.

The Asset Pipeline

நகைகளின் வடிவமைப்பு கனமான CAD கோப்புகளாகத் தொடங்குகிறது. இந்த கோப்புகள் பெரும்பாலும் 50MB-க்கும் அதிகமாகவும், மில்லியன் கணக்கான பாலிகோன்களைக் (polygons) கொண்டிருக்கலாம். இவற்றை இணையத்தில் பயன்படுத்த முடியாது. எனவே, நாங்கள் ஒரு பிரத்யேக மேம்படுத்தல் பைப்லைனை (custom optimization pipeline) உருவாக்கினோம்:

  • Remeshing: வடிவங்கள் சிதையாமல் இருக்கும் அதே வேளையில், பாலிகோன் எண்ணிக்கையைக் குறைக்க நாங்கள் Blender-ஐப் பயன்படுத்தினோம்.
  • Baking Details: சிக்கலான வடிவியலை (complex geometry) 2D Normal Maps-ஆக மாற்றினோம். இது கனமான கோப்புகளைச் சேர்க்காமல், வெளிச்சம் மிகவும் நுணுக்கமாகத் தெரிய உதவுகிறது.
  • PBR Texturing: மேற்பரப்புகள் உண்மையாகத் தெரிவதை உறுதி செய்ய, roughness மற்றும் metalness ஆகியவற்றிற்காக குறிப்பிட்ட மேப்புகளை (maps) அமைத்தோம்.
  • Compression: அசெட்களை GLTF/GLB வடிவத்திற்கு மாற்றினோம். 50MB அளவிலான கோப்புகளை 2MB-க்கும் குறைவாகச் சுருக்க Google Draco compression-ஐப் பயன்படுத்தினோம்.

The Rendering Engine

பயனரின் GPU உடன் நேரடியாக இணைக்க நாங்கள் Three.js-ஐப் பயன்படுத்தினோம். உலோகங்கள் ஆடம்பரத் தரத்தில் (luxury-grade) தெரிவதற்காக, ஒரு high-dynamic-range image (HDRI)-ஐ environment map-ஆகப் பயன்படுத்தினோம். இது பயனர்கள் மோதிரத்தைச் சுழற்றும்போது, உலோகம் நிகழ்நேரப் பிரதிபலிப்புகளைக் (real-time reflections) காட்டுவதை அனுமதிக்கிறது.

மெட்டீரியல் மாற்றங்களை நாங்கள் குறியீடு (code) மூலம் கையாண்டோம். ஒரு பயனர் ஒரு உலோகத்தைத் தேர்ந்தெடுக்கும்போது, நாங்கள் GLTF காட்சியை (scene) ஆய்வு செய்து (traverse), நிறம், roughness மற்றும் metalness மதிப்புகளை உடனடியாகப் புதுப்பிக்கிறோம்.

Augmented Reality (AR)

மொபைல் பயனர்களுக்காக நாங்கள் ஒரு இரட்டை என்ஜின் பணிப்பாய்வை (dual-engine workflow) செயல்படுத்தினோம்:

  • Android: நாங்கள் Scene Viewer ஒருங்கிணைப்பைப் (integration) பயன்படுத்தினோம்.
  • iOS: குறுக்குத் தள ஆதரவை (cross-platform support) உறுதி செய்ய நாங்கள் இணையத் தரநிலைகளைப் (web standards) பயன்படுத்தினோம்.

The Lesson

நவீன முன்பக்கப் பொறியியல் (frontend engineering) என்பது திறமையான பைப்லைன்களை உருவாக்குவதைப் பற்றியது. நீங்கள் கனமான கோப்புகளை இலகுவான அசெட்களாக மாற்ற வேண்டும். தரமான (high-fidelity) அனுபவங்கள் சாதாரண மொபைல் உலாவிகளில் இயங்குவதை நீங்கள் உறுதி செய்ய வேண்டும்.

நீங்கள் ஏதேனும் ஒரு திட்டத்தில் ஊடாடும் (interactive) 3D கூறுகளை உருவாக்கியுள்ளீர்களா அல்லது WebXR பயன்படுத்தியுள்ளீர்களா? உங்கள் மேம்படுத்தல் முறைகளை (optimization methods) கருத்துப் பெட்டியில் (comments) என்னிடம் சொல்லுங்கள்.

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