Google 的裝置與服務行銷 (DSM) 組織負責監督各種產品的上市策略，包括智慧型手機、手錶、耳機、平板電腦、智慧住宅裝置和相關訂閱。上述所有產品都會透過 Google 商店和全球第三方供應商取得。消費者可在線上和實體商店中瞭解到這些產品。
這個團隊一直在面臨一項挑戰，就是向消費者和零售商說明 Google 硬體生態系統和進階 AI 服務的用途與優點。為了更充分地協助消費者瞭解產品和功能，DSM 團隊打造了採用先進網路技術的 3D 虛擬空間，以解決上述許多挑戰。在本個案研究中，您將瞭解該團隊如何為客戶打造更身歷其境的體驗，推出這些新體驗的速度將為傳統數位資產的四倍，而且成本的一半。
挑戰：產品教育
向剛開始使用 Google 硬體產品的銷售人員和剛接觸 Google 硬體產品的客戶，說明互通性、AI 等功能的種種挑戰，所費不貲。傳統的產品教育策略仰賴以實體產品生成的數位內容，接著由數位學習平台代管。這些學習平台提供產品技術規格、圖片和影片，但無法存取實體或已連結的產品。
影片等學習內容的製作成本高昂、對全球市場進行本地化作業十分複雜，而且在產品之間幾乎無法重複使用。建立初始素材資源時，必須有投放、服裝、地點偵查、工地費、攝影棚費用、電影人員和後製工作等預算。製作成本和交付項目也需要考量本地化；修改資產、位置、產品、文案和人才在傳統行銷方面尤其棘手，更難大規模管理。如果您考慮到大部分支援的產品每隔幾個月就會推送功能推送，這類資產在完成之前就已經過時了。
瞭解如何以更有效的方式分享產品資訊
DSM 團隊希望找出更好的分享產品資訊的方法，也致力於在應用程式中進行 VR/AR 體驗。結果成果十分亮眼，無論是在銷售點推動客戶參與度提高，購物車內商品數量都大幅成長。然而，應用程式下載往往會阻礙銷售人員和客戶進入，也限制應用程式的使用體驗，意味著該應用程式無法嵌入至 store.google.com 等其他第一方或第三方資源中。
運用<model-viewer>的輕巧解決方案
我們發現 3D 產品模型在產品教育方面大獲成功，因此決定將這個方法導入網路。其中一個方法是使用 <model-viewer> 建立個別產品的 3D 體驗。
<model-viewer> 是網頁元件，可讓您透過宣告方式將 3D 模型新增至網頁，同時將模型託管於自己的網站。您可以在 Google 商店的 Pixel Fold 頁面中查看實際運作情形，在這個頁面中，<model-viewer> 可讓使用者從各種折疊位置的角度查看 Pixel Fold。您可以將 3D 模型輕鬆整合到 HTML 使用者體驗的其他部分，也可以使用按鈕，透過相機角度和互動色彩變化版本述說故事。有了 <model-viewer>，您就可以為使用者實現任何類型的夢想。
建立 3D 模型
開發 3D 虛擬體驗的第一步，是建立 3D 產品模型。DSM 團隊以 CAD 建立 3D 模型。在與開發產品 CAD 的設計師密切合作下，DSM 團隊成功匯出了可針對網路進行最佳化的低多邊形算繪結果。他們達到這個目標的最佳做法分為下列幾個領域
- 幾何圖形：
- 把重點放在讓每個角度準確產生的幾何圖形 (形狀和比例)。
- 避免使用法線圖傾斜邊緣。
- 以個別幾何圖形製作貼紙。
- 顏色和材質：
- 目標：以一致的方式呈現物理財產。
- 考慮使用即時光源。
- 針對每種網格類型 (不透明、透明、轉化)，使用不同的紋理集和材質。
- 如果需要進一步調整，請使用原始 CAD 設計人員在設計上反覆進行。
- 檔案大小：
- 匯出為 GLB 格式的低多邊形模型，以便
<model-viewer>使用模型。 - 由 3D 設計人員、供應商或 DRACO (OS) 等壓縮軟體手動壓縮幾何網格。
- 匯出為 GLB 格式的低多邊形模型，以便
這些 3D 模型通常用於手機，因此已將檔案大小上限設為 2 MB 的紋理大小上限，以支援舊代裝置和低強度的網際網路連線。
<model-viewer>
DSM 團隊會使用 Google 的 <model-viewer> 開放原始碼網頁元件，將新建立的 3D 模型嵌入網頁中。為了讓步驟一建立的模型與 <model-viewer> 相容，資產需要採用 gITF 或 GLB 格式 (擴充功能 .glb)。這兩種格式都會經過壓縮、壓縮，並且可快速載入至 GPU。所有主要瀏覽器都支援 <model-viewer> 元件。
在這個步驟中，DSM 團隊遇到的最大挑戰是，Google 硬體調色盤無法正確顯示。團隊最終發現，ACES 色調映射 (電影業界標準) 對失去色彩的影響。為解決這個問題，他們開發出全新的 Khronos PBR 中性色調映射，專門解決這些缺陷，並精準呈現在螢幕上色彩，同時避免與線性色調映射相關的突出高亮度和色相轉換現象。
<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>，請前往 modelviewer.dev。如要測試 3D 模型並下載完整的入門網站，請嘗試使用我們的編輯器。
採用三.js 的大量解決方案
<model-viewer> 是顯示且與單一 3D 模型互動的絕佳方式。然而，與 <model-viewer> 相比，DSM 團隊有時需要更身歷其境的互連網路體驗。其中一個例子就是推出 Nest Mini + C。<model-viewer> 可讓潛在顧客在網路上以 3D 模式體驗產品，但若搭配其他 Google 硬體產品和 AI 功能 (例如 Google 助理)，就無法展現產品實用性。
針對這項工作，團隊使用綁定 <model-viewer> (three.js) 的程式庫。Three.js 是開放原始碼 JavaScript 遊戲引擎，該團隊能夠為包含 Nest 室內攝影機、燈具和揚聲器的虛擬住宅環境建立可重複使用的資產架構。因此，該團隊能夠針對裝置之間的互動方式，提供即時回饋。
Dialogflow
最後，如要建立相互連結體驗，就是新增 Google 助理。讓使用者可以透過已連線的虛擬體驗，嘗試真實的指令和日常安排。不過，從使用者現有帳戶插入 Google 助理會產生一些有問題的隱私權疑慮。為了打造以隱私權為重的解決方案，DSM 與 Google Cloud Dialogflow 服務合作，在這個領域模仿 Google 助理。以下概略圖表說明網頁應用程式如何使用 Dialogflow 的 API (根據 Dialogflow 基本概念調整版)。針對每一對話，網頁應用程式都會使用 Dialogflow 的意圖分類，且 API 傳回符合該意圖的預定使用者運算式。
如要進一步瞭解 Dialogflow，請參閱 Google Cloud 說明文件。
最終結果：可嵌入的 iframe
最終結果是可以嵌入 <model-viewer> 網頁的資產庫，或在完整虛擬環境中使用，協助客戶進一步瞭解個別產品，以及這些產品如何相互連結。這種經驗不僅真實、可彈性擴充，又符合成本效益。這是 2021 年 5 月推出的第一個虛擬體驗，即使 Google 商店網站不再提供服務，你還是可以試用。
成果
自 Nest Mini +C 推出以來，DSM 便持續使用及擴充這個架構，在過去兩年內推出 Pixel 全系列產品，獲得更豐碩的成果。經過疊代這些 3D 資產和體驗後，這個團隊至今能夠將互動式產品教育體驗數量成長四倍，並使這項網路技術提供的產品數量增加三倍。
最終結果是有品牌的正向產品教育，適合大規模排列的使用情境，且與先前的策略相比，更具永續性、一致性和互動性。展望未來，DSM 團隊現在擁有完善的沉浸式體驗元件組合，可根據動態業務目標迅速進行調整。這些改善項目讓 DSM 團隊推出新產品教育內容的速度加快了四倍，而且成本更低，而且成本比先前更傳統程序的更少。