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

ಉನ್ನತ ಮಟ್ಟದ ಆಭರಣ ಖರೀದಿದಾರರಿಗೆ ಕೇವಲ ಫ್ಲಾಟ್ ಚಿತ್ರಗಳಿಗಿಂತ ಹೆಚ್ಚಿನದರ ಅಗತ್ಯವಿದೆ. ಚಿನ್ನವು ಬೆಳಕನ್ನು ಹೇಗೆ ಪ್ರತಿಫಲಿಸುತ್ತದೆ ಅಥವಾ ವಜ್ರದ ಕಟ್ (cut) ನಿಜ ಜೀವನದಲ್ಲಿ ಹೇಗೆ ಕಾಣಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಅವರು ನೋಡಲು ಬಯಸುತ್ತಾರೆ.

ನನ್ನ ತಂಡ ಮತ್ತು ನಾನು ಜ್ಯುವೆಲ್ಲರಿ ಕ್ಲೈಂಟ್‌ಗಾಗಿ ಪ್ರೊಡಕ್ಷನ್-ರೆಡಿ ಇ-ಕಾಮರ್ಸ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಅನ್ನು ನಿರ್ಮಿಸಿದ್ದೇವೆ. ನಾವು 3D ಕಸ್ಟಮೈಜರ್ ಮತ್ತು ಆಗ್ಮೆಂಟೆಡ್ ರಿಯಾಲಿಟಿ (AR) ಟ್ರೈ-ಆನ್ ಫೀಚರ್ ಅನ್ನು ರಚಿಸಿದ್ದೇವೆ. ಸಾಧನಗಳು (devices) ಕ್ರ್ಯಾಶ್ ಆಗದಂತೆ ಮೊಬೈಲ್ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಕೆಲಸ ಮಾಡುವಂತೆ ನಾವು ಇದನ್ನು ನಿರ್ಮಿಸಿದ್ದೇವೆ.

ನಾವು ತಾಂತ್ರಿಕ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸಿದೆವು ಎಂಬುದು ಇಲ್ಲಿದೆ.

The Asset Pipeline

ಆಭರಣಗಳು ಆರಂಭದಲ್ಲಿ ಭಾರೀ CAD ಫೈಲ್‌ಗಳಾಗಿರುತ್ತವೆ. ಈ ಫೈಲ್‌ಗಳು ಹೆಚ್ಚಾಗಿ 50MB ಮೀರಿರುತ್ತವೆ ಮತ್ತು ಲಕ್ಷಾಂತರ ಪಾಲಿಗಾನ್‌ಗಳನ್ನು (polygons) ಹೊಂದಿರುತ್ತವೆ. ಇವುಗಳನ್ನು ನಾವು ವೆಬ್‌ನಲ್ಲಿ ಬಳಸಲು ಸಾಧ್ಯವಿಲ್ಲ. ನಾವು ಒಂದು ಕಸ್ಟಮ್ ಆಪ್ಟಿಮೈಸೇಶನ್ ಪೈಪ್‌ಲೈನ್ ಅನ್ನು ನಿರ್ಮಿಸಿದ್ದೇವೆ:

  • 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 ಚಿತ್ರವನ್ನು (HDRI) ಎನ್ವಿರಾನ್ಮೆಂಟ್ ಮ್ಯಾಪ್ ಆಗಿ ಬಳಸಿದೆವು. ಇದು ಬಳಕೆದಾರರು ಉಂಗುರವನ್ನು ತಿರುಗಿಸುವಾಗ ಲೋಹವು ನೈಜ-ಸಮಯದ ಪ್ರತಿಫಲನಗಳನ್ನು (real-time reflections) ತೋರಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ನಾವು ಕೋಡ್ ಮೂಲಕ ಮೆಟೀರಿಯಲ್ ಬದಲಾವಣೆಗಳನ್ನು ನಿರ್ವಹಿಸಿದೆವು. ಬಳಕೆದಾರರು ಲೋಹವನ್ನು ಆಯ್ಕೆ ಮಾಡಿದಾಗ, ನಾವು GLTF ಸೀನ್ ಅನ್ನು ಟ್ರಾವರ್ಸ್ (traverse) ಮಾಡುತ್ತೇವೆ ಮತ್ತು ಬಣ್ಣ, 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