腾讯互娱年度发布会，自2012年开始打造“UP”主题已成为这一活动乃至腾讯互娱的重要品牌标签，发布会上提出的“泛娱乐”战略也已获得行业的认可与跟随，成为公认的互联网八大趋势之一，奠定了腾讯互娱在行业的引领地位。

每年的UP除了对行业发声，我们也希望可以对玩家用户发声，甚至希望我们之间可以互相影响互动，让每位玩家用户对UP有所了解也是线上内容所需要做的，和往常一样2017年的UP在线上主要也是有三大内容组成，这些内容按照时间轴排布分为：前期预热站、正式的官网（直播互动）、互动类传播H5，除了更好把UP2017的主题传达给每个用户，如何在以往的形式上有所突破也成了这次UP所面临的挑战！

话不多讲先用一张图让大家了解一下线上的视觉包装的内容 

预热站：耐心是以梦为马的探索（体验地址）

腾讯互娱年度发布会UP2017的主题为“奇点• 共生” 以空间形态展示个体存在，是奇点也是起点，解读主题海报和表达的内容即是预热站的重要功课，网页的形态长期以来已经从单一的内容+图片演化为动态演绎+音频，在结合UP2017的主题画面动态演绎无疑是我们首选之一，但如果以视频形式那即丢失了和用户互动，不用视频又达不到视频所呈现的视觉效果，如今新的浏览器内核的更新迭代，让网页形式有更多空间去探索，WebGL技术让我们看到动态和交互体验的良好结合，团队对这个技术也是刚接触不久，如何快速的掌握并运用给重构同学带来不少压力，作为视觉如何配合好技术呈现显得尤为重要。

一起看下整体展示效果：

让奇点从LOADING开始

让今年的UP网站能动起来有区别于以往的形态一直是比较明确的方向，在设计网站图形时，第一想到就是三角形线条的运用，三角形作为UP的主要图形元素，当三角图形内旋转运动起来起来时，一个动态的图形就出现了，也呼应了奇点的海报图形，因此这个图形也成了今年UP右上角的主题图形。

为了让预热站在节奏和代入感上更抓人，我们按照业务模块的内容流程拟定了预热站的故事板，按照相应的内容整理了每个模块的文案内容，两套文案：一套走的是概念阐述，一套则是走情怀表达。

对于图形的纠结，其实也是从两套方案中抉择的，本次UP的主图元素走的就是概念化的路线，对于业务模块，如果走这样的概念化路线也是合情合理，但最终结合到已经拟定的文案，担心这样的图形不能配合文案更好去理解，所以配合文案内容快速拟定了几组图形，我们希望大家看到由粒子聚合的图形搭配上这样的文案，可以很自然的理解到我们的四大业务。

在图形建模初期，由于并不了解three.js库对3D图形解析的方式，常规的3D模型在生成粒子后图像相对比较密集，尤其一些细节较多的3D模型，出现大量的聚集点，造成整个图形点分布不均衡，因为我们的3D模型其实并不需要很细节的内容，尤其一些形状和形状叠加的部分和模型内部结构，WebGL所识别的3D图形只是外部的轮廓线条，图形的分段交接点即是一个粒子颗粒，懂得3D的同学都知道分段越多呈现的图形越饱满细腻，在这里并不是越多越好，因此建模的要点就是将模型的分段调整的相对均匀，这样最终生成的3D图形颗粒分布就会比较均衡。

左图书本分段相比比较密集  呈现图形效果并不好 减少分段后，我们得到了一个既有轮廓颗粒也分布均衡的书本形态。

模块切换与弹窗

落版主题画面

预热站的小彩蛋 粒子二维码

预热站承载着前期发布会开启告知和预约的重要功能，在搭建好预热站所需的内容图形后，为了让大家不只是上来看看也能玩起来，我们在预热站做了互动H5的入口，起初只是想加个二维码图片，但总感觉这样的形式并不好，于是我们考虑把二维码也建模，让他成为第六个粒子组合图形，有了之前建模的经验自然一个平面二维码图形也不是什么难事！ 世事难料，我们费心完成的3D二维码居然不能扫！这是什么原因？

其实这里面涉及到一个二维码识别尝试，通常生成二维码之后我们都会提取他的图形轮廓来使用，但用在黑暗环境这种反白的图形就不能被识别了，原因是二维码只能识别深色线条，因此在深色背景使用二维码时提取的图形是外形轮廓。

在建模阶段又遇到了图形粒子分部不均匀的问题，前面讲到解析粒子的点是3D图形里分段的交接点，但如果用面去建立二维码会形成很多点，因此我们只能用点直接来代替二维码图形的面，为了更好的理解二维码面的关系，这里使用50px的二维码作为基础图形，而我们将它放大到3200%，二维码图形在ps的CC版本里自然被图形网格化，按照网格化的图形去建面更好理解，最后将方块的四个点合并为一个点，这样在读取顶点信息的时候就可以按照我们预设好的方式去呈现了。

打通双端的任督二脉

移动端H5

在这个看移动端的时代，如果你说你的网站不支持移动端，你都不好意思把网址发给别人，没错，此刻WebGL强大的技术再次体现出来，得力于如今大家手机越来越贵也越来越好，我们把移动端做了适配，阉割了很多内容和功能点，但在一些低端手机上看起来会卡卡的，为了减少这种卡顿，减少了很多颗粒运算，基本上满足了很多手机的正常浏览，随着预热站的发布，这个买一送一的适配H5页面也得到了很好的传播，也得到了行业人士的认可和解读，通过这样一个以内容和富有形式感为主的预热站，吸引了更多人对UP2017的关注。

关于预热站前端类的技术解析可以查阅bob的分享文章：了解详情

在此感谢上海思烁团队和bob、栗子姐姐、xy等同事的大力支持~