EverCraft一直在关注Web可视化技术的发展，在本系列文章里，小编将对国外一篇感觉很不错的综述性文章进行翻译，供这一领域的爱好者相互学习。这篇paper的信息为：“Mwalongo, F., et al., State-of-the-Art Report in Web-based Visualization. COMPUTER GRAPHICS FORUM, 2016. 35(3): p. 553-575. ”。感兴趣的小伙伴可以直接阅读原文献哈。
2.4 浏览器的本地渲染
在客户端渲染（如使用浏览器的本地渲染）的主要优势在于可视化过程中的交互。本地化渲染避免了服务端渲染方式所受的网络延迟影响。最近web技术的发展（尤其是JavaScript的性能提高以及WebGL的广泛使用）使得浏览器已经可以实现高性能的可视化渲染。本部分我们将主要讨论HTML5和WebGL相关的渲染技术，它们已经是浏览器无插件渲染的实际上的标准。
HTML5新引入的<canvas>元素可通过JavaScript动态地绘制图形，支持2D上下文（context）以及3D上下文。2D上下文提供基于CPU的2D基本绘图渲染（HTML5支持的另外一个2D矢量图元素是/<canvas>
- 如X3DOM和XML3D等框架都旨在将3D图形与HTML5的DOM（document object model，文档对象模型）集成。X3DOM通过X3D和HTML5集成以实现浏览器的3D图形支持。这一类的框架通过场景声明式的API完成3D渲染的WebGL顶层实现。这种集成方式与面向2D绘图的SVG类似，一个3D场景使用XML语言来描述，嵌入在元素标签内。
- 另一类通过浏览器访问GPU实现3D渲染的顶层封装库包括如Three.js和Babylon.js等。相比于X3DOM和XML3D类型，Three.js和Babylon.js这类库不再通过XML文档声明方式来实现3D场景，而是以JavaScript库的方式提供可编程的API。
- 虽然Three.js和Babylon已经实现了较高的顶层封装，应用十分广泛，但在更垂直的应用领域，为了更进一步简化编程过程，也出现了很多更顶层的封装库，极度降低了web 3D的可视化编程门槛。这一类的典型代表如EverAPI，最少仅需要四、五条代码即可通过EverAPI实现web 3D的展示，并默认集成了针对机械领域对3D模型常用的操作功能，如结构树、剖切图、标注等。
2.4.1 基于GPU的3D渲染
利用GPU的浏览器渲染技术多使用基于多边形的方法或射线跟踪法。基于多边形的技术通常使用基于WebGL构建的库来生成或从客户端导入网格，并将其上传到GPU渲染。在其他情况下，网格是从服务器传输到客户端。
但是，基于多边形的技术具有一些限制。为了获得顺滑的表面，需要精细的曲面细分（tessellation），从而帧速率与三角面片的数量成比例的降低。此外，大量的三角面片不仅会消耗大量内存，而且每次几何形状发生改变都将需要相当大的CPU-GPU带宽。同时，在浏览器环境中，如果CPU生成几何图形数据的过程被迟滞了，则又将进一步降低渲染性能。将几何图形的生成过程迁移到功能强大的服务器也不总能解决上述问题。网络延迟以及和网络及CPU-GPU互联的带宽可能仍会对渲染性能产生负面影响。为了缓解这些问题，一种更好的方法则是使用隐式、参数化几何体，并通过基于GPU的射线跟踪法渲染。这种方法确保了CPU到GPU之间更少的数据传输，并降低了在JavaScript中的计算代价。
基于GPU的射线跟踪法利用参数定义对象的隐式表面，并且在片段着色器中计算射线与对象的交点以生成物体表面。为了开始渲染并生成这些片段，通常会渲染替代几何体。例如，对象的全屏四边形或者紧密包围盒都可作为对象的一种替代几何体。这些技术的优点是即使对于大量数据也可以提供高渲染性能和高质量图像。根据所使用的实现算法，射线与物体交点的高效计算可能需要采用加速结构。
基于GPU的体积射线行进算法是目前直接提供体绘制的最先进的算法。此技术使用3D纹理（假设使用WebGL 2.0）或2D纹理集或图集进行数据存储。通常使用替代几何体（如体积数据的包围盒）以进行初始化渲染。与PC端的OpenGL类似，有两种途径可使用WebGL来实现此技术：多通道渲染和单通道渲染。
- 多通道渲染方法中，将替代几何体（通常是体积包围盒）渲染为纹理，以便在体积数据中获取射线的入射点和出射点。这些射线然后在体积遍历过程中使用，以获得这些采样射线的起点和方向。在片段着色器中，沿射线对体积进行采样、分类、选择性的着色、并迭代合成得到像素的最终颜色。
- 在单通道渲染方法中，对体积包围盒的正面和背面都进行栅格化。在片段着色器中，射线遍历沿着视线步进穿过体积并合成样本颜色，最终获得像素颜色。在WebGL 1.0中可视化大量体数据的主要限制在于纹理存储和对着色器动态循环的支持。
使用WebGL进行体积可视化的另一种方法是在服务器端提取几何图形并在客户端上执行渲染。如在服务端使用CUDA对原始的MRI数据进行预处理，然后在客户端使用Three.js进行渲染，服务端和客户端通过XML或者JSON格式传输几何文件。或在服务端利用VTK库从体数据提取切片图片，并将JPEG或PNG格式的图片发至客户端通过GPU渲染。
网格渲染：许多网格渲染技术使用渐进式网格来改善交互。这是通过对网格的不同细节程度（LOD，levels of detail）进行渐进解码和渲染来实现的。渐进式网格的主要思想是用低分辨率（基础网格）来表示网格数据，并结合各种算法操作（如定点分割）从基本网格重建网格，以获得所需细节程度的结果。这种表示法可实现高效的加载、解码和渲染。这是因为为了获得所需细节程度的模型表示，仅需要在上一细节程度级别的模型基础上进行网格重建操作，这减少了需要传输到客户端的数据，降低了带宽的使用。
2.4.2 SVG/Canvas的2D绘制
如前文所述，<canvas>元素除了通过WebGL提供3D绘制外，还有2D图形绘制的API。它提供了使用JavaScript绘制路径及多个2D形状和文本的内置函数。/<canvas>
D3.js是一个用于信息可视化的JavsScript库，它建立在浏览器的DOM以及CSS和SVG之上。SVG为使用标记语言的进行2D图形渲染的另一种方法。D3.js允许用户将要可视化的数据绑定到DOM元素，并根据基础数据的属性值操纵器元素属性。它显示元素的文档模型而不是提供自定义的数据模型（这避免了在模型之间转换时产生额外的开销）。直接操作DOM可能会导致性能下降，尤其是对于大型数据集，因为每当DOM发生变化时，都可能要求浏览器进行布局、绘制和合成。但是，通过使用DOM模型，可以确保与其他Web标准的无缝互操作性。
EverCraft.co
我们相信。每个人都具有创新的力量，每一份对未来的设计都将让生活变得更有趣。
閱讀更多 EverCraft 的文章
