3D Mücevher Özelleştirici ve AR Deneyimi

Üst segment mücevher alıcılarının düz görsellerden daha fazlasına ihtiyacı var. Altının ışığı nasıl yansıttığını veya bir pırlanta kesiminin gerçek hayatta nasıl göründüğünü görmek isterler.

Ekibimle birlikte bir mücevher müşterisi için üretime hazır bir e-ticaret platformu geliştirdik. Bir 3D özelleştirici ve Artırılmış Gerçeklik (AR) deneme özelliği oluşturduk. Bunu, cihazları çökertmeden mobil tarayıcılarda çalışacak şekilde tasarladık.

Teknik süreci nasıl yönettiğimizi aşağıda bulabilirsiniz.

Varlık İşleme Hattı (Asset Pipeline)

Mücevherler ağır CAD dosyaları olarak başlar. Bu dosyalar genellikle 50 MB'ı aşar ve milyonlarca poligona sahiptir. Bunları web üzerinde kullanamayız. Özel bir optimizasyon hattı oluşturduk:

  • Remeshing: Temiz şekilleri korurken poligon sayılarını azaltmak için Blender kullandık.
  • Baking Details: Karmaşık geometrileri 2D Normal Map'lere dönüştürdük. Bu, ağır dosyalar eklemeden aydınlatmanın detaylı görünmesini sağlar.
  • PBR Texturing: Yüzeylerin gerçekçi görünmesini sağlamak için pürüzlülük (roughness) ve metaliklik (metalness) için belirli haritalar ayarladık.
  • Compression: Varlıkları GLTF/GLB formatında dışa aktardık. Dosyaları 50 MB'tan 2 MB'ın altına düşürmek için Google Draco sıkıştırmasını kullandık.

İşleme Motoru (Rendering Engine)

Kullanıcının GPU'suna doğrudan bağlanmak için Three.js kullandık. Metallerin lüks segmentte görünmesini sağlamak için bir yüksek dinamik aralıklı görüntüyü (HDRI) ortam haritası (environment map) olarak atadık. Bu, kullanıcılar yüzüğü döndürürken metalin gerçek zamanlı yansımalar göstermesini sağlar.

Malzeme değişikliklerini kod aracılığıyla yönettik. Bir kullanıcı bir metal seçtiğinde, GLTF sahnesini tarıyor ve renk, pürüzlülük ve metaliklik değerlerini anında güncelliyoruz.

Artırılmış Gerçeklik (AR)

Mobil kullanıcılar için çift motorlu bir iş akışı uyguladık:

  • Android: Scene Viewer entegrasyonunu kullandık.
  • iOS: Platformlar arası desteği sağlamak için web standartlarını kullandık.

Ders

Modern frontend mühendisliği, verimli işleme hatları oluşturmakla ilgilidir. Ağır dosyaları hafif varlıklara dönüştürmelisiniz. Yüksek sadakatli (high-fidelity) deneyimlerin standart mobil tarayıcılarda çalışmasını sağlamalısınız.

Bir projede etkileşimli 3D öğeler oluşturdunuz mu veya WebXR kullandınız mı? Optimizasyon yöntemlerinizi yorumlarda bana anlatın.

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