作品集
View More
work-category
展場設計
work-category
商業空間設計
work-category
AR/VR/線上展覽

WebAR 是什麼?2021年不能不知的新AR體驗!

2021. Jun. 81,050王一資深編

WebAR is a seamless way for your audience to engage by simplifying and enhancing their ability to monetize and purchase digital and physical goods. by Elena de Sosa

WebAR 是什麼?

還在煩惱 AR擴增實境 的技術門檻太高,導致相關的行銷策略常常受阻嗎?不用擔心,WebAR 絕對是你的最佳解答!

 

在競爭激烈的行銷市場中,WebAR 體驗的便利性,讓它瞬間竄起變成數位體驗行銷的新寵兒。今天的文章是一篇入門版的 WebAR 教學文,帶大家深入淺出從簡單的基礎知識出發,分析 WebAR 技術以及使用體驗上的優點與需要改善的地方;同時提供知名 WebAR 開發平台與開發框架,讓大家擁有足夠的資源,替自己的行銷企劃進行分析思辨,找到最佳的 WebAR 應用結合方式!

Q:是 Web(網頁)嗎?

A:是的!WebAR 是網頁,也是 AR 的一種呈現方式。

 

WebAR 的優勢就是「方便性」! 有別於其他需要下載專用 APP 的 AR 使用體驗,Web AR 從行銷市場中崛起,就是因為它可以直接在網頁中呈現 AR效果 ,讓使用者門檻大幅降低,能觸及到的使用者年齡層變得更廣,而不僅侷限在青壯年中。

Q:是 AR(擴增實境)嗎?

A:是的!WebAR 是 AR 一種,是企業不能錯過的行銷新法寶!

 

自去年疫情爆發,數位轉型已經不是未來的計劃,而是必須執行的計畫!企業需要能夠加強並優化的「數位互動」技術,同時又能夠將「使用者體驗」的流暢度與門檻降到最低,那當然 WebAR 自然成為眾所注目的焦點。

為什麼國際大牌都愛用 WebAR ?

WebAR 的行銷4大案例

(影片:Burberry Olympia Bag WebAR Experience)

WebAR 的萬用性非常高,基本上只要配合得當,任何產業都可以將其納入數位行銷的計畫之中。而這邊將跟大家介紹比較常見、也擁有成功案例的四個產業。

 

 

 

  • 教育:你有想過生物課本的大腦,可以變成超酷的立體模型觀賞嗎?(MywebAR.com使用案例

 

王一設計, WebAR

WebAR 的行銷3大優點

  • 跨平台:無需 App

 

跨平台的優點,讓 WebAR 得以從眾多的技術中脫穎而出。誠如文章開頭所言,基本上,在 WebAR 之前的 AR 體驗都需要另外下載一個 App,才有辦法將其 AR 效果呈現在手機或平板上(例如:寶可夢GO)。而且,因為僅需要瀏覽器,甚至不需要擔心 Android 或者 iOS 等不同程式語言的相容性問題,每個人都能夠輕鬆快速的體驗到AR 互動體驗!

 

 

  • 推廣方便(URL/QR Code 形式) 

 

在現場活動時,最擔心的就是下載 APP 過程中,會產生的小麻煩,像是需要網路流量、搜尋時間、專人手把手教學操作使用,甚至產生尷尬聊天的情況。但現在我們討論的 WebAR 是呈現在網頁上,因此只需要 URL 或者 QR Code ,就能夠導向指定的網頁,省去繁瑣的步驟,而且也可用於網路行銷,能夠輕易在互動式網頁中,引導使用者點擊 URL,完成順暢的使用者體驗!
 

 

  • 增加互動性

 

第三個優勢,也是現在行銷、設計類思考的核心:「互動性」。數據面而言,有互動、有流量,實體活動中可以將人潮聚集並停留,引起更廣大的吸睛效果;線上活動中可以大幅提高使用者的停留時間,在體驗過程中更加認識產品與品牌,引發使用者進一步的討論、分享。

王一設計, WebAR

WebAR 的資訊傳輸量大,因此加載速度通常較久

WebAR 使用需注意3點

  • 加載速度較慢

 

WebAR 在技術上的挑戰之一,正是加載速度上的要求!AR 通常透過 3D 模組呈現,因此加載速度普遍很慢,無法實現複雜的內容或動態。

 

但目前技術,要做到基本的指令動作跟互動介面是已經沒有問題的了!希望疫情之下,爆發成長的科技需求,我們能看到更進一步的應用!
 

 

  • 瀏覽器格式標準不一 

 

光是主流的瀏覽器(例如:Chrome 或者 Safari)都有各自的規格,從後台所需的程式語言,到每個瀏覽器授權設備的條件,每個瀏覽器都會有各自不同的需求。因此,在設計 WebAR 的時候,便需要注意到以上各格式需求,找到一個相容性最大的作法!
 

 

  • 網路資訊安全

 

「是否同意開啟你的相機?」裝置中的影像、聲音擷取,都有可能成為網路駭客竊取的資料;但是 WebAR 對於鏡頭的要求同樣是無可避免的,所以要如何加強網路上個資的保護,也同樣成為開發中不能忘記的一大問題!

WebAR 技術常見的開發工具

王一設計, WebAR, 8th Wall

8th Wall 的數據統計

8th Wall

8th Wall 是目前世界上數一數二的 WebAR 平台,他們相信擴增實境(AR)是給所有人使用的,並能夠將兩大台平 iOS 與 Android 與更多瀏覽器之間的技術鴻溝彌補起來,將 WebAR 再度推向給全世界的使用者!

 

使用 8th Wall 的 WebAR 體驗,就像你平常在逛 Google Chrome 同等簡單,完全不用花費時間下載 App,即可透過相容的行動裝置進行 AR 的互動設計體驗。也有 AR 專家表示,相較於 App,WebAR 更能夠觸及到兩倍的智慧型手機用戶,這將有利於品牌與組織快速擴大消費者的規模。

王一設計, WebAR, Zappar

Zappar 提供的 WebAR 服務項目

Zappar

Zappar 是能跟 8th Wall 並駕齊驅的 WebAR 公司!以「In-house」團隊為主打,Zappar 已經擁有數千件成功的 AR 案例與活動,在過去十年內與合作夥伴拿下數個獎項,同時也將數位互動設計的概念植入許多企業的心中。

 

Zappar 同時也提供 WebAR 相關的技術策略規劃、實踐與培訓企劃等等,讓客戶擁有更多的選項,而不是單純雇用 Zappar 來幫你製作一個完善的 AR 體驗!
 

WebAR 技術常見的開發框架

王一設計, WebAR 開發框架

A-frame (王一設計使用)

 

A-frame 具有以下優點:

  • 跨瀏覽器兼容性較高
  • 開源,可免費訪問
  • 即使在較舊的設備上也可以達到60fps的高性能
  • 非依賴式工具
  • 多樣且方便的內建和擴充功能

 

 

A-frame 是王一設計使用的開發框架。其特色包括跨瀏覽器兼容性,同時它也是非依賴式工具,不需另外轉換,就可以跟其他常見的框架語言一起使用。另外 A-frame 提供許多內建的幾何體、燈光、材質等素材供使用,而由 three.js 實現的的 3D渲染效果也十分優秀,而你也能夠輕易的在 A-frame 中使用這些功能,替你的 WebAR 增添吸睛度!

 

ARtoolKit

ARToolKit 同樣也是市面上常見的開發框架之一;其泛用性也是十分的驚人,在2004年最後一次公開發佈時,下載量就已經超過160,000次,可以想像時至今日,使用量與下載量肯定不可同日而語。

 

ARToolKit 具有以下優點:

  • 支援 Unity 和 OpenSceneGraph 的插件
  • 支援光學頭戴式裝置
  • 開源,可免費訪問
  • 對於實時 AR 應用反應夠快

WebAR技術的未來趨勢(2021)

王一設計, WebAR, 互動設計

更容易:手機跨平台的行銷廣告

每次部署數位行銷廣告時,都需要花費雙倍時間、雙倍預算,就為了要符合主流兩大台平 Android & iOS 嗎?WebAR 之所以能夠成為未來的趨勢,正是因為他可以將這個疑慮輕鬆清除,大幅簡化手機上的跨平台問題,讓行銷計畫變得更容易、更直接!

更直接:全新的零售體驗

WebAR 更直接影響到的是使用者體驗,而零售業正好是這一波「體驗行銷」轉換期中,最適合結合運用 WebAR 的產業。無論是在包裝設計上,結合 Image Target 特定圖像掃描,來開啟 AR 體驗的品牌互動模式;或者服飾、鞋子等相繼推出的「AR試穿」服務,都是在重新定義消費者、產品、與品牌之間的關係。只要提前佈局,想必你的企業也能夠在 AR 新藍海之中佔有一席之地!

趣味案例:Scooby-Doo Ice Cream

  • 互動遊戲

 

透過掃描甜筒上的 QR Code 之後,就會開啟 WebAR 的頁面,使用者便可以開始遊玩 Scooby-Doo 的恐怖互動小遊戲,輕鬆、簡單,完全不需要下載 APP,同樣能夠達到跟 APP 設計一樣的互動體驗!
 

 

  • 拍照貼紙

 

AR 怎麼可以少了跟實景的互動呢?闖關完遊戲之後,使用者能夠將 Scooby-Doo 裡面的人物角色,放置到鏡頭中的實景上,可以放桌上、可以放在甜筒上,並且將超可愛的照片上傳到社群,與朋友立即分享喜悅!

王一資深編

專業文章、深度報導都交給我!

HOT! 熱門文章

最新影音

  • [大型攤位-數位設計] 2021智慧城市展:新北市政府

  • [大型攤位設計] 2021智慧城市展:中保科技集團

  • [形象影片]:大型品牌活動展場設計

  • 產品數位化,疫情不再怕!

  • [AR擴增實境] 多媒體互動桌 - 智慧電網願景城市

  • VR虛擬實境應用-TIE展 台電x金門智慧網-王一設計 king one design

  • [線上攤位] 西門子虛擬展會 - 王一設計King One Design

  • [線上展覽] 台灣國家館 TAMI 4.0

  • [線上展覽] M’SIA-PLAS 2020年馬來西亞國際橡塑橡膠暨模具展

  • 大型品牌活動|30秒看透透,台灣精品未來樂園

  • [展示間] 新北圖書館 - 淡海小書房 |王一設計King One Design

  • [ CES2020 - Bionime 華廣生技 ] 貼近最真實的產品體驗:華廣血糖機 AR 遊戲 !

  • 南港輪胎 | 數位轉型訪談實錄 - 王一設計King One Design