VR情景播放，Raybeem帶來沉浸式可視化音樂欣賞體驗

本文來自VR音樂可視化工具Raybeem的製作人Bryson Whiteman。

（映維網 2018年02月02日）Raybeem是Sokay的第一個VR項目。這不是2D，也不是遊戲。然而，這和Sokay以往推出的產品一樣都能觸動我的內心。整個2017年我都在研發Raybeem。我可以把它形容為一個旋風，而當我處於旋風之中時這很難以解釋。在下面，我把大腦中亂七八糟的一切一切都寫成了這篇長長的博文。

對於Raybeem這個虛擬現實項目，我最初只是為了在虛擬現實中傾聽我最喜歡的Drum＆Bass電台Bassdrive.com。在青少年時期，我曾無數次盯著Winamp可視化工具。切換和尋找我最喜歡的可視化情景，調整設置，並且下載新的情景。這是Sokay在2001年傾聽音樂的主要方式。

Raybeem對我來說是一個非常大型的項目，所以我一直理不清到底要怎樣描述。就核心理念上，我認為Raybeem是一個VR音樂可視化工具。無論如何，這就是Raybeem概念的起點。我只是想創建一個在VR中聆聽音樂的應用程序。Raybeem中的不同可視化可以看作是「Theme（主題）」。一個Raybeem Theme就是我設想的能夠對音樂有所反應的環境。所以Theme可以是任何一切，現實或抽象，交互或非交互。

當我開始研發Raybeem的時候，我大腦中已經形成了一個非常具體的概念。事實證明，即使是面對所有的筆記，草圖和原型，我都會自欺欺人地認為自己做得仍然不夠。下面的文章將講述我在發行Raybeem之前的種種思緒。

1. 音頻頻譜

這是用來思考如何在Unity中訪問音頻頻譜數據的demo

Raybeem的核心是用於分析音頻頻譜的組件。這是通過在Unity中利用AudioSource.GetSpectrumData（）函數所實現的功能。這為我提供了Raybeem正在播放的當前音頻幀的音頻數據。這跟音頻的來源無關，因為它可以來自本地MP3，網路流式傳輸，麥克風輸入等等。我計算劃分數據，並且平均出它在0.0-1.0之間的LOW（低），MID（中），HIGH（高）範圍值。我基本上得出了每個範圍的百分比。我仍然認為這是一個天真的方法，但它的效果足夠好。

我利用音頻值來確定一系列不同的事情。在大多數情況下，這些組件控制對象的比例和顏色等事情。另一個例子見於「Blue」主題，一個能夠把速度提高至超過某個音頻閾值的粒子。你可以簡單通過Unity組件來定義這些響應，而我又可以把Unity組件放在主題中的對象上。

自那以後，我對音頻又學會了新的知識。在未來，我十分樂意重新修改Raybeem的音頻分析方面，為主題的響應提供更多的細微差別。我相信我遲早可以完成。

2. 主題

Raybee主題中的唯一共同點是它們都會以某種方式響應音樂，或者是為音樂聆聽提供一次優秀的體驗。在大部分情況下，我我創建了一些組件來偵聽音頻頻譜範圍，並根據其活動百分比作出反應。例如，在「Blue」主題中，我令粒子漂浮在空中，並且讓其對音頻頻譜的MID範圍作出反應。當MID範圍為0％時，顆粒為黃色；100％時則完全是紅色。如果MID範圍是50％，粒子則介於黃色和紅色之間，所以會有一種橙色的感覺。我在主題中創建了不同的組件，而它們都把相同的邏輯應用於「比例」，或者更複雜的顏色轉換等屬性。

這樣的解釋十分普通，但基本上我就是製作了一系列的組件，然後在主題中播放它們。

2.1 「Blue」 主題

Raybeem的初始主題就是一個名為「Blue」的粒子系統。這個粒子系統的演算法實際上是根據Robert Hodgin所撰寫的教程。我認為蘋果從他手上購買了iTunes可視化工具，因為這最初就是他為iTunes開發的插件。令人感到遺憾的是，所有的名都歸到了蘋果身上，不過這又是另一個故事了。

在我開始研發Raybeem的時候，最初的粒子就像是「Zen」主題中的仙靈或蝴蝶。當我開始測試它們的時候（我草擬了一個虛擬現實環境），我感覺只是單純地坐下來欣賞這些小小的粒子漂浮就已經令我十分著迷，而我在當時甚至還沒有在demo中添加音樂。

在那時，我尚不確定「Zen」主題的視覺方向，所以我把粒子放在了一個黑色背景版下的新主題測試中。黑色背景板對我的眼睛來說過於刺眼，因為這是白色的粒子呈現在純黑色中。所以我將給背景板輕微染上了藍色。然後我注意到把純色作為背景板感覺不太舒服，所以我添加了漸變色，這樣你至少能夠知覺哪邊是向上。然後，我添加了一個等麵線框圓頂，希望能夠實現某種地平線的感覺。接下來，我在遠處添加了逐漸消失的建築平面，以提供更好的深度感。對粒子著色器進行額外的調整，使其能夠霧狀效果以顯示更多的深度。

這是我測試視覺是否與音樂存在連接的試驗台。最初是在Gear VR上，因為這樣我可以很容易地向人們展示並且評估具體的興趣。即便有些人沒有看完最初的原型，但我認為大多數人的反應都十分積極。我發現很多人都無法理解這個主題的抽象性，所以我想展示各種主題以方便大家理解。

2.2 「Highway」 主題

在掌握了基本之後，我為Raybeem設想了一個「Highway」主題。我曾連續三年去過日本東京，而這個沒有盡頭的巨大城市一直給我留下了深刻的印象。我來自洛杉磯，這同樣是一個大城市，但十分分散，沒有像東京那麼密集。我希望製作一種無休止的過程主題，你可以在裡面永遠地「行駛」在空曠的高速公路上。這是洛杉磯的夢想，一個沒有車流的城市。

不要問我為什麼，但我決定自己建模。我有藝術的背景，所以如果有必要我不會羞於展示。但為了保持一致，我需要稍微進行調整。由於我仍然懷念那個3D圖形時代（致敬《VR戰士》和《VR賽車》），所以我計劃打造一個看起來像是低保真度的《星際火狐》，我通過數年前的WebGL Rush-D進行了試驗，所以我從最初結束的地方重新開始。

在Unity中的一個城市街區

這座城市最終沒有變成一個無盡的過程，而是有點隨機的感覺。我設置了10個不同的城市街區。我在每個街區都精心地放置了建築物，並根據你在虛擬現實中經過時的樣子進行了調整。街區的順序都是隨機安排。我使用了Curved World這個Unity asset來隨機彎曲環境，在這條漫無邊際的道路上給人一種你彷彿正在轉彎的感覺。

最初的打算是讓你穿過城市不同的區域，有火車和地下結構的隧道，有海岸線，也有無盡的橋樑。我最終縮小了我的計劃，因為這一切都需要我自己來完成。這變得十分耗時，因為我最終需要為主題添加更多的細節，比如說長凳和樹木等等。

我的素描圖

我盡量地抄小路。因為我打算做一個平面的陰影，我決定使用COLR這個Unity asset。我認為完成Raybeem的唯一方法是設置一個限制，並且接受我可以在限制內所得到的一切。COLR拯救了我，因為它根據多邊形面向的方向（基本上是東西南北）來為多邊形著色。我需要將這個著色器與Curved World著色器結合起來，而這是一個相當簡單的集成。

事情變得棘手的地方是，我需要更新非常多的材質實例。所以對於這個主題，我隔離了建築物的窗戶材質並對它們進行動態的調整。由於每個特定材質都有數十個實例，我決定修改每種材質的sharedMaterial。通常來說你不應該這樣做，因為修改原始asset總是會出現意想不到的後果。由於這些材質常常都只能通過代碼更新，所以我才決定選擇這條路徑。但在一開始的時候這沒有什麼效果，所以我又嘗試了其他東西。現在，這一切都變得十分棘手，而最後我建立了一個複雜的方法來尋找這個材質的引用。但這一切都不再重要了，讓我們忘記吧，好嗎？畢竟問題已經解決了。

對了，材質在我動態地改變顏色後沒有進行更新的原因是COLR asset的設置方式。當在Unity Editor中使用顏色拾取器時，它使用Unity Editor腳本來更新材質。我認為我最終不得不採取一定的措施來迫使這些更新發生在Raybeem內部。這是一場噩夢，但最後修復起來十分簡單。

2.3 「Lightshow」 主題

就本質而言，我是一個喜歡尋歡作樂的人。自我開始Raybeem這個項目以來，我一直希望製作一個「純粹的狂歡」主題，但當時沒有任何方向。但當我在為新主題思索一個方向時，我在Reddit上發現了一個帖子（點擊前往）是的，如果你無法分辨，我可以告訴你我無恥地剽竊了這個主題的感覺。令一個粒子系統在適合VR的距離下產生這種溫暖的光輝不需要花費太多的時間。我把它和一個Kaleidoscope asset（我一直在尋找使用它的理由）結合了起來。

我希望人們能夠通過這個主題來在VR中實現燈光秀。我仍然在開發手部的功能，但現在你可以留下光跡，並且製作蝴蝶圖形。以後我會添加獨角獸和符合其他狂歡主題的圖形。

2.4 「FireDancer」 主題

我從來沒有去過火人節，但我的朋友曾告訴過我一些故事。這個主題取材於我10年前在蘭開斯特附近沙漠所參加的一場派對。我駕駛著豐田凱美瑞在黑暗中追趕著閃閃發光的路標。在加利福尼亞沙漠的寒夜中親身體驗火之舞是一次值得一乾的事情。

對於這個主題，這裡的火實際上是來自於Unity的教程項目。如果你有興趣，你可以在Unity的官方YouTube頻道中找一下。

2.5 「StarStream」 主題

這是Raybeem發行後的的第一個主題更新。對於這個主題，我開始賦予用戶更多的控制，為他們提供一個可以實現更多交互的世界。這種交互大部分都是以可選的迷你遊戲形式實現。

當開始主題的時候，你會出現在一個太空般的環境中，從你身邊飛過的星雲層會為你提供一種運動的感覺。你可以使用搖桿調整自己面向的方位，朝後或側身。一個小地圖將鎖定在你的視圖左下角。藉助這個小地圖，你可以發現一個看起來像是燈塔那樣的「Sokay硬幣」。在收集硬幣後，你將會觸發一個迷你遊戲，而你必須在時間結束之前擊敗所有的產卵機器人。

我為機器人和槍支建模了一些Unity asset。我最終可能會為這個主題創造新的藝術品，並且改變遊戲玩法，但我目前計劃專註於新的主題。

3. VR輸入

讓應用同時支持這些控制器並不容易

最初Raybeem只是面向GearVR和Oculus DK2的原型，因為當時還沒有VR運動控制器，所以只能通過注視點來選擇UI。在我開始認真開發Raybeem的時候，我需要重新修改UI輸入系統，使其更加靈活，可以使用任意數量的選擇輸入。除了新的UI功能之外，我還必須設計一個能夠處理Oculus Touch和HTC Vive控制器的VR輸入的系統。

對於基於注視點的UI，我運行了一個更新循環，從攝像頭投射光線，並且檢查與包含互動式UI組件的任何對象的碰撞。如果該UI組件尚未被選中，它則變成選擇對象。然後，任何選擇按鈕都將觸發該互動式UI組件。為了令其支持運動控制器，我改為製作與互動式UI組件交互的不同光線集的列表。所以現在我擁有：

1. 攝像頭光線投射

2. 左邊控制器光線投射

3. 右邊控制器光線投射

4. …

問題是，我不希望注視點成為選擇器，只有當VR運動控制器不存在的時候我才希望注視點成為選擇器。所以我設置了發送光線投射屬於「注視點」還是「選擇器」輸入的數據類型。這樣我就可以在需要的時候可以切換至注視點選擇，我同時可以令注視點仍然與UI元素交互。現在，當你把目光移開的時候，Raybeem的VR菜單會自動淡出，遠離你，從而利用「注視」類型的光線投射。系統仍然只允許一個「選定」的互動式用戶界面元素，這就產生了能夠用不同手來突出不同按鈕的問題。因此，我像其他VR軟體那樣將選擇限制在「主動」手，並且隱藏另一隻手的輸入。假裝問題從一開始就不存在。

在實現了VR運動控制器支持UI後，我需要確定雙手能夠對主題做什麼。在這期間，我並沒有想太多，因為我的注意力都放在了解決項目的眾多bug身上。如果有需要，我感覺自己完全可以快速地給用戶雙手準備任何東西。這個過程所面臨的一個挑戰是，如何針對多種控制器處理VR控制器輸入，以及未來主題（這些主題甚至有可能與最初主題毫無關係）的按鈕方案。

我最後將輸入分解成：

1. 菜單按鈕：調出VR菜單

2. 搖桿（類比）：發送Vector2（x，y）值

3. 扳機鍵（類別）：根據按下的力度發送一個介於0.0到1.0之間的值

4. 側邊鍵（數字）：按下即可激活一個主題效果

除了菜單之外，不同Raybeem主題之間的控制項並不一致。有些人不喜歡這個，因為「按鈕可以用來做什麼？」在某些情況下（如「FireDancer」主題），按鈕什麼都不做。部分原因是我仍然在思考，而且時間不充足。如果當時對我來說沒有意義，我不會強勉地添加功能。我對此的解釋是，所有主題都是各自獨立，並且遵循自己的規則。有些主題可能沒有交互，有些可能是完整遊戲，存在複雜的邏輯來針對不同的情況。這些差異很可能需要以某種方式呈現給用戶（目前在Raybeem中沒有教程）。隨著Raybeem的不斷發展，我希望可以找到一種讓人們慢慢融入其中的方式。為這些交互定義輸入為我提供了一個起點，而我希望能夠在日後不斷優化調整。

回想起來，如果我使用VRTK，這些問題可能會有所緩解。但當我第一次遇到這個問題時，我不確定使用VRTK的作用有所少。此外，有時候以一種「粗暴」的方法來理解實際情況是值得一乾的事情。

4. VR Camera Rig

這個項目最具挑戰性的一個方面是，令其兼容Oculus Rift和HTC Vive，同時能夠完美適用非VR情景。在開始著手這個項目的時候我甚至無法肯定這是否可行。儘管我擁有兩款頭顯，但我主要是通過Oculus Rift進行開發。由於我是從Oculus的Gear VR SDK開始入手，令其兼容Oculus Rift無需進行任何改動。由於存在API文檔，所以Oculus的開發經更加容易，而我認為HTC Vive並不存在這一點。對於Vive的開發，你需要挑選演示，並且搜索他們的開發者論壇，而這樣做的效益非常低。在這之後，你會發現兩者的開發非常相似。

為了處理多個VR SDK，我創建了個人的「VR Detection」系統。在啟動Raybeem時，如果「VR Active」設置為「ON」，Raybeem將嘗試激活VR模式。系統只是檢查VR是否可用，然後根據你使用的是HTC Vive，Oculus Rift，還是說非VR環境來載入相應的Camera Rig。這些Camera Rig是基於各個VR SDK中所提供的Rig。在大多數情況下，我只需在組件上修改這些Rig即可將這些Camera集成到Raybeem。存在可以用於UI光線投射，後期處理和相機淡入淡出效果的組件。

可以簡單地使用Vive Rig，因為這屬於「Open VR」，而且支持Oculus。但從我的理解來看，這種方式並沒有利用Oculus的驅動程序，而我相信這是目前唯一支持ASW的驅動程序。所以為了獲得最好的Oculus體驗，你顯然希望使用Oculus的SDK。如果沒有載入VR Camera，VR Detection系統將載入「Attract Camera」。當用戶不是在VR中的時候，Attract Camera將從不同角度顯示場景。無論是否有人正在與Raybeem進行交互，屏幕中始終會顯示一定的畫面。即便你摘下了Oculus頭顯，這個Attract Camera仍然會顯示內容，而我相信這個功能會被Vive會禁用，因為它會導致崩潰（但請大家不要引用我這段話）。

現在Attract Camera有三種模式，由當前主題設置。

1. Orbit：基本上是一種內轉檯，可以圍繞一個點旋轉相機，並且隨機切換變焦和改變速度與方向。

2. Teleport：相機傳送至場景中不同的定義位置。

3. Combo：相機在「Orbit」和「Teleport」模式之間隨機切換。

Attract Camera是我最初的目標之一，但最終在實現起來卻成為了一種痛苦，因為在開始著手這一點時我已經深深受困於一系列的任務之中。然而，完成Raybeem是一項重要的事情，而且我因此可以為社交媒體提供大量的優秀片段。希望隨著新主題提出新的要求，我能夠繼續製作新的Attract Camera模式。

5. 現場活動

2011年，Sokay在Downtown Los Angeles Art Walk中舉行了第一次現場活動。我們將其稱之為「Sokay Play」。在那時候，我正開發我們的Flash遊戲《DONUT GET！》。在一開始，在活動中展示像《Thugjacker》和《LUV Tank》這樣的老遊戲令我感到有點不好意思，但我很快就意識到，遊戲有多舊並不重要，因為人們從來都沒有看過這些遊戲。我們的老遊戲對藝術家來說就像是「新的遊戲」一樣。

與《DONUT GET!》相比，我在Raybeem上希望改善用戶反饋環路。我在製作《DONUT GET!》時犯下了一個錯誤，我直到項目結束之前都沒有認真測試遊戲。部分原因是把一切整合成完整的體驗花費了太長時間。現在回想起來，我本應該儘快把遊戲交到玩家手上，這樣在項目正式推出之前就可以根據用戶的反饋進行調整優化。

在洛杉磯長島公共博物館主館的VRAR活動

我為Raybeem舉行的第一次活動是在洛杉磯長島公共博物館主館的VRAR活動，時間是2017年1月。我當時十分幸運，我的朋友Gabotron幫助組織了這場活動。我當時尚未準備好，但這是一個黃金機會。這是我全職開發Raybeem以來的第一個月。當時這基本上仍然是原型。Raybeem當時只有「Blue」主題，並且包含一些利用PC性能的調整與優化。我增加了重複循環不同調色板的功能，但當時並沒有任何運動控制器或交互。

能夠像這些陌生人展示我這個新項目的概況是一次令人興奮的體驗。這個活動對許多人來說都是他們的第一次體驗VR，而每一位用戶在嘗試完Raybeem後都面對笑容，這甚至包括希望我播放重金屬音樂的哪個老頭。這給了我極大的鼓勵。我開始採集每一個用戶的評論。我不記得有任何深刻的評論，但這是我開始「聆聽用戶的過程」的地方。我開始聆聽用戶的意見，並且嘗試他們喜歡和不喜歡的地方，然後開始思考如何解決他們提出的問題。我在當時並不知道的是，我後來為Raybeem舉行了很多現場活動。

我們的第一個大型活動是在Super Future

結果表明，音樂無國界。在推出Raybeem之前我有幸得到了多個活動的接受和邀請。在Futra開始接受他們夏季活動Super Future的申請提交時，我剛好接到了他們的電話。這個包含藝術，音樂和表演的活動剛好在Downtown LA的Lot 613舉行。我們設置了一個不錯的展位，而我當時十分緊張，我只是希望一切都能夠順利地進行。

在Super Future中的展示十分成功，感謝Sokey大家庭的幫助和支持

在最後一切都十分順利。在整個夜晚中，我們的展位前面都排著一條長長的隊伍，而且我們得到了許多優質的反饋。因為我讓Sokay的其他人都來幫忙，所以我無需獨力照顧展位，這令我如釋重負。看到這麼多人向我請教並把我當成虛擬現實的專家是一種十分奇怪的體驗。

這個活動相當順利，但這令我精疲力盡。在實際推出Raybeem之前我又舉辦了多個活動。當Raybeem身處在舞池中，緊鄰一個超厲害的揚聲器，並且響應DK所播放的音樂時，我感覺我終於琢磨透了。這正是我所追求的秘訣。這正是Raybeem的意義所在。對於Raybeem，我的設想是經過一天埋頭於代碼的辛苦工作後，我能夠用它來放鬆自己，沉浸於自己喜歡的音樂旋律之中。

我仍然在思考之中。舉辦活動令我筋疲力盡，而且拖著一堆脆弱的設備到處跑令人相當頭痛。我有時候需要拒絕一些活動的機會。

6. 社交媒體

當我開始Raybeem的時候，我決定要認真對待社交媒體，並且開設了一個Sokay Instagram賬號。我們有一個Sokay Facebook賬號，有一定的點贊，但相當不活躍。我的計劃是尋求一定幫助，而我則專註於開發和任何需要為Raybeem做的事情。在最後，這沒有什麼效果，而我在研發的同時需要同時處理社交賬號的事情。

對於Instagram賬號，我只是在做相當基本的事情，並且盡量每天上傳一張圖片。我最初是從原來的Sokey內容開始入手，這能夠為我提供足夠的時間來準備Raybeem的內容。我不知道應該說什麼。我盡量拍攝人們使用Raybeem的圖片和視頻，以確保有素材能夠用於社交媒體賬號。第一印象是你無法重新創建的一些罕見時刻。

7. 海報和預告片

我希望為社交媒體賬號提供一些與眾不同的內容，所以我請求我的朋友Ramiro為Raybeem創作了一組漫畫。他用自己的恐怖漫畫風格創作了非常棒的漫畫，而我總是希望找個理由可以與他一起工作。對於推廣Raybeem，我面臨的其中一個挑戰是我長久以來都只有一個主題，而且在不同的截圖和視頻片段中看起來都十分類似。我當時想根據Raybeem製作的一組漫畫可以為我在社交媒體上推廣Raybeem提供一定的內容。除此之外，我們將其設計成傳單的形式，並且在現場活動中向觀眾派發。

Ramiro的素描

我最喜歡的部分是那些能夠把一個模糊的概念或者糟糕的概念轉變成優秀作品的人士合作。在我的記憶力，我只是向Ramiro陳述了一些模糊的概念，亦即名為「Dr.Raybeem」的瘋狂科學家正在創建VR應用「Raybeem」。這位瘋狂的博士希望解決通過「Raybeem」這款虛擬現實軟體的形式來解決所有的心理損傷。隨著故事的深入，這取得了成功，但卻又過於成功，虛擬現實迅速泛濫。人們不再追求毒品或酒精，而是這種虛幻的世界。後來沒有人再見到過Dr.Raybeem，有傳聞說他已經躲藏在代碼之中。

有興趣閱讀漫畫的讀者請（點擊這裡前往）。

不僅如此，我希望看到Ramiro的藝術作品成為動畫，所以我決定製作一部動畫作品。我沒有理由在After Effects中製作動畫，但我偶爾十分享受這種事情。

對於為Raybeem的推出而製作一個預告片，我希望取得一定的幫助。幸運的是，我的朋友Jennifer Estrad為我搭了一把手。令這成為一個挑戰的是，我當時仍然沒有確定Raybeem的預告片應該包含什麼。換句話說，我已經確定了大部分的功能，但我不確定如何將其表現出來。另外，我不是十分確定在首發版應該包含什麼。功能和主題直到最後一秒都是改動之中。幸運的是，Jennifer十分耐心，或許她也已經習慣了這一點，因為她就是靠製作預告片為生。

8. Steam與發行

雖然修復漏洞和在多台VR頭顯中進行測試令我感到頭疼，但我意識到我需要在Steam上發行Raybeem。當我在Steam頁面掛上了「即將推出」字樣，我就需要做好在Steam上發行遊戲的準備。

直到我在Steam上看到Raybeem記錄在Steam之前我都不敢相信這一切正在發生。我最終確定了如何發行工具，但這又令我感到頭疼，我只是想儘快完成。

能夠最終在Steam上發行應用至今都仍然令我感到激動。我記得在Steam上的初次體驗剛好是《半條命2》的發行日，我當時在百思買購買了遊戲，然後回到家中連上了鄰居的WiFi（連接十分糟糕），並且登陸Steam下載所有的激活信息，因為我當時甚至沒有安裝任何網路。但現在，我已經把部分Sokey的作品帶到了Steam。

我剛剛為Raybeem帶來了一個更新，添加了最新的「StarStream」主題。就在我準備發布時，我的朋友來到我這裡並進行測試，而我注意到了一個非常糟糕的錯誤（已經修復）。哈哈，如果你能夠看到這裡，非常感謝你。我認為甚至我的媽媽在讀了幾段之後都會放棄。如果你有什麼問題或反饋，請隨時通過請隨時通過sonofbryce@sokay.net聯繫我。

我們即將要舉行下一場活動。在洛杉磯長島公共博物館主館的VRAR2活動，2018年3月3日。

原文鏈接：https://yivian.com/news/41151.html

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！