資訊科技教育教學法系列：

(1)

資訊科技教育教學法系列：

在小學有效運用擴增實境和虛擬實境設計教學活動以提升學生參與度及學習效能

(Pedagogical Design and Strategic Use of Augmented Reality and Virtual Reality to Enhance Student Engagement and Learning

Effectiveness) 第二節 (SESSION 2)

Course Designer: Dr. Wilton Fok

香港大學電子學習發展實驗室

e-Learning Development Laboratory

The University of Hong Kong

AR & VR Professional Development Training 1 HKU e-Learning Development Laboratory

(2)

回顧

第一節：介紹於小學運用擴增實境和虛擬實境的教學應用以提升 學生的參與度及學習效能

1.1 介紹擴增實境和虛擬實境科技

1.2 擴增實境和虛擬實境的學習機會、特點、優點和限制

1.3 介紹常識科和其他STEM相關科目的綜合活動例子，包括：AR 沙箱、參觀博物館等

1.4 案例：擴增實境和虛擬實境的課堂應用及實際操作

1.5 有關教學設計的小組討論

(3)

第二節課程流程 (3 小時)

第二節：擴增實境和虛擬實境的實際應用及設計課堂活動 2.1 作業討論及意見回饋

2.2 運用擴增實境應用程式(例如：Aurasma)製作及觀看擴增實境效果 2.3 三維(3D)掃描技術的實際操作及操作時的限制

2.5 運用360度相機拍攝，製作及觀看360度相片和影片 2.6 設計和整合課堂內的擴增實境和虛擬實境活動

2.7 討論擴增實境和虛擬實境科技的校內管理和推行，以及有關注意事項 2.8 總結、討論及問與答環節

(4)

作業討論及意見回饋

建議思考點:

1. 是否有效提升學生的參與度和學習效能?

2. 如果沒有加入AR 和VR的內容，成效有多少不同?

3. 在技術上遇到什麼困難?

(5)

回顧: 擴增實境(AR)和虛擬實境(VR)科技

AR & VR Professional Development Training

HKU e-Learning Development Laboratory 5

虛擬實境 (VR):

由電腦或應用程式模擬的虛擬環境

擴增實境 (AR):

將虛擬的效果添加到現實的環境

[AR]

Aurasma

[AR]

3D Object Scanning using Qlone

[VR]

360 VR

相片和影片

(6)

• 如何使用Aurasma創建AR objects

• 如何創建出觸發和疊加視頻和圖形的效果？

• 如何從網上資源（例如3D Warehouse ）下載3D object。

• 如何透過TinkerCAD 以創建3D object 。

運用擴增實境應用程式Aurasma製作

及觀看擴增實境效果

(7)

Aurasma

• Aurasma是一個擴增實境(AR)的應用程式

• 屬於圖像識別 (Image recognition) 類AR

• 掃描圖像，就會在圖片上浮現影片或文字訊息

• 可設定定位 (Location-based AR)類AR

• 製作者需要註冊帳號才可以製作，在製作過程中全程需要有網絡。

• 觀看者不須註冊帳號，只有在接收他人作品時才需要連接網路，接收完後就可以離線觀看

(8)

觸發物 (Trigger) ^與目標物 (Overlay)

觸發物 (Trigger) 目標物 (Overlay)

觸發圖像就是我們要掃描的圖像。目標影像就是掃描之後出現的影像。

換句話說，我們利用Aurasma這個應用程式將觸發圖像與目標圖像連結起來，讓觀賞者可以藉由這個程式掃描觸發圖像，看見目標影像。

(9)

Aurasma 示範影片

https://www.youtube.com/watch?v=GBKy-hSedg8&t=1s

(10)

在Aurasma網站上製作Aura AR教材

1. 申請Aurasma的帳號 2. 登入剛申請的帳號

(11)

Aurasma登入帳戶

你可以開設個人的帳戶或

登入以下本課程參加者共用的帳戶，

體驗使用Aurasma:

Username:

(見開課派發的用戶名稱)

Password:

(見開課派發的用戶名稱)

(12)

3.登入後的版面:

請按一下 “MY AURAS”

(13)

上傳觸發圖像

4. 按一下

“Create New Aura”：

5. 按一下

“Click to Upload Trigger Image ”：

(14)

6. 按下 “Click to Upload Trigger Image”之後，就會彈出右邊的版面。

(a)命名圖像名稱

(b)從電腦上載圖像到

Aurasma

(15)

7. 選擇所需的圖片(觸發圖像)

(16)

9. 儲存圖片

定位 (Location-based AR)

如果你按“View Map”設定了地圖上的指定位置，就會 限制了用家使用的地點範圍；這份AR教材就只能在使用者 身處指定位置時才可進行AR體驗。

如你只採取圖像識別 (Image recognition) ，你不需要按

“View Map”設定。

8. 定位 (只適用製作定位AR教件)

(17)

如何製作觸發圖像

1. 可以在網上搜尋適合課題的觸發圖像

2. 利用 “Print screen”及小畫家剪裁功能，以製作適合課題的觸發圖像。

3. 利用Powerpoint特別製作布景，然後儲存背景成圖像。

(18)

主畫面中的工具列有5項可以調整：

1. Select ：調整Mask的位置

2. Delete ：刪除遮罩

3. Mask ：Mask的用途是在於標示素材中最具有特色的部分，

讓程式在偵測時可以特別去偵測這些特徵，加快呈現AR效果的速度。

4. 遮罩形狀有長方形、(橢)圓形與多邊形可以選擇，可以在 Mask選項右方箭頭中轉換。

5. Zoom In、Zoom Out ：放大縮小照片，好讓我們可以更

9. 功能

(19)

10. 儲存圖片- 假如沒有問題就按 “Next”作一步

如想更改圖片，可按“Change”

(20)

11. 接著開始編輯目標影像，按下右方的Click to Upload

Overlay Or Click to Select Existing新增檔案

(21)

1) 可以在主畫面的右方看到我們新增進去的目標物，在左方的預覽中也可以看到我們的目標物出現在畫面中

2) 左邊的畫面是最後呈現出來的樣貌，所以要適當的改變大小 3) 一個觸發物上也可以同時呈現好幾個目標物，只要繼續按下右方的Click to Upload Overlay Or Click to Select Existing新增檔案即可。

(22)

1.按下Preview後會在畫面上出現你的觸發物的圖片，

在手機安裝Aurasma的app後按照指示可以預覽實際效果。

2. Resize：可以將目標物做快速的調整，例如將目標物的尺寸變得和觸發物大小相同。

3. Move：可以將目標物對齊物件 4. Zoom In、Zoom Out：

可以調整畫面的大小

常用的功能

(23)

按 “Add Actions”

加入動作

加入動作 (Action)

拖拉功能:

調動次序隱藏刪除更改邊框的顏色

更改Overlay圖像

(24)

按下視窗中的

“Add Actions”會彈出下方可選取的一系列動作(見左邊視窗)，你可以添加一些動作：

例如1下方是: “When Overlay is tapped  Action: Make an Overlay full screen”

( 只當點擊Overlay(目標物)時，目標物會變成全螢幕。)

完成後在右下角按

“Save”儲存

(25)

完成編輯之後就可以按 “Next”

預覽效果:

如想試一試能否達到效果，可以按“Preview”

(26)

Aurasma 使用進階

1. 加入多於一個的目標影像 2. 加入更多動作 (Action)

3. 設計逐步出現的圖像Overlay 4. 以影片作為目標影像

(上載YouTube上的影片到Aurasma)

5. 如何上載3D object

(27)

進階 1 : 視乎需要而加入多於一個的目標影像

1 *重覆 “Click to Upload Overlay”的功能，

即可以在一張觸發影像中加入不同的目標影像

2 3

你可利用左圖所示的拖拉功能方便調動次序。

(28)

進階 2: 加入更多動作 (Action)

(29)

進階 3: 設計逐步出現的圖像Overlay (利用Action 和 “Initially hidden”)

“Initially hidden” 意思是

「開始時被隱藏」，即如果打勾(tick)，表示當掃描Trigger 時，這個 Overlay不會顯示。

所以，如要設計逐步出現的圖像，Overlay 1 的

“Initially hidden”不可打上勾

Overlay 1 需要加Action 以觸發第二層的Overlay。

“When Overlay is tapped”

 “Start an Overlay”

(請選擇觸發顯示的Overlay)

(30)

進階 4: 如何以影片作為目標影像上載YouTube上的影片到Aurasma

• 必須將YouTube影片轉化為: MP4 或 FLV檔，

絕不能直接將YouTube影片的連結應用到Aurasma

• 檔案大小：必須100 MB以下

• 於Google搜尋 “YouTube converter” 可見不少工具

• 常用的YouTube影片轉化網站：

– https://www.onlinevideoconverter.com/video-converter

貼上YouTube Link

注意:

請教師釐清影片

的版權問題，特

別是教件涉及學

校的公開資料或

出刊，請務必自

行釐清版權問題。

(31)

進階 4: 如何以影片作為目標影像

上載YouTube上的影片到Aurasma

^(續)

轉化後及下載後，即可以上載到Aurasma作為目標影像（Overlay）

(32)

進階 5:如何上載3D object 3D Overlay Specifications

• To upload a 3D model as an Overlay, the Aurasma Studio requires it to be packaged inside a '.tar' archive file which is very much like a '.zip' file. It can be created with a number of programs; we recommend one called ‘7zip’ - its free. Download it here.

• A ‘.tar’ file must contain the following:

– .dae file (exported scene/model using OpenCollada or Collada exporter).

– .png textures file(s).

– .png thumbnail image (256x256 pixels) must be named ‘thumbnail’.

• It can also contain:

– .mp3 sound file

– 'newconfig.cfg" file - more on that later in this article.

Make sure none of these files are contained within subfolders, this will cause the .tar file to be rejected by the Aurasma Studio. Frequently we see that creating the .tar file on a Mac operating system will often create a folder automatically (as well as unnecessary temp files with a “._” prefix) – remove them & ensure all your files are in the root of the tar archive.

What 3D formats are supported?

• Our 3D model support is based on the Collada format (v1.4 or v1.5), as exported by Maya and 3DS Max.

(33)

分享功能

• Share 公開 (Public)

– 這個教件 (不是用戶中所創建的所有教件) 可於 Aurasma 的搜尋器中被所有人搜尋得到。

– 所有跟蹤你用戶的 “Public Auras” 成功掃描指定的觸發圖像(Trigger)就可以成功顯示目標圖像 (Overlay)

• Unshare  私人 (Private)

– 只有使用你所建的用戶才可以使用

*你可隨時更改分享設定

(34)

電腦製作結束後：利用 App 試驗

使用平板電腦或手機的行動裝置（Android, iOS)

• 請先在行動裝置安裝Aurasma，請在Google Play Store或App Store搜尋Aurasma。 (我們提供的iPad 已安裝Aurasma)

Android

https://play.google.co m/store/apps/details?i d=com.aurasma.auras

iOS

https://itunes.apple.

com/us/app/aurasma

/id432526396?mt=8

(35)

如要在手機上閱覽剛在電腦上製作的作品，請緊記登入

事前你已於製作時註冊的帳號

登入後

登入後，在 Explore頁面就可以看見:

1) 自己的製作的作品

(如未能見到請向下拉動重新載入) (示範: 最新的Auras會出現於左上角)

2) 其他你已跟蹤的Public 公開Auras

(有關如何跟蹤其他用戶製作的Public Auras，請見下頁)

個人戶口:

點選最右下的頭像按鈕就可以看到所有你的作品

(只適用於Android OS)

若你是使用 Android 的

Aurasma 應用程式，如果你只是跟蹤他人的作品，

可以直接按Skip，

但若你要在手機上瀏覽剛在電腦上製作的作品就須登入同一個 Username。

(36)

如何追蹤 (Follow)

其他已Public(公開)的Aurasma活動

搜尋你想跟蹤的Channel 如你想追蹤實

驗室製作的

按“Follow”

即會跟蹤 Channel 或多按一次

“Following”

以停止追蹤

(37)

右上角 “Help”

A Short Guide to Aurasma

•

https://augmentedaru.files.wordpress.com/2016/02/a-short-guide-to- aurasmasmall.pdf

使用說明

(38)

網上平台資源 Available web-resource platforms:

1. 3D Warehouse

https://3dwarehouse.sketchup.com/

2. 3D Printing object libraries

https://all3dp.com/1/free-stl-files-3d-printer-models-3d-print-files-stl- download/

如何從網上資源下載3D object

用於創建AR應用程式

(39)

• TinkerCAD

– 官方網站: https://www.tinkercad.com/

– 教學影片: https://www.youtube.com/user/Tinkercad

39

如何使用TinkerCAD創建3D對象？

AR & VR Professional Development Training HKU e-Learning Development Laboratory

(40)

• 更多資訊:

–

https://all3dp.com/1/free-3d-models-download-best-sites-3d-archive-3d/

其他3D object的網上資源下載

Site 3D

Printing

Engineering Architecture/

Visualization

Animation Gaming Graphic Design

Archive/

Documentation

3D Digital Doubles ✘ ✘ ✘ ✔ ✔ ✔ ✘

3D Scanstore ✘ ✘ ✘ ✔ ✔ ✘ ✘

3D Warehouse ✔ ✘ ✔ ✔ ✔ ✘ ✘

3DContentCentral ✘ ✔ ✘ ✘ ✘ ✘ ✘

3Delicious ✘ ✘ ✔ ✔ ✘ ✔ ✘

3DExport ✔ ✘ ✘ ✔ ✔ ✔ ✘

3DModelFree ✘ ✘ ✔ ✔ ✘ ✔ ✘

3DShook ✔ ✘ ✘ ✘ ✘ ✘ ✘

3dsky ✘ ✘ ✔ ✔ ✘ ✔ ✘

Archive 3D ✘ ✘ ✔ ✔ ✘ ✔ ✘

Autodesk Online Gallery ✔ ✔ ✔ ✘ ✘ ✘ ✘

Bitgem ✘ ✘ ✘ ✘ ✔ ✘ ✘

blankRepository ✘ ✘ ✘ ✔ ✘ ✔ ✘

(41)

Site 3D Printing Engineering Architecture/

Visualization

Animation Gaming Graphic Design Archive/

Documentation

Design Connected ✘ ✘ ✔ ✘ ✘ ✔ ✘

Dimensiva ✘ ✘ ✘ ✔ ✘ ✔ ✘

Evermotion ✘ ✘ ✔ ✔ ✘ ✔ ✘

FlyingArchitecture ✘ ✘ ✘ ✔ ✘ ✔ ✘

Free3D ✘ ✘ ✔ ✔ ✔ ✔ ✘

GB3D Type Fossils ✔ ✘ ✘ ✘ ✘ ✘ ✔

gCreate ✔ ✘ ✘ ✘ ✘ ✘ ✘

GrabCAD ✔ ✔ ✘ ✘ ✘ ✘ ✘

Human Alloy ✘ ✘ ✔ ✘ ✘ ✔ ✘

Instructables ✔ ✘ ✘ ✘ ✘ ✘ ✘

Kenney ✘ ✘ ✘ ✘ ✔ ✘ ✘

MorphoSource ✔ ✘ ✘ ✘ ✘ ✘ ✔

MyMiniFactory ✔ ✘ ✘ ✘ ✘ ✘

NASA 3D Resources

✔ ✘ ✘ ✘ ✘ ✘ ✔

OpenGameArt ✘ ✘ ✘ ✘ ✔ ✘ ✘

Orchard ✔ ✔ ✘ ✘ ✘ ✘ ✘

(42)

Site 3D Printing Engineering Architecture/

Visualization

Animation Gaming Graphic Design Archive/

Documentation

Pinshape ✔ ✘ ✘ ✘ ✘ ✘ ✘

PixelLab ✘ ✘ ✘ ✔ ✘ ✔ ✘

Renderpeople ✘ ✘ ✔ ✘ ✘ ✔ ✘

ShareCG ✘ ✘ ✘ ✔ ✘ ✔ ✘

Sketchfab ✔ ✘ ✘ ✔ ✔ ✘ ✘

Smithsonian X3D

✔ ✘ ✘ ✔ ✘ ✔ ✘

STLFinder ✔ ✘ ✘ ✔ ✔ ✔ ✘

Syncronia ✘ ✘ ✔ ✔ ✘ ✔ ✘

Thingiverse ✔ ✘ ✘ ✘ ✘ ✘ ✘

TinkerCAD Things

✔ ✘ ✘ ✔ ✔ ✘ ✘

Trace Parts ✔ ✔ ✔ ✘ ✘ ✘ ✘

TurboSquid ✘ ✘ ✔ ✘ ✔ ✔ ✘

Unity Asset Store

✘ ✘ ✔ ✔ ✔ ✘ ✘

(43)

2.3 三維(3D)掃描技術的實際操作 3D scanning應用程式

Qlone (For iOS OS) Scann3D (For Android OS)

(44)

Qlone

• Qlone

– 是由以色列技術公司EyeCue Vision Technologies(EVT)開發的一款app – 適用於iOS操作系統的移動設備。

– 是一個AR+3D 掃描建模工具，可以相當方便 快速地把現實物品掃描成3D模型文件。

• 利用手機鏡頭掃描實體後，就會在手機上浮現3D影像。

• 完成製作之後，可以輸出到第三方的3D 圖像的編輯程式，並且3D printer打印。

*可在Apple App Store中下載

(45)

Qlone教學影片

教學影片: https://www.youtube.com/watch?v=XkTaCOQ_OjI

(46)

課堂體驗活動: Qlone 掃描3D Object

1. 利用我們派發的QR碼工作紙

2. 你可使用我們提供的物件或使用你有的小型物件

1. 準備跟隨導師的示範和指示

(47)

步驟一：列印QR碼工作紙

下載之後，該app會出現以下版面，要求使用者列印一張QR碼工作紙

• 如沒有連接雲瑞列印，可以到Qlone 官方網下載

• 網站： https://www.qlone.pro/

之後按此下載及列印一張QR碼工作紙

(48)

• 使用Qlone之前必須列印一張QR碼工作紙及確保QR碼紙平坦及齊整。

• 將要掃描的實物放置在QR碼圖案上，物件尺寸最好大小適中。

• 不能大到超過QR碼的範圍，太小也是不行。

注意事項：

調整大小

(49)

• 接著進入Qlone的掃描模式，將相機移動 到其周圍，按下右上角處的紅色圓圈按鈕 後開始掃描。

• Qlone的增強現實圓頂“將圍繞物件並捕 獲詳細的3D掃描資料，沿圓頂一直掃描。

步驟二：開始掃描

首先按下按鈕，

開始掃描

(50)

步驟三：編輯

完成掃描後就會彈出製成品

按此進入下一步

• 可以以不同角度觀察製成品。

• 一系列簡單的修改工具，就可以輕鬆修改和清理物件，例如Paint, Color pick及Blur。

(51)

步驟四：匯出

完成編輯後就會即時彈出製成品

按此進入下一步

• 可以免費以.jpeg檔、 .gif 檔及 .mp4檔 (video)形式匯出

• 不需要匯出/導入多個廣泛的軟體以進行網格清理*和優化

• 可免費直接上傳到Sketchfab 上（3D打印共享平台）

• 可以透過Facebook、WhatsApp、Instagram等社交平台以及電子郵件匯出

*網格清理 (Mesh Cleanup): 移除或修改不匹配指定標准的多邊形。

(52)

以.gif檔及.mp4 video形式匯出 : 以video為例：

• 一般播放時間很短，物件的轉動速度頗快

• 操作時老師要留意如何向學生展示:

• 例如定格、沿時間軸拖拉而改動物件顯示的角度等

(53)

• Qlone掃描可以輕鬆匯出一系列檔案格式，像是STL、OBJ、PLY和X3D，

但如要匯出以上格式的話，需要付費，而以上格式都是大部份3D Printer能支援的格式。

• 視乎老師實際需要而定。

進階版：

(54)

• SCANN3D是一個掃瞄實體影像，以轉化為3D object的手機應用程式。

• 利用手機鏡頭掃描實體後，就會在手機上浮現 3D影像。

• 完成製作之後，可以輸出到第三方的3D 圖像的編輯程式，並且3D printer打印。

• 形式是以連拍為主

*可在Play Store中下載

3D scanning應用程式- SCANN3D

(Android手機適用)

(55)

SCANN3D 教學影片

教學影片:

https://www.youtube.com/watch?time_continue=1&v=TSIwD TDvc68

(56)

步驟一：登入

輸入你的 “Trail User”

用戶名稱*，

直接按login登入即可

*你需要輸入你的名稱才可保留你掃描的檔案登入後，直接按

New Model，隨即掃瞄。

步驟二：掃瞄

(57)

按下Continue可以查看已拍照的圖片，亦可以刪除不合適的圖片

步驟三：檢視

(58)

按下My Models 可以查看已完成的Model

步驟三：檢視已成功完成的 Model

(59)

1. 必須在目標 360度圍繞拍照

2. 必須對目標的各

面最少影兩張相片 3. 距離方面要適中，

不能太遠及太近

使用原則與局限

(適用於普遍的3D掃描應用程式)

(60)

4. 聚光燈、陰影及不充足 的光線下都會影響到效果

5. 必須移動手機，

不要移動目標物 6.不要選擇會移動的目 標物，例如交通、動物

使用原則與局限

^(續)

(適用於普遍的3D掃描應用程式)

(61)

7.不要選擇會反光、透明、沒有結構的目標物

8.請選擇會堅固、結 構完整及顏色鮮明的

目標物

9. 完成教學頁後，便會出現鏡頭供使用者使用，可以根據目標物的體積而訂拍照圖片的數目，建議圖片數目為20-40張。

使用原則與局限

(續) (適用於普遍的3D掃描應用程式)

(62)

三維(3D)掃描技術操作的限制

Qlone SCANN3D

程式系統 (OS)

iOS Android

一般操作困難

• 清晰度: 受制於手機相機鏡頭本身可支援的解像度和可收光的能力

• 光暗度: 視乎掃描時環境的光暗

• 目標物: 不要選擇會反光 /光面、透明、沒有結構、白色面的目標物

個別操作困難

• 可以利用轉盤方便掃描

• 一般而言，掃描所示的 Object的光度較暗

• 匯出的影片速度較快

• 必須移動手機，不要移動目標物

• 運算和組成的時間需時，手機

未能離開或使用其他應用程式。

(63)

配備其他儀器以提升掃描質素

• 效果較佳的Object 需要相應的儀器配合

– 例如 Microsoft Kinect etc.

• 有關更多的硬件、軟件和應用程式得比較，你可參考:

https://all3dp.com/1/best-3d-scanner-diy-handheld-app-software/

(64)

上傳觸發圖像

請按一下 “Create New Aura” 按一下 “Click to Upload Trigger Image ”

如何把Qlone的製成品放於Aurasma中？

(65)

按 “Click to Upload Trigger Image”後，就會彈出右圖所示的版面。

(a)命名圖像名稱

(b)從電腦上載圖像到 Aurasma

(66)

選擇所需的圖片(觸發圖像)

(67)

儲存圖片

(68)

接著開始編輯目標影像(Overlay)，按右方的

“Click to Upload Overlay” Or “Click to Select Existing”新增檔案

(69)

選擇所需的3D object video

(70)

緊記留意: 在 Type (類別) 選擇 Video (影片)

(71)

上載成功時，你會見到顯示上出現你上載的影片，

你可調較影片顯示的位置和大小。

(72)

運用360度相機拍攝，製作及觀看360 度相片和影片

360度 VR 相片和影片

Preparing 準備

Filming 拍攝

Processing 製作

Uploading 上載

Viewing 觀看

(73)

360度相機 (360-degree Camera)

如何選擇適合你的360度相機?

How to choose your 360-degree camera?

• 建議選擇的條件:

• 解像度 (Resolution)

• Generally higher than 2K

• For higher video resolution (4K is ideal):

• Priced above USD 350

• Comparison table: http://www.threesixtycameras.com/4k-360-degree-camera-comparison/

• 能否與 YouTube 和Google 街道實景等應用程序兼容

• 提供的手機應用程式的功能 (Functionality)

Preparing

準備

Filming 拍攝

Processing 製作

Uploading 上載

Viewing 觀看

(74)

360度相機的選擇 (例子)

Choices for 360-degree camera (examples ⁾

LG 360 Insta360 Nano

(For iOS Phone only)

(For Android,

Insta360 Air can be used)

Ricoh Theta S (For Android/iOS)

優點 • 價格相宜 (USD200)

• 製作清晰的360張照片

• 小巧，容易使用

• 與大多數Android手機兼容

• 可以上載由LG 360 CAM 拍攝的360 片段及照片到YouTube 及 Google 街道實景

• 價格相宜 (USD195)

• 小巧便攜式相機

• 拍攝高品質的360張照片

• 與App無縫融合

• 可即時分享360個視頻/圖像

• 在社交媒體（即Facebook，

YouTube）上

• 價格相宜(USD 299)

• 優秀的照片質量

• 優良的應用程序

影片解像度

• 2K • 3K 1920 x 1080 at 30 fps/16

Mbps 詳細的相機比較和規格如下：

(75)

了解影片上載平台 YouTube的影片支援

• 目前市面上有許多 360 度攝影機都能拍攝 YouTube 支援的影片格式。

• 請按照

YouTube 進階規格

中的指示，為影片使用高解析度的編碼格式，

以呈現最佳畫質。目前 YouTube 支援以每秒 24、25、30、48、50 或 60 個畫格 (FPS) 播放 360 度影片。

• 格式

– 如要上傳 360 度影片 (長寬比為 2:1 的等距柱狀格式)，建議您選用 7168x3584 以上的解析度，最高可達 8192x4096。

– 您也可以使用自訂的攝影機組合和 Kolor Autopano 等第三方全景圖製作軟體來拍攝 360 度影片。

• 以下工具目前並不支援 360 度影片：YouTube 影片編輯器、增強工具以及結束畫面。

• 資料來源: https://support.google.com/youtube/answer/6178631?hl=zh-Hant

(76)

拍攝時的注意事項

1. 設備

和景物內的人不能被隱藏

a) 拍攝前嘗試尋找人或遮蓋物較少的拍攝點 (例如避免人流、車流較多的地點)

b) 拍攝前先試試角度，檢查景物有否被人或物覆蓋視線 2. 設備和景物內的人不能被隱藏

a) 三腳架會出現在影片內

b) 需要用專業的編輯軟件去除設備

3. 引導觀眾的眼睛 (Guide your audience’s eyes) a) 需要停頓多幾秒時間讓觀眾有時間轉動

b) 如果希望觀眾發現到的事物，以控制預期 (manage expectations)

Preparing 準備

Filming

拍攝

Processing 製作

Uploading 上載

Viewing 觀看

(77)

DOs DON’Ts 導演

Directing • 拍攝過程中沒有指導或導演。

• 若不想拍攝人員在影片中出現，請帶備腳架的設備 (建議用「單腳架」或可用的自拍棍)

• 若影片中出現拍攝人員，需要用上相當的時間並以專業付費的軟件去除360影片中的人員。

• 鏡頭前所出現的所有人和物件會被拍到

• 拍攝人員和導演需要離開否則會出現於影片中

環境

Environment

360 全方位的事物:

• 注意上下左右各方位的事物: 能否配合教學目標或有不應在影片出現的情境會被攝錄

拍攝的時段和位置:

• 儘量避免在人流車流較多的時段和位置進行拍攝。

若人流車流覆蓋拍攝的目標物，將難以一次過完成拍攝，或需要進行較多的拚接。

停頓時間:

• 為確保有足夠的時間讓人們探索現場，於影片中或需要加入停頓時間讓觀眾搜尋或仔細觀看目標物。

77

VR360視頻製作的注意事項 (DOs & DON’Ts)

(78)

DOs DON’Ts 速度和編

輯

Pacing &

editing

遠近鏡頭 :

• 與一般的相機操作相似，距離目標物越遠，所能拍攝的角度越廣

• 如果需要讓學生/ 觀眾就某點觀察，建議需要於拍攝時行近目標物以進行近鏡拍攝。

燈光 Lighting

拍攝的天氣和時間

例如陰天需要較強的燈光，下午時間一般太陽光較充足

• 嘗試找一個實用的照明的位置。

• 進階: 在您現有照明燈具中使用高CRI燈泡 (CRI bulbs)。

避免有任何人在架空燈 (overhead lights)下。

聲響 Audio

拍攝的時段和位置:

儘量避免在人流車流較多的時段進行拍攝，否則，需

VR360視頻製作的注意事項 (DOs and DON’Ts) ^(續)

(79)

下載、傳輸、編輯

• 下載

– 利用360度相機附屬的手機應用程式下載選擇的影片

– 例如: 如果你使用LG360 360度相機，下載 360 CAM手機應用程式以下載影片

(需要按360度相機所提供的，因為不同的相機供應商採用不同的技術規格 (Specification)製作，詳情請參閱供應商的網站)

• 傳輸

– 下載所選擇的影片至手機後，利用傳輸線 (USB)傳輸檔案到電腦

• 編輯

– 下載編輯應用程式開始編輯

– 如果想更快速進行編輯，可以使用手機應用程式 (例如 Collect)完成 (見下頁)

Preparing 準備

Filming 拍攝

Processing 製作

Uploading 上載

Viewing 觀看

(80)

360度影片編輯軟件

Choices for 360-degree video editing software

應用程式名稱 Name 下載連結 Link for Download 用戶指引及影片 Manual & Video

GARMIN VIRB Edit

(Free)

http://www8.garmin.com/support/download_details.

jsp?id=6591

https://www.youtube.com/watch?v=DI0a zteZLIA

Collect - Edit 360° Videos (For iOS & Android Phone)

(Free)

iOS App:

Download from http://collect.video/

(currently not available) Android App:

https://play.google.com/store/apps/details?id=io.coll ect.collect&rdid=io.collect.collect

https://www.youtube.com/watch?v=xC- YlHPgk-c

Cyberlink PowerDirector [PC only]

(Paid, 30-day free trial)

https://tw.cyberlink.com/downloads/trials/powerdire ctor-

ultra/download_zh_HK.html?affid=2581_1299_540

https://www.youtube.com/watch?v=C31 d1LqRHwk

(81)

桌上電腦編輯軟件

GARMIN VIRB Edit (Edit on PC)

影片教學

https://www.youtube.com/watch?v=OJeHkv50Rog

•有完整的編輯工具套件可供使用，讓您依照喜好調整影片

。提供預先載入的音樂選項，也可加入您自己的曲目，也能修剪影片片段，加入轉場、自訂標題等。

•內建分享：輕鬆將鏡頭分享到 YouTube®、Facebook®、

Vimeo® 和 Garmin Connect™ Share

(82)

智能手機 360° 影片編輯應用程式 (Edit on Phone)

Collect - Edit 360° Videos (For Android)**

https://www.youtube.com/watch?v=xC-YlHPgk-c With Collect you can:

-將多個360剪輯合併 merge several 360 clips together;

-

添加音樂

add music;

-

修剪並從同一個視頻中選擇幾個時刻

trim and select several moments from the same video;

-製作慢/快動作影片 make slow/fast motion videos;

-

重新排列順序

rearrange the order;

-

應用過濾器

apply filters;

設置一個新的中心

(83)

步驟：

1.選擇手機中現有360視頻。

2.修剪，重新排列，重新編輯 (包括過濾器、添加音樂等功能。

3.通過YouTube，Facebook或任何其他社交網絡和通信(message) 保存或分享。

智能手機 360° 影片編輯應用程式 (Edit on Phone)

Collect - Edit 360° Videos (For Android)**

(84)

上傳 360 度影片至YouTube

步驟 1: 開啟並登入Google 戶口

• 登錄

https://www.youtube.com/

• 預設Google 戶口:

步驟 2: 按上載圖標

用戶名稱: edbarvr 密碼: edbarvr2017

Preparing 準備

Filming 拍攝

Processing 製作

Uploading

上載

Viewing 觀看

(85)

步驟 3: 按上載圖標後進入以下版面；選取需要上傳的檔案或將影片檔案拖曳到中間

步驟 4:

選擇適合的隱私權

(建議先設定「私人」)

(86)

步驟 5: 加入適當的

標題、描述、標籤、影片縮圖和隱私權設定

5.1 輸入所有 內容和設定

5.2 按儲存

(87)

步驟 6:

按提供的連結觀看影片並檢查是否符合要求

6.2 檢查你輸入 的內容

6.1

按提供的連結

(88)

確認影片能否啟用 360 度播放功能

• 發佈影片前，建議您先在電腦上觀看，確認影片能否啟用 360 度播放功能。系統最長可能需要 1 小時才能處理完並開始播放 360 度影片。

• 360 度影片的畫面左上角會有平移按鈕，用鍵盤上的 W、

A、S、D 這四個按鍵即可旋轉畫面。這些功能如果能正常

運作，就表示影片支援 360 度播放功能。

(89)

如果你的影片沒有360影片播放功能

• 影片檔案需包含特定的中繼資料，系統才會啟用 360 度影片播放功能。請按照下列指示安裝應用程式，由應用程式替您將必要的中繼資料加入新的影片檔。

•

透過應用程式建立支援 360 度影片播放功能的檔案

• 下載 Mac 版或 Windows 版的 360 Video Metadata 應用程式。

• 將檔案解壓縮，然後開啟 360 Video Metadata 應用程式。如果您使用的是 Mac 作業系統，可能需要對著應用程式按右鍵，然後點選 [開啟]。

• 選取影片檔案。

• 勾選 [Spherical] 核取方塊，然後點選 [Save as]。注意，請不要勾選 [3D Top- bottom] 核取方塊。詳情請參閱虛擬實境影片提供的上傳說明。

• 輸入要建立的檔案名稱。

• 儲存檔案。系統會自動建立新檔案，並將新檔案儲存在與原始檔案相同的位置。

• 把新檔案上傳至 YouTube。

• 等待系統處理 360 度效果，這項作業最多可能需要 1 小時才能完成。

• 您也可以使用 Python 指令碼為影片新增中繼資料。

資料來源: https://support.google.com/youtube/answer/6178631?hl=zh-Hant

(90)

如何在利用在手機/ 平板電腦/ VR頭戴顯示器觀看360影片

• 通過 VR 頭戴顯示器顯示

– 下載YouTube手機應用程式 – 登入你上載VR影片的Google

戶口

– 要啟用頭戴顯示器功能(headset playback)，請點擊YouTube應用程序播放器中的headset 圖標。

Preparing 準備

Filming 拍攝

Processing 製作

Uploading 上載

Viewing

觀看

(91)

• 通過桌面和手機顯示 (Desktop and mobile viewing)

在桌面上，您可以用箭頭鍵，鼠標或觸控板瀏覽360視頻。在播放器的右側，您將看到一個指示器，指示您在視頻中面對的方向。

如何在Vimeo

利用VR Gear和軟件在網上觀看360影片

(92)

如何在Vimeo

利用VR Gear和軟件在網上觀看360影片

• 通過 VR 頭戴顯示器顯示 – 下載Vimeo手機應用程

式

– 要啟用頭戴顯示器功能 (headset playback)，請點擊Vimeo應用程序播放器中的headset 圖標。

– 資料來源:

(93)

設計和整合課堂內的AR和VR活動

你可用 15 分鐘時間整合你的教學活動設計，

討論加入上述AR和VR教件製作工具的適切性和可行性。

(94)

討論AR和VR科技的校內管理和推行，

以及有關注意事項

延伸閱讀:

虛擬實境狂潮：從購物、教育到醫療，VR/AR商機即將顛覆未來的十大產業，曹雨著 (2016)

焦點

– 教育培訓創新:

• 兒童教育

• 能力拓展

• 科學研究實驗

– 對兒童健康的討論

(95)

第二節：擴增實境和虛擬實境的實際應用及設計課堂活動 2.1 作業討論及意見回饋

2.2 運用擴增實境應用程式(例如：Aurasma)製作及觀看擴增實境效果 2.3 三維(3D)掃描技術的實際操作

2.4 運用360度相機拍攝，製作及觀看360度相片和影片 2.5 設計和整合課堂內的擴增實境和虛擬實境活動

2.6 討論擴增實境和虛擬實境科技的校內管理和推行，以及有關注意事項 2.7 總結、討論及問與答環節

95

總結、討論及問與答環節

(96)

總結

第一節：介紹於小學運用擴增實境和虛擬實境的教學應用以提升 學生的參與度及學習效能

1.1 介紹擴增實境和虛擬實境科技

1.2 擴增實境和虛擬實境的學習機會、特點、優點和限制

1.3 介紹常識科和其他STEM相關科目的綜合活動例子，包括：AR 沙箱、參觀博物館等

1.4 案例：擴增實境和虛擬實境的課堂應用及實際操作

1.5 有關教學設計的小組討論

(97)

作業 Assignment*

製作你的 VR 或 AR 教案

(*你需要完成本作業以完成本課程)

– 製作配合你任教科目的教案教案內容包括:

1. 可應用擴增實境(AR)或/和虛擬實境(VR)的課題和學習範疇 2. 以上課題和學習範疇適用的級別

3. 請就上述可應用AR或/和VR的課題和學習範疇設計教學活動。

4. 請列出三個協助你設計上述教案的相關AR和VR教學資源。

(請在資源名稱後列出指定的連結)

5. 請寫出你預期你的教案設計能如何提升學生的參與及學習效能

• 提交到以下連結**: https://goo.gl/forms/OBsu9B6eBECWQTcq1

– ** 建議: 你可先與其他同工在我們提供的MS Word 檔案「作業大綱」

中草擬作業的內容，完成後才提交到這個Google Form，同時確保保留作業內容的紀錄，實驗室有機會再向老師索取作業內容。

(98)

參與「國際傑出電子教學獎 2017/18」

「歷史學習」項目

(參與本教學獎屬個人自願性質，你亦需要提交活動作業以完成課程。)

• 配合教育局的發展方向，本實驗室為鼓勵更多歷史科教學的老師於教學之中加入電子教學的元素，使學生更有效學習歷史。

– 您可以提交本作業作為參賽內容，於提交習作時可回應你是否願意直接參與本屆「國際傑出電子教學獎 2017/18」的「歷史學習」項目。

• 評審考慮:

– 教學內容

– 使用電子科技於學科的有效性、創新程度 – 課題和學習範疇的適切性

(99)

(100)

提交教育局的課程評估表

• 請填寫教育局的課程評估表，並於離開前提交。

• Please fill in the EDB Course Evaluation Form and submit it

by the end of the class.

(101)

提交香港大學課程評估及跟進表格 HKU Training Evaluation & Follow-up

https://goo.gl/forms/lPD7g0BSkMPjAqq22

(102)

資訊科技教育教學法系列：