视觉铺子独家解读《双11VR邀请函》H5 背后的实现原理

由于传播太广，该 H5 已经被微信禁止访问了，还没有看过的请复制链接在其他浏览器（如 QQ、Safari、Chrome）中体验: http://tmall1111.im20.com.cn/index.html

呵呵，淘宝最近几个重大「节日」总想搞点大新闻。

重温前阵子刚刚刷爆朋友圈的「淘宝造物节」H5，里面 360 度全景视角十分惊艳，惊艳不在于已经逐渐被习惯的 360 全景交互形式（你要说「烂大街」我也不能反驳），但是同样的形式放在不同人手上就不一样，设计与技术融合得非常好。从细节角度来看，不管是用手指滑动还是手机旋转地去体验造物节的 H5，都能感受到绵滑的滑动体验，而非鬼畜的抖动（只有用陀螺仪参数写过同样效果的技术人员才懂啊摔）。

回到主题，按照我的理解，淘宝并非一家实打实互联网公司，也并非设计导向很强的公司，为何最近频频策划出这么好的推广案例？

其实很简单，外包呗。上次的造物节其实来自一家叫 VML 的互动营销公司，可能你压根没听过，也很少看到，但他们的东西每个都是精品。再八卦一下吧：阿里的现任 CMO 是 VML 前 CEO，名叫董本洪（Chris Tung），原百事可乐大中华区市场副总裁、前 VML IM2.0（原称 im 2.0）互动营销 CEO。这也许意味着阿里开始逐渐从强公关属性向强市场品牌属性转变（呵呵呵我随便吹的）。

八卦完了。谈点正事。

技术分析：

看完了「双11VR邀请函」有没有觉得眼前一亮？激昂的背景音乐，一层层场景纵深切换的视差效果让人确实有深处其中的感觉。它都用了什么技术？

首先，验证下我为什么说这次的 H5 同样来自于 VML，通过查看代码，发现这里用到的技术以及开发团队和上次淘宝造物节一样：

同时 H5 域名是 http://tmall1111.im20.com.cn/， 访问 www.im20.com.cn 即是 VML 官网。

同时 H5 使用 Webpack 打包，整站图片资源用的都是 base64（一种编码格式），这样的好处应该就是减少请求了（我实在想不到其他好处了，因为 base64 还需要额外解析并且整体体积比图片要大）

（切成一张张小图片）

然后，就是陀螺仪，效果就是视角跟着手机的方位一起变化，其实说 VR 只是个噱头，因为它并没有 360° 全景视野，只是有点的角度偏移而已。

最后，重头戏来了，它用了 WebGL：

WebGL（全写 Web Graphics Library）是一种 3D 绘图标准，这种绘图技术标准允许把JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定，WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。

解释又长又臭是吧，简单来说，WebGL 允许程序员在 H5 中使用三围模型，哦不，是三维模型。也就是说，你通过 C4D、SketchUp、Maya、3d Max、unity 等 3D 软件都有办法将模型经过转换展现在页面中。

当然原生的 WebGL 不便于快速开发，所以一般都会使用 Three.js，它是一个第三方的 JavaScript 库（对于程序员来说使用起来更方便了），不过体积略大，像这个 H5 引用了的 three.min.js 有 478k，加载时间还是蛮长的。要炫酷还是要快速，你让顶头 Boss 们好好想想。

这个 H5 并不涉及三维模型，但用到了材质。如何用 Three.js 做出这层层递进的场景纵深效果呢？首先需要了解三维建模中几个重要的概念：场景、摄像头、材质、光。

构成一个三维场景（其实可以理解为现实世界），首先要有一个视角（可以用摄像头来比喻我们的视角），还要有光（不然一片漆黑你看啥），我们看到的物体都是有属于他们的材质的（是粗糙还是光滑，是木制的还是石头）。

以此 H5 为参照，材质即里面的图片资源（这里的资源其实都是一层一层拆分的）：

最终构成一层层完整的场景：

那么如何做到层层递进呢？看看这张图：

其实我们只需要把场景一层一层有间隔的放置于属于它的位置，然后将摄像头的位置前后移动，就能够创造出 H5 所传达的效果了。同时视角的大小也会影响我们看到的物体的样子（如透视投影、正射投影，这里不讨论）。

摄像头的前后移动就是通过我们手指滑动来实现的，这里它用到了 jstween 这个库做一些缓动效果，使整体体验更加绵滑。

OK，由于大部分 JS 代码已经被混淆，上述结论是根据实践经验以及大致浏览了代码碎片了解的。解析完毕。

谈谈如何创造出一款精品营销作品

其实技术原理都是可掌握的，但扒光了技术的皮，让人深思的是这种创意营销的作品如何诞生？

“要技术有技术，要视觉有视觉，为什么我们公司就做不出一款类似刷爆朋友圈的好作品？”

“作为设计师，你如何将想法很好地展现出来并同步给技术人员？”

“作为技术人员（特指前端开发），你又怎样把创新技术同步给设计并让其融入在设计中？”

做不到的原因：

第一，是流程：

老实说，在一个流程十分规范，职责非常分明，审核一环接一环的公司里（一般都是大公司），是绝对出不了这类 H5 的。因为大家的能力都被约束在一个角色里，沟通成本大，思维被约束了。同时还会遭到人力和时间成本的挑战。

谈到成本，小公司则一般不是人手紧缺忙得不亦乐乎，就是没有这种需求，哪个小公司需要做这个？即使做了有多大的传播量？

第二，是人：

现在的职责太过于细分了，大家各司其职，很少有跨界存在。你见过会代码的设计师吗？你见过懂设计的程序员吗？如果有的话，太好了，请珍惜并为其创造条件。但如果缺乏土壤，这些人也会平庸，或者在拒绝平庸的路上（跳槽）。

最后，什么条件才能成？

这件事恰恰是在 VML 这种关注营销创意而且有大量外包单子的公司里才能成，首先他们有大量的需求，为这类跨界人才营造了很好的土壤环境；其次专业的人才聚在了一起，能碰撞出更多有价值的想法；最后他们的流程就是为了迎合创意而设计的，有极大的自由度。

但也并非其他公司就做不了，如果你有心并且能够聚集人员一起去做，那为什么不去尝试推动一把呢？

——— 差不多要完了的分界线 ———

再谈跨界，跨界可以创造出很多因为界限分明而导致的痛点，想必各位设计师都用过类似马克鳗、像素大厨这类的工具吧，要不是设计师懂代码，或者程序员懂设计，这些优秀的提高生产力的工具能够问世吗？

Ok，扯远了。请大家关注视觉铺子，未来还会有更多关于设计与技术的融合案例以及思考分享给大家。