VR情景播放，Raybeem带来沉浸式可视化音乐欣赏体验
文章相关引用及参考：gamasutra
本文来自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组件交互的不同光线集的列表。所以现在我拥有：
- 摄像头光线投射
- 左边控制器光线投射
- 右边控制器光线投射
- …
问题是，我不希望注视点成为选择器，只有当VR运动控制器不存在的时候我才希望注视点成为选择器。所以我设置了发送光线投射属于“注视点”还是“选择器”输入的数据类型。这样我就可以在需要的时候可以切换至注视点选择，我同时可以令注视点仍然与UI元素交互。现在，当你把目光移开的时候，Raybeem的VR菜单会自动淡出，远离你，从而利用“注视”类型的光线投射。系统仍然只允许一个“选定”的交互式用户界面元素，这就产生了能够用不同手来突出不同按钮的问题。因此，我像其他VR软件那样将选择限制在“主动”手，并且隐藏另一只手的输入。假装问题从一开始就不存在。
在实现了VR运动控制器支持UI后，我需要确定双手能够对主题做什么。在这期间，我并没有想太多，因为我的注意力都放在了解决项目的众多bug身上。如果有需要，我感觉自己完全可以快速地给用户双手准备任何东西。这个过程所面临的一个挑战是，如何针对多种控制器处理VR控制器输入，以及未来主题（这些主题甚至有可能与最初主题毫无关系）的按钮方案。
我最后将输入分解成：
- 菜单按钮：调出VR菜单
- 摇杆（类比）：发送Vector2（x，y）值
- 扳机键（类别）：根据按下的力度发送一个介于0.0到1.0之间的值
- 侧边键（数字）：按下即可激活一个主题效果
除了菜单之外，不同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有三种模式，由当前主题设置。
- Orbit：基本上是一种内转台，可以围绕一个点旋转相机，并且随机切换变焦和改变速度与方向。
- Teleport：相机传送至场景中不同的定义位置。
- 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日。
