𝟯𝗗 𝗣𝗲𝗻𝘆𝗲𝘀𝘂𝗮𝗶 𝗕𝗮𝗿𝗮𝗻𝗴 𝗞𝗲𝗺𝗮𝘀 𝗱𝗮𝗻 𝗣𝗲𝗻𝗴𝗮𝗹𝗮𝗺𝗮𝗻 𝗔𝗥

Pembeli barang kemas mewah memerlukan lebih daripada sekadar imej rata. Mereka ingin melihat bagaimana emas memantulkan cahaya atau bagaimana potongan berlian kelihatan dalam kehidupan sebenar.

Pasukan saya dan saya telah membina platform e-dagang sedia-produksi untuk seorang pelanggan barang kemas. Kami mencipta penyesuai 3D dan ciri cubaan Augmented Reality (AR). Kami membina ini agar dapat berfungsi dalam pelayar mudah alih tanpa menyebabkan peranti tergendala.

Berikut adalah cara kami menguruskan proses teknikal tersebut.

Pipeline Aset

Barang kemas bermula sebagai fail CAD yang berat. Fail-fail ini sering melebihi 50MB dan mempunyai berjuta-juta poligon. Kami tidak boleh menggunakan fail ini di web. Kami membina pipeline pengoptimuman tersuai:

  • Remeshing: Kami menggunakan Blender untuk mengurangkan bilangan poligon sambil mengekalkan bentuk yang kemas.
  • Baking Details: Kami menukarkan geometri kompleks kepada 2D Normal Maps. Ini menjadikan pencahayaan kelihatan terperinci tanpa menambah fail yang berat.
  • PBR Texturing: Kami menetapkan peta khusus untuk roughness dan metalness bagi memastikan permukaan kelihatan realistik.
  • Compression: Kami mengeksport aset ke format GLTF/GLB. Kami menggunakan mampatan Google Draco untuk mengecilkan saiz fail daripada 50MB kepada bawah 2MB.

Enjin Rendering

Kami menggunakan Three.js untuk menyambung terus ke GPU pengguna. Untuk menjadikan logam kelihatan bertaraf mewah, kami memetakan imej julat dinamik tinggi (HDRI) sebagai peta persekitaran. Ini membolehkan logam menunjukkan pantulan masa nyata semasa pengguna memutar cincin tersebut.

Kami mengendalikan perubahan bahan melalui kod. Apabila pengguna memilih logam, kami menelusuri (traverse) babak GLTF dan mengemas kini nilai warna, roughness, dan metalness secara serta-merta.

Augmented Reality (AR)

Kami melaksanakan aliran kerja dwi-enjin untuk pengguna mudah alih:

  • Android: Kami menggunakan integrasi Scene Viewer.
  • iOS: Kami menggunakan piawaian web untuk memastikan sokongan rentas platform.

Pengajaran

Kejuruteraan frontend moden adalah tentang membina pipeline yang cekap. Anda mesti menukarkan fail berat kepada aset yang ringan. Anda mesti memastikan pengalaman berkesetiaan tinggi (high-fidelity) berfungsi pada pelayar mudah alih standard.

Pernahkah anda membina elemen 3D interaktif atau menggunakan WebXR dalam sesuatu projek? Beritahu saya kaedah pengoptimuman anda di ruangan komen.

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