Tổ chức Tiếp thị thiết bị và dịch vụ (DSM) của Google giám sát các chiến lược đưa ra thị trường cho nhiều sản phẩm: điện thoại thông minh, đồng hồ, tai nghe, máy tính bảng, thiết bị nhà thông minh và các gói thuê bao phù hợp, tất cả đều có trên cả Google Store và các nhà cung cấp bên thứ ba trên toàn cầu. Mọi người tìm hiểu về các sản phẩm này trên mạng và tại các cửa hàng bán lẻ thực tế.
Một thách thức thường xuyên mà nhóm này phải đối mặt là giải thích cho người tiêu dùng và nhà bán lẻ về các trường hợp sử dụng và lợi ích mà hệ sinh thái phần cứng của Google mang lại cũng như các trải nghiệm AI nâng cao. Để giúp người tiêu dùng hiểu rõ hơn về các sản phẩm và chức năng, nhóm DSM đã tạo ra một không gian ảo 3D với công nghệ web tiên tiến để giải quyết nhiều thách thức này. Trong nghiên cứu điển hình này, bạn có thể tìm hiểu cách nhóm chúng tôi tạo ra trải nghiệm sống động hơn cho khách hàng, ra mắt những trải nghiệm mới này nhanh hơn gấp 4 lần và với chi phí chỉ bằng một nửa so với tài sản kỹ thuật số truyền thống.
Thách thức: giáo dục về sản phẩm
Hướng dẫn cho nhân viên bán hàng và khách hàng mới sử dụng sản phẩm phần cứng của Google về lợi ích của những tính năng như khả năng tương tác và AI (trí tuệ nhân tạo) khá khó và tốn kém. Các chiến lược giáo dục về sản phẩm truyền thống dựa vào nội dung kỹ thuật số được tạo bằng các sản phẩm thực, sau đó được lưu trữ trên các nền tảng học tập kỹ thuật số. Các nền tảng học tập này cung cấp video, hình ảnh và thông số kỹ thuật của sản phẩm, nhưng không cung cấp quyền truy cập vào các sản phẩm thực tế hoặc sản phẩm được kết nối.
Nội dung tìm hiểu như video rất tốn kém khi sản xuất, phức tạp để bản địa hoá cho thị trường toàn cầu và gần như không thể sử dụng lại giữa các sản phẩm. Để tạo nội dung ban đầu, bạn cần có ngân sách cho hoạt động truyền nội dung, tủ quần áo, tìm kiếm địa điểm, phí địa điểm, phí hãng phim, đội làm phim và công việc hậu kỳ. Chi phí sản xuất và sản phẩm cung cấp cũng cần phải tính đến hoạt động bản địa hoá; việc sửa đổi tài sản, vị trí, sản phẩm, nội dung và nhân sự đặc biệt là thách thức đối với hoạt động tiếp thị truyền thống để quản lý trên quy mô lớn. Và khi bạn cho rằng hầu hết các sản phẩm được hỗ trợ đều có tính năng ra mắt vài tháng một lần, thì những thành phần này đã lỗi thời trước khi hoàn tất.
Khám phá những cách thức hiệu quả hơn để chia sẻ thông tin sản phẩm
Cố gắng tìm cách tốt hơn để chia sẻ thông tin sản phẩm, nhóm DSM đã thử nghiệm trải nghiệm thực tế ảo/thực tế tăng cường trong một ứng dụng. Kết quả đầy hứa hẹn với việc tăng cường mức độ tương tác và tăng kích thước giỏ hàng tại các điểm bán hàng. Tuy nhiên, việc tải ứng dụng xuống là một rào cản đáng kể đối với cả đối tác bán hàng và khách hàng, đồng thời giới hạn trải nghiệm ở một ứng dụng, đồng nghĩa với việc ứng dụng sẽ không được nhúng trong các sản phẩm khác của bên thứ nhất hoặc bên thứ ba như store.google.com.
Các giải pháp nhẹ với <model-viewer>
Sau khi thấy được sự thành công của các mô hình sản phẩm 3D trong việc giáo dục sản phẩm, đội ngũ này đã quyết định đưa phương pháp này lên web. Một cách để thực hiện việc này là sử dụng <model-viewer> để tạo trải nghiệm 3D với từng sản phẩm.
<model-viewer> là một thành phần web, cho phép bạn tuyên bố thêm mô hình 3D vào một trang web, trong khi lưu trữ mô hình đó trên trang web của riêng bạn.
Bạn có thể xem ví dụ thực tế về điều này trên trang Pixel Fold trên Google Store, tại đó <model-viewer> cho phép người dùng xem điện thoại Pixel Fold từ mọi góc độ với nhiều vị trí gập. Dễ dàng tích hợp mô hình 3D vào phần còn lại của trải nghiệm người dùng HTML, với các nút để kể câu chuyện qua góc camera và các biến thể màu sắc tương tác. Với <model-viewer>, bạn có thể mang đến cho người dùng mọi loại trải nghiệm mà bạn mong muốn.
Tạo mô hình 3D
Bước đầu tiên để phát triển trải nghiệm ảo 3D là tạo các mô hình sản phẩm 3D. Nhóm DSM đã tạo mô hình 3D bằng CAD. Bằng cách hợp tác chặt chẽ với các nhà thiết kế sản xuất CAD sản phẩm, nhóm DSM có thể xuất các kết xuất poly thấp có thể được tối ưu hóa cho web. Sau đây là một số phương pháp hay nhất mà họ sử dụng để đạt được mục tiêu này.
- Hình học:
- Tập trung vào việc tạo hình học (hình dạng và tỷ lệ) chính xác từ mọi góc độ.
- Tránh sử dụng bản đồ pháp tuyến cho cạnh vát.
- Tạo đề can dưới dạng hình học riêng biệt.
- Màu sắc và chất liệu:
- Mục tiêu: thể hiện trực quan các tính chất vật lý một cách nhất quán.
- Hãy xem xét tính động của ánh sáng theo thời gian thực.
- Sử dụng bộ hoạ tiết và vật liệu riêng biệt cho từng loại lưới (Mờ, Trong suốt, Đề can).
- Lặp lại thiết kế của các nhà thiết kế CAD ban đầu nếu cần điều chỉnh thêm.
- Kích thước tệp:
- Xuất dưới dạng một mô hình đa giác thấp ở định dạng GLB để
<model-viewer>có thể sử dụng mô hình đó. - Nén các lưới hình học theo cách thủ công bằng một nhà thiết kế 3D, cùng với một nhà cung cấp hoặc thông qua phần mềm nén như DRACO (OS).
- Xuất dưới dạng một mô hình đa giác thấp ở định dạng GLB để
Vì các mô hình 3D này thường được dùng trên điện thoại di động, nên các mô hình 3D này được tối ưu hoá bằng cách đặt kích thước tệp tối đa với hoạ tiết là 2 MB, để hỗ trợ các thiết bị thế hệ cũ và kết nối Internet yếu.
<model-viewer>
Nhóm DSM sử dụng thành phần web nguồn mở <model-viewer> của Google để nhúng các mô hình 3D mới tạo vào các trang web của họ. Để các mô hình được tạo ở bước 1 tương thích với <model-viewer>, các thành phần phải ở định dạng gITF hoặc GLB (phần mở rộng .glb). Cả hai định dạng đều nhỏ gọn, có thể nén và tải nhanh vào GPU. Thành phần <model-viewer> được hỗ trợ trên tất cả các trình duyệt chính luôn cập nhật.
Trong bước này, thách thức lớn nhất mà nhóm DSM gặp phải là bảng màu phần cứng của Google không hiển thị chính xác. Cuối cùng, nhóm phát hiện ra rằng việc phối màu của ACES (một tiêu chuẩn của ngành điện ảnh) là nguyên nhân gây ra việc mất màu. Để giải quyết vấn đề này, họ đã phát triển một Công cụ liên kết tông màu trung tính Khronos PBR mới dành riêng cho việc giải quyết những thiếu sót này và hiển thị màu sắc chính xác cho màn hình, đồng thời tránh các vùng sáng bị làm mờ và thay đổi màu sắc liên quan đến việc ánh xạ tông màu tuyến tính.
<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>
Để tìm hiểu thêm về <model-viewer>, hãy truy cập modelviewer.dev. Để thử nghiệm mô hình 3D và tải toàn bộ trang web dành cho người mới bắt đầu xuống, hãy dùng thử trình chỉnh sửa của chúng tôi.
Giải pháp nặng với Three.js
<model-viewer> là một cách tuyệt vời, hiệu quả để hiển thị và tương tác với một mô hình 3D. Tuy nhiên, đôi khi nhóm DSM cần một trải nghiệm web kết nối và sống động hơn so với <model-viewer>. Một ví dụ là sự kiện ra mắt Nest Mini + C. <model-viewer> có thể cho phép khách hàng tiềm năng trải nghiệm một sản phẩm ở chế độ 3D trên web, nhưng không thể hiện hữu ích khi kết hợp với các sản phẩm Phần cứng khác của Google và các tính năng AI như trợ lý.
Đối với nhiệm vụ này, đội ngũ này đã chuyển sang thư viện làm nền tảng cho <model-viewer>, 3.js. Three.js là một công cụ phát triển trò chơi JavaScript nguồn mở và đội ngũ này có thể
tạo ra một khung cho các tài sản có thể sử dụng lại cho môi trường nhà ảo
chứa camera, đèn và loa Nest trong nhà. Điều này mang lại cho đội ngũ một nền tảng để đưa ra ý kiến phản hồi theo thời gian thực về cách các thiết bị tương tác với nhau.
Dialogflow
Phần cuối cùng trong việc tạo trải nghiệm kết nối là thêm Trợ lý Google. Điều này có nghĩa là người dùng có thể thử các lệnh và quy trình chân thực với trải nghiệm ảo kết nối. Tuy nhiên, việc chèn Trợ lý Google từ tài khoản hiện có của người dùng sẽ gây ra một số vấn đề liên quan đến quyền riêng tư. Để tạo ra một giải pháp đề cao quyền riêng tư, DSM đã hợp tác với dịch vụ Google Cloud Dialogflow để mô phỏng Trợ lý Google trong lĩnh vực này. Sơ đồ cấp cao sau đây cho thấy cách ứng dụng web sử dụng API của Dialogflow (được điều chỉnh từ Dialogflow Kiến thức cơ bản). Đối với mỗi lượt trò chuyện, ứng dụng web đã sử dụng tính năng phân loại ý định của Dialogflow và API trả về các biểu thức được xác định trước của người dùng cuối phù hợp với ý định.
Để tìm hiểu thêm về Dialogflow, hãy truy cập vào tài liệu về Google Cloud.
Kết quả cuối cùng: một iFrame có thể nhúng
Kết quả cuối cùng là một thư viện tài sản có thể được nhúng vào trang web bằng <model-viewer> hoặc sử dụng trong môi trường ảo hoàn chỉnh để giúp khách hàng tìm hiểu thêm về các sản phẩm riêng lẻ và cách các sản phẩm kết nối với nhau. Trải nghiệm vừa chân thực, có thể mở rộng vừa tiết kiệm chi phí. Trải nghiệm ảo đầu tiên này ra mắt vào tháng 5 năm 2021. Mặc dù trải nghiệm này không còn xuất hiện trên trang web của Google Store nữa, nhưng bạn vẫn có thể dùng thử.
Kết quả
Kể từ khi ra mắt Nest Mini +C, DSM đã có thể sử dụng lại và mở rộng khung cho danh mục đầu tư Pixel của mình trong hai năm qua với sự thành công ngày càng tăng. Thông qua việc vận hành lặp lại các kinh nghiệm và thành phần 3D này, đến nay, đội ngũ của họ đã có thể tăng gấp bốn lần số lượng trải nghiệm hướng dẫn tương tác về sản phẩm và tăng gấp ba lần số lượng sản phẩm được hưởng lợi từ công nghệ web này.
Kết quả cuối cùng là một chương trình giáo dục về sản phẩm chân thực, có thương hiệu, giúp đa dạng hoá các trường hợp sử dụng trên quy mô lớn, mang tính bền vững, gần gũi và tương tác cao hơn so với các chiến lược trước đây. Và kỳ vọng rằng giờ đây, nhóm DSM đã có một danh mục lớn các thành phần của trải nghiệm sống động để họ có thể nhanh chóng thích ứng với các mục tiêu kinh doanh linh động. Những cải tiến này cho phép nhóm DSM ra mắt nội dung đào tạo sản phẩm mới nhanh hơn gấp 4 lần và với chi phí chưa đến một nửa so với các quy trình truyền thống trước đó của họ.