3D interaktif di web dengan hardware Google: Pengalaman edukasi produk generasi berikutnya

Melissa Mitchell
Melissa Mitchell
Aron Halil
Aron Halil
Bernice Yung
Bernice Yung
Emmett Lalish
Emmett Lalish

Organisasi Pemasaran Perangkat dan Layanan (DSM) Google mengawasi strategi peluncuran untuk berbagai produk: ponsel pintar, smartwatch, earbud, tablet, perangkat smart home, dan langganan yang relevan, yang semuanya tersedia melalui Google Store dan vendor pihak ketiga global. Orang-orang mempelajari produk ini secara online dan di toko retail fisik.

Salah satu tantangan yang terus-menerus dihadapi tim ini adalah mengedukasi konsumen dan retailer tentang kasus penggunaan dan manfaat ekosistem hardware Google serta pengalaman AI lanjutan. Untuk membantu konsumen lebih memahami produk dan fungsinya, tim DSM membuat ruang virtual 3D dengan teknologi web lanjutan untuk mengatasi banyak tantangan ini. Dalam studi kasus ini, Anda dapat mempelajari cara tim menciptakan pengalaman yang lebih imersif bagi pelanggan, meluncurkan pengalaman baru ini empat kali lebih cepat dan dengan biaya setengah dari aset digital tradisional.

Tantangan: edukasi produk

Mengajari staf penjualan dan pelanggan yang baru menggunakan produk hardware Google tentang manfaat fitur seperti interoperabilitas dan AI membutuhkan biaya dan sulit. Strategi edukasi produk tradisional mengandalkan konten digital yang diproduksi menggunakan produk fisik, lalu dihosting di platform pembelajaran digital. Platform pembelajaran ini menyediakan spesifikasi teknis, gambar, dan video produk, tetapi tidak menyediakan akses ke produk fisik atau terhubung.

Konten pembelajaran seperti video mahal untuk diproduksi, rumit untuk dilokalkan bagi pasar global, dan hampir tidak mungkin digunakan kembali di antara produk. Membuat aset awal memerlukan anggaran untuk pemilihan pemain, pakaian, pencarian lokasi, biaya lokasi, biaya studio, kru film, dan pekerjaan pascaproduksi. Biaya produksi dan hasil juga perlu memperhitungkan pelokalan; mengubah aset, lokasi, produk, teks, dan talenta sangat menantang bagi pemasaran tradisional untuk dikelola dalam skala besar. Selain itu, jika Anda mempertimbangkan bahwa sebagian besar produk yang didukung memiliki rilis fitur setiap beberapa bulan, aset ini sudah usang pada saat selesai.

Menjelajahi cara yang lebih baik untuk membagikan informasi produk

Dalam upaya menemukan cara yang lebih baik untuk membagikan informasi produk, tim DSM bereksperimen dengan pengalaman VR/AR di aplikasi. Hasilnya cukup menjanjikan dengan peningkatan engagement dan ukuran keranjang di tempat penjualan. Namun, download aplikasi merupakan hambatan yang signifikan bagi tenaga penjualan dan pelanggan, dan membatasi pengalaman ke aplikasi berarti aplikasi tersebut tidak dapat disematkan di properti pihak pertama atau pihak ketiga lainnya seperti store.google.com.

Solusi ringan dengan <model-viewer>

Setelah melihat kesuksesan model produk 3D untuk edukasi produk, tim memutuskan untuk menghadirkan pendekatan ini ke web. Salah satu cara untuk melakukannya adalah menggunakan <model-viewer> untuk membuat pengalaman 3D dengan setiap produk.

<model-viewer> adalah komponen web, yang memungkinkan Anda menambahkan model 3D secara deklaratif ke halaman web, sekaligus menghosting model di situs Anda sendiri. Anda dapat melihat cara kerjanya di halaman Pixel Fold di Google Store, tempat <model-viewer> memungkinkan pengguna melihat Pixel Fold dari sudut mana pun dengan berbagai posisi lipat. Model 3D mudah diintegrasikan ke dalam UX HTML lainnya, dengan tombol untuk menceritakan kisah melalui sudut kamera dan varian warna interaktif. Dengan <model-viewer>, Anda dapat memberikan pengalaman apa pun kepada pengguna.

Membuat model 3D

Langkah pertama untuk mengembangkan pengalaman virtual 3D adalah membuat model produk 3D. Tim DSM membuat model 3D mereka di CAD. Dengan bekerja sama erat dengan desainer yang memproduksi CAD produk, tim DSM dapat mengekspor render poly rendah yang dapat dioptimalkan untuk web. Beberapa praktik terbaik yang mereka gunakan untuk mencapai hal ini berada di area berikut.

  • Geometri:
    • Fokuslah untuk membuat geometri (bentuk dan skala) akurat dari setiap sudut.
    • Hindari penggunaan peta normal untuk memiringkan tepi.
    • Buat decal sebagai geometri terpisah.
  • Warna dan bahan:
    • Sasaran: representasi visual yang konsisten dari properti fisik.
    • Pertimbangkan dinamika pencahayaan real-time.
    • Gunakan kumpulan tekstur dan material terpisah untuk setiap jenis mesh (Buram, Transparan, Decal).
    • Lakukan iterasi pada desain dengan desainer CAD asli jika perlu penyesuaian lebih lanjut.
  • Ukuran file:
    • Mengekspor sebagai model poli rendah dalam format GLB sehingga model dapat digunakan oleh <model-viewer>.
    • Mengompresi mesh geometris secara manual oleh desainer 3D, dengan vendor, atau melalui software kompresi seperti DRACO (OS).

Karena model 3D ini akan sering digunakan di ponsel, model tersebut dioptimalkan dengan menetapkan ukuran file maksimum dengan tekstur 2 MB, untuk mendukung perangkat generasi lama dan koneksi internet yang lemah.

<model-viewer>

Tim DSM menggunakan komponen web open source <model-viewer> Google untuk menyematkan model 3D yang baru dibuat ke dalam halaman web mereka. Agar model yang dibuat di langkah satu kompatibel dengan <model-viewer>, aset harus dalam format gITF atau GLB (ekstensi .glb). Kedua format tersebut ringkas, dapat dikompresi, dan dimuat dengan cepat ke GPU. Komponen <model-viewer> didukung oleh semua browser utama yang terus-menerus digunakan.

Selama langkah ini, tantangan terbesar yang dihadapi tim DSM adalah palet warna hardware Google tidak dirender secara akurat. Tim tersebut akhirnya menemukan bahwa pemetaan tone ACES (standar industri film) bertanggung jawab atas hilangnya warna. Untuk mengatasi hal ini, mereka mengembangkan Pemetaan Nada Netral PBR Khronos baru khusus untuk mengatasi kekurangan ini dan menampilkan warna secara akurat ke layar, sekaligus menghindari sorotan yang berlebihan dan perubahan hue yang terkait dengan pemetaan nada linear.

<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>

Untuk mempelajari <model-viewer> lebih lanjut, buka modelviewer.dev. Untuk menguji model 3D dan mendownload seluruh situs awal, coba editor kami.

Solusi berat dengan three.js

<model-viewer> adalah cara yang bagus dan berperforma tinggi untuk menampilkan dan berinteraksi dengan satu model 3D. Namun, terkadang tim DSM memerlukan pengalaman web yang lebih imersif dan terhubung daripada yang dapat dilakukan dengan <model-viewer>. Salah satu contohnya adalah peluncuran Nest Mini + C. <model-viewer> dapat memungkinkan calon pelanggan merasakan produk dalam 3D di web, tetapi tidak dapat menunjukkan kegunaannya jika dikombinasikan dengan produk Google Hardware dan fitur AI lainnya seperti asisten.

Untuk tugas ini, tim beralih ke library yang mendukung <model-viewer>, three.js. Three.js adalah game engine JavaScript open source, dan tim tersebut dapat membuat framework aset yang dapat digunakan kembali untuk lingkungan rumah virtual yang berisi kamera, lampu, dan speaker dalam ruangan Nest. Hal ini memberi tim dasar untuk memberikan masukan real time tentang cara perangkat berinteraksi satu sama lain.

Dialogflow

Bagian terakhir untuk membuat pengalaman yang saling terhubung adalah menambahkan Asisten Google. Artinya, pengguna dapat mencoba perintah dan rutinitas autentik dengan pengalaman virtual yang saling terhubung. Namun, menyisipkan Asisten Google dari akun pengguna yang ada akan membuka sejumlah masalah privasi yang bermasalah. Untuk membuat solusi yang mengutamakan privasi, DSM bekerja sama dengan layanan Google Cloud Dialogflow untuk meniru Asisten Google di ruang ini. Diagram tingkat tinggi berikut menunjukkan cara aplikasi web menggunakan Dialogflow API (diadaptasi dari Dasar-Dasar Dialogflow). Untuk setiap giliran percakapan, aplikasi web menggunakan klasifikasi intent Dialogflow dan API menampilkan ekspresi pengguna akhir yang telah ditentukan sebelumnya dan cocok dengan intent.

Diagram alur penggunaan.

Untuk mempelajari Dialogflow lebih lanjut, buka dokumentasi Google Cloud.

Hasil akhir: iFrame yang dapat disematkan

Hasil akhirnya adalah library aset yang dapat disematkan ke halaman web dengan <model-viewer> atau digunakan di lingkungan virtual penuh untuk membantu pelanggan mempelajari setiap produk dan cara produk saling terhubung lebih lanjut. Pengalaman ini autentik, skalabel, dan hemat biaya. Pengalaman virtual pertama ini diluncurkan pada Mei 2021, dan meskipun tidak lagi tersedia di situs Google Store, Anda masih dapat mencobanya.

Hasil

Sejak peluncuran Nest Mini +C, DSM telah dapat menggunakan kembali dan memperluas framework selama dua tahun terakhir peluncuran portofolio Pixel dengan kesuksesan yang meningkat. Melalui pengoperasian iterasi aset dan pengalaman 3D ini, tim sejauh ini telah dapat melipatgandakan jumlah pengalaman edukasi produk interaktif dan melipatgandakan jumlah produk yang mendapatkan manfaat dari teknologi web ini.

Hasil akhirnya adalah edukasi produk autentik bermerek untuk permutasi kasus penggunaan yang terus berkembang dalam skala yang lebih berkelanjutan, kohesif, dan interaktif daripada strategi sebelumnya. Ke depannya, tim DSM kini memiliki portofolio komponen pengalaman imersif yang andal yang dapat mereka adaptasi dengan cepat ke target bisnis yang dinamis. Peningkatan ini memungkinkan tim DSM meluncurkan konten edukasi produk baru empat kali lebih cepat dan dengan biaya kurang dari setengah dari proses sebelumnya yang lebih tradisional.