'Lights'幕后:最新的WebGL轰动!

HelloEnjoyInterscope Records要求创建为英国艺术家Ellie Goulding使用WebGL的互动音乐体验

在HelloEnjoy,我们相信创造既直观又具有视觉吸引力的交互式3D体验。我们的目标是要求用户很少接触到更广泛的受众,同时以高端图形和美学奖励他们。

我们热爱音乐,并且在视觉和互动方面总是看到很多潜力,所以什么时候北美工具我们在美国的代理商通过我们立即加入的这个项目找到了我们。

客户给了我们免费的创意,并且非常了解该技术的实验性质,这使我们能够使用不同的可视化技术。以同样的方式,现场音乐视觉效果可以带来更高的体验,我们希望通过光线和色彩以及交互性来增强感知音乐的感觉。

技术

与技术无关使我们能够专注于最能满足我们项目需求的解决方案。在这种情况下,我们认为最好的选择是WebGL,这是一种新的Web技术,可以在不安装其他软件的情况下为现代浏览器提供硬件加速的3D图形。

WebGL基本上是一个基于OpenGL ES 2.0构建的JavaScript API,这是目前使用的标准图形库,不仅可以在台式计算机上渲染2D和3D图形,还可以在平板电脑和智能手机等移动设备上渲染。

为了释放WebGL的力量,我们选择了Three.js所3D引擎,一个功能强大且易于使用的库Mr.doob由世界各地非常有才华的开发团队维护。

虽然您可以使用文本编辑器开始JavaScript开发,但对于像我们这样雄心勃勃的项目,包含超过12,000行代码,您需要一个更强大的环境。我们用WebStorm,一个JavaScript IDE,具有自动完成,重构,动态代码分析和其他高级功能。

音乐

作为视觉与音乐一起建立的基础,我们分析了歌曲的不同主干,以捕捉每个部分体验的结构和能量水平。

By overlaying the waveforms of the different stems we identify the different sections of the song

通过覆盖不同词干的波形,我们识别出歌曲的不同部分

这些词干由唱片公司提供,为我们提供了一个全新的视角和对音乐的深刻理解。其中一些用于同步图形元素,另一些用于组合以获得高质量的音量和音频频谱数据。

环境

我们的创作方法基于飞越无限景观的概念,该景观对声音做出反应并随着音乐一起演变。这允许用户交互,但是如果用户选择不进行交互,则还提供了很好的体验。

我们使用各种工具和技术来创建网站的不同元素,一些来自传统的游戏开发,而另一些则是图形编程中常见的。我们选择了其中一些与您分享。

地形

地形由相同的瓷砖制成,这些瓷砖放置在相机的视野中。我们通过在不同的地方重复使用来节省大量的处理时间,而不是单独更新每个处理时间。另一方面,我们必须确保它们无缝,以便它们完全可以拼接。

地形本身是从66x66像素高度的地图生成的,灰度图像显示了土地的高度。我们首先使用Clouds过滤器在Photoshop中创建它,但结果地形太陡了。我们通过应用高斯模糊获得了更圆润的景观,但我们知道仍有改进的余地。

我们终于意识到256级灰度的标准色彩分辨率不足以满足我们的需求。它需要更高的精度。我们的解决方案涉及进一步软化JavaScript内部的高度贴图值,以产生平缓的山丘和圆形的山谷。

Heightmap texture and generated terrain after smoothing

平滑后的高度贴图纹理和生成的地形

为了让它看起来更有趣,我们希望地面能够显示不同的颜色和形状。为此,我们需要实时渲染动态纹理并将其应用于景观。我们开始在512x512分辨率的画布上进行,但是在每帧上重绘它时性能受到影响。最后,我们选择了一个单独的WebGL场景,该场景渲染到用于地形的纹理上。

此地形场景基本上在2D中使用其自己的正交相机(没有任何透视)。在这里,我们使用标准平面在歌曲的各个部分创建不同类型的线条和圆圈。此时,我们还渲染从景观中的其他对象发出的光,最后我们使用后期处理使其沿侧面无缝。

Examples of the terrain texture at various points of the piece

在该片的各个点处的地形纹理的示例

发光的球体

一系列不同的发光物体填充在我们的环境中。它们都是由代码生成的,具有各种形状,着色器和行为。

球体是互动的,并与节拍同步。对于它们的着色,我们使用一种称为顶点颜色的技术,其中颜色被分配给每个顶点,并且图形硬件在它们之间平滑地插值,从而创建可爱的渐变。

为了将球体淡化为黑色和白色,我们使用自定义着色器,具有乘法和附加参数。在图形卡中,RGB颜色值的范围从0到1,而不是0到255.这样,如果我们乘以1,我们得到相同的颜色,但如果我们用0做,我们得到黑色(0,0,0) 。添加按预期工作,如果我们添加0颜色不会改变,但通过加1,我们得到白色(1,1,1),因为结果被钳制。

Additive and multiplicative operations on vertex coloured spheres

顶点彩色球体上的加法和乘法运算

光束

这首歌的最后一部分非常史诗。从沉默开始,它立即释放出大量的能量。这是我们介绍光束的地方。

为了创造这种效果,我们用三个相隔120度旋转的平面构建一个网格。它们的纹理是一种简单的渐变,它是添加剂混合的,因此它们呈现在彼此之上。结果是一股明亮的光线,给人一种很好的体积错觉。

Texture and mesh of the light beam object

光束对象的纹理和网格

Twitter整合

在体验期间可以看到发布有关该网站的推文的用户的姓名和头像图像。实时推文由Echo强大的推动StreamServer平台,它允许我们快速收集,存储和提供实时数据,只需很少的工程量。

粒子网格用于显示它们,每个粒子代表原始图像的像素。要在Twitter名称中创建文本,我们使用转换后的位图字体字形设计师,一个Mac专用的应用程序,通常用于为iOS游戏创建彩色位图字体。它导出一个包含所有字符的图像和一个Cocos2D .fnt格式的字体描述文件,它只是一个文本文件,很容易在JavaScript中解析。

语音

Ellie Goulding的声音被视觉化为闪耀的光线,其中的小径根据组合的vox茎的音量和频谱频率移动和改变形状。

这种类型的数据可以生成非常大的文件,并且需要以某种方式进行压缩,因此不会显着增加加载时间。幸运的是,在JavaScript中将原始数据保存为PNG图像非常有效。它们由浏览器自动解压缩,并且可以使用HTML5画布轻松检索像素数据。

我们的第一种方法是使用3D粒子系统创建闪耀的光,但我们需要太多的粒子才能达到我们想要的效果。由于影响如此之多,我们在此任务中几乎没有表现,我们意识到我们需要一个不同的解决方案。

为了获得具有良好性能的逼真效果,渲染了粒子系统TimelineFX,一个在游戏中使用的强大的粒子效果编辑器,并作为精灵表导出。

Sprite sheet for the 16-frame animation of the sparkling light

用于闪烁灯光的16帧动画的精灵表

另一方面,使用alpha和加法混合模式在3D中创建轨迹,并使用声谱数据和三角函数的组合实时动画以平滑它。

Wireframe view of the light trails

光线的线框视图

后期处理

最后,将一些效果应用于最终渲染。 Bloom在场景中的对象周围添加了漂亮的光晕,而晕影则降低了图像边界的亮度。两种效果的结合产生更逼真和更温暖的图像,并加强了光影的幻觉。

Post-processed image to the left, original image to the right

后处理图像向左,原始图像向右

结论

我们相信实时3D图形特别适合增强音乐,允许用户通过沉浸式视觉效果和互动创造更丰富的体验,以全新且令人兴奋的方式享受它。虽然重要的是要记住图形是为了提供体验,并且没有多少技术魔法可以取代明确的美学,但毫无疑问,硬件加速3D在网络和移动中的出现带来了新的表现力水平。我们面前激动人心。

如果你想看看好莱坞在2012年的表现,请查看最好的3D电影



翻译字数超限