前言：2010年圣诞前夕，North Kingdom接到了来自Google创新实验室的邀请，参与一个基于WebGL技术的音乐录音带(MV)的制作项目。我们的故事就从这里开始……
“3 Dreams of Black”, 简单来说就是一个基于WebGL技术的互动型MV，这项实验作品旨在充分地展现Chrome浏览器所能够带来的卓越优化可能性。这一项目光是看背后的制作团队就知道有多牛了： MV总导演兼制片Chris Milk，以及来自于知名的独立摇滚乐团Danger Mouse and Daniele Luppi全新专辑《ROME》中的音乐作品。当我们接到这项任务的时候是2010年圣诞前夕，那时候，这张专辑还并没有发行。这支MV所讲述的是一个发生于”后世界末日”场景下的故事，故事由Norah Jones 和 Jack White饰演主角。整个故事讲述的是主角Norah Jones的三个梦境，观众可以通过角色操控来体验整个MV故事。项目由North Kingdom团队， CHRIS MILK以及GOOGLE 创新实验室三方共同合作完成。
挑战和解决方案整个MV中的所有画面都不是视频片段，而是一系列可视化模型通过WebGL技术而实时生成的动态3D视觉画面。WebGL是一个实现网页浏览器端3D动画效果的技术，有别于过往需加装浏览器插件，WebGL技术实现了各种动态视觉元素与2D动画元素的相互结合，在浏览器端，就能带给广大用户无与伦比的音乐与视觉动态体验。 团队成员： Chris Milk, Aaron Koblin (Google创新实验室的创意总监), MrDoob (负责Google 创新实验室精益开发),, BranislavUlicny（硬件开发）, Google创新实验室、Google Data Arts 团队, Mirada工作室， @Radicalmedia团队, Anthony Sheppard. 
背后的故事——
下面我们将分别从行进之旅，探索之旅，团队成员说三个篇章来讲述关于Rome& 3 dream of black项目背后的故事。
篇章一： 行进之旅“当你找到自己要走的路，决心不惜承担一切风险誓要出发，那么旅途前方重重的障碍重重都将无法阻碍你的前行。反之，如果你对自己所做的事情并不那么确信，那么你极有可能跨越不了任何一关。”——乔治卢卡斯 “You have to find something that you love enough to be able to take risks, jump over the hurdles and break through the brick walls that are always going to be placed in front of you. If you don’t have that kind of feeling for what it is you are doing, you’ll stop at the first giant hurdle.” – George Lucas 英文说得很好，中文没有更好的表达。。。
这一项目的完成需要依赖于各个团队的协同合作。团队中的每一个人都非凡出色，并且是来自于世界各地——斯洛文尼亚，波兰，伦敦，洛杉矶，纽约，旧金山，费城以及来自瑞典各个地区——而总部斯德哥尔摩是本次工作的枢纽。 在这次工作的过程中，团队之间的工作方式就像是一个极富创意的大脑运作过程，每个团队每天都需要向总部汇报在接下来24小时里的作计划，以及需要在第二天改进的方面，并且制定下一天的工作目标。同时，任何团队中如果出现了任何问题，总部便会与其一同讨论，帮助解决。 
在进行项目的初期，除了已有的几个WebGL实验， 我们没有任何其他更多的工作资源。所以，我们其实并不知道我们究竟能在这个项目上做到什么程度。基本上我们知道在在初始阶段，我们所需要的是一套完整的技术框架，这就足够了。接下来，就需要借助于CHRIS MILK和GOOGLE创新团队来帮助我们完成这一套框架的建设了。 
从左到右分别是MrDoob (负责Google 创新实验室精益开发), Aaron Koblin (Google创新实验室的创意总监)，MickeEmtinger (North Kingdom技术总监) 正在洛杉矶的@Radicalmedia i办公室工作。 下面再分享一些我们在项目初期时的两个重要议题： – 如何实现快速地将一系列互动MV中的故事场景和画面可视化？而我们手上除了故事脚本之外，没有任何其他的技术与资源支持。我们要做的就是要根据脚本，抽象出所有的场景画面，并且要确保用户看到的每一个画面都前后具有缜密的连贯性。 
从左到右辨别是BartekDrozdz (North Kingdom的项目开发), Aaron Koblin (Google创新实验室的创意总监), Chris Milk, Riccardo Tagliabue (North Kingdom美术总指)，凌晨时分正在North Kingdom的办公室开小会。。。。 – 建立明晰的团队工作流程，每一个人列出明确的工作职责，并且要求所有人每天汇报工作进展情况，讨论工作中大家遇到的问题，然后团队共同协商解决机制。没有任何一个人真的清楚关于项目的所有情况，所以，团队协作是一切的基础，正因如此，团队之间的信任和尊重至关重要。 为此，我们做了一张工作流程坐标图，横轴是整个MV的时间进程和章节，纵轴是相应的工作模块。通过这种方式，我们可以清楚地了解整个项目工作要求和相应的制作时间。 通过这样的图表，大家都可以清楚地知道目前处于哪个工作阶段，还需要完成哪些工作。 
在我们的工作过程中，另一些不得不提的，就是下面的这些STORYBOARD和原型设计： 
另一个促使我们前进的动力来自于North Kingdom团队内部一贯以来奉行的一套工作准则，就是他们自己所命名的“FUCK”的定律： F- Functionality,功能性至上，U-Usability 可用性。 C—Cosmetics ，也就是必须有良好的外观。K-Kärlek 瑞典语，意识就是，对工作要有无限的爱！
North Kingdom一直把“FUCK”定律作为梳理工作主次顺序的最好工具。它能帮助人们专注精神在对的地方。 拥抱新技术意味着我们必须让自己不断滴适应周围变化着的环境。也就是说，创意必须能够独立于平台，比如FLASH，你必须具备能够高于各种平台的创意思维，但是又必须能够落实在平台之上呈现。如何平衡这些关系？ 这个时候，fuck定律就能够帮助我们做好平衡思维。 
2011年1月13日，技术讨论会，最右边的是BartekDrozdz (开发人员) ，Marcus Ivarsson (North Kingdom项目制作),女的那个是Sandra Nam (Google) ，女人边上的就是Ricardo Cabello （也就是前面说到的MrDoob). 
BartekDrozdz正在和Chris 过自己的mock up 
North Kingdom驻扎在洛杉矶Mirada工作室的项目团队（左边下面），主要负责MV中交互3D角色动画的制作工作。
我们非常荣幸能参与此项目，并且这个项目使我们了解到我们还需要学习太多太多了。无论怎样，在项目完成过程中，团队之间真正意义上的协作和成员之间的平等性让我们印象非常深刻。我们很激动能够亲眼见识到WebGL技术的巨大可能性，在下面的“探索之旅”篇章中，您可以了解到更多项目的开发过程和原型设计工作。 
篇章二：探索之旅：下面这些是我们在项目过程中做的一些技术层面和设计层面的探索。 
上面的四幅是Anton Eriksson 按照CHRIS所描绘的图景画的故事草图，整个MV故事包含了三个主要篇章：城市篇，草原篇，沙漠篇。 城市篇： 
在这一篇章中，主要工作是用一系列视觉元素来构成城市场景，我们必须在产生一系列奇幻的视觉创意的同时，谨记创意实现所需考虑的技术瓶颈。 
上面这几幅就是城市篇章的制作过程中所作的一些探索，我们知道我们必须再考虑各种元素的形状构成元素的简约性，因为，若不考虑到外形的简约性， 就会给之后的一系列技术工作带来麻烦！ 光是一对眼睛就已经让我们做了不少工作，可是最终还是决定去掉它们。 以下的这些是我们尝试设计的另一个故事场景： 
我们当时有另一个想法，就是让用户选择城市的行进方向，我们当时想的一个由巨大的镜子所投射而出的地下世界，一个更为天马行空的城市世界。 
下面是一部分基于WebGL技术的原型设计稿。我们把这一系列的创作过程称为编码风暴,通过代码，我们可以进行更多的尝试和测试，以保证最终的效果。 
Mouse Cubes Test 1
Mouse Cubes Test 2
Mouse Cubes Test 3
Mouse Cubes Test 4
Mouse Cubes Test 5
Mouse Cubes Test 6 
Mouse Ribbon Test 1
Mouse Ribbon Test 2
Mouse Ribbon Test 3
Mouse Ribbon Test 4 
Snapshot Progress 1
Snapshot Progress 2
Snapshot Progress 3
Snapshot Progress 4
Snapshot Progress 5 草原篇 这一篇是对我们本说最棘手的，当时我们专注于各种形式的探索开发，但是同时，理智告诉我们，必须同时考虑到实践的表现力。是的，WebGL非常强大，但就我们所知，负责SOUP项目（也就是负责3D交互设计部分工作）的MIRADA工作室的团队，同样具有非凡的动画创作能力，他们有自己的工作原则，即便我们现在把形式创造的多么炫，到了他们手上，依然有可能被他们进行修缮，变成他们所认为的最好的样子。 
下面是另外一稿。感觉大不相同： 
下面是我们所做的一些测试画面，请点击体验：
Black Soup Test 1
Black Soup Test 2
Black Soup Test 3 
Prairie Snapshop Progress 1
Prairie Snapshot Progress 2 
沙漠篇 这部分的工作过程令人激动而难忘，我们试图尽可能地让画面看起来真实，而不是光怪陆离。沙漠中漂移的城市，上下晃动的频率。各种细节，让人觉得充满挑战。 
篇章三：团队成员说我们找了几位项目成员，和他们聊了聊对于这一项目的工作感受，以及对于WebGL的看法。
– KLAUS KROOM. 开发人员
– 谈谈您个人的工作背景 我拥有10年以上从事FLASH开发的工作经验。04年加入了North kingdom。在这个项目开始前的几个月时间才开始接触JS/CANVAS/WEBGL。在交互方面具有一定的经验。我非常喜欢将代码进行可视化的工作。 – 你能描述下在项目中的角色吗？ 我主要负责“汤”/即交互式3D部分的开发工作。比如设计各种元素的原型，花，草，动物，场景内的各种元素，以及元素之间该如何融合入画面场景，使得整体更为协调，逼真，这就是我的工作职责了。另外，我需要和CHRIS密切合作，所以我得设法做出尽量接近他想要的东西才行。另外，我会制作各种不同方向的设计模型/原型草图，然后大家一起讨论，修改，最后确定使用哪一稿。 
Klas（左）和Chris Milk（右）正在过交互3d表层开发项目
– 你在工作中遇到的最大挑战是什么？ 就我个人而言，作为一个JavaScript领域的初学者，这是最大的问题，没有这方面的丰富经验。另一大挑战当然是怎样让CHRIS MILK对我做的工作表示满意和认可。为了达到他要求的程度，我必须不断地调整，测试，和修改，直到项目正式Launch的前一天，还在那儿一直地改。（o(╯□╰)o果然大家都一样苦啊！） 还有一个挑战，就是必须要保证自己必须拥有永不停止的动力引擎，不断开发，制作，开发，制作。还要同时去尝试新的可能，这些都是我工作中必须面对的挑战。 – 对您来说项目过程中记忆最为深刻的事情是什么？ 对我来说印象最深刻的，莫过于在过于几年所诞生的那些浏览器大部分都需要JS这一事实。并且，WebGL对于JS的要求就更高了。这个项目扩大了我的眼界，让我见识到了许多新的有趣的东西。有时间我也一定会去好好地玩玩WebGL的。 
Klas和BranislavUlicny正在进行体验优化。 – 你认为WebGL的未来是怎样的？ 它很可能成为网络3D的“标准”，当然现在说还为时过早。个人认为，这最终将取决于使用WEBGL的人群是不是最为活跃的群体，以及，WEBGL是不是能够为普遍的开发者们所用。另外，还取决于各个领域的大玩家（例如大型的游戏开发公司）是否会使用它。尽管在这方面，尽管通常巨头们改变起来都需要花上很长的时间，并不算灵活，但他们仍然具有影响力。、 总的来说，实时3D毫无疑问将会是互联网的“下一次革新” – 还有什么想与大家分享的？ 我真的很喜欢GOOGLE这样一直愿意投资于创新事业的公司！
Klas on Twitter: @oosmoxiecode — BRANISLAV ULICNY,硬件开发 – 谈谈您个人的工作背景 之前我一直从事学术工作，计算机科学博士。 – 你能描述下在项目中的角色吗？ 我主要是负责three.js 3D引擎，系统工具/硬件之间的通道，代码和硬件的整合工作。就好比整个项目的看门人，等一切设备到位之后，进行最后的呈现和输出工作。 | 
