音频团队由一群 Mozilla 志愿者组成，他们开发了 音频 API，以及最近的下一代 WebGL 演示。这是 No Comply 演示开发的故事。

在秋天，我们完成 Flight of the Navigator 后，我们音频和 WebGL 黑客团队正在寻找新的挑战。我们在 Firefox 4 发布之前完成了新的音频 API，并且每个人都在维护着各种开放的网络库，利用 HTML5、音频、JavaScript 和 WebGL 的新功能。我们想再次尝试测试 Firefox 4（当时还处于 beta 阶段）的极限。

Seth Bindernagel 给出了答案。他一直与一位名叫 Kraddy 的 DJ 和制作人朋友保持联系，这位朋友刚完成了一张很棒的新专辑。“如果我们尝试用他的声音做点什么呢？”这个想法太好了，我们无法拒绝，在 Kraddy 的支持下，我们深入研究了曲目，并开始想象这些歌曲通过网络媒介诠释后会是什么样子。

«Firefox 4 构建的网络是为艺术家、开发人员、电影制片人和音乐家准备的网络»

Kraddy 的音乐很容易演示，因为它很复杂，有很多强调的过渡和提示点——这些音乐需要可视化！No Comply 的音乐也提供了黑暗而沉思的声音，可以在其上构建叙事。在 他的博客 上，Kraddy 已经写过他对专辑意义的理解。

这张 EP 讲述了 Theseus 决定成为英雄并进入迷宫杀死牛头怪的故事。从更广义的角度来看，这张 EP 讲述了我们每个人在挑战自己时都会面临的战斗。我们必须进入我们思想的迷宫，在中心我们会发现我们最大的恐惧。为了战胜这些恐惧，我们必须杀死我们自己的一部分。在杀死我们自己的一部分时，我们创造了成长为更成熟的个体的可能性。

Kraddy 的愿景指导了我们早期的提纲和 故事板。我们知道我们想玩牛头怪和迷宫的故事，以及面对自己恐惧的想法。我们一起提出了使用真实视频和 8 位电子游戏风格的混合方式来重新讲述这个故事的想法。由于这张专辑对 Kraddy 来说意义重大，我们决定在演示中以他为特色。Kraddy 同意被拍摄，而 Brett Gaylor 使用了这些素材来制作开场和结尾的视频片段。我们还以 Kraddy 为灵感，创造了演示的主要电子游戏角色。

Firefox 4 的发布为网络带来了很多东西，尤其是 WebGL。随着网络从仅支持 2D 发展到支持 2D 和 3D，我们想探索这两种熟悉的图形范式之间的交汇点。我们没有选择其中之一，而是选择创建一个由 3D 和 2D 元素组成的混合、梦幻世界。许多人会在我们的 2D 角色和图形中看到对早期电子游戏（如 Double Dragon）的致敬。我们想庆祝这两种范式现在可以在一个简单的网页中共存——我们在演示中做的一切都在一个网页上，无论是音频、视频、2D、3D 还是文本。

与之前的 Flight of the Navigator (FOTN) 演示一样，我们选择了 CubicVR.js 引擎来驱动所有 3D 图形。在演示发布前的几个月里，Charles J. Cliffe 开始了将功能从他的 C++ 引擎移植到 JavaScript 的艰苦过程。WebGL 和 JavaScript 的简单环境允许快速原型化即使是他 C++ 版本也未曾拥有的功能。在演示迭代期间，我们必须克服许多瓶颈，因为我们想进一步突破极限。最大的障碍是可见性和照明。幸运的是，Bobby Richter 来到了我们身边。他利用自己在 Octrees 方面的经验，能够与 Charles 合作，构建了一个可见性和照明管道，为这项任务提供了令人印象深刻的性能。相比之下，FOTN 没有可见性系统，并且通过单个全局方向光和环境表面纹理（用于窗户灯等）进行阴影处理，以模拟其他部分。在 No Comply 中，我们能够通过高多边形数量和许多重叠的点光源来突破极限，并且仍然能够达到帧率上限。

创建像这个演示中的 3D 世界需要大量的原创内容创作，这反过来又需要一些复杂的工具。我们没有开发自己的工具，并且鉴于我们团队的开放性质，我们决定使用现有的技术，例如 Blender。开发 Blender 并使用它创建内容的社区非常丰富多样，而且因为它是开源工具，所以我们可以添加我们需要的功能，即使这些功能以前不存在。

我们对开放技术的偏好也意味着 COLLADA 场景格式是一个显而易见的选择。不幸的是，从 2.49 版本开始，Blender 导出的是 Autodesk 风格的 COLLADA 格式，该格式与官方标准略有不同，缺少许多重要的信息。直接在 Blender 中修复这个问题（只需进行一些 Python 编程），可以让 CubicVR 保持标准一致，并让我们从 Blender 中提取所有我们可以想到的场景信息。

演示的 3D 建模虽然很重要，但可能只占 No Comply 原创内容的一半。Omar Noory 令人难以置信的努力为 Kraddy 穿梭其中的丰富环境提供了纹理。Omar 慷慨而精湛的数字笔几乎立即响应了我们时不时提出的“一个 8 位垃圾桶”、“一个写着我们名字的酷炫标志”或“一些看起来很凶的强壮家伙”等要求。您可能已经从他在 “Haters Gonna Hate” 中的“梗”名气中认识到 Omar 的名字。

为图形管道添加完美的光彩的是 Al MacDonald 的 Burst 动画引擎。Al 不仅编写了我们的精灵动画引擎，还编写了我们用来创建动画的 基于网络的工具集。8 位 Kraddy 和 No Comply 中所有 8 位坏蛋都由使用 Burst 准备的动画路径驱动，并由一套在浏览器内部运行的工具设计。

除了使用 WebGL 和 <canvas> 的尖端图形之外，我们还想探索我们能够将新开发的 Firefox 4 音频 API 推进到什么程度。音频数据 API 允许我们使用 HTML5 <audio> 和 <video> 标签做很多新事情，例如输出生成的音频并将实时音频数据公开给 JavaScript。像 Corban Brook 的 DSP.js 和 Charles 的 BeatDetektor.js 这样的库被用来实时分析音频，并触发各种效果和动画序列。我们还录制了音频触发器轨道，以便更紧密地排序我们想要强调的歌曲中的关键元素。我们在演示中经常使用的一种真正新的技术是直接通过音频控制 GLSL 着色器和照明，每拍和鼓掌时都会输入和输出。与大多数网络音频处理方式不同，在这个演示中，歌曲不是背景元素，而是编织在所有视觉效果和特效的结构中。

让如此规模的演示在浏览器中运行意味着要弄清楚如何让其中的每一部分快速运行并保持高帧率。我们在演示中做的一切，从加载和解析大型 COLLADA 模型，到控制 3D 场景图，再到分析实时音频数据，都是用 JavaScript 完成的。我们认为指出这一点很重要，因为很多人一开始就假设 JavaScript 的速度不足以完成我们展示的那种工作。事实是，现代 JavaScript（比如 Firefox 4 中的 JavaScript）已经过高度优化，我们都需要重新思考在网络上可能和不可能的事情。

我们利用了 Firefox 4 的许多新性能功能以及新的 HTML5 好处，才能让这一切成为可能。例如，Web Workers 允许我们将繁重的资源解析工作从主线程中移出，释放主线程用于音频分析和 3D 效果。虽然每秒的大部分时间都被用于将信息推送到显卡，但浏览器不需要等待这些操作完成。在后台，我们可以使用其他线程来加载和解析数据，以便在主线程需要时准备好进行绘制。当然，每当涉及到并发时，就会立即出现很多问题，但我们通过使用 Web Workers 成功地提高了性能和整体稳定性。

另一个性能技巧是使用 JavaScript Typed Arrays，它在处理音频和像素数据时能够极大地提高速度。当您要尽快地分析数百字节宽的音频数据片段时，您的傅里叶变换代码需要非常快。多亏了 Corban 高度优化的 dsp.js 库，我们几乎没有考虑过这个问题。

接下来，我们花了大量时间优化我们的 JavaScript，使其能够利用 Firefox 的 跟踪 和方法 JIT。编写可以轻松被浏览器字节编译的代码可以确保我们编写的任何内容都尽可能快地运行。这对于那些还记得过去 JavaScript 的人来说是一个相当新颖且令人惊讶的概念。

我们之所以喜欢写这个演示，部分原因是它让我们这些浏览器开发人员和 Web 开发人员能够在一个项目上共同合作。这个演示中展示的大多数技术都是基于最新的 Firefox nightly 版本开发的，我们的开发过程涉及到大量的关于浏览器性能或稳定性问题的反馈。 Dave Humphrey 专注于 Audio API 的内部机制，对我们的 JavaScript 代码进行仪器化和性能分析，并帮助我们与 Mozilla 的 JavaScript、图形和 WebGL 工程师密切合作。Benoit Jacob 和 Boris Zbarsky 等人，在帮助我们解决各种瓶颈问题方面不可或缺。Mozilla 项目之所以如此成功，部分原因是他们的工程师没有被封闭起来，无法与 Web 开发人员合作。在如此紧张的开发日程中，工程师随叫随到对我们的成功至关重要，我们很自豪能够在开发过程中帮助 Mozilla 测试和改进 Firefox 4。

除了演示的技术方面，它还体现了这些技术的使用精神。我们作为一个分布式的团队，利用晚上和周末的时间，来计划、编码和创建所有东西，从我们需要的工具到图形资源，再到演示的最终代码。我们团队中有些人是浏览器开发人员，有些人是 Web 和音频黑客，有些人是图形设计师或电影制作人，还有一些人则是讲故事的人和作家——每个人都可以在桌边找到自己的位置，发挥自己的作用。我们认为，这正是 Web 成为创意和协作工作强大平台的一部分原因：没有一种正确的方式，没有一种你需要知道的唯一技术，而且技术和工具是民主化的，对任何愿意学习的人开放。Firefox 4 所带来的 Web 是一个为艺术家、开发人员、电影制作人和音乐家准备的 Web。