Tương tác 3D trên web với phần cứng của Google: Trải nghiệm hướng dẫn về sản phẩm thế hệ mới

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

Nhóm Tiếp thị thiết bị và dịch vụ (DSM) của Google giám sát các chiến lược tiếp thị 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 có liên quan. Tất cả các sản phẩm này đều có sẵn thông qua 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ề những 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 trực đối với nhóm này là giáo dục 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 của hệ sinh thái phần cứng của Google cũng như trải nghiệm AI nâng cao. Để giúp người tiêu dùng hiểu rõ hơn về sản phẩm và chức năng, nhóm DSM đã tạo một không gian ảo 3D bằng công nghệ web tiên tiến để giải quyết nhiều thách thức như vậy. Trong nghiên cứu điển hình này, bạn có thể tìm hiểu cách nhóm này tạo ra trải nghiệm sống động hơn cho khách hàng, ra mắt các 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 các tài sản kỹ thuật số truyền thống.

Thách thức: thông tin giáo dục về sản phẩm

Việc hướng dẫn nhân viên bán hàng và khách hàng mới sử dụng các sản phẩm phần cứng của Google về các lợi ích của các tính năng như khả năng tương tác và AI sẽ tốn kém và khó khăn. Các chiến lược truyền thống về việc giáo dục sản phẩm dựa vào nội dung kỹ thuật số được sản xuất bằng 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 thông số kỹ thuật, hình ảnh và video về sản phẩm, nhưng không cung cấp quyền truy cập vào sản phẩm thực tế hoặc sản phẩm có kết nối.

Nội dung học tập như video có chi phí sản xuất cao, phức tạp để bản địa hoá cho các thị trường trên 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 các thành phần ban đầu, bạn cần có ngân sách cho việc tuyển diễn viên, trang phục, tìm địa điểm, phí địa điểm, phí studio, đoàn làm phim và công việc hậu kỳ. Chi phí sản xuất và sản phẩm cũng cần tính đến việc bản địa hoá; việc sửa đổi thành phần, địa điểm, sản phẩm, nội dung và nhân tài đặc biệt khó khăn đố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 cân nhắc rằng hầu hết các sản phẩm được hỗ trợ đều có các tính năng mới ra mắt vài tháng một lần, thì các thành phần này đã lỗi thời khi hoàn tất.

Khám phá những cách hiệu quả hơn để chia sẻ thông tin sản phẩm

Để tìm cách chia sẻ thông tin sản phẩm hiệu quả hơn, nhóm DSM đã thử nghiệm trải nghiệm VR/AR trong một ứng dụng. Kết quả rất khả quan, vừa tăng mức độ tương tác vừa 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ả nhân viên bán hàng và khách hàng. Việc giới hạn trải nghiệm ở một ứng dụng đồng nghĩa với việc không thể nhúng trải nghiệm đó vào các tài sản khác của bên thứ nhất hoặc bên thứ ba như store.google.com.

Giải pháp gọn nhẹ với <model-viewer>

Sau khi thấy sự thành công của mô hình sản phẩm 3D trong việc cung cấp thông tin về sản phẩm, nhóm nghiên cứu đã quyết định áp dụng phương pháp này cho 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 thêm mô hình 3D vào trang web theo cách khai báo, đồng thời lưu trữ mô hình trên trang web của riêng bạn. Bạn có thể xem cách hoạt động này trên trang Pixel Fold trên Google Store, trong đó <model-viewer> cho phép người dùng xem Pixel Fold từ mọi góc độ với nhiều vị trí gập. Bạn có thể 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ể một câu chuyện thông qua các góc máy ảnh và các biến thể màu tương tác. Với <model-viewer>, bạn có thể mang đến cho người dùng mọi trải nghiệm mà bạn có thể nghĩ ra.

Tạo mô hình 3D

Bước đầu tiên để phát triển trải nghiệm ảo 3D là tạo mô hình sản phẩm 3D. Nhóm DSM đã tạo các mô hình 3D trong CAD. Bằng cách làm việc chặt chẽ với các nhà thiết kế sản xuất CAD, nhóm DSM đã có thể xuất các bản kết xuất có độ phân giải thấp có thể được tối ưu hoá cho web. Một số phương pháp hay nhất mà họ sử dụng để đạt được điều này là trong các lĩnh vực sau.

  • 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 để vát cạnh.
    • Tạo huy hiệu 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 nhất quán các thuộc tính vật lý bằng hình ảnh.
    • Cân nhắc tính năng động của ánh sáng theo thời gian thực.
    • Sử dụng các bộ kết cấu và chất liệu riêng biệt cho mỗi loại lưới (Mờ, Trong suốt, Decal).
    • Lặp lại các thiết kế với 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ô hình có số đa giác thấp ở định dạng GLB để <model-viewer> có thể sử dụng mô hình đó.
    • Nhà thiết kế 3D nén lưới hình học theo cách thủ công, với nhà cung cấp hoặc thông qua phần mềm nén như DRACO (hệ điều hành).

Vì các mô hình 3D này thường được sử dụng trên điện thoại di động, nên chúng đượ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 trang web của họ. Để các mô hình được tạo trong bước 1 tương thích với <model-viewer>, các thành phần cần ở định dạng gITF hoặc GLB (đuôi .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 tất cả trình duyệt Evergreen chính hỗ trợ.

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 nghiên cứu phát hiện ra rằng việc ánh xạ tông màu ACES (một tiêu chuẩn trong ngành điện ảnh) là nguyên nhân gây ra tình trạng mất màu. Để giải quyết vấn đề này, họ đã phát triển một Trình ánh xạ tông màu trung tính Khronos PBR mới dành riêng để giải quyết những thiếu sót này và hiển thị màu sắc chính xác trên màn hình, đồng thời tránh các điểm sáng chói và sự thay đổi 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 vào modelviewer.dev. Để kiểm thử mô hình 3D và tải toàn bộ trang web khởi động xuống, hãy 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 hiệu quả và hiệu suất cao để 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 sống động và liên kết hơn so với <model-viewer>. Một ví dụ là việc 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 sản phẩm ở định dạng 3D trên web, nhưng không thể thể hiện sự hữu ích của sản phẩm này 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, nhóm đã chuyển sang thư viện nền tảng <model-viewer>, three.js. Three.js là một công cụ phát triển trò chơi JavaScript nguồn mở và nhóm nghiên cứu đã có thể tạo một khung gồm các thành phầ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 đã giúp nhóm có 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

Bước cuối cùng để 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 xác thực với trải nghiệm ảo được 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 đề về quyền riêng tư. Để tạo một giải pháp ưu tiên quyền riêng tư, DSM đã làm việc với dịch vụ Dialogflow của Google Cloud để mô phỏng Trợ lý Google trong không gian 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ừ Kiến thức cơ bản về Dialogflow). Đố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 người dùng cuối được xác định trước khớp với ý định đó.

Sơ đồ về luồng người dùng.

Để tìm hiểu thêm về Dialogflow, hãy truy cập vào tài liệu của 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 thành phần có thể được nhúng vào trang web bằng <model-viewer> hoặc được sử dụng trong môi trường ảo đầy đủ để giúp khách hàng tìm hiểu thêm về từng sản phẩm và cách các sản phẩm kết nối với nhau. Trải nghiệm này vừa chân thực, vừa có thể mở rộng quy mô và 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ể thử trải nghiệm.

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 trong hai năm qua khi ra mắt danh mục sản phẩm Pixel với mức độ thành công ngày càng tăng. Thông qua việc triển khai lặp lại các thành phần và trải nghiệm 3D này, cho đến nay, nhóm đã có thể tăng gấp 4 lần số lượng trải nghiệm giáo dục sản phẩm tương tác và tăng gấp 3 lần số lượng sản phẩm hưởng lợi từ công nghệ web này.

Kết quả cuối cùng là nội dung đào tạo sản phẩm chân thực, mang thương hiệu cho một số lượng lớn trường hợp sử dụng ngày càng tăng, bền vững hơn, gắn kết hơn và tương tác hơn so với các chiến lược trước đây. Và trong tương lai, nhóm DSM hiện có một danh mục mạnh mẽ gồm các thành phần của trải nghiệm sống động mà họ có thể nhanh chóng điều chỉnh cho phù hợp với các mục tiêu kinh doanh linh động. Những điểm cải tiến này cho phép nhóm DSM phát hành 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í ít hơn một nửa so với các quy trình truyền thống trước đây.