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

2016年10月22日 204点热度 0人点赞 0条评论

身为设计师怎么能不了解 UI 开发?不想被开发狗忽悠?请持续关注视觉铺子,新的力量,新的视觉铺子,欢迎前腾讯 UI 前端开发大神 Wast 鼎力加盟视觉铺子,从现在起,视觉铺子不仅仅只关注视觉。Wast 和你聊 UI 前端开发,帮你避开开发给你挖的坑!  





进入正文:


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

身为设计师怎么能不了解 UI 开发?不想被开发狗忽悠?请持续关注视觉铺子,新的力量,新的视觉铺子,欢迎前腾讯 UI 前端开发大神 Wast 鼎力加盟视觉铺子,从现在起,视觉铺子不仅仅只关注视觉。Wast 和你聊 UI 前端开发,帮你避开开发给你挖的坑!  


图片

公众号右下角---教程专区

 查看  <AE 零基础 UI 动画系列教程>  (整套完结)


公众号右下角---教学互动

 收听  <口爆因特奶> 老毕和大脸哥哥的网络电台

 (网易云音乐同步更新中)


回复 "BAT"  你有必要知道的事。


回复  "安卓动效"  查看你很有必要知道的 UI 动画知识 .


回复  "享乐主义",告诉你鹅厂美工怎么玩的


回复  "运营设计"  让老毕告诉你我心里的运营设计到时是个神马鬼 .


回复 "风格" 看看到底什么才是所谓的风格


阅读量破30w, 回复   "菊花鹅" 听听老毕怎么看待鹅厂和菊花的


回复 "匠心",进入李宗盛的匠人内心世界


回复 " 书法 "  聊聊东方的涂鸦艺术


请勿手贱! ! !  切勿回复 "老毕"  


越来越多的设计素材为你而来。请在公众号首页底部TAB进行下载。


图片

68530独家!解读《双11VR邀请函》H5 背后的实现原理

这个人很懒,什么都没留下

文章评论