canvas教程

时下 WebGL 的轰动作品

字号+ 作者:H5之家 来源:H5之家 2017-01-22 13:04 我要评论( )

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

互动工作室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平台实现的,它允许我们在不需要大量二次开发的情况下,快速的收集、储存和处理实时数据。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 学习总结(四)canvas绘图 WebGL SVG

    HTML5 学习总结(四)canvas绘图 WebGL SVG

    2017-01-21 08:02

  • 数据可视化的实现技术和工具比较(HTML5 canvas(Echart)、SVG、webGL等等)

    数据可视化的实现技术和工具比较(HTML5 canvas(Echart)、SVG、webGL

    2016-12-30 16:00

  • 新工具:GooEngine

    新工具:GooEngine

    2016-09-21 18:00

  • Windows Blue中IE11开启WebGL支持的方法

    Windows Blue中IE11开启WebGL支持的方法

    2016-09-16 16:00

网友点评
s