IE团队技术揭秘：“月熊志”是怎样炼成的？

AAF 是一个公益组织，在过去的 15 年中他们在拯救月熊方面做了非常多的努力，月熊是非常可爱的动物，有着非常丰富的故事，我们也希望能够帮助 AAF 通过在线的形式把他们的努力分享给更多的人知道。 正因为月熊有着非常精彩的故事，所以我们想通过一种更丰富、交互性更强的方式把他们呈现给大家。现在随着 HTML5 的不断发展以及现代浏览器像 IE11 这样的不断改进，让我们有了更多的技术和工具去开发更有创造力的体验。另外支持触控的设备像 Surface 的推出和不断普及，所以我们也希望这个体验是可以触控的，能够给用户带来身临其境的感觉。   我们整个体验的名字叫月熊志，总共分为三部分组成，第一部分内容是一只叫 Jasper 的熊和他小伙伴之间的故事，第二部分讲 Jasper 和他小伙伴的过去，活熊取胆所带来的一些痛苦的经历，第三部分则是将 AAF 在这 15 年过程当中对于拯救黑熊还有动物福利作出的贡献。 用户在浏览整个体验的过程当中，就像翻阅一本杂志一样轻松，网站中的翻页依靠了 CSS Transitions 和 CSS Transforms，但这又不是一本传统的电子杂志，在杂志中我们加入了非常丰富的 3D 元素、高清图、视频和信息交互方式，并且可以触控流畅体验，让人们沉浸在月熊的故事和 AAF 为保护月熊所做的努力中。 现在触控设备越来越多，我们的网站也是全面的为触控去考虑，为了响应触控，在开发中我们使用了 Hammer.js，这个大小仅为 3KB 的 JS 库，不仅支持常见的鼠标事件，还支持微软自 Windows 8 和 IE10 以来引入的 Pointer API，Pointer API 封装了来自触摸、笔、鼠标的输入，能够对用户的触控操作进行统一的捕获和处理，不论用户使用什么样的输入硬件，都能很好的工作。这让我们可以更容易的去处理例如 Tap，Swipe，Drag 这些触控的操作，满足来自触控设备用户的流畅体验。另外在网站中很多内容我们也专门制作了丰富的触控交互场景，需要用户进行一些触控的操作，了解更多的内容。 以下是代码示例： 在网站的第一部分我们使用 3D 的方式把 Jasper 栩栩如生的呈现在大家面前，大家可以和他进行交互，并且 Jasper 也会有非常丰富的动作。我们希望构建出的 3D 的场景可以把月熊生长的环境以及氛围更好的渲染出来，为了更好的展示这些体验，我们通过 WebGL 把 Jasper 搬到浏览器上，让大家了解这种充满情感的动物。加上一些与 Jasper 的交互，让我们能沉浸其中，并且了解月熊的一些特点。 我们通过 Blender 这个 3D 建模软件构建出了月熊的形象，以及他周围自然亲近的场景，然后结合 three.js 这个 JavaScript 3D 引擎，使得我们可以在浏览器中呈现这些模型和动画。由于从 Blender 中导出的这些 3D 模型的文件体积都比较大，通过网络去传输用户就需要花费很长的时间去加载，我们为了保证更为流畅的体验，不得不深入研究 Blender 以及 three.js，来想办法去减小文件的体积，以及在浏览器上的响应速度，得益于 IE11 的硬件加速以及 WebGL 的高效，可以给我们带来可以在浏览器上运行场景丰富，动画流畅的 3D 体验。 以下是与 WebGL 相关的代码示例： 我们希望创造一个体验，让交互、设计、内容可以很好地结合，IE 对最新网络标准 HTML5 的支持以及快速的性能，并且类似于 Surface 这样性能强大的触控设备让我们可以疯狂去构思整个体验。IE11 的对 HTML5 的良好支持，让我们可以加入各种丰满的效果，把整个页面变得好像活了一样。同样 IE 的硬件加速使得 CSS transforms 运行的非常高效；另外，IE11 中全新的 F12 开发人员工具：UI相应工具也帮助我们在开发过程中更方便的进行网站的调试，让我们可以清楚的了解到资源以及内存的占用情况以及模拟不同设备的显示效果。并且微软推出的 modern.ie 网站也可以让我们发现网站代码的问题以及在兼容性方面的一些建议，帮助我们更好的 Build 整个网站。 我们希望通过这个网站给大家带来全新的数字内容呈现方式，但这种内容不仅仅局限于 AAF 这样的组织，其实他有很多的在线应用场景，比如说教育方面、产品呈现方面或是数字内容方面，都可以用这些形式。结合 3D 的元素，结合高清的视频，还有非常丰富的交互的方式，向受众提供不一样的体验。随着现在 HTML5 的发展，特别是现代浏览器的发展，比如 IE11 对于最信网络标准的支持，像 WebGL，还有非常快速的性能以及触控的能力，并且还有 IE11 重新设计的开发者工具，都极大的方便了开发者去创造丰富的、不一样的网络体验，我们也希望通过这个网站，能够激发更多的开发者，去创造更加多、更加丰富的在线体验。

技术要点：

WebGL WebGL 是基于 OpenGL ES 2.0 的 Web 标准，我们可以把 WebGL 看做是 OpenGL ES 的 Web 实现版，我们采用 Blender 建立 3D 熊的模型，动画，以及 3D 场景的模型，然后通过 three.js 的 Blender 插件把这些3D模型导出为 JSON 格式的数据，然后我们在网页上利用 three.js 引擎来载入这些数据，然后输出到页面上显示出来。由于 WebGL 是直接调用显卡进行运算的，所以执行的效率非常非常的高。 Three.js (http://threejs.org/) WebGL 定义了一些较低层的图形接口，要使用这些接口我们需要编写大量的代码，Three.js 封装了这些底层的图形接口，让前端工程师可以用简单的代码就能实现 3D 场景的渲染，通过 three.js 可以让我们少编写很多代码，而更专注于利用 WebGL 构建的体验，并且现在也有非常非常多的 WebGL 站点也都是采用的 three.js 去实现的。 PreloadJS (http://www.createjs.com/#!/PreloadJS) 帮助你简化网站资源预加载工作，无论加载内容是图形、视频、声音、JS、数据… 因为网站加入了大量的资源，我们在使用这些资源之前就需要将这些资源加载完成，但是预加载对于 JavaScript 而且是一件极为繁琐且不可预测的一件事; IE11 为我们带来了预呈现和预提取支持，再结合 PreloadJS，我们可以提前获取内容来提升浏览体验，而且 IE11 的预呈现和预提取的支持可以让我们高效的加载后台资源，而这一特性也是 HTML5 规范的一部分。 Hammer.js (http://eightmedia.github.io/hammer.js/) 现在触控设备越来越多，我们的网站也是全面的为触控去考虑，IE 对于触控的支持与优化一直都是走在前面的，IE11 对触控的支持也越来越强大，我们配合 Hammer.js,这个仅仅只有 3KB 大的 JS 库，让我们能够更加容易的去处理例如 Tap，Swipe，Drag这些触控的操作。 CSS3 网站中的翻页依靠 CSS Transitions，CSS Transforms，而其他地方也为了让整个体验更加细腻、自然，我们也加入了非常多细微的动画效果，而这些效果中 CSS3 发挥了巨大的作用。 性能 面对如此丰富的交互体验以及媒体资源，如何保证网站能够流畅的浏览也成为一件非常重要的问题，我们利用 IE11 的开发者工具去分析发现我们代码中 CPU 负载较高的部分导致 FPS 降低，哪些地方占用了过多的资源，哪些地方的响应不够迅速，让我们有的放矢，而且得益于 IE11 的硬件加速，让我们能够大胆的发挥想象，把我们的想法都加入进去并且一一实现。 最后为了真实的还原用户的体验感受，我们在不同配置不同平台下进行了测试，最终在大多数设备上浏览我们的网站都可以轻松达到 60 FPS，而那些 30 FPS 都不能达到的设备我们对其进行降级使用资源消耗更少的形式进行呈现。 工具

• Visual Studio 2013Visual Studio Express 2013 for Web 对于最新的 HTML5 的标准支持的非常的好，我们有很大一部分的工作都在这上面完成。
• Blender对于 WebGL 的模型，采用 Blender 进行创建是非常好的选择，Blender 免费，而且跟其他很多 WebGL 引擎都有着非常好的兼容性。

标签:IE团队HTML5技术IE WebIE11