好孩子的第一次挑戰 WebVR 就快快樂樂上手課程

2016/05/19 中午 12:34 開放報名

VR（虛擬實境）的名詞出現已久，但一直到最近硬體與軟體開發上的門檻大幅降低才真正進入一般人的生活。作為企圖用 Web 統一天下（誤）的 Web 開發者，想來一定也很想看看怎麼用自己熟知的技術開發 VR 內容吧！

這位客官來得正好，我們這裡剛好有個叫做 WebVR 的東西！ＷebVR 是一套發展中的 API 規格，讓 Web 開發者可以創作內容、而使用者藉 VR 顯示工具可與內容互動。 Mozilla 跟 Google 已經開始在各自的瀏覽器裡放入 WebVR 技術作為實驗，並支援了 Google Cardboard、Oculus Rift、HTC Vive 等設備。

利用 Mozilla 推出的 A-Frame 就能快速上手製作 VR 內容，新奇簡單又好玩！在這個工作坊裡您將可以了解 WebVR 的原理，動手實際利用 A-Frame 建立 VR 環景照片檢視工具、VR 網站、VR 小遊戲。

參加者需備

• Knowledge of HTML, Javascript
• Bring your laptop and install Firefox release on it.
• Bring your smart phone (must have gyro sensor) and Safari/Chrome/Firefox installed
• Bring your Google Cardboard (v1 or v2)

課程概要

• Introduction to A-Frame
  • What is WebVR? WebVR API?
  • Describe Entity-Component architecture in A-Frame
  • How to use markup to make your own WebVR application?
  • http://www.slideshare.net/ellisonmu/introduction-to-aframe-57170744 (PS: this is the draft version)
• Implementation & Demo
  • Decorate your own partial Panorama & full Panorama with 3D elements
    • Basic elements of A-Frame
    • How to take panorama image via iPhone or Android
    • Show panorama image in VR environment (a image ring surround you)
    • How to take 360 camera image via iPhone or Android
    • Show 360 camera image in VR environment
  • VR website
    • Handle events
    • Simple animations
    • Map DOM to 3D planes
    • Construct a content surrounding scene
  • FPS VR game: MazeVR https://github.com/daoshengmu/aframe-lesson
    • 3D Graphics and Mathematics in VR
    • Game design
    • Camera and Movement control
    • Audio
    • Collision detection

• ゼミナール