音乐可视化

也可以点击这里查看。 Github仓库。 请随意调整参数，不会出bug的~ 😉

关于

这是一个与黄俊凯一起完成的课程渲染项目，用Javascript编写，使用WebGL和Three.js，在这里你可以找到超多很酷的项目。 教授对这个项目的最终效果没有要求，只是需要运用计算机图形和渲染。

原理

在详述原理之前，请记住，许多技术一旦被解释就会失去一些价值，这也是为什么技术专利持有人不愿意公布细节。 潜在的买家会说：”哦，我知道这东西怎么用了，这么简单，还要我花钱？”是的，它可能很简单，但你却不是最早提出这个想法的人。

要实现音乐的可视化，我们首先要了解什么是可视化。 这是维基百科的解释，你以前肯定从未搜索过它。 在我们的语境中，可视化经常被用来传达仅靠眼睛无法感知的信息。 例如，我们看不到紫外线/红外线，所以我们把这些波段映射到可见光。 这同样适用于音乐可视化，对于听不到音乐的聋人，我们将声音映射成视觉形式。 因此，找到这样的映射函数是大多数音乐甚至更广泛的声音可视化的关键。

我们将音乐映射到视觉形式的方法非常简单。 我们首先使用Web API对一段音乐作傅里叶变换。请注意，理论上和理想情况下这个过程是一个从声音到数字的一一映射，但在实际实现过程中可能是有损的。 然后，我们将傅里叶频谱的一个宽波段映射为某些视觉形式。这一部分就纯粹是自行发挥了。

我们的实现方式是通过模型的网格变形。我们首先将模型的一组网格顶点分配并注册到一个窄波段。 分配的标准是根据控制中的运动模式，所以可以是切片或切块。 然后，我们根据每组顶点的波段的振幅进行变形。变形的方向是从模型中心向外。 就这样，就这么简单。

我们没有写任何顶点/像素着色器，但结果一样好看。😁