车展作为车市的风向标，代表着汽车倒退的趋势，也是厂商展现本人、推广本人的舞台。WebGL 作为一种新兴的技术，为 Web 端提供了交互式三维动画新体验，汽车之家的网上车展就是两者联合之后的一种新的产品状态。
到目前为止，汽车之家车展总共经验了五年的风雨倒退，历经三大阶段，它们别离是全景实拍车展、步进式全景实拍车展和纯 3D 虚构车展。
全景实拍车展：线下车展现场实拍全景图，以此为次要素材构建而成的线上车展。
步进式全景实拍车展：应用业余设施实地拍摄线下车展全景图，同时采集空间信息，实现全景场景的平滑切换，就像镜头在行走，这也是步进式这个名称在之家的由来。
纯 3D 虚构车展：在 Web 端实现了展馆和汽车模型的加载展现，真正实现了第一人称逛展看车，源于事实而又超过事实，保障性能的同时尽可能的出现高质量视觉效。
每一次的车展迭代更新都对业务有的极大的推动，而这背地都是 WebGL 技术一直成熟和生态的一直残缺所造就的。
一、WebGL 介绍
1.1 WebGL 引擎现状
WebGL 是近些年呈现的一种 3D 绘图协定，这种绘图技术通过减少 OpenGL ES 2.0 的一个 JavaScript 绑定，为 HTML5 Canvas 提供硬件 3D 减速渲染，这样 Web 开发人员就能够借助零碎显卡来在浏览器里运行 3D 利用。随着挪动互联网的崛起和倒退，Web 业务也随之拓展，有时须要在网页 / H5 / 小程序中渲染 3D 模型，WebGL 就有了用武之地。
WebGL 引擎应用 JavaScript 语言编程，学习成本低，容易入门，公布部署不便灵便且无需装置下载，但国内没有比拟成熟的 WebGL 开发者生态，可应用的插件很少；因为是基于 Web 浏览器生态，能够十分不便的以外链形式对外进行社区裂变流传，同时引擎能力满足简略的 3D 需要，常见的 WebGL 引擎有 three.js、BabylonJS 和 PlayCanvas 等，它们都是最近几年才呈现，积攒绝对于传统的空幻（UE）或者 Unity 引擎要少很多。
1.2 WebGL 的长处
跨平台：WebGL 是 H5 规范之一，具备对立的、规范的、跨平台的 OpenGL 接口实现，通过 JavaScript 脚本实现了 Web 端的 3D 利用制作，无需任何浏览器插件反对，是浏览器级别的一次开发多处利用；
易流传：WebGL 基于 Web 浏览器生态，基于它开发的利用能够像一般网页一样十分不便的以外链形式对外进行社区裂变流传；
入门难度低：如上所述，WebGL 的开发语言是 JavaScript，上手速度快，公布部署不便灵便且无需装置下载；
1.3 WebGL 的毛病
图形绘制接口实现不残缺：WebGL 的只实现了局部 OpenGL 函数，许多优良的个性难以被应用；
设施性能较低：次要利用场景是挪动端的浏览器，而挪动设施的硬件性能较 PC 机广泛偏低，浏览器自身对资源分配也有限度，这使得简单场景以及特效无奈失去无效的应用，影响视觉体验。
资源加载耗时长：大部分 WebGL 利用须要在文件服务器获取必须的模型资源，在 4G 环境下这个加载过程往往须要十几秒到几分钟的工夫，这对于一个 Web 端的利用是不可忍耐的。
1.4 小结
随着 WebGL 的一直倒退，Web 端的 3D 利用成果也有显著的晋升，然而与传统 3D 应用程序相比，WebGL 即具备本身独特的劣势，也存在有显著的有余，以汽车之家网上车展为例，为了使本人的利用有更好的出现，咱们必须克服加载工夫长，内容出现绝对繁多简略的毛病，解决这些问题的路径别离是几何数据压缩和纹理压缩。
二、几何数据压缩
2.1 几何数据定义
那什么是几何数据呢？要解释几何数据就要从模型的示意办法开始介绍，目前三维物体的三角形示意是经典的示意模式，在这种表示法中，物体用三角形小平面组成网格来示意。三角形表示法在计算机图形学中是普遍存在的，造成这种景象的起因有两个：创立三角形物体是很容易的，无论如许简单的物体，咱们总可能一直地反复构建三角形去实现物体的示意；三角形表示法在对物体明暗解决的时候有着微小的劣势。
物体拓扑构造示意
采纳三角形网格表示法最大的艰难是模型的精确度，即三角面与物体理论外表的差异，高质量的模型往往须要对物体外表进行更多层次的细分，同时随同着大量的三角形产生，可怜的是这些数据都是须要进行实时传输到客户端的，一般来说 Web 端一台仅示意外观的 3D 车模型须要十兆左右的几何数据，仅仅传输这些数据就须要十秒（实测 4G 带宽）左右的工夫，而传统的 Web 页面的齐全展现工夫绝大部分状况下不会超过一秒，这种状况会造成用户在进入 3D 利用时的大量散失。
上图是一个简略地 obj 模型文件的内容，它示意了一个由十个三角形组成的网格构造，因为三角形之间有反复顶点，所以顶点总共有十四个，而不是三十个。其中：v 示意几何体顶点、vt 示意贴图坐标点、vn 示意顶点法线、f 示意三角形。所以几何数据实质上就是构建模型的最根底的点、线、面数据，几何数据的压缩就是对数值顶点坐标精度和物体外表网格的压缩。
2.2 顶点数值精度压缩
通常状况下三角形的顶点坐标是由浮点型数示意，如果咱们应用一个短整型数对其进行近似示意，那么因为浮点数占用四个字节，短整型数只占用两个字节，这样咱们将可能节约一半的存储空间，不仅顶点坐标数据能够进行这种近似示意，其余依赖于顶点的数据，如 UV 值、色彩值、法线等也都能够用这种形式进行压缩解决，当然在理论利用中不会这么简略的解决，不同的模型往往须要不同的压缩精度。
2.3 物体外表网格压缩
参考本文之前提到的 obj 模型的示意形式，该外表网格须要存储十四个顶点，思考到顶点复用节约存储空间，每一个三角形只须要指定三个顶点的序号，而不是为每个三角形都指定三个顶点的坐标，尽管如此，每个三角形依然须要存储三个短整型数据，即每个顶点须要至多 16 个比特位存储。
2.4 EdgeBreaker 算法
EdgeBreaker 是一种用于压缩三角形网格的算法，可能将网格中的三角形输入为一组拓扑符，可能无效地缩小存储体积，它的根本过程是将形成每一个外表的三角形用拓扑的形式进行示意，再依照肯定的规定对外表三角形进行遍历，同时产出拓扑符，最终将生成的拓扑符列表进行霍夫曼编码输入。
首先，咱们须要理解下这些拓扑符的定义，外表中的每一个三角形都用一种拓扑符号示意，通过统计这些拓扑关系总共有五种，每个拓扑符都对应一个惟一的编码，X 示意以后的三角形，箭头示意三角形起始边，v 示意三角形的另一个顶点，C、L、E、R、S 别离示意不同状况下的拓扑关系，如下图所示：
根本拓扑关系
晓得了这些拓扑关系，咱们就能够对一个外表进行遍历输入了，这个过程能够形容为以下过程：
任选任一三角形的任一条边，作为起始边；
输入以后边的拓扑符；
逆时针选取接下一个未被输入的三角形，作为以后三角形；
如果以后三角形存在，指定以后三角形未被遍历到的顶点的对边为起始边，转到步骤 2；
如果以后三角形不存在，并且以后三角形不是起始三角形，则输入拓扑符，指定上一三角形为以后三角形，转到步骤 3；如果以后三角形是起始三角形，退出，遍历完结。
通过以上步骤就能够对一个外表进行编码输入，以下图的外表为例，咱们选定左下角的三角形为起始三角形，它的底部的边为起始边，依照上述遍历过程，沿着红色箭头进行编码输入，第一次和第二次回退后的遍历门路别离用绿色和彩色箭头示意，最终咱们就失去了这个外表的所有三角形的编码输入序列：CCRRRSLCRSERRELCRRRCRRRE。
每个拓扑符最多由 3 个比特位进行示意，相比拟之前每个顶点 16 个比特位，可将三角形的顶点序号存储空间压缩到原来的 18.75%，在理论利用中，例如 3D 车模型的外观局部，每个外表的三角形数量通常都会高于几万，对其进行霍夫曼编码后，甚至可能将存储空间压缩到原来的 10%。
外表遍历过程
2.5 几何数据压缩工具
Draco 是谷歌提供的开源工具，其外围的实现过程就是顶点数据压缩和物体外表网格压缩，它不仅可能对网格数据进行压缩，还提供了点云数据的压缩办法，也减少了对顶点数据精度压缩过程中指定比特位的配置，最初附上官网提供的压缩统计数据：
Draco 与 Zip 文件压缩状况
然而 Draco 也存在不足之处，截止到 1.35 版本，它只反对 obj 模型文件和 ply 点云文件作为输出，对于双 UV 和顶点具备色彩的状况是不能解决的，而且这个压缩过程过于强调压缩效率，压缩后常常会引起模型破面和贴图异样的状况，并且咱们还须要在 C 端自行实现对 Draco 压缩文件的解压操作，这波及大量的 CPU 运算，往往会引起卡顿的状况呈现。
三、纹理压缩
3.1 纹理定义
纹理是什么呢？纹理是每个物体外表上的样子，譬如说木头上的木纹、大理石的纹路、汽车的车漆等，所以它是用来表白物体外表的显示细节，这些细节包含外表色彩、暗影、光照信息设置，甚至其它与显示无关的数据也能够纳入纹理的领域。
比拟常见的图片文件格式，例如 JPG、PNG、BMP 等并不能被 GPU 间接辨认，所以它们都不是纹理格式文件，纹理格局是可能被 GPU 所辨认的像素格局，可能被寻址采样。常见的简略的纹理格局有 R8G8B8A8、R4G4B4A4、R8G8B8、R5G6B5、R5G5B5A1。
3.2 纹理压缩的必要性
受限于挪动设施硬件和 WebGL 对 OpenGL 的图形绘制接口实现不残缺，WebGL 利用不得不大量应用烘焙好的纹理贴图来晋升整体成果，然而零碎调配给浏览器的显存空间无限，尤其是 IOS 设施，通常在 100 兆至 200 兆左右的时候会呈现显存空间有余，导致整个利用解体。
另外，Web 端罕用的 PNG/JPG 格局纹理图片须要 CPU 进行解压缩，像素之间存在依赖关系，无奈实现单个像素的解析，因而施展不了显卡的并发能力, 而且这种解压缩操作自身就是对 CPU 资源的节约。所以，无论是为了进步可能应用的纹理贴图数量，还是为了进步性能，都须要对纹理贴图进行压缩解决。
3.3 纹理压缩原理和现状
纹理压缩的实质是应用更少的存储空间去表白更多的色调信息，不同的 GPU 所反对的纹理格局也并不全然雷同，所以就导致目前纹理压缩比拟凌乱的现状，下图简要介绍了 DXT1 格局的工作原理：
DXT 格局工作原理
罕用的纹理压缩格局有 DXT 系列、ETC 系列和 PVRTC 系列等，他们都能够将显存占用空间压缩到原来的 1/4 以下，减少了利用中能够配置的内容，也不须要 CPU 解压就能被 GPU 间接采样，能够缩小内存和带宽的占用，晋升了运行效率，然而这些压缩格局也有一个致命的毛病：在不同设施反对的压缩格局并不相同，特地是 Android 零碎中的差异化更显著，甚至在同一个设施不同的浏览器反对的压缩格局也会存在差别。
3.4 Basis 格局
为了解决不同设施上纹理压缩格局不对立的问题，Basis 格局应运而生，它是一种开源的通用贴图格局，旨在提供一种更小存储尺寸，更快解码的计划，非常适合 WebGL 利用，在放弃显存高压缩率的同时，解决了罕用压缩格局低效率以及无奈跨平台的问题。
贴图格局存储空间占用
Basis 纹理显存占用
从上两图能够看出，Basis 通用贴图格局的显存占用是 JPEG 的六分之一到八分之一，其存储的大小只是 JPEG 的一半。不过目前浏览器中并没有退出 Basis 通用贴图的转码器，WebGL API 以及 WebGPU API 并不能高效地跨平台读取压缩贴图，咱们不得不为利用额定实现 Basis 的解码操作，这在肯定水平上也减少了利用的累赘。
四、写在最初
技术总是繁多的，业务却是简单的，本文外围围绕汽车之家网上车展在优化加载时长和丰盛场景内容开展，介绍了模型压缩和纹理压缩两种技术，在肯定水平上缓解了加载时长过长和 Web3D 利用内容不够丰盛的现状，不可否认，Web 端的 3D 利用无论在画质和生态依然无奈达到传统的 3D 利用的程度，然而，WebGL 的确是可能为用户提供 3D 体验的最快捷的形式。
援用材料：
[1] A.V. Aho, J.E. Hopcroft, and J.D. Ullman, The Design and Analysis of Computer Algorithms, Addison-Wesley, Reading, MA, 1974.
[2]Jarek Rossignac, Edgebreaker: Connectivity compression for triangle meshes, GVU Center, Georgia Institute of Technology , 1999
[3] http://events.jianshu.io/p/a0…
[4] https://github.com/BinomialLL…
[5] https://github.com/google/draco