VR廣告設計與商業

Posted 2020-08-21

<VR廣告設計與商業>培訓營 課程

By 高煥堂/台灣VR產業聯盟 主席  2016.11月

 

在Buy+購物的浪潮下，<VR廣告製作>也水漲船高，歡迎您一起來學習VR廣告製作技術。

進入無框世界

  我們知道，傳統多媒體大多給觀眾圈定了一個“框”，例如TV建構了一個有框世界，讓人們從框外觀看框裡的節目。而VR技術則打破了傳統螢幕的“框”，引導人們進入螢幕的框內，給予一個完整的世界。在廣告方面，從“有框”到“無框”就意味著，帶來“臨場感”，一旦觀眾沉浸於無框世界裡，注意力就會更加集中，廣告效果變得更好。

3D互動式敘述

  隨著電腦影像呈現的精緻程度和效率大幅提升了，360全景拍攝/剪接技術也日益成熟，還有動作捕捉和空間定位技術豐富了VR內容的互動性，其3D互動式敘事方式帶來了嶄新而多元的互動體驗。

動態更新內容

  為了發揮新穎的3D交互敘述效果，我們必須強化VR廣告內容的動態更新能力，讓VR廣告應用在每次執行期間，都能依據觀眾的互動情況，動態更新3D圖像、文字，大大提升廣告的樂趣和效果。例如，一支3分鐘VR廣告，可否讓觀眾動態觀賞300首唐詩，而不是製作300部<傳統廣告>影片呢? 在商業應用上，則是單一支3分鐘VR廣告可動態廣告一個企業(如三義鄉的木雕、鶯歌的陶瓷)的各項產品。 

課程大綱

Part-1：<廣告設計>的思維與技術演進

1.1	設計思維(Design Thinking)	廣告設計思維與技術演進史 創新思維&技術 Stanford大學的設計思維&方法 設計思維&廣告設計範例
1.2	介紹傳統的廣告設計要點	平面設計師應有的素質和技能 <提案>的要點與方法 <風格>的展現與溝通 常用軟體：Photoshop影像處理，illustrator向量圖製作，Indesign排版，CorelDraw向量繪圖等
1.3	3D內容製作	3D繪圖基礎 3D動畫製作要點 使用動畫軟體3D Studio和3Dmax 使用動畫軟體MAYA

 

Part-2：<無框世界>的體驗與技術

2.1	VR技術特性與現況	本質：3D的、互動的、沉浸的 VR技術：欺騙大腦的技術 眩暈症的起因：視覺與知覺不一致性 如何降低眩暈感(1)：硬體方案，以HTC 的光屋(Lighthouse)為例 如何降低眩暈感(2)：UI/UX設計途徑 VR體驗的5項感覺：視覺、觸覺、聽覺、嗅覺和味覺 5項感覺的實踐技術：現況與未來
2.2	VR視覺的新體驗	VR的主要視覺呈現技術：VR影片和3D渲染 VR影片：即360全景影片 360全景影片特性：觀眾可以上下左右各種環顧 360全景影片的局限：不能提供視角的自由移動，且無法與場景進行互動 3D渲染：觀眾視角可以自由移動，還能與場景進行互動
2.3	認識360全景拍攝系統(設備)與實作方法	主流全景拍攝系統及其特色 使用拍攝系統：1) gopro hero4 black; 2) 64G 高速 microsd；3) 6機gopro全景支架；4)單腳支架；5)遙控器gopro smart remote
2.4	360全景後期處理(又稱後製作)的流程、工具與實作	後製作的流程和要點。 相關軟體工具的使用，輸出360全景圖片(或影片) 進行圖片的縫合、剪輯和合成。 在VR設備上觀看圖片(或影片)

 

Part-3：<3D互動式敘述>的UI/UX設計模式

3.1	VR的敘事新模式	從有框到無框：傳統導演給觀眾的是一個框框，而引導者所給的是一個完整的世界 從導演到引導者：把自己當成一個引導者而不是一個導演 “ 場敘事 ”：觀眾可以自主選擇觀看任意視角和劇情
3.2	視覺交互技術&示範	頭顯設備：如HTC Vive、三星Gear和一體機 頭部輸入事件：例如凝視事件、左顧右盼事件等 操作範例：以HTC Vive和Daydream VR示範 腳本程式碼範例：以Unity3D示範
3.3	觸覺(手控)交互技術&示範	手柄輸入事件：以HTC Vive手柄為例。 控制器輸入事件：以Daydream 控制器為例 裸手操作事件：以Leap Motion手勢操作設備為例 腳本程式碼範例：以Unity3D示範
3.4	VR的UI/UX設計要點	避開會引起眩暈的場景 避免照相機震動、參考靜物 重視互動引導 降低延遲(如網路要求少些) 先做雛形，再驗證和修正

  

Part-4：<動態更新內容>的涵意和實現方法

4.1	區分內容、素材與應用	VR需要具有3D立體感的內容(content) 內容的開發過程，需要大量的虛擬化3D素材(material) 由素材組合起來，成為可以互動的VR應用(application) 素材可分為兩種：R素材和A素材 R(real)素材：例如廣告的主角產品 A(artificial)素材：例如配角及燈光、音樂、場景等 愈精緻的素材，帶來愈高的體驗感
4.2	動態更新內容的涵意	涵意：讓VR廣告應用在每次執行期間，都能依據觀眾的互動情況，動態更新3D圖像、文字等素材 舉例(1)：例如一支3分鐘VR廣告，可否讓觀眾動態觀賞300首唐詩，而不是製作300部傳統廣告影片 舉例(2)：例如單一支3分鐘VR廣告可動態廣告一個企業(如三義木雕)的各項產品
4.3	孰悉幕後的<動態加載>技術	靜態綁定(static binding)：開發者使用編輯器(如Unity)把R素材綁入VR應用(App)裡 動態加載(dynamic loading)：與靜態綁定相反，只允許開發者在App執行時(run-time)才到伺服器上即時下載最新版本R素材(含程式碼) <動態加載>技術提供VR廣告內容的動態更新能力
關於R素材，請閱讀：http://www.cnblogs.com/SmartADT/

 

Part-5：VR廣告實作(1)：采<靜態綁定>方案，基於Daydream

5.1	R素材的來源形式	3D建模：以3d max建模，例如如3D建築模型(BIM) 實物外觀掃描：3D Scanner掃描 實物內觀掃描：如醫療CT/MRI掃描
5.2	使用Daydream的SDK	認識SDK：設置開發環境 開發第一個簡單的VR App：使用Unity3D
5.3	親自動手製作：采<靜態綁定>方案	包裝R素材：將R素材(即廣告主角模型)製作成Unity3d的資源(assets)。例如三義木雕3D模型或服裝設計3Dmax模型為R素材範例 劇本&UI/UX設計：以基於R素材為主角的劇情規劃，進行UI/UX互動設計 A素材設計：例如360全景影片、3Dmax模型及Unity3D的素材資源都是A素材來源 撰寫腳本程式碼：在Unity3D編輯器裡撰寫C#腳本程式碼，支持上述的UI/UX設計 測試&執行App：大功告成，開始體驗這支<靜態綁定>的VR廣告App

  

Part-6：VR廣告實作(2)：采<動態加載>方案，基於HTC Vive

6.1	使用HTC Vive的SDK	認識SDK：設置開發環境 開發第一個簡單的VR App：使用Unity3D 介紹Steam VR API
6.2	建立R素材平台	建立平台：建立一個本地Web Server，可供存放R素材 提供介面：Web 由Web Server提供Web Service介面，可供動態下載R素材
6.3	R素材的包裝與上傳	采Docker鏡像：採取業界公認的Docker鏡像標準 打包R素材：將R素材(及其程式碼)打包成為標準的Docker鏡像(image) 上傳R素材鏡像：將R素材鏡像上傳到R素材平台
6.4	開發<動態加載>插件程式	撰寫<動態加載>父類別：撰寫一個C#的父類別(superclass)，它將呼叫Web Service介面來動態下載R素材鏡像 製作<動態載入>外掛程式：將上述C#父類別編譯、連結成為Unity3D的插件(plug-in)模組 調試Unity3D編輯器：將上述插件模組載入Unity3D專案裡
6.5	親自動手製作采<動態載入>方案	規劃劇本：基於R素材為主角，開始規劃劇情 &UI/UX設計：依劇情而進行UI/UX互動設計 A素材設計：例如360全景影片、3Dmax模型及Unity3D的素材資源都是A素材來源 撰寫腳本程式碼：在Unity3D編輯器裡撰寫C#腳本程式碼，支持上述的UI/UX設計 腳本呼叫父類別：上述腳本程式碼呼叫<動態加載>插件裡的父類別，來動態載入R素材鏡像，並解開鏡像還原R素材，完成載入 測試&執行App：大功告成，開始體驗這支<動態加載>的VR廣告App

主講老師 簡介

   1.高煥堂：專精于VR文創素材IP商業模式。現任台灣VR產業聯盟主席、台灣工業研究院VR領域HTC Vive資深技術講師。最近也兼任福州和南昌VR產業基地的VR技術教練。自從2014年開始擔任台灣大宇資訊(遊戲產品：大富翁、仙劍奇俠傳)公司董事。

   2. 擁有41年程式設計經驗。主修于美國Colorado州大學資訊科學研究所、台灣淡江大學管理科學研究所。專精於android終端平台、AI&大資料、Docker容器、VR技術等。E-mail：[email protected] 

   3. 在VR領域，專精于VR素材IP商業模式和內容開發。孰悉HTC VR和Daydream VR的開發技術。請參考網頁：http://www.cnblogs.com/adt2/。名片：

      

~ end ~