平鎮中壢桃園 網頁設計-禾岡網頁設計
背景圖片

想要讓消費者在線上立體模擬展示商品? 網頁AR技術概論

2020/05/05

10幾年前,許多人都對未來科技有許多想像,例如在家就可以上班上課,不用出門,或是買衣服之前可以先在自己的照片上動態合成,鞋子會自己綁鞋帶…之類的,那這些夢想後來有實現了嗎?

2020年的COVID-19肺炎疫情,意外地促成部分企業與學校的遠端作業流程。那麼商品動態合成預覽呢? 仍然並沒有非常普及,更像停留在「資訊展的玩具」,或是如同無人商店這種大型企業的「品牌形象火力展示」,目前現實上電商業者更常遇到的是

  • 消費者一次線上訂購多種商品,不喜歡的就在7天內退貨,留下喜歡的就好。
  • 消費者到實體店把玩或摸一摸,然後回家上網比價,買最便宜的。

讓消費者在線上先預覽商品,減少買錯商品與物流的耗損,這麼好的構想,為什麼大家都不做呢?

ar ikea sample

這類商品動態合成預覽,就是AR的應用了,討論AR(Augmented Reality,擴增實境)技術,比較知名的例子大概就是 iKea的IKEA Place可以家具模擬展示,還有抖音或是一些相機/影像錄製/直播類的軟體的即時修臉合成,還有遊戲PokémonGO了吧!

以下將介紹AR的大致運作流程,以及實務上的問題

上集、首先對目標物影像辨識,找出marker 的位置、距離、角度

早期比較傳統的AR應用,通常需要設計一個特殊圖形的AR marker,AR應用程式軟體先取得裝置上攝影鏡頭的影像,當偵測影像中有marker的圖形,就啟動運算機制,計算marker的位置、距離、角度等。

ar marker

AR marker 是不是很像復仇者聯盟幕後花絮中,那些特效演員在綠幕前穿著的衣服圖案呢? 圖形會長這樣,都是為了能讓軟體更簡易的辨識和對位。只是復仇者聯盟的是影片特效軟體,今天討論的是AR擴增實境軟體。

近代的AR應用更加的先進與複雜,智慧型手機人手一機,上面就有攝影鏡頭,甚至還有紅外線/雷射甚至光學雷達(LiDar),都能幫助上述對於marker的位置、距離、角度的定位與運算。而偵測的也不再只是上述特殊圖形的 marker。

如ikea或 PokémonGO是偵測影像中包含的「平面」,抖音或AR修臉相機應用需要偵測「人臉」,服裝合成類應用需要偵測人的軀體和四肢位置,例如要在車子上合成輪框,則要偵測影像中是否有車子,是哪種車子?以及車子現在是正面、側面,還有輪胎的角度、位置等等。

從第一步「偵測影像裡的特定物件」就是一門大學問,需要高品質的攝影鏡頭硬體設備,以及軟體程式演算法兩者完美搭配。運算程式本身是放在使用者裝置內(類似俗稱的前端離線辨識/邊緣辨識),或是將影像傳回遠端伺服器進行運算,再將結果返回使用者的裝置(後端辨識)…等,諸多實務開發細節,將會帶來截然不同的產品特性與使用者體驗。

許多人的生活經驗可能有碰過以下問題:

  • 停車場的自動車牌辨識偶爾會認錯車號,可能是車牌髒汙,或是車子開進來的角度讓軟體無法正確判讀車牌。
  • 手機螢幕調太暗,或是螢幕反光,結帳時 QR Code 掃不出來。
  • 拍照 APP 把明明空無一物的地方,誤以為有人臉。
  • 邊吃東西邊用手機,甚至戴個安全帽或墨鏡而已,臉部辨識解鎖就失敗。
  • 有些監視器或行車紀錄器,遇到環境較暗,或是環境的瞬間亮暗變化度很大,影像就一片黑或是一片白、滿滿雪花雜訊。

這些影像應用相關問題,背後的原因都是類似的,硬體和軟體不可能100%完美,一開始硬體提供的影像可能就不是非常清晰的,也連帶影響後續的軟體運算,連帶影響整個AR,或是此類影像相關應用的使用體驗。

 

下集、進行3D模型對位

有人給你一張女生的背影照片,你能夠憑空生出她正面長什麼樣子嗎?

有人給你一張連身洋裝的正面照片,你知道背後的腰帶部分的花樣,以及衣服的內理是長怎樣嗎?

你不知道,軟體當然也不知道,所以使用AR商品合成,需要幫商品製作全部角度的3D建模。伺服器也需要大量的儲存空間放置這些AR用的3D模型檔。

軟體要依照第一步算出的位置、距離、角度,將3D模型檔傳輸到使用者的裝置,自動將商品的3D模型檔的XYZ三軸視角旋轉到定位。

例如使用者是俯角從上往下拍,使用者就會看到商品的頂部,使用者換一個角度拍,則會看到商品側邊的圖案。

其他還有更細節的操作,例如:

  • 當使用者開始移動相機位置,畫面中會顯示商品的其他角度,而不是畫面中的產品影像運算位置,開始產生異常抖動…
  • 或是使用者當下的室內是黃光的,是戶外自然光的,AR軟體最好要能呈現商品在各種光線下的樣子
  • 或是商品有金屬件的部分,AR軟體得完整呈現商品的金屬部件在晴天、雨天、夜晚、室內等反光的情況。
  • 或是商品有一些可變機構,AR軟體不只要能呈現商品外觀,還要能做出「打開盒子」「解開扣子」「查看內部」之類的互動,準備多個狀態的3D模型檔
  • 商品的3D模型檔是一大顆(例如汽車輪框),但是實際展示時,幾乎只需要看到一面,其他部分要遮掉。

看到這裡,知道為什麼AR商品展示很不普及了嗎?

  • 為了這個商品展示功能,需要依照呈現商品與產業別的不同,開發出不同的 marker 或目標的影像辨識演算法
  • 店家要將商品一一拿去3D建模,建模、畫貼圖材質、render渲染輸出,缺一不可,模型的面數跟材質也要控制好,使用者可能沒有這麼多耐心等待資料載入時間。
  • 上述兩項完成之後,要製作一個使用的UI介面,來讓潛在消費者可以掃描影像,體驗商品。例如像 iKea開發Android/iOS的品牌專屬 APP。各家網頁瀏覽器也持續逐步開發HTML5的WebAR標準,期許未來有一天有機會在每一種網頁瀏覽器都能使用,而不用特定的瀏覽器才能使用。

距離實物擺在面前給你看的真實呈現,軟體模擬商品展示實務上要普及還有很大一段的距離,需要更高等級的使用者裝置與網路環境,以及需要大量的開發預算,才能達到完美的商品展示,與提升購買慾望的目的。

 

更便宜的成本達成 AR 展示目的

從2D平面式紙娃娃商品展示功能,想要進展到更高階的 AR 立體展示商品,建置的準備,如開發影像辨識演算法,3D模型建檔,開發APP,都需要建置成本,難道AR真的都是大企業專屬的金錢遊戲,中小企業就沒辦法了嗎? 這邊介紹兩個AR相關的較平價玩法。

 

1.Apple 使用者專用的 AR Quick Look

若系統有升級到iOS12、iOS13、iPadOS以上,iPhone 跟 iPad 系統內建 AR Quick Look功能,店家只要將商品製作3D模型檔案,再將3D模型檔轉換成usdz格式的檔案,放在網頁連結上,用iPhone 跟 iPad 開啟這個 usdz檔案的連結,就可以試玩一下AR商品展示功能。

ar apple sample
有iPhone 跟 iPad的使用者,可以嘗試到 Apple 官方網站,有些商品頁下方會有設計「使用擴增實境觀看」的連結,點下去可以試試AR商品展示功能。

這項有一個缺點,如果是拿三星手機、ASUS 手機的 Android 使用者當然就沒得玩了,希望未來系統也會內建吧。

 

2.與現成的AR系統廠商合作

例如COCOAR2,可以點選COCOAR2的官網,查看出版、餐廳、公家/協會/博物館、品牌/廠商、教育、旅遊/展覽的相關豐富的AR應用實績。

這項的缺點是,使用者要試玩AR商品展示功能時,在手機上安裝的是AR軟體開發商的「COCOAR2」APP,而不是您的品牌專屬APP。

 

在網路的時代,一個品牌或服務,如何運用數位科技,激起消費者的關注與分享,打造服務差異化,是一門長遠的路。

最新消息

選擇聯絡方式:

留下聯絡資訊

若有相關服務需求,歡迎填寫以下連絡表格或直接與我們聯繫,我們會儘快回覆。 (* 號為必填項目)

若你有網站請填寫網址

點擊刷新驗證碼
正在送出訊息...請稍等

我們的位置

桃園市平鎮區環南路二段191巷3號1樓 (平鎮特力屋附近) 開始導航

回頂端