关于前端:2D1D-vivo官网Web-3D应用开发与实战

一、前言

1.1 前端工程师，不写网页，还能做什么？

在近 20 年的前端发展史中，前端经验了铁器时代（小前端），信息时代（大前端）以至当初的全能前端时代。经验了几个时代的积淀之后，前端畛域开始更加细分。

目前业界普遍认为前端细分畛域的垂直方向有：助力于前后端拆散和工程欠缺的 NodeJS，关注用户界面展现的小前台，提供一站式解决方案的中后盾，丰盛数据展现能力的数据可视化(2D、3D)，以及面向未来的用户富交互体验的互动内容 –AR、VR、3D 等 …

随着前端畛域细分，前端工程师已不只是简略的负责堆砌网页、实现一些的交互，更能够在可视化畛域实现一些很炫酷的成果。下图是 vivo 官网在 3D 数据可视化方面的实战展现。在线体验地址

数据可视化： 顾名思义，就是将数据以可视化图形图表等形式出现给用户，使数据更加直观，主观，说服力更强。上图例就是利用渲染引擎对模型数据进行解析、渲染，最终出现到挪动设施。因其展现出的图像更加平面更具可交互性，属于 3D 数据可视化领域。

明天咱们就一起来理解一下前端的一个细化分支 –3D 数据可视化。本篇文章次要分为：

• 前言
• 2D 数据可视化
• 3D(2D+1D)数据可视化
• vivo 官网 3D 利用实战
• 总结

心愿通过五个章节的介绍和探讨，可能能够让大家对数据可视化以及 3D 数据可视化有一个较为清晰的理解。

二、2D 数据可视化

2.1 什么是 2D 数据可视化？

2D 数据可视化 是指利用二维立体图表对数据进行组织解决、出现的一种形式。讲到图表，大家首先想到的可能是咱们日常用过柱状图，折线图等展现模式的图表图形。比方上面这种：

其实除了下面几种模式，还有一些比拟炫酷的图表展现模式如：气泡图、面积图、省份地图、词云、瀑布图、漏斗图、热力求、GIS 地图等。

2.2 2D 数据可视化利用场景

2D 数据可视化在工作生存中的利用十分宽泛。最简略的像 Excel 数据图表，XMind、Visio 属于数据可视化的具体利用场景。也有一些略微简单的，比方数据可视化大屏，后盾数据报表，地图等。

随着数据可视化的利用场景越来越宽泛，数据能够出现为更多丰盛的可视化模式，使用户可能更加轻易、便捷的获取并了解数据传播的信息。

三、3D(2D+1D)数据可视化

3.1 什么是 3D 数据可视化？

3D 数据可视化能够了解为在 2D 数据可视化的根底上减少了 Z 轴的维度，使数据出现从二维立体扩大到三维平面构造。是一种新的治理、剖析和交互数据的形式，并且能实现实时反射、实时折射、动静暗影等高品质，真切实时渲染 3D 图像。

3D 数据可视化与 2D 数据可视化 (个别数据可视化) 次要区别就是更平面，更实在，更有沉迷感。来张图感受一下：

3.2 3D 数据可视化利用场景

3D 数据可视化因其常识传输速度快、数据信息展现更直观、信息传播更容易，所以更加容易让使用者进行数据的了解和空间常识的出现。

目前可见的 3D 数据可视化应用领域有智慧城市、汽车、手机模型展现等。

置信随着浏览器对 WebGL 的反对度越来越广，以及 5G 的遍及，前端 3D 可视化的应用领域会越来越宽泛。

3.3 3D 数据可视化解决方案

理解了 3D 数据可视化的概念和利用场景，咱们再来理解下目前业界 3D 数据可视化支流解决方案：WebGL。

下图为 WebGL 的渲染过程图：

WebGL（Web Graphics Library）是基于 OpenGL ES 标准的浏览器实现，上图的 WebGL 渲染过程能够了解为：

1）JavaScript：  解决着色器须要的顶点坐标、法向量、色彩、纹理等信息，并为顶点着色器提供这些数据

2）顶点着色器： 接管 JavaScript 传递过去的顶点信息，将顶点绘制到对应坐标

3）光栅化阶段： 将图形外部区域用空像素进行填充

4）片元着色器： 为图形外部的像素填充色彩信息

5）渲染： 渲染到 Canvas 对象

WebGL 既能够绘制 2D 数据可视化图形图表，更是一种 3D 绘图规范，这种绘图技术标准将 JavaScript 和 OpenGL ES 2.0 联合在一起，通过绑定，WebGL 能够为 HTML5 Canvas 提供硬件 3D 减速渲染，这样 咱们就能够借助零碎显卡来在浏览器里更流畅地展现 3D 场景和模型。

四、vivo 官网 3D 利用实战

对用户来讲，网上购物最大的痛点就是不能所见即所得，目前支流的网上商城个别都是通过图片或者视频展现产品的特点，而这些二维的信息展现形式无奈让用户很好的去理解产品的信息。有了 3D 展现场景之后，用户通过手机模型的 3D 展现能够更加直观分明的理解手机的产品细节及特点，从而晋升用户的购买欲望。

上面咱们一起来理解下 vivo 官网在实现 3D 展现时的技术选型及实现计划。

4.1 可视化工具介绍及技术选型

目前，业界曾经有很多好用的 3D 可视化开发工具，不便咱们进行 3D 可视化需要的开发。3D 数据可视化次要蕴含渲染库和模型两方面，上面咱们从 3D 渲染库和模型别离理解下 3D 可视化畛域工具及官网的技术选型。

4.1.1 渲染库选型

目前实现 3D 数据可视化的支流解决方案是基于 WebGL，那既然有了 WebGL，咱们为什么还须要渲染库？

这是因为 WebGL 门槛绝对较高，须要了解把握绝对较多的数学知识。尽管 WebGL 提供的是面向前端的 API，但实质上 WebGL 跟前端开发齐全是两个不同的方向，常识的重叠很少。

利用渲染库进行模型的渲染实现能够大大降低咱们的学习老本，并且可能实现 WebGL 所能实现的简直所有性能。罕用的一些 3D 渲染库有：ThreeJs、BabylonJS、SceneJS以及CesiumJs；

几种不同 3D 渲染库比照：

通过比照咱们能够发现，上述几种渲染库各有长处。然而在做手机模型的 3D 渲染时，对于光照和暗影以及反射的侧重点比拟高，并不需要碰撞检测等个性。所以，基于以上的比照，咱们选取 ThreeJs 作为咱们 3D 渲染的底层库去实现手机模型的 3D 渲染。

4.1.2 模型选型

理解了渲染库，咱们再来聊一聊罕用的 3D 模型格局：OBJ、FBX、GLTF。

模型文件其实是一个蕴含了顶点坐标、索引(index)、UV、法线、节点关系、材质、贴图、动画等信息的数据汇合。不管模型格局如何，然而其本质就是对上述信息的编排和组织。各种模型之间的区别无非是组织的形式不同，有些用纯文本（OBJ），有些用 json（GLTF），有些用二进制（FBX）。

几种不同模型文件比照：

通过比照咱们发现几种模型格局别离实用于不同的场景：

1）OBJ模型对于动画的反对不是特地敌对，而手机在做 3D 展现时须要进行一些模型的拆解动画展现。

2）FBX 因为不同引擎解析的标准不同，导致不同引擎渲染出的成果差异较大

3）GLTF(GLB) 模型格局扩展性较高，ThreeJs、Babylonjs 等 WebGL 渲染引擎的支持性较好

4.2 3D 场景搭建及计划施行

咱们发现，如果想要将 3D 场景中的物体展现的足够真切，相机和光照是必不可少的两个基本要素。理论业务场景中还有模型色彩切换、模型旋转、缩放、全景场景等逻辑须要咱们去解决。

4.2.1 场景相机

首先，咱们来理解一下相机。3D 场景中的相机相似于现实生活中的人眼的性能。相机拍摄一个物体的时候相机的地位和角度须要设置，虚构的相机还须要设置投影形式。地位和角度咱们比拟好了解，上面咱们来介绍下投影形式：投影有两种形式，别离是正投影与透视投影：

4.2.1.1 正投影

正投影： 正射投影，又叫平行投影。这种投影的视景体是一个矩形的平行管道，也就是一个长方体，如图所示。正射投影的最大一个特点是无论物体间隔相机多远，投影后的物体大小尺寸不变。

正投影通常用在修建蓝图绘制和计算机辅助设计等立体图形方面，这些行业要求投影后的物体尺寸及相互间的角度不变，以便施工或制作时物体比例大小正确。

4.2.1.2 透视投影

透视投影： 透视投影合乎人们心理习惯，即离视点近的物体大，离视点远的物体小，远到极点即为隐没，成为灭点。它的视景体相似于一个顶部和底部都被切除掉的棱椎，也就是棱台。

透视投影通常用于动画、视觉仿真以及其它许多具备真实性反映的方面。相比拟来讲，透视投影则更靠近咱们的视觉感知。所以在官网的手机模型 3D 展现中，咱们抉择透视投影来计算相机的投影矩阵。

4.2.2 场景光照

要想让咱们渲染出的 3D 物体看起来更天然、真切，很重要的一点就是模仿各种光照的成果。

3D 场景中物体的光照由光源、介质（物体的材质）和反射类型决定的，而反射类型又由物体的材质特点决定。依据不同的光源特点，咱们能够将光源分为 4 种不同的类型。

别离是 环境光（Ambient Light）、平行光（Directional Light）、点光源（Positional Light）。

咱们别离来理解下环境光（Ambient Light）、平行光（Directional Light）、点光源（Positional Light）。

从图中咱们能够看出：

平行光 是朝着某个方向照耀的光，光线中的每一个光子与其它光子都是平行静止的。举个例子，阳光就能够认为是平行光，平行光只能照亮物体的一部分外表。

平行光除了色彩之外，同时具备方向属性，属于有向光。有向光和物体产生作用时依据物体的材质不同，会产生漫反射和镜面反射两种反射成果。3D 场景中最终的反射成果是由环境光、平行光，漫反射以及镜面反射叠加在一起的成果。

点光源 是指光线是从一个点发射进去的，是向着五湖四海发射的。这种光在咱们的现实生活中是最常被用到的。举个例子，电灯泡就是向各个方向发射光线的，它就能够被认作是点光源。

点光源不仅有方向属性，还有地位属性。因而计算点光源的光照，咱们要先依据光源地位和物体外表绝对地位来确定方向，而后再和平行光一样，计算光的方向和物体外表法向的夹角。

环境光 就是指物体所在的三维空间中人造的光，它充斥整个空间，在每一处的光照强度都一样。环境光没有方向，所以，物体外表反射环境光的成果，只和环境光自身以及材质的反射率无关。

4.2.3 模型旋转实现

有了相机和光照就可能比拟真切的将模型出现给用户了，然而还须要解决模型自身的一些交互操作，比方 模型旋转、色彩切换 等。实现 3D 场景中的模型旋转有两种实现形式：

（1）3D 场景中的相机不动，旋转 3D 实体即 3D 模型

（2）旋转相机，即 3D 模型不动，相机围绕模型进行旋转

在现实生活中，将物体挪动到视场中并不是正确的办法，因为在理论生存中通常是挪动相机去拍摄建物体。所以咱们抉择挪动相机 即实现形式(1) 去实现 3D 实体的旋转交互。

4.2.4 模型色彩切换

模型格局采纳的是 GLB 模型（不便前期固化上传），所以每一种色彩对应一个新的 GLB 文件。

每一次切换模型须要从新对文件进行解析，然而因为不同色彩模型间贴图等材质能够共用，所以即便切换色彩时从新加载模型并解析也会比初始加载时的速度晋升很多。所以思考到前期的固化老本与复用性，切换色彩从新加载模型文件，不失为一种绝对比拟优雅的解决形式。

4.2.5 全景场景搭建

为了让用户在浏览产品的 3D 页面时有更强的沉迷体验。咱们采纳了全景模式。用户在全景模式下旋转缩放手机时，对应的背景元素同样会追随相机的旋转和缩放进行旋转缩放。这样用户在进行浏览查看时，交互的体验感更强。

在 ThreeJs 中全景模式能够通过加载纹理贴图的形式实现：

let texture = await Loader.loadImg(panoramicImg)
texture.encoding = THREE.sRGBEncoding

let sphereGeometry = new THREE.SphereGeometry(3000, 160, 160)
sphereGeometry.scale(-1, 1, 1)

let sphereMaterial = new THREE.MeshBasicMaterial({map: texture})
let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)

// 设置材质对象的纹理贴图
this.bgMap = sphere
this.stage.scene.add(this.bgMap)

下面代码首先创立一个球形几何 SphereGeometry，将创立后的球形几何网格进行 x 轴反转：sphereGeometry.scale(-1, 1, 1)，使所有的面点向内。而后加载图片数据创立材质并退出 map：new THREE.MeshBasicMaterial({map:texture})；new THREE.Mesh(sphereGeometry, sphereMaterial) 最终实现全景图成果。

4.3 性能优化

4.3.1 模型压缩

为了晋升页面初始化的加载速度以及切换色彩模型时的解析速度，咱们在制作实现模型后，须要对模型进行压缩以升高模型的体积量。

谷歌针对 GLB 模型有一个压缩库 Draco 3D，能够在不影响模型展现成果的状况下，对模型的体积进行压缩。能够利用 GLTF Pipeline 命令行对 GLTF 模型进行压缩。

压缩的步骤：

1、装置 gltf-pipeline

npm install -g gltf-pipeline

2、转换 gltf 至 glb 文件

Converting a glTF to glb
gltf-pipeline -i model.gltf -o model.glb

gltf-pipeline -i model.gltf -b

压缩之后，glb 文件的体积会缩小 80% 左右，所以在加载速度和成果出现上会比原始的 GLTF 文件更快。

4.3.2 模型解压缩

ThreeJs 有针对压缩模型的解压缩计划:

// Instantiate a loader
const loader = new GLTFLoader();

// Optional: Provide a DRACOLoader instance to decode compressed mesh data
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/examples/js/libs/draco/');
loader.setDRACOLoader(dracoLoader);

首先构建一个 GLTFLoader 对象，而后在进行模型加载过程中，设置 dracoLoader 解析文件的门路，dracoLoader 对压缩后的模型文件进行解析。最初将解析后的文件返回至脚本进行渲染出现。

五、总结

本篇文章首先介绍了 2D 数据可视化，通过将立体图表数据可视化模式拉伸到三维平面构造，衍生出了 3D 数据可视化相干内容，以及官网基于 ThreeJs 的 3D 利用开发实战。

然而 WebGL 对于 3D 渲染相干的常识远不止这些。这里只是列举出了比拟罕用的几种 3D 模型的渲染因素，比方灯光，相机等。理论还有对于物体材质的光的反射类型：漫反射、镜面反射，相机也有其余类型的相机模型：例如：正交相机、立方相机、平面相机等，因为篇幅起因咱们不再做具体的介绍，感兴趣的同学能够去 (WebGL) 官网去查看并学习相干内容。

作者：vivo 官网商城前端团队 -Ni Huaifa