基于网络的三维可视化原理及几种常用工具

陆 瑶

（北京中电慧视科技有限公司，北京 100015）

0 引 言

如今，信息化技术飞速发展，网络三维可视化技术也日渐成熟，且已经在电子商务、远程教育、网络游戏及网络展览等多个领域发挥了重要的作用。例如在电子商务领域，网络三维可视化交互式的展现方式，不仅能够全方位、多角度地展示产品细节，而且能够在网页上嵌入文字说明、音频解说等多种元素，使用户可以更为自由、直观地浏览产品信息，给人以个性化的消费体验[1]；在网络展览领域，以该技术为基础搭建的高度互动的3D虚拟展览环境，将展品整体“搬”到网络上，使浏览者只要点击和拖动鼠标，就可以通过不同视角浏览展品；在教育领域，网络三维可视化教学课件成本低、效果好、交互性强、可进行动态的演示，便于学生学习更为复杂的流程、结构、关系等，能够极大加深学生的理解能力，有效地增强教学效果[2]。在疫情还未平息的当今社会，网络三维可视化逐渐成为主流的展览方式之一[3]。

网络三维可视化基于浏览器/服务器（Browser/Server，B/S）架构的模式构建，以此实现模型的共享和访问。模型构建完成后，上传并存储于服务器。用户通过浏览器访问服务器，服务器提供模型数据，通过调用本机硬件资源渲染模型，并将结果呈现在浏览器上。随着计算机技术和网络技术的发展，硬件设备的处理速度和网络传输速度得到了极大的提升，这就为网络三维可视化技术的应用和普及奠定了坚实的基础。

1 原理分析

网络三维可视化是将三维模型呈现在浏览器上，而用户使用任何手段进行网页浏览时看到的内容都是HTML格式。HTML是通用的网页标记语言，也是万维网的核心语言。2014年10月29日，万维网联盟宣布HTML5的规范制定完成。日常人们所说的HTML5实际上包括了HTML标记、CSS及JavaScript在内的一系列技术[4]。WebGL（Web Graphics Library）是一种3D绘图协议，是多平台通用的标准，被多数浏览器所支持。这种绘图技术标准可以把JavaScript和开放式图形库（Open Graphics Library，OpenGL）结合在一起。OpenGL是一个用于渲染2D、3D矢量图形的应用程序编程接口，是处理2D/3D图形的最为广泛的应用程序编程接口（Application Programming Interface，API）。它独立于视窗操作系统以及操作系统平台，存在于Windows、部分Unix和Mac OS平台，可绘制模型、赋予材质、映射纹理、加载光照环境，还可以平移、旋转、镜像模型及阴影等[5]。

WebGL通过调用OpenGL图形库，可以为所有支持的浏览器，包括Firefox 4+，Google Chrome 9+，Opera 12+，Safari 5.1+，Internet Explorer 11+ 和Microsoft Edge build 10240+等提供硬件3D加速渲染[6]，完美地解决了现有三维可视化的两个问题：第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持；第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。用户可以在多种硬件设备如桌面电脑、笔记本、智能手机上，流畅地浏览3D场景和模型，随意缩放、拖拽模型细节。这就意味着，这项技术在使用上没有设备类型的限制，使用场景更加多样，适用领域更加广泛。

2 常用工具

起初，各种硬件及网络技术协议还不成体系，程序员们通过编写代码来描述模型，实现三维模型的可视化。经过近些年的迭代开发，逐渐形成了多款成熟的三维呈现插件、平台或工具包。而现有的模型软件也多数兼容了用于网络三维可视化的模型格式，并提供了相应插件，不仅可以上传模型，还具有渲染模型、配置场景操作、嵌入文字音频等功能。下面简单介绍几种常用插件或平台的使用方法。

2.1 Rhinoceros的iris插件

Rhinoceros是一款强大的三维建模软件，可以快速简捷地构建复杂的NURBS模型，也支持多边形网格模型，且具备基础渲染功能，支持obj、DXF、IGES、STL、3dm等多种模型格式，几乎兼容所有3D软件。

使用Rhinoceros软件实现模型可视化分享的具体方法是：完成模型创建后，将模型导出为Iris html Archive（.html）格式，如图1所示；修改导出选项UI=Yes，这样可以保留控制功能版面，此控制功能可用于模型交互、改变模型渲染模式等；此时导出的文件包可在本地用浏览器打开，当项目有保密需求时，可使用物理传输方式，在可信赖的设备上打开观看，如无保密需求，将此文件包上传至可信赖的服务器，即可以通过浏览器访问、观看该模型文件。

图1 Rhino模型导出格式

2.2 Sketchfab平台

Sketchfab是一家3D分享平台，专注于网络三维可视化。平台支持大部分模型格式，与多种设备兼容，适用于所有浏览器。浏览时无需安装插件，可随时随地展示交互式3D模型。平台自带的3D编辑器还可以编辑材质灯光，注释功能可以添加音频，用于描述产品功能或提供额外的产品信息，如图2所示。

图2 Sketchfab 3D编辑器添加视角和产品信息

该平台为很多模型软件如Unity，Lightwave，ZBrush，3ds Max等都提供了上传插件。当然，也可以不通过插件，直接将平台支持的模型上传至平台进行编辑。以Rhinoceros软件为例，需要先将NURBS模型转化为网格，如需使用平台材质编辑功能，导出前要将网格分层赋予不同材质，根据材质的平滑程度，编辑不同材质的顶点法线；导出时选择OBJ格式，得到OBJ文件和MTL文件；然后将导出的文件一起上传Sketchfab平台，使用编辑器操作材质、为对象添加动画效果等，最后保存视图和设置，即可通过URL访问浏览该模型文件，还可以生成代码嵌入到其他网页中。

2.3 Verge3D工具包

Verge3D是一款专用于网络三维可视化的工具包，主要支持Blender，Maya，3ds Max三款模型软件，可以直接创建出基于网页的三维互动体验。用户可以在建模软件中展开设计，然后导出到网页实时查看效果。Verge3D工具包还提供了交互编辑器，可以为模型创建行为场景，使其响应用户的交互操作，如图3所示。

图3 Verge3D创建的交互式三维可视化场景

以3ds Max软件为例，使用Verge3D工具转化Max模型为交互式三维模型。首先安装Verge3D插件并打开“App Manager”，创建新的WebGL项目，此浏览器管理页面可以实时检查工作进程，然后通过编辑器添加交互操作，完成配置后，使用发布功能发布到可信赖的服务器，通过链接或代码分享模型，如图4所示。

图4 分享链接和代码

3 结 语

现代技术发展日新月异，电子产品的软硬件性能得到快速提升，网络三维可视化技术在各领域发挥着愈发重要的作用。这就要求相关人员及时接纳、使用新技术，不局限于传统的三维呈现方式。本文简单介绍了网络三维可视化技术在各领域的应用情况，分析了该技术的实现原理，提供了几种常用的实现工具，表明该技术适用于多行业领域，有着广泛的应用前景。