使用粒子系统来表现音乐旋律

最近一直想试着怎么用很炫的方式将音乐展现出来，而不只是用耳朵去听，前几天用three.js实现了一个粒子系统来表现音乐旋律。先放地址和视频！

 

www.qsc.zju.edu.cn/apps/bubble/lab/pupple/rhythm.html

 

three.js的example里有一个sparks.js是实现粒子系统的，包括emitter, life，velocity等一些东西。但是本着尽量用自己东西的原则，我用了之前自己写的一个动画lib去实现了一个粒子系统，当然没有他那个封装的那么好，那么详尽。

那个lib本来用在canvas动画或者dom动画上的，用了一个时间轴的概念，有life，transition属性，但是要表现一个效果好一点的粒子系统，还需要很多东西，比如一个粒子发射器(emitter)，每个粒子消逝的动画等等。

关于粒子系统，milo大神有一篇非常详尽的文章用JavaScript玩转游戏物理(一)运动学模拟与粒子系统。

 

在WebGL里，对于数量非常庞大的粒子还有一种加速的手段，我们不需要新建那么多的Object，而是使用一个Object的每个顶点来作为粒子，因为在glsl里，我们可以使用 gl_PointSize 设置每个顶点的大小，甚至使用gl_PointCoord来设置每个顶点的纹理

如下：

VertexShader里：

gl_PointSize = size * ( 200.0 / length( mvPosition.xyz ) );

FragmentShader里：

vec4 outColor = texture2D( texture, gl_PointCoord );

于是就可以用这些顶点来模拟一个sprite效果的粒子了，当然，那些复杂构造的粒子是肯定不能这样做了。

 

音乐的展现

那怎么去展现一个音乐呢，我们怎么去获取音乐的旋律或者eq值？firefox和chrome都提供了借口，但是两个是完全不同的接口，chrome使用的是AudioContext，firefox的具体看这个https://wiki.mozilla.org/Audio_Data_API。要兼容两个接口实在是略麻烦，我又是一个很懒的人，于是就直接用soundmanager2了，soundmanager2是直接用flash的，又提供eq值，又提供waveform，刚好够用。

然后就比较简单了，将waveform的不同数据用不同大小，不同速度的粒子展现出来就行了，只是如果要取得比较好的效果的话还是要调很多东西的。

 

Extra

今天晚上又花了两个小时左右的时间做了一个3d的eq展现，比较简单。

http://www.qsc.zju.edu.cn/apps/bubble/lab/pupple/visualizeeq.html