Blog

【活動快訊】WebVR創意實作工作坊

136973147_1102149823541455_3428767722210196512_o

WebVR創意實作工作坊|隨時隨地的沈浸體驗!

工作坊介紹

虛擬實境(VR)經過多年發展,已逐漸普及於你我生活中,從遊戲、電影、展會到互動體驗等已不乏相關應用與作品。但目前專業VR顯示器仍要價不菲,大多數人尚未擁有自己的VR設備,如果想在家中也能擁有沈浸體驗,或是利用筆電來嘗試VR創作,我們可以有什麼選擇呢?「網頁虛擬實境(WebVR)」即是能以個人行動裝置與網路來創造沈浸體驗的解決方案。

本工作坊為融聲創意展覽《美好的弔詭》前導活動,將深入淺出地介紹WebVR應用可能,並經由實作演練與藝術家分享,讓更多人能接觸這個快速發展的創意科技。我們將以A-frame框架與Glitch平台為主要工具,帶領大家創建一個WebVR環境,透過HTML與Java Script語法來實現簡易互動功能。在熟悉基礎框架後,每位參與學員都將打造一個自己專屬的WebVR環境,置入自己的模型、聲音或圖像,並在完成後通過一個網頁連結,輕鬆地分享給其他人體驗。

工作坊內容

  • WebVR與A-Frame介紹
  • Glitch平台實作
  • 創建3D物體並更換材質
  • 於WebVR環境中讀取影音素材
  • 載入聲音檔案並安排聲響定位
  • 實現簡易互動判定(透過滑鼠或視線來觸發聲音、切換模型等)
  • 藝術家分享與QA

報名資訊

  • 報名連結:https://reurl.cc/YWlXWl
  • 報名截止:2021年01月15日下午17:00 截止

應用案例

《美好的弔詭》展覽中,由紀柏豪與張孟泰合作的《虛擬禁閉》這件作品,即是以WebVR開發的作品案例。在此一作品的WebVR體驗中,包含了基礎場景架設、聲音設計、視線與滑鼠互動、移動範圍限制與資料庫串接等。


講者介紹

紀柏豪|現為「融聲創意」負責人,並於麻省理工學院「藝術、文化與科技」項目進修。兼具經濟學與音樂背景,他的藝術實踐大多源自於對規則與邊界的好奇,常經由觀察日常生活中的差異來設計方法。近期主要關注方向為被連結實體如何在網絡中共構彼此,以及人與科技物的能動性與協同可能。他曾於荷蘭V2動態媒體中心(2014)、西班牙Laboral藝術與創意產業中心(2016)、英國FACT藝術與創意科技基金會(2018)等科技藝術機構駐村,2019年獲選為國家兩廳院短期駐館藝術家,作品與合作項目曾於國內外諸多藝術場館及活動中呈現。

張孟泰|跨學科藝術家,現為Rensselaer Polytechnic Institute 在讀博士生。他畢業於倫敦大學金匠學院主修藝術,並獲有哥倫比亞大學聲音藝術碩士與紐約大學視覺藝術學院碩士學位。他的創作與研究目前集中於沉浸式影像和聲音裝置。他的作品於國際間展出,曾參與周大福合作跨界珠寶首飾設計和「紐約紐約時尚跨界藝術展」並展於2019年紐約時裝週、2019年和2018年國際電腦音樂大會(ICMC)、2018年音樂表達新界面(NIME)以及紐約電子音樂節(NYCEMF)等。


什麼是WebVR?

WebVR是一項實驗性的JavaScript API,可以利用網頁瀏覽器提供支援各種虛擬實境裝置(如HTC Vive、Oculus Rift或Google Cardboard)。WebVR的實現需要3個前置條件:WebVR API、網路瀏覽器支持和VR顯示器支持。這項技術的優點,從低進入門檻與開發成本、應用範圍廣泛、無安裝包、易於維護與擴充,到跨平台、隨連隨用等特性,大幅拓展了虛擬實境的應用與發展面向。但因WebVR體驗仰賴於網路瀏覽器與連線速度,目前WebGL在繪圖解析度上還無法勾勒出栩栩如生的視覺效果,對於愛好高解析度與擬真感的觀眾缺乏衝擊力。不過因為只要有可連網的行動裝置就能體驗,並可連接專業VR顯示器,在流通上比起傳統VR更有彈性與親和力。

什麼是A-Frame?

A-Frame是一個用於搭建虛擬實境(VR)體驗的開源網路框架,開發者可使用HTML來創建3D和WebVR場景。 HTML環境為Web開發者和設計師提供了一個熟悉的創作工具,同時結合了Unity等引擎使用的流行遊戲開發模式。 A-Frame以Three.js為基礎,最初是在2015年中後期Mozilla VR團隊內部開發的。創建A-Frame的目的是為了讓網絡開發者和設計師能夠在不了解WebGL的情況下,用HTML編寫3D和VR體驗。為了能對我們的工作網頁進行即時編譯,我們將使用Glitch平台-它是一個可從網頁端瀏覽器直接編寫程式的線上協作工具,並可為用戶託管網頁與即時查看程式效果。

參考影片


  • 主辦單位|融聲創意工作室
  • 贊助單位|國藝會、台北市文化局
  • 報名問題請來信|施雅恬 [email protected]
  • 工作坊問題請來信|融聲創意 [email protected]
  • 工作坊活動連結|https://www.facebook.com/events/423880642292592/

1 Comment(s)

  1. 翁偉倬
    2021-01-12

    3 Q

Write a comment