腾讯云风格的 3D 图标实现底层逻辑讲解-经验/观点-UICN用户体验设计平台

只从几年前阿里云在官网开始使用微软 3D 风格的主视觉以后，国内的其它云服务公司和大量 B 端公司都开始“致敬”这个风格。

既然不少大厂做了，中小公司自然会开始“学习”这个套路，要求设计师也使用相同风格来制作自家的官网广告大图，或者产品的登录主页等等。比如在我们的社群或学员中，就有不少接到参照腾讯云设计的需求。

图形的设计虽然需要用到 3D 软件设计，即使当前不会，也可以通过 B 站的针对性教学视频进行学习，一周内完全足够掌握相关的建模和输出。

但麻烦的是，腾讯云的这些 3D 图形，是可以交互的，而且本身处于动态运行中。

所以，这样的效果要怎么实现呢？

如果我们在网页中看到运行的 3D 动画，有3种方式实现。

方案1：使用 MP4、GIF 或逐帧动画等方式实现，本质上是其它软件创建出视频，然后使用特定格式导出，可以通过部分交互方式绑定动画进度，比如动画跟随页面的滚动。

方案2：使用位图、矢量素材和一些简易的空间变换方式，实现 3D 动画效果。比如在 Protopie 中，你们可以看到一个 3D 旋转的选项，通过角度倾斜来实现 3D 透视的效果。在网页前端特效中，还有远比这种翻转更复杂的效果，但本质上都是使用位图素材来实现。

方案3：在网页中直接运行 3D 模型和进行实时渲染，即真正的 3D 效果，而不是通过对二维图形添加显示特效实现的。

这就是我们主要要讲解的对象 —— WebGL。

先要强调，3D 效果的实现有两种，一种是叫离线渲染（姑且这么用），另一种叫实时渲染。

离线渲染就是通过特定的渲染过程，将 3D 对象渲染成图片或者视频，比如使用 C4D 的 OC 进行进行渲染。

另一种叫实时渲染，实时渲染出可见、且可交互的 3D 场景和图形。最常见的 3D 实时渲染应用就是游戏了。

你看到的游戏内容、人物动作都是通过交互实时生成出来的，不用经过漫长的渲染过程。

而要在设备中实现 3D 图形的实时渲染，一方面要应用 CPU 或图形显卡的计算，另一方面就是绕不开 OpenGL 这个图形库，任何程序对图形的显示（其它的忽略不计），都需要调用这个图形库的 API，才能让硬件计算并生成出来。

Tips：它是一个比较难解释的概念，我不打算在这里展开说明，有时间另外科普，能把它的内容吃透就可以去任何大厂报道。

而浏览器是一个很特殊的平台，你可以理解成它是运行在你系统里的另外一个独立系统，它无法直接调用 OpenGL 来实现 3D 效果。所以，为了满足网页中实现 3D 效果的目标，相关的开发者做了两方面的努力，一个是在 HTML5 中内置了 Canvas 标签，另一方面是创建了一个新的图形标准 WebGL。

WebGL 本质上也是 OpenGL，只是根据浏览器的特性做了简化的 “兼容版本”，而这两者的结合，就让网页的脚本语言 JavaScript 可以在 Canvas 内操作 WebGL 实现 3D 效果的渲染。比如下面链接中的效果。

http://webglsamples.org/aquarium/aquarium.html

但是，直接使用 JavaScript 操控 WebGL 是一件非常蛋疼的事情，因为 JavaScript 是一个非常“啰嗦” 的语言，即使我们想要在 Canvas 画布中创建一个立方体，都需要写几百行代码。为了提高编写效率，一个叫 Ricardo Cabello 的老外就开发了一个叫 Three.js 的前端框架。通过对语法的简化和封装常用的函数（React、Vue 同理），让编写相关图形代码的过程变得更简易和轻松。

下面是知乎《剑宗专栏》里应用的一个 JavaScript 和 Three.js 实现相同图形效果的代码：

Three.js 是目前网页 3D 图形效果应用的主流的框架，也是最多前端开发学习和使用的语言。但它本质上就是 JavaScript，而 WebGL 本质上就是 OpenGL。所以总结起来，网页 3D 的效果的实现，就是开发者使用 Three.js 编写的 JavaScript 脚本，通过 WebGL 来操作 OpenGL。

这么说听起来可能很绕，不理解没关系，你们只要记住通过 Three.js 来控制 WebGL 就行了。

如果用计算机图形学的角度来解释 WebGL 的话，就需要从顶点数据讲到光栅化的推进原理。往可视化方向发展的话，这些内容一定要做深入的探究，在这里不做详细介绍，等等会用到。

我们可以根据 Three.js 结构做一个分解，就可以很好的了解 WebGL 是如何运转的。Three.js 包含了场景、相机、渲染器三个主要模块，画面通过它们三者之间的配合产生。

场景：可以理解成是一个 3D 的画布，其中包含了各种 3D 模型，以及 3D 光源。

相机：即查看 3D 场景的视线位置、方向、可视范围等要素。

渲染器：决定结果应该显示在什么元素（HTML 元素），以及怎么绘制出来。

相机和渲染器暂时不用操心，先理解场景中的几何体、材质、光照三要素。

几何体就是 3D 的模型，任何 3D 模型都是由顶点组成，顶点和顶点组成面，面和面构成一个完整的立体图形。常规情况下，顶点数越多，生成的面也就越多，图形就越清晰和细腻。

材质则是应用在模型表面的样式，可以理解成是设计软件中的图层填充，你可以设置填充色、渐变色，也可以使用贴图，以及调节透明度等。比如下图的立方体，就是通过一张位图素材作为表面材质，实现最终的效果。

而光照就是在这个 3D 场景中的光源设置，通过光照的添加才能保证场景内的元素可见而不是一片漆黑，还会附带产生投影的效果增加空间感。这是比较基础的概念就不用多做介绍。

这三者除了位图素材以外，几乎全部可以通过代码来实现。比如模型本身，可以使用 Three.js 自带的图形如正方体、柱形、圆锥等，也可以通过精确的设置图形顶点的坐标，实现最终图形。材质可以通过制定如填充或渐变色，然后添加对应的十六进制代码。光照同理，指定光源类型并设置对应的属性，就能实现场景的完整定义。

而后续的相机设置就是确认用户查看这个场景的视窗和视角，渲染器的应用约等于是对场景的效果再添加一层滤镜将它们最终渲染出来（不同渲染器对场景渲染的效果有一定的差异）。

这就是 WebGL 运行的基本要求，和 3D 软件中建模渲染的逻辑是一样的。但是 WebGL 中支持的操作和效果远远比专业 3D 软件少，且并不一样，所以不能把 3D 软件的设置细节等同进 WebGL 中去。

Tips：这就和专业 UI 设计、动效软件的差别，UI 软件所有设置可以1：1还原到开发环境中。

了解完这些，再回到我们最关心的部分，类似腾讯云这些平台做出来的3D场景，全部都是在软件中建模完成以后，开发对照着手写出来的不成？

理论上可以，但没有实践价值。即使这些看起来并不复杂的模型，包含的顶点数量也不少，要是全靠手写可能黄花菜都凉了。

所以第一步就要确定，场景中的模型要怎么定义出来。方法有好几种，比如将建模软件中的模型导出成代码（要软件支持），也可以直接导出特定的模型文件，如 Obj 格式。有了模型，然后再使用 Three.js 对这些模型进行控制，置入到场景中再添加效果、动画等。

虽然听起来很简单，但是模型到底应该用什么方法导，什么格式能用，是根据场景判断的，还要做实际的测试验证可行性。所以我就不在这里逐一介绍，建议你们在每次项目开始前，先和前端工程师确认模型的应用方法（技术选型，涉及到多方面的问题，设计师惯用软件，前端技术水平等），包括具体软件和导出方法，再用素材测试一遍可行性，跑得通的话确定下来，跑不通就研究新方法。

然后就是确认材质和光照的问题了。在 3D 软件中，可以添加的材质、效果、光照的属性非常多，你可以玩出非常多的花样。但前面也说了，软件里的设置和 WebGL 可以添加的效果并不相关，你在软件中玩出花来，前端也大概率实现不了。

所以在 3D 软件中，针对模型材质和光照，除了平面贴图外，只建议使用最基础的材质样式，如添加纯色、渐变看个大概，具体的效果必须通过前端来实现。而前端实现材质效果的做法有两种，一种是使用框架内置好的材质库，比如 Three.js 包含的这些：

• MeshBasicMaterial（基础材质）

• MeshDepthMaterial（网格深度材质）

• MeshNormalMaterial（网格法向材质）

• MeshLambertMaterial（网格 Lambert 材质）

• MeshPhongMaterial（网格 Phong 材质）

• MeshStandardMaterial（网格标准材质）

• MeshPhysicalMaterial（网格物体材质）

• MeshToonMaterial（网格卡通材质）

• ShadowMaterial（阴影材质）

• ShaderMaterial（着色器材质）

• LineBasicMaterial（直线基础材质）

• LineDashedMaterial（虚线材质）

不同的材质有各自的属性和参数应用效果，为了提高效率，可以在 Three.js 的专用编辑器内进行设置，且直接预览效果。

腾讯云的的材质应用就是直接从这些自带材质，原文中介绍：

“开发使用渲染引擎实时生成自带的材质……”

然后应用自带材质库进行设置，创建出五种标准的材质球，作为整套视觉方案的材质规范。

另一种定义材质的方法，就是前端工程师自己写材质，即自定义着色器。着色器是整个前端图形学中最重要的概念之一，所有特殊的轮廓、材质都是由着色器基于原始顶点数据生成出来的（第二章第一张图）。

理论上开发水平够高，可以实现任何的材质效果。更多情况下，是引用网上提供的开源着色器代码，来快速实现自定义的效果。

如果有游戏行业从业经验的，可能还知道 PBR 工作流程，也这套流程对于目前的场景而言过于复杂，毫无必要，所以可以直接略过。

总之，最终的场景材质，是由前端工程师基于框架的特性实现的，而不是1：1还原设计师再软件中创建的效果。需要设计师和前端做大量的沟通和创建不同的材质效果，确定最终方案。

最后的光照逻辑和材质接近，因为在网页中不太需要非常复杂的光效，所以往往只需要最基础的环境光再加上一个平行光即可。

完成这些工作后，再下一步就是针对动画和交互的设置了。基础动画的效果是可以和软件保持一致的，比如位移、旋转、缩放等属性的应用，而那些特殊的类似爆炸、压缩、粒子特效就无法实现。

在软件中制作的动画可以由 Three.js 设置，也可以在软件中制作出模型的动画，然后通过特定格式导出（类似 Lottie 的 jason 文件）引用到 WebGL 中。

但如果需要添加交互效果，就必然要使用 Three.js 来设置动画效果，只是这个动画效果要和网页的相关交互事件捆绑。具体怎么做联动我就不在这里介展开了，这是交互动效的基本常识。只是联动的逻辑、参数，设计师需要导出对应的设计标注文档给前端工程师。

到这里，大多数任务都完成了。但还有一个非常重要的工作，就是 “性能测试”。不要看网页中运行的 3D 效果很简陋，和游戏比差远了，但不代表它们对硬件资源的消耗就小。很多 WebGL 开发的网站稍微复杂一点，硬件就很容易过载，散热风扇开始咆哮，这会导致用户体验变得非常糟糕。

所以每次实现的最终效果，都需要检测运行时占用的性能。而这个检测不仅仅是在一台设备上，而是要在不同设备、不同硬件类型、不同系统上都做测试，尤其是一些比较老的、配置低的设备，比如几年前停产的12寸 Macbook 等。

没有任何理由要让用户为花哨的视觉效果提供过度的算力，所以但凡运行所需的性能超出合理范围（自己评估），就肯定要对内容做优化。在设计层面可以减少场景中的元素数量，或减少使用模型的顶点数，顶点越少，所需的计算两件就越少。

另一方面就是开发层面，检查代码的效率，以及优化或更换使用的着色器、参数，往往可以大幅度降低硬件所需的要求。

在效果和性能中，性能优先级更高，只要经历过一次相关的优化，就可以在每次项目开始时就做出对应的准备，规范顶点数和效果使用范围。

以上就是在网页中运行科交互 3D 图形的方法，下面总结一遍从设计到落地的流程：

结尾

在网页中应用 3D 效果，就是由技术限制来驱动的设计实践，实现的方案并不是由设计说了算，让前端工程师无理由配合。想要输出好的结果，就需要设计师自己了解这些知识逻辑，并能和前端工程师实现深度的配合，来找出有效的解决方案。

如果是想要深入可视化行业的设计师，就更应该系统学习计算机图形学和相关的开发思路，虽然本篇分享没有很深入讲解 WebGL 的底层逻辑，但 WebGL 也仅仅是可视化的其中一个分支而已，还有更复杂的 Unreal、Unity 引擎的应用，同样有大量的相关知识需要解锁。

PS ：再分享点个人的想法，那就是深入 3D 可视化需要的知识储备和技能量非常庞大，虽然看着很酷炫，但在真正的B端项目中价值非常低……一个B端项目并不会因为花里胡哨的3D样式而获得成功，也不会因为它们创造更多的业务收益，可视化多数解决的不是业务问题，而是 “人的问题”，所以不要被外表冲昏了头脑。

以上就是本次分享的内容，感谢大家的观看。