时下 WebGL 的轰动作品 ——“Lights”的幕后故事

互动工作室HelloEnjoy为歌手Ellie Goulding的歌曲《Lights》制作了一个让人耳目一新的3D MV。创意总监Carlos Ulloa为我们带来了制作的幕后故事,包括团队为何选择WebGL和如何制作出这些让人沉浸其中的视觉效果。

受唱片公司Interscope Records的委托,HelloEnjoy使用WebGL为英国歌手Ellie Goulding制作了一个互动音乐体验

在HelloEnjoy,我们都相信3D互动体验可以带来直观上和视觉上魅力不凡的体验。我们的目标是对于广泛的受众降低参与的门槛,同时给予他们高端的视觉享受和美学体验。

我们热爱音乐并且一直在关注为音乐添加视觉化效果和交互体验的潜力,所以当我们在美国的代理Tool of North America告诉我们这个项目的时候,我们立刻就兴奋的跳了起来。

客户给了我们自由的创造空间和决策权,并且非常理解这项还处于实验阶段的技术,允许我们可以使用不同的视觉化技术。同样,为了制作出高端的音乐视觉化体验,我们想要通过光线和颜色,还有互动性,实现一种增强的感知音乐的体验。

技术

技术上的不可知性让我们可以着重聚焦于去选择一种最适合项目的解决方案。在这里,我们相信最好的选择就是WebGL,这是一种新的web技术可以为最新的浏览器带来硬件加速的3D图形,并且不需要安装任何额外的软件。

WebGL基本上就是一套构建于OpenGL ES 2.0之上的JavaScript API,它是一套用于渲染2D和3D图形的标准图形库,不仅可以运行于桌面电脑,还支持移动设备,比如平板电脑和智能手机。

为了充分释放WebGL的能量,我们选择了three.js这个3D引擎,它在强大的同时又很容易使用,它是由Mr.doob创建的,目前由来自全世界各地的开发者来共同维护。

虽然用一个文本编辑器就可以开始JavaScript的开发,但是对于这么一个庞大的项目,拥有超过12000行的代码,我们还是需要一个更强劲的开发环境。我们选择了WebStorm,它是一个JavaScript集成开发环境,可以实现自动编译、重构、动态代码分析和其他高级特性。

音乐

作为音乐视觉化的基础,我们分析了歌曲的主干,用于构建最终体验时各个部分的结构和能量强度。

(图:通过分析歌曲每一部分的波形图,我们将歌曲划分成几个不同的章节)

歌曲是由唱片公司提供的,让我们可以更深层次的去理解音乐。其中一些用于同步视觉元素,另一些被组合起来用于获得高质量的音响效果和音频频谱数据。

环境

我们的创意是基于一个飞行在无限广阔的地形之上的概念的,飞行中与声音产生互动,并随着音乐的进行不断展开。用户可以选择互动,但即使用户不动也可以获得不错的体验。

我们使用了不同的工具和技术来制作不同的元素,有一些是来自于传统的游戏开发,另一些是图形编程中常用的。我选择了其中的一些来介绍给大家。

地形

地形是由摄影机视野中可识别的网格构成的。通过地形复用,而不是不断的个体更新,我们可以节省大量的处理时间。另外一方面,我们还必须让地形无缝契合在一起。

地形本身是生成自一个66×66像素的高度图,在灰度模式下可以展示出地形的高低。一开始我们是在Photoshop中用云彩滤镜制作了这张图片,但是这样生成的地形太陡峭了;然后,我们又用了高斯模糊,这样就得到了相对圆润的地形,但是还是有很多地方需要改进。

我们最终意识到这是因为标准的256色的灰度等级不够精确,满足不了我们的需要。我们需要更高的精确度。我们的解决方法是在JavaScript里对高度图的数值进行软化处理,来制作出温和的山丘和圆滑的山谷。

 

(图:高度图纹理和经过平滑处理后生成的最终地形)

为了看上去更吸引人,我们想让地面显示出不同的颜色和形状。要达到这个目的,我们需要实时渲染动态纹理,并应用到地形上。一开始我们先试着在512×512像素的canvas上如此渲染,但是每帧重绘时的性能相当低下。最后,我们选择使用一个独立的WebGL场景渲染到地形的纹理上。

这个地形场景本质上来说是2D的,也就是使用了正交相机(没有任何透视)。在歌曲的不同部分,我们使用了标准的平面来建立不同类型的线条和圆形。我们同时还会渲染来自于地形中其他物体的光线,最后我们使用后处理来使其可以无缝衔接。

(图:在不同部分使用的各种地形纹理)

发光的球体

物体散发出的一系列的光线填充了场景。这些物体都是由代码生成的,有不同的形状、着色器和行为。

其中球体会和节奏同步,并产生互动。我们使用了顶点着色技术,也就是说颜色被分配给每个顶点,而显卡会进行线性插值在它们之间产生平滑的色彩渐变。

为了让球体可以渐隐为黑色或白色,我们自定义了着色器代码,添加了进行乘法和加法的参数。在显卡中,RGB颜色的取值范围是从0到1,而不是0到255,。这样,我们乘以1就可以得到相同的颜色,乘以0就能得到黑色(0,0,0)。加法运算也很好理解,我们加0意味着颜色不发生变化,如果加1就可以得到白色(1,1,1)。

(图:顶点着色技术中的加法和乘法运算)

光柱

歌曲的最后部分非常有史诗的感觉。由寂静开始,然后马上释放出巨大的能量。在这儿,我们引入了光柱。

为了实现这种效果,我们用三个各自旋转120度的平面构建了一个网格。而纹理是一个简单的渐变效果,在增加加法混合效果之后,每个平面都被渲染在其他平面之上。这样最后得到的效果就是一个明亮的光线流,给人一种看起来像是光柱的绝佳的错觉。

(图:光柱的纹理和网格)

整合Twitter

在体验过程中,每个转发这个网站的微博网友的名字和头像都会显示出来。这个实时的微博互动效果是由Echo强大的StreamServer平台实现的,它允许我们在不需要大量二次开发的情况下,快速的收集、储存和处理实时数据。

我们用粒子组成的网格来显示头像,每个粒子都代表原始图片的一个像素。我们用Glyph Designer转换了一个位图字体来显示微博网友的名字。Glyph Designer是一个Mac平台独占的应用程序,通常用在制作iOS游戏中创建带颜色的位图字体。它会把所有字母都导出为一张图片,把字体描述导出为Cocos2D中的 .fnt格式,后者其实只是一个文本文件,在JavaScript中很容易处理。

人声

Ellie Goulding的声音被视觉化为一道不断闪烁的光线,会沿着轨迹移动,并会随着音量和音频图谱的频率改变形状。

这种类型的数据会产生非常大的文件,为了不增加过多的载入时间,需要进行压缩处理。幸运的是,在JavaScript中可以很有效的将原始数据储存为PNG图片。它会被浏览器自动的解压缩,然后在HTML5 canvas中轻松地将像素数据重新读取。

一开始我们先用一套3D粒子系统制作了闪烁的光线,但是这样我们需要太多的粒子来达到我们想要的效果。这么多粒子效果同时运行,那性能无疑就会严重下降,我们意识到必须找到另一种解决办法。

为了获得真实的光影效果,同时又有不错的性能,我们使用了TimelineFX这套粒子系统来进行渲染,然后导出为sprite sheet(一组位图放在一个单独的图像文件中)。TimelineFX是一个强大的粒子效果编辑器,常用于游戏开发。

(图:闪烁光线的16帧动画导出之后的sprite sheet)

另外,我们使用了加法混合和α混合来创建光线的3D轨迹,并综合根据声音的频谱数据和三角函数来平滑它的动画效果。

(图:光线轨迹的网格视图)

后处理

最后,我们为最终渲染添加了两个效果。光晕给场景中的物体周围添加了不错的外发光效果,而晕影则降低了图像边缘的明亮度。两种效果组合在一起产生了一种更为真实和温暖的视觉效果,加强了光影的致幻感。

(图:左边是后置处理后的效果,右边是原始图像)

结语

我们认为实时3D图形特别适用于加强音乐的魅力,用具有沉浸感的视觉效果和互动创作出的丰富体验,可以让用户用一种全新的和令人激动方式去享受音乐,

虽然我们还是要牢记图形只是为体验服务的,而且没有什么技术能像魔法一样代替美的创意,但是毫无疑问,硬件加速的3D web会将表现力提高到一个新的境界。兴奋时刻,即在眼前!

 

原文地址:http://www.netmagazine.com/features/behind-scenes-lights-latest-webgl-sensation 

HiWebGL翻译整理,转载请注明出处!

 

分享到: 更多
Posted in Demo大赏. Bookmark the permalink.

Post a Comment

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>