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

分类栏目:用户体验 - 前端开发

4227

发布于 7 条评论

由于传播太广,该 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,扯远了。请大家关注视觉铺子,未来还会有更多关于设计与技术的融合案例以及思考分享给大家。

%e8%a7%86%e8%a7%89%e9%93%ba%e5%ad%90%e5%85%ac%e4%bc%97%e5%8f%b7

 

全部评论 / 7

  1. zuzzj

    我是在这个地方学习PS/AI/CDR/UI这些课程的,每晚都有免费不同类型公开课。自己长期关注了,比在市面上的好很多,能学到东西。
    很适合零基础和有点基础想更好的提升的人。
    感兴趣的可以试试加群 589 555608找那个助教要地址。

    zuzzj 2016-10-22
    5
  2. xiaoming

    剁手

    xiaoming 2016-10-22
    4
    1. の小戴 -

      呵呵

      の小戴 - 2016-10-22
      1. の小戴 -

        hehe

        の小戴 - 2016-10-22
  3. 大军

    好厉害

    大军 2016-10-22
    3
  4. 我仍旧在这里

    好棒,不知道源码在哪里可以看到

    我仍旧在这里 2016-10-22
    2
  5. symbol

    :cool: 记得穿秋裤!

    symbol 2016-10-22
    1