本次分享的實境技術主題，將探討虛擬實境(VR)與擴增實境概念(AR)與實現的工具，並說明專屬與非專屬開發平台及開發工具串聯的分工，可以快速掌握實境技術的趨勢與開發方式。 This topic shares you with reality technology, including virtual reality (VR) and augmented reality (AR). This topic also includes the developed tools used in a specific or non-specific platform. Through this topic, you can catch the trend of reality technology.

1. Reality
王建凱 Jian-Kai Wang
gljankai@gmail.com
https://jiankaiwang.no-ip.biz
Unsplash
Hello, Reality!
https://github.com/jiankaiwang/reality
Just Design!
https://github.com/jiankaiwang/design

2. 目次
• 虛擬實境 (VR)
• 擴增實境 (AR)
• 混和實境 (MR)
• 實境比較與趨勢
• 開發實境工具
2
請拿起你的手機一起來試試
(APK 安裝, 碎片問題, Android/iOS 共同解)

3. 這究竟是甚麼 ? 3
實境
(Reality)
空間
(Space)
時間的掌握
空間的操作
- 艾西莫夫《永恆的終結》
- 辛密克斯, 葛爾《回到未來》

4. 4
想像的 VR (Virtual Reality)
• 虛擬實境 : 眼見一切皆是虛擬的
• 感覺動物與身歷其境
• VR 抽象化概念
• 專屬與非專屬平台
• VR 設計分類
• VR 市場與臺灣產業生態系

5. Virtual reality (VR)
typically refers to computer technologies
that use virtual reality headsets to
generate the realistic images, sounds and
other sensations that replicate a real
environment or create an imaginary setting.
-Wikipedia (2017)
5

6. 人類是感覺的動物 首要視覺體驗 6
X
Y
Z
2D 3D

7. 身歷其境 物理學的定理 7
Icons (2018)
∞
VR Box
實際物體位置凸透鏡轉換後位置
(視覺感受延伸位置)

8. VR 抽象化 基本組成 8
虛擬場景
虛擬元件
互動性介面

9. 市售 VR 裝置 大多數人認知的 VR 9

10. 專屬平台 能提供最佳的使用者經驗 10

11. Cardboard
Jump
Daydream
Google
VR
11非專屬平台 舉 Google VR 為例，擴散與市占為優勢

12. VR 技術分類 投影與空間 12
影圖像投影空間/內容創造

13. 空間創造範例 提供最佳的 VR 體驗 13
香港政府青少年網站 (2018)
IKEA VR Pancake Kitchen (2017)
https://goo.gl/o6inx1
渡假屋 (android 4.4+ /w Cardboard)

14. 環景/全景 360o / 720o 14

15. 全景圖投影成 VR 場景 全景照需符合規範 15
360o 全景照 (等距離長方圓柱)投影
Pano2VR
PTEditor *
Hugin *
cardboard-camera-
converter *
...
軟體/開發工具
Cardboard 相機 *
全景360
...
手機相機
THETA
...
實體相機

16. Cardboard 相機 直接拍攝 VR 吧! 16

17. 投影範例 iOS, android 共同解 17
https://goo.gl/8txikH

18. 影像範例 設計攝影類的新戰場 18
https://goo.gl/H4otKk

19. 商品化 VR 市占 2016 年底 19

20. 臺灣主要 VR 廠商 三大面向 20
內容製作
硬體銷售商 工具/平台
(臺灣目前沒有)

21. 21世界上 VR 產業生態系 三大面向

22. 22
擬真的 AR (Argumented Reality)
• 擴增實境 : 虛擬元件於實際空間
• 你我身邊的 AR 應用
• AR 抽象化
• AR 技術分類
• AR 趨勢與臺灣產業生態系

23. Argumented Reality (AR) 23
is a live direct or indirect view of a physical,
real-world environment whose elements are
"augmented" by computer-generated or extracted
real-world sensory input such as sound, video,
graphics or GPS data.
- Wikipedia (2017)

24. Google AR 眼鏡 24
https://www.youtube.com/watch?v=IZdkIVS53Uw
http://www.menshealth.com/guy-wisdom/augment-your-reality (2017)

25. 社交平台上 AR 相機 25

26. AR 抽象化 基本組成 26
Reality
Scene
Interactive
UI
Start
Virtual
Object

27. AR 技術分類 延伸與非延伸性 27
X
Y
Z
http://zh.pokemongo.wikia.com/wiki/皮卡丘 (2018)

28. 延伸性 AR 技術範例 28
https://goo.gl/F5GN8K
翩翩飛舞 (android 4.4+)
嘗試將畫面對向 Logo

29. 臺灣 AR 製作廠商 內容製作 29
內容製作
硬體銷售商 工具/平台

30. 30
結合的 MR (Mixed Reality)
• 混合實境 : 實境與虛擬疊加或 AR+AV
• 開發階段的技術
• MR 抽象化
• MR 技術挑戰

31. Mixed Reality (MR)
31
referred to as hybrid reality, is the
merging of real and virtual worlds to
produce new environments and
visualizations where physical and
digital objects co-exist and interact in
real time.
- Wikipedia (2017)

32. 32

33. 33

34. MR 抽象化 34
現實環境
Physical Environemt
擴增虛擬
Augmented Virtuality
虛擬物件
Virtual Object

35. MR 技術挑戰 感測器與即時運算 35
S Trend 未來趨勢科技與市場研究中心 (2015) 香港矽谷 (2014)

36. 36
各種實境的比較趨勢
• 從實境到虛境
• 應用產業估計
• 實境技術的差異
• 感覺技術的發展

37. MR vs AR differences 37
Locations of Visual Objects on the Scene The Presentation of Visual Objects

38. VR / AR 市場估計 2020 年估計 38

39. 預估實境應用產值 2025 年預測，以醫藥/工程為大宗 39
Goldman Sachs Global (2017)

40. AR / VR / MR 技術定位 40
現實環境
Real Environment
虛擬實境
Virtual Reality
(VR)
擴增實境
Augmented Reality
(AR)
擴增虛擬
Augmented Virtuality
(AV)
混合實境
Mixed Reality
(MR)
擴增式虛擬實境
Augmented Virtual Reality
(A-VR)
延伸實境
Extended Reality
(XR)

41. 感覺技術的提升 觸覺為例 41

42. 42
實境的設計工具
• 百花齊放/戰國時代
• 制定標準的階段
• 多工具的灘頭堡
• 設計/攝影領域的加入

43. 開發實境的模式 43
Android / iOS Device
Desktop APP
Platform/
Layer
Reality Design
Device APP
Run On Specific Device
Reality Design
Device-Supported SDK
Android / iOS
SDK / API

44. 設計工具的灘頭堡 實境設計工具的整合 44
場景設計
interactive UI
實境整合
元件設計
動畫設計
元件渲染
*
*
*
*
*
全景攝影 全景攝影

45. 實境設計畫面 不再僅是工程的事 45
實境整合
場景與元件設計

46. 專屬性平台開發 SDK 為核心財產 46
Desktop APP Device APP
Run On Specific Device
Reality Design
Device-Supported SDK OpenVR

47. 非專屬性平台開發 急起直追的態勢 47
android / iOS Device
android / iOS
SDK / API
Platform/
Layer
Reality Design
AR.js
three.js

48. 通用技術的重要性 specific vs. non-specific 48
手機 + 平板
• 出貨量: 21 億
• 總 額: 31 兆 (NTD)
• Cardboard 量: 500 萬+ (16)
• GearVR 量: 450 萬+ (16)
IDC (2017)
TrendForce (2017)
Google (2016)
SuperData (2016)
V/AR 裝置 (2017)
• 出貨量: 370 萬
• 總 額: 925 億 (NTD)

49. 平台技術的重要性 web 前端工程的崛起 49
A-Frame (WebVR)
AR.js (WebAR)
React VR (WebVR)
<!-- 定義場景 -->
<a-scene>
<!-- 定義元件與元件設計 -->
<a-entity
id="rain"
particle-system="preset: rain; particleCount: 5000"
></a-entity>
<a-box position="-1 0.5 -3" ... ></a-box>
<a-sphere position="0 1.25 -5" ... ></a-sphere>
<a-entity id="sphere" ...></a-entity>
<a-entity id="ocean" ...></a-entity>
<a-entity id="sky" ...></a-entity>
<a-entity id="light" ...></a-entity>
</a-scene>
render()
action/frame
<!-- 定義場景 -->
<View>
<!-- 定義元件與元件設計 -->
<Pano source={asset('chess-world.jpg')}/>
<Text
style={{
backgroundColor: '#777879',
fontSize: 0.8,
fontWeight: '400',
...
}}>
hello
</Text>
</View>
render()
action/frame

50. 攝影設計的新世界 混合設計與工程為最佳解 50
1. 360o 相機
全景攝影
2. 元件動畫設計
3. 整合場景與元件
4. 聲音/音效錄製
5. 封裝/後製處理

51. 通用技術的飛速發展 51
A-Frame
React VR
Google VR
ARCore
Apple ARKit

52. 創造自己的 AR 52
Amazon Sumerian Online VR/AR Editor
MAKAR VR/AR Editor

53. 53
實境技術的初探
王建凱 Jian-Kai Wang
gljankai@gmail.com
https://jiankaiwang.no-ip.biz