Google'ın Cihazlar ve Hizmetler Pazarlama (DSM) kuruluşu, akıllı telefonlar, kol saatleri, kulaklıklar, tabletler, akıllı ev cihazları ve ilgili abonelikler gibi çok çeşitli ürünlerin pazara sunma stratejilerini yönetir. Bu ürünlerin tümü hem Google Store hem de dünya çapındaki üçüncü taraf satıcılar aracılığıyla satılır. Kullanıcılar bu ürünler hakkında internette ve fiziksel perakende mağazalarında bilgi edinir.
Bu ekip için sürekli bir zorluk, tüketicileri ve perakendecileri Google donanım ekosisteminin ve gelişmiş yapay zeka deneyimlerinin kullanım alanları ve avantajları hakkında bilgilendirmektir. DSM ekibi, tüketicilerin ürünleri ve işlevleri daha iyi anlamasına yardımcı olmak için bu zorlukların çoğunu gidermek üzere gelişmiş web teknolojisiyle 3D bir sanal alan oluşturdu. Bu örnek olayda, ekibin bu yeni deneyimleri dört kat daha hızlı ve geleneksel dijital öğelerin yarısı maliyetinde kullanıma sunarak müşteriler için nasıl daha sürükleyici bir deneyim oluşturduğunu öğrenebilirsiniz.
Zorluk: Ürün eğitimi
Google donanım ürünlerine yeni başlayan satış temsilcilerini ve müşterileri, birlikte çalışabilirlik ve yapay zeka gibi özelliklerin avantajları konusunda eğitmek maliyetli ve zordur. Geleneksel ürün eğitimi stratejileri, fiziksel ürünler kullanılarak üretilen ve ardından dijital öğrenme platformlarında barındırılan dijital içeriklere dayanır. Bu öğrenme platformları, ürün teknik özelliklerini, resimlerini ve videolarını sağlar ancak fiziksel veya bağlı ürünlere erişim sağlamaz.
Video gibi eğitim içeriklerinin üretimi pahalıdır, dünya pazarları için yerelleştirilmesi karmaşıktır ve ürünler arasında yeniden kullanılması neredeyse imkansızdır. İlk öğeleri oluşturmak için oyuncu seçimi, kıyafet, yer keşfi, yer ücretleri, stüdyo ücretleri, film ekipleri ve post prodüksiyon çalışmaları için bütçe gerekir. Prodüksiyon maliyetleri ve teslim edilecek öğeler de yerelleştirmeyi dikkate almalıdır. Öğeleri, konumları, ürünleri, metni ve yetenekleri değiştirmek, özellikle geleneksel pazarlamanın geniş ölçekte yönetmesi için zordur. Ayrıca, desteklenen ürünlerin çoğunun birkaç ayda bir özellik lansmanı yaptığını düşünürseniz bu öğeler, tamamlandığında zaten eskidir.
Ürün bilgilerini paylaşma konusunda daha iyi yöntemler keşfetme
DSM ekibi, ürün bilgilerini paylaşmanın daha iyi bir yolunu bulmaya çalışırken bir uygulamada VR/AR deneyimlerini denedi. Sonuçlar hem satış noktalarında etkileşimin artması hem de sepet boyutlarının artması açısından umut vericiydi. Ancak uygulama indirmeleri hem satış temsilcileri hem de müşteriler için önemli bir giriş engeli oluşturuyordu. Ayrıca, deneyimin bir uygulamayla sınırlandırılması, store.google.com gibi diğer birinci veya üçüncü taraf mülklerine yerleştirilemeyeceği anlamına geliyordu.
<model-viewer>
ile hafif çözümler
Ürün eğitimi için 3D ürün modellerinin başarısını gören ekip, bu yaklaşımı web'e taşımaya karar verdi. Bunu yapmanın bir yolu, her bir ürünle 3D deneyimler oluşturmak için <model-viewer>
'i kullanmaktır.
<model-viewer>
, modeli kendi sitenizde barındırırken bir web sayfasına 3D model eklemenize olanak tanıyan bir web bileşenidir.
Bu özelliğin nasıl çalıştığını Google Store'daki Pixel Fold sayfasında görebilirsiniz. Burada <model-viewer>
, kullanıcıların Pixel Fold'u çeşitli katlanmış konumlarda herhangi bir açıdan görmelerine olanak tanır. Kamera açıları ve etkileşimli renk varyantları aracılığıyla bir hikaye anlatmak için düğmeler kullanarak 3D modeli HTML kullanıcı deneyiminin geri kalanına entegre etmek kolaydı. <model-viewer>
ile kullanıcılarınıza hayal edebileceğiniz her türlü deneyimi sunabilirsiniz.
3D modelleri oluşturma
3D sanal deneyim geliştirmenin ilk adımı, 3D ürün modellerini oluşturmaktır. DSM ekibi, 3D modellerini CAD'de oluşturdu. Ürün CAD'sini üreten tasarımcılarla yakın bir şekilde çalışarak DSM ekibi, web için optimize edilebilecek düşük poligonlu oluşturma işlemleri dışa aktarabildi. Bu hedefe ulaşmak için kullandıkları en iyi uygulamalardan bazıları aşağıdaki alanlardaydı.
- Geometri:
- Geometrinin (şekil ve ölçek) her açıdan doğru olmasını sağlamaya odaklanın.
- Kenarları pah yapmak için normal haritalar kullanmaktan kaçının.
- Çıkartmaları ayrı geometri olarak oluşturun.
- Renkler ve malzemeler:
- Hedef: Fiziksel mülkleri tutarlı bir şekilde görsel olarak temsil edin.
- Gerçek zamanlı ışıklandırma dinamiklerini göz önünde bulundurun.
- Her ağ türü (Opak, Şeffaf, Çıkartma) için ayrı doku grupları ve malzemeler kullanın.
- Daha fazla düzenleme yapılması gerekiyorsa orijinal CAD tasarımcılarıyla tasarımları tekrarlayın.
- Dosya boyutu:
- Modelin
<model-viewer>
tarafından kullanılabilmesi için GLB biçiminde düşük poligonlu bir model olarak dışa aktarın. - Geometrik ağları bir 3D tasarımcı tarafından, bir tedarikçiyle veya DRACO (OS) gibi sıkıştırma yazılımlarıyla manuel olarak sıkıştırın.
- Modelin
Bu 3D modeller genellikle cep telefonlarında kullanılacağından, eski nesil cihazları ve zayıf internet bağlantılarını desteklemek için 2 MB'lık dokularla maksimum dosya boyutu ayarlanarak optimize edildi.
<model-viewer>
DSM ekibi, yeni oluşturulan 3D modelleri web sayfalarına yerleştirmek için Google'ın <model-viewer>
açık kaynak web bileşenini kullanır. Birinci adımda oluşturulan modellerin <model-viewer>
ile uyumlu olması için öğelerin gITF veya GLB biçiminde (.glb uzantısı) olması gerekir. Her iki biçim de kompakt, sıkıştırılabilir ve GPU'ya hızlı bir şekilde yüklenir. <model-viewer>
bileşeni, tüm büyük sürekli güncellenen tarayıcılar tarafından desteklenir.
Bu adımda DSM ekibinin karşılaştığı en büyük zorluk, Google donanım renk paletinin doğru şekilde oluşturulmamasıdır. Ekip, sonunda kaybolan renklerden ACES ton eşleme (film endüstrisi standardı) özelliğinin sorumlu olduğunu keşfetti. Bu sorunu çözmek için, özellikle bu eksiklikleri gidermek ve renkleri ekranda doğru şekilde göstermek için doğrusal ton eşlemeyle ilişkili aşırı parlak vurgular ve ton kaymalarından kaçınırken yeni bir Khronos PBR nötr ton eşleyici geliştirdiler.
<model-viewer src="Pixel8Pro_Bay_enUS.glb" ar ar-modes="scene-viewer webxr quick-look"
camera-controls poster="poster.webp"
shadow-intensity="1" tone-mapping="commerce"></model-viewer>
<model-viewer>
hakkında daha fazla bilgi edinmek için modelviewer.dev adresini ziyaret edin. 3D modellerinizi test etmek ve başlangıç web sitesinin tamamını indirmek için düzenleyicimizi deneyin.
three.js ile ağır çözümler
<model-viewer>
, tek bir 3D modeli görüntülemek ve bu modelle etkileşime geçmek için mükemmel ve yüksek performanslı bir yöntemdir. Ancak DSM ekibinin bazen <model-viewer>
ile mümkün olandan daha etkileyici ve birbirine bağlı bir web deneyimine ihtiyacı vardı. Nest Mini + C'nin lansmanı buna örnek gösterilebilir. <model-viewer>
, potansiyel müşterilerin web'de bir ürünü 3D olarak deneyimlemelerine olanak tanıyordu ancak diğer Google Donanım ürünleri ve Asistan gibi yapay zeka özellikleriyle birlikte kullanıldığında ne kadar yararlı olduğunu gösteremiyordu.
Ekip bu görev için <model-viewer>
'ün temelini oluşturan three.js kitaplığına başvurdu. Three.js, açık kaynak bir JavaScript oyun motorudur. Ekip, Nest iç mekan kameraları, ışıkları ve hoparlörleri içeren sanal bir ev ortamı için yeniden kullanılabilir öğelerden oluşan bir çerçeve oluşturdu. Bu sayede ekip, cihazların birbirleriyle nasıl etkileşime geçtiğine dair anlık geri bildirim verebilecek bir temele sahip oldu.
Dialogflow
Birbirine bağlı deneyim oluşturmanın son adımı Google Asistan'ı eklemektir. Bu sayede kullanıcılar, birbirine bağlı sanal deneyimle gerçek komutları ve rutinleri deneyebilir. Ancak Google Asistan'ı kullanıcının mevcut hesabından eklemek, bir dizi sorunlu gizlilik sorununa yol açar. DSM, gizliliğe öncelik veren bir çözüm oluşturmak için bu alanda Google Asistan'ı taklit etmek üzere Google Cloud Dialogflow hizmetiyle birlikte çalıştı. Aşağıdaki üst düzey şemada, web uygulamasının Dialogflow'un API'sini nasıl kullandığı gösterilmektedir (Dialogflow Temel Bilgileri'nden uyarlanmıştır). Web uygulaması, her konuşma sırası için Dialogflow'un intent sınıflandırmasını kullandı ve API, intent ile eşleşen önceden belirlenmiş son kullanıcı ifadelerini döndürdü.
Dialogflow hakkında daha fazla bilgi edinmek için Google Cloud belgelerini inceleyin.
Nihai sonuç: Yerleştirilebilir bir iFrame
Sonuç olarak, <model-viewer>
ile bir web sayfasına yerleştirilebilecek veya müşterilerin ürünler ve ürünler arasındaki bağlantılar hakkında daha fazla bilgi edinmesine yardımcı olmak için tam sanal bir ortamda kullanılabilecek bir öğe kitaplığı elde edilir. Bu deneyim hem özgün, ölçeklenebilir hem de uygun maliyetlidir. İlk sanal deneyim Mayıs 2021'de kullanıma sunuldu. Artık Google Store'un web sitesinde yer almıyor olsa da deneyebilirsiniz.
Sonuçlar
Nest Mini +C'nin kullanıma sunulmasından bu yana DSM, Pixel portföyü lansmanlarının son iki yılında bu çerçeveyi yeniden kullanabildiği ve genişletebildiği için başarısını artırmayı başardı. Ekip, bu 3D öğelerin ve deneyimlerin iterasyonunu kullanıma sunarak şu ana kadar etkileşimli ürün eğitimi deneyimlerinin sayısını dört katına, bu web teknolojisinden yararlanan ürün sayısını ise üç katına çıkarmayı başardı.
Sonuç olarak, daha önce kullanılan stratejilere kıyasla daha sürdürülebilir, tutarlı ve etkileşimli bir şekilde, geniş ölçekte kullanım alanlarına yönelik markalı ve özgün bir ürün eğitimi elde edilir. DSM ekibi artık dinamik işletme hedeflerine hızlıca uyum sağlayabilecekleri, etkileyici bir deneyimin güçlü bir bileşen portföyüne sahip. Bu iyileştirmeler sayesinde DSM ekibi, yeni ürün eğitim içeriklerini eski, daha geleneksel süreçlerine kıyasla dört kat daha hızlı ve yarı yarıya daha düşük maliyetle yayınlayabiliyor.