一、 前言
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.sRGBEncodinglet 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 = spherethis.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-pipeline2、转换gltf至glb文件
Converting a glTF to glbgltf-pipeline -i model.gltf -o model.glbgltf-pipeline -i model.gltf -b压缩之后，glb文件的体积会缩小80%左右，所以在加载速度和成果出现上会比原始的GLTF文件更快。
4.3.2 模型解压缩
ThreeJs有针对压缩模型的解压缩计划:
// Instantiate a loaderconst loader = new GLTFLoader();// Optional: Provide a DRACOLoader instance to decode compressed mesh dataconst 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