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

Wanunuzi wa mapambo ya kifahari wanahitaji zaidi ya picha bapa. Wanataka kuona jinsi dhahabu inavyoakisi mwanga au jinsi ukataji wa almasi unavyoonekana katika maisha halisi.

Mimi na timu yangu tulijenga jukwaa la eCommerce tayari kwa matumizi ya kibiashara kwa mteja wa mapambo. Tulitengeneza 3D customizer na kipengele cha Augmented Reality (AR) try-on. Tulijenga mfumo huu ili ufanye kazi kwenye kivinjari cha simu bila kusababisha hitilafu kwenye vifaa.

Hivi ndivyo tulivyosimamia mchakato wa kiufundi.

The Asset Pipeline

Mapambo huanza kama faili nzito za CAD. Faili hizi mara nyingi hupita MB 50 na zina mamilioni ya polygons. Hatuwezi kuzitumia kwenye mtandao. Tulijenga mchakato maalum wa uboreshaji (optimization pipeline):

  • Remeshing: Tulitumia Blender kupunguza idadi ya polygons huku tukihifadhi maumbo safi.
  • Baking Details: Tuligeuza jiometri tata kuwa 2D Normal Maps. Hii hufanya mwanga uonekane wenye maelezo mengi bila kuongeza faili nzito.
  • PBR Texturing: Tulisanidi ramani (maps) maalum kwa ajili ya roughness na metalness ili kuhakikisha nyuso zinaonekana halisi.
  • Compression: Tulizitoa mali (assets) katika mfumo wa GLTF/GLB. Tulitumia Google Draco compression kusinyaisha faili kutoka MB 50 hadi chini ya MB 2.

The Rendering Engine

Tulitumia Three.js kuunganishwa moja kwa moja na GPU ya mtumiaji. Ili kufanya metali zionekane za hali ya juu, tulitumia picha ya high-dynamic-range (HDRI) kama ramani ya mazingira (environment map). Hii inaruhusu metali kuonyesha mwangwi (reflections) wa wakati halisi mtumiaji anapozungusha pete.

Tulishughulikia mabadiliko ya nyenzo (materials) kupitia kodi. Mtumiaji anapochagua metali, tunapitia (traverse) mandhari ya GLTF na kusasisha thamani za rangi, roughness, na metalness papo hapo.

Augmented Reality (AR)

Tulitekeleza mfumo wa injini mbili (dual-engine workflow) kwa watumiaji wa simu:

  • Android: Tulitumia Scene Viewer integration.
  • iOS: Tulitumia viwango vya wavuti (web standards) ili kuhakikisha uunganishaji wa majukwaa mbalimbali (cross-platform support).

The Lesson

Uhandisi wa kisasa wa frontend unahusu kujenga michakato (pipelines) yenye ufanisi. Lazima ugeuze faili nzito kuwa mali nyepesi (lightweight assets). Lazima uhakikishe uzoefu wa hali ya juu (high-fidelity experiences) unafanya kazi kwenye vivinjari vya kawaida vya simu.

Je, umewahi kujenga vipengele vya 3D vinavyoingiliana (interactive 3D elements) au kutumia WebXR katika mradi wako? Niambie mbinu zako za uboreshaji (optimization methods) kwenye maoni.

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