通用格式三维图形浏览平台设计

童凌, 欧阳纯萍, 罗凌云

(南华大学 计算机科学与技术学院 软件工程系， 衡阳 421001)

通用格式三维图形浏览平台设计

童凌, 欧阳纯萍, 罗凌云

(南华大学 计算机科学与技术学院 软件工程系， 衡阳 421001)

随着互联网与虚拟现实技术发展产生网络三维浏览技术，其目的是让人们更加清晰明了地认识真实物体。目前，网页中的三维图像至今尚未成为主流的浏览方式。一个重要的原因是，三维图形的文件格式多样，尚未形成统一的标准。研究了不同的三维模型文件在浏览器上的显示方法，并搭建小型平台，用于三维文件在浏览器中的预览。对加载时间进行相关测试。实验结果表明，该平台能读取不同格式的文件，方便用户的即时浏览，可将其作为基础运用于在线购物、虚拟现实等Web应用中。

三维文件； 在线预览； 文件格式转换； Three.js

0 引言

传统的网页一般以图片、文字和动画的形式为用户呈现信息，人们可以方便地获取图像、声音、文本、视频等各种多媒体信息。然而，这种浏览形式与用户缺乏互动。相比之下，三维图形所表示的场景具有较强的逼真性和很强的交互性。

在电子商务中，由于网上虚拟环境所限，顾客无法亲身接触商品实物，只能通过图片，文字描述以及客服咨询等方式了解商品，因此，顾客常常对网页上展示的商品持有怀疑态度，商品实物与图片展示的内容不符的情况也时有发生。当前的消费者不再满足于简单形式的产品描述，希望有更逼真的产品展示。想象一下，如果淘宝网上所有的产品都使用3D模型来展示是多么酷的一件事。

众所周知，二维图像，早已拥有固定而成熟的文件格式。png, jpeg, gif等图像格式早已得到广泛的传播。早在1992年，国际标准化组织(ISO)联合图像专家小组就已经制定并完善了JPEG的文件标准格式的表示方法，这极大地促进了二维图像在互联网上的传播。与二维图像相比，三维浏览的形式并没有得到广泛推广，主要有两个原因：1、与常见的图片相比，三维模型占用的磁盘空间很大。在网络带宽不足时，需要花费很长时间传输数据，因此用户在Web上浏览体验受到制约。论文[1]提出一种使用三角形网格压缩三维图形数据的方法，有效地压缩了三维文件的大小，为三维图形的传播奠定了基础。 2、三维模型格式多样，step, dwg, stl等文件格式分别各自占有一席之地：dwg格式是Autodesk 公司在其建模软件Auto CAD中使用的默认文件格式，在建模领域中被广泛使用；step格式是国际标准化组织(ISO)所建立的标准，在船舶、制造业、轻工业等传统领域具有普遍的应用；stl格式在计算机图形应用领域中用来表示三角形网格的一种文件格式，它仅仅保存了三角面片的几何信息，因此文件格式简单，在互联网线上应用广泛。各自的领域拥有其相应主流格式，但是由于不同格式的文件不能在同一个软件中访问，因此各个领域之间缺乏交流。

为了打破这种隔阂，使得不同格式的文件能够统一起来，笔者提出了一个支持多种文件格式的浏览技术，并开发了一个小型平台，使用该技术实现了三维模型文件的在线浏览功能，并对其进行相关测试。结果表明，该技术能够跨平台，跨多种不同的格式快速完成高精度模型的读取与展示，为三维图像在线发展浏览方向的发展提供了理论指导和技术支持。

1 三维框架分析

Web 3D显示技术对三维文件进行即时建模，使用渲染引擎展示立体图像。[2]虽然目前的Web 浏览已有多个解决方案，但是或多或少存在一些缺陷：

1. 基于VRML的技术需要客户端预装插件。使用该技术展示三维图像时，用户的客户端需要下载并安装额外的工具包。如果插件没有正确地安装好，那么所有的三维图像在浏览器中都不能显示。对于不熟悉计算机的用户来说，额外插件的安装常常会造成很大的麻烦。

2. 基于Java的技术需要处理大量数据，对CPU的算力要求较高。

3. 基于流式传输的技术需要准备实景照片，对实体物品和场景的照片要求也是限制其发展的一个瓶颈。

本文采用Three.js作为实现浏览功能的框架，可以将三维图像完美地融合到网页中。使用该技术，可以快速方便地创建三维场景，包括摄影机，光影，材质等各种对象，以WebGL标准为支撑的Three.js引擎具有以下优势[3]：

(1)无需额外插件。Three.js可以直接支持3D图形的GPU硬件加速，因此所有用户打开浏览器即可直接使用。

(2)开源：Three.js框架遵循MIT开源协议，可自由复制，分发和修改，因此使用成本很低。

(3)跨平台：Three.js基于JavaScript语言开发，而所有浏览器都内置Javascript引擎，所以Three.js可以在几乎所有浏览器上使用。

(4)易用性：Three.js实现了三维建模众多功能，封装了众多三维场景渲染所需的重要工具方法与渲染循环，因此，对计算机图形学不了解的程序员也可以很方便地使用[4]，方便了Three.js的推广与普及。

因此，基于WebGL标准，通过与传统的web技术相结合，Three.js框架可以从源文件中读取文件数据，完美地以三维图形的方式呈现出来[5]。因此该方案不仅具有较好的平台适应性，同时也具有方便后续二次开发的优点。

2 文件浏览技术原理

因为网页显示三维图像的标准与三维源文件的格式大相径庭，所以将源文件转换为浏览器中显示的图像是一个复杂的过程。为了实现跨平台，跨文件格式的功能，我们需明确一个标准：无论文件格式如何转变，其内部的核心元素即为它的基本几何体的表示信息。只要导出关键的基本几何体信息，就可以将这些元素进行重构，将几何体的元素导入web开发中，用适合网页浏览的方式在浏览器中表达出来。

对于任意3D模型，其构成元素都是顶点、边和面三种图形。为了完整表示几何体的信息，在文件中需要包括几何数据和拓扑信息两方面，二者缺一不可。[6]

几何数据：

它能确定三维模型在欧式空间中的位置与大小，比如顶点的坐标、边的方向矢量的法向量。点、边、面各个元素之间可以互相转换。

拓扑信息

用以表示三维形体的构造方法，即在该三维物体中各个元素之间的相互关系。如层次关系、连接关系等，都是属于拓扑信息方面的内容。

接下来从源文件中提取与此相关的有效数据格式。以常用三维模型文件格式 STL为后缀的文件源码为例：

1)点、线、面的信息提取

设v3n-2(x3n-2,y3n-2,z3n-2)，v3n-1(x3n-1,y3n-1,z3n-1)和v3n(x3n,y3n,z3n)分别是第n个三角面片三个顶点的坐标，集合

是包含该几何体所有顶点的点集。集合

是包含该几何体所有法向量的向量集。

从根据集合和三角面片的个数为n，可推出集合

E={e3n-2(|x3n-1-x3n-2|,|y3n-1-y3n-2|,|z3n-1-z3n-2|),e3n-1(|x3n-x3n-1|,|y3n-y3n-1|,|z3n-z3n-1|),e3(|x3n-x3n-2|,|y3n-y3n-2|,|z3n-z3n-2|)}

是包含该几何体所有边的边集。

由此，可以归纳出该源文件中所有的点、线、面信息，从而可以构造出需要的三维模型。当需要增加新的格式支持时，只要编写特定格式文件的编码规则，将其中含有三维模型元素的关键信息提取出来，并整合到集合V,P,E中去，即可导入所有的几何体信息。以AMF文件为例，标准的AMF文件格式包含三种格式的数据：三角面片信息、向量信息和法向量信息。由于点、线、面在各个元素之间可以互相转换，因此从文件中可以通过文件的转换过程，提取出所需的几何体信息，构成网页在线显示该文件的基础。

2)点、线、面的信息导出

提取出所有的数据后，我们需要重构新的文件。按照Three.js的语法规则，生成可以在线显示该模型的代码。根据上文中集合V，集合P和集合E所包含的三维文件新中，可以在Three.js中使用以下集合数据来定义3D模型的文件信息：v1(x1,y1,z1),v2(x2,y2,z2),……,v3n(x3n,y3n,z3n)，其中每个三元组(xk,yk,zk)表示一个顶点坐标值。

其中每个三元组(an,bn,cn)表示第n个三角面片的法向量。而和的数据信息在STL源文件格式中均可提取出来。

因此，使用Three.js编写的通用.STL后缀文件格式的伪代码如下：

Num_triangle = n //该模型中三角面片的个数

For i in 0…Num_triangle

Generate(point_triangle(xi,yi,zi)) //在文件中生成各个三角形顶点的坐标

End

Return file.format(); //将文件中的数据按照STL格式标准化

将上述三角形的顶点和法向量参数代入文件格式的代码中，即可将文件转成在浏览器上显示。

3 应用平台的搭建与实现

上述过程仅仅是将三维文件的核心数据转换为web可识别的格式，并不能通过简单的代码直接在网页上显示出三维图像，因此我们需要渲染该数据形成的几何体，将其映射到网页上。为了实现该目标，需要搭建平台显示出相应的三维模型。从目前的情况来看，大多数三维模型的呈现方式仍然停留在二维的显示器屏幕上，如何将三维模型以二维图形的形式渲染输出，是3D模型显示的关键问题。3D渲染过程中涉及五个基本步骤，经过以下五个基本步骤，一个三维模型就可以在网页上显示出来，图1为三维场景web显示的基本结构模块，一个简单的Three.js建模步骤，[7]如图1所示。

图1 三维图形显示过程

(1)场景

场景可以被看作一个在二维平面上“模拟”的三维空间，相当于一个容器。它定义了一个三维坐标系，提供一个参照物，以便确定三维模型的基本数据。后续添加的三维模型都是添加到场景中去。场景的效果会根据观察的距离、视野和角度而发生相应变化。

(2)照相机

它定义了三维空间到二维屏幕的投影方式，从而让三维模型得以呈现。在图形学中，三维场景不可能在一个二维的空间上完全显示，利用WebGL可以模拟三维空间，但是最终必须输出在一个二维的显示器上。[8]为了解决这个从三维场景转换到二维平面问题，笔者引入“照相机”的概念。类比于将三维场景转换到一张二维照片上，“照相机”就是这样一个抽象，在建立三维场景时，在某一个位置放置摄像机，并在该视角按照特定的投影方式，得到该视角上的二维投影。

(3)形状与材质

在真实的三维场景中，一个物体模型通常有两个属性：几何形状与物体材质。几何形状，如球体、长方体、圆柱、圆锥等存储了几何体的顶点信息。通过大量不同的几何体进行旋转、缩放、并、交、补等运算，即可得到需要组成的3D模型；物体材质是独立于物体顶点信息之外的属性，在建模中，它是表面可视属性的结合，它直接影响到渲染时物体表面的光泽与观察效果。

(4)光源设置

光源是影响三维物体浏览的一个重要因素。在不同强度，不同方向的光源下，相同的材质在渲染后会呈现出不同的显示效果。

(5)图像渲染

三维图像渲染，是一种将图形着色并方便用户观察的技术。显示器在没有渲染时是看不到任何图像模型的。渲染器通过照相机获得了需要的渲染范围，计算光源对物体的影响。通过光源、物体材质、物体形状、阴影等多个参数的影响，获得几何、视图方向、光源以及纹理信息。渲染完成以后，应用软件最终获得二维图形，并展示在屏幕上。

用一个简单的代码做测试，在浏览器中绘制出简单的模型。如图2所示。

这是一个在浏览器中进行的完整3D建模过程。以此为通用的基础代码搭建平台，浏览器即可在动态创建并向用户显示相应的三维模型。为了保证平台良好的运行效率，将平台的架构设计，如图3所示。

用户在导入相关3D文件时，该模块对文件进行相应格式转换，成为可执行代码，然后浏览器JavaScript层使用WebGL和Three.js框架将文件转换成浏览器可解析的数据，浏览器通过三维图形显示技术将其映射到显示器上，渲染出3D图像。同时，浏览器视图层向后台发出请求，服务器将接收到的文件进行相关处理，然后为前端提供文件导出的接口。使用该系统结构，不仅避免了数据库的使用给服务器带来的瓶颈，也充分利用了JavaScript层的脚本解析能力，充分发挥了浏览器前端的运算能力，服务器可以快速处理相关文件转换模块过程，大幅提升文件浏览速度。

图2 文件模型展示

图3 3D Web系统结构框架

4 应用效果与分析

图5展示了一个笔者编写的AMF格式的文件，经过该平台展示后所显示的效果。为了测试该平台实现的模型浏览和文件格式转换功能的效率，使用Quicktest Professional 测试工具编写脚本，对6个大小不同的三维模型源文件(44KB, 82KB, 244KB, 398KB, 766KB, 1997KB)进行验证，并分别测试3DMax和该平台下执行核心业务的消耗时间。

6个文件分别代表从最简单的三维模型到具有一定规模的三维图像处理，在实际应用中，不同大小的文件均可能被加载到，因此该测试具有一定代表性，可以较好地代表实际应用中出现的情况。

模型展示消耗时间和文件转换时间，如表1所示。

表1 AMF文件从读取到渲染到界面上的时间(ms)

右边的柱状图代表的是同一个STL文件在3DMax软件中打开所花费的时间，左边代表的是该文件在笔者开发的平台上读取所花费的时间。六个测试文件在该平台上均能在1s内完成读取与展示。与3DMax相比，AMF文件在从开始读取到渲染到界面上的耗时有大约10%的提升。从在线浏览的角度看，实验表明，该软件能够在较短时间内在线渲染出高质量的模型，模型精度如图所示。对于amf格式，该系统能在1s以内渲染完成并展示出2 000KB以下的所有模型文件，提升了相应的浏览效率

除此以外，该平台还有以下优势：

(1)方便易用。该平台支持目前主流的大多数浏览器。因此所有用户打开浏览器即可直接使用，无需加载其他插件。

(2)跨操作系统平台。平台基于JavaScript语言开发，因此无论在Windows，Linux或其他系统下都可以自由使用，不会出现平台兼容问题。

(3)多种格式兼容。支持三维模型.stl,.dwg,.amf等多种不同格式，对于每种格式都可以自由拉动，旋转，拖曳平台上的模型，方便文件的修改，查看和分发。

5 总结

在互联网+等国家政策背景下，能够以统一的接口处理三维文件并呈现三维文件的系统由于其简洁、直观、明了的特点，更容易收到用户的青睐，在产业升级的浪潮中发挥重要的作用。目前Web 3D文件格式在领域内尚未统一，各种新技术与新方法层出不穷。虽然三维图像处理在网络化进程中尚有未解难题，但部分技术已经取得相当的成果。[10]

本文针对目前3D模型文件在日常使用的不便之处，提出了一种对不同格式的文件，均可在线浏览的设计思路，并说明了其软件构建原理和技术方法，在软件中对展示功能做出优化，增强了应用的性能，使用户体验得到提升。在未来为三维图像应用的发展提供了一套可行的方法。

[1] 刘波,张鸿宾,王靖. 三维图形数据的压缩与网上浏览[J]. 计算机工程与应用,2004,28:44-45.

[2] 蒋燕萍,夏旺盛,黄心渊. 几种Web3D技术的比较[J]. 北方工业大学学报,2003(1):21-25.

[3] Wikipedia.Additive Manufacturing File Format[EB/OL].[2016-03-15].https://en.wikipedia.org/wiki/Additive_Manufacturing_File_Format.

[4] 卞敏捷,高珏,高洪皓,许杰品. Web3D可视化技术的研究与应用[J]. 计算机技术与发展, 2015(6):141-144.

[5] 郑华,宿景芳. 面向Web的三维模型生成与处理技术[J]. 现代电子技术, 2015,24:83-86.

[6] 周莉,苏鸿根. 通用3D模型文件格式和算法的研究及其OpenGL实现[J]. 计算机工程与设计, 2009,02:433-436+439.

[7] Mr Doob.Three.js documentation[EB/OL].[2016-04-08]. http://threejs.org/docs/index.html.

[8] 卞敏捷,高珏,高洪皓,许杰品. Web3D可视化技术的研究与应用[J]. 计算机技术与发展, 2015(6):141-144.

[9] 何龙,杜鹏. 基于WebGL的三维可视化[J]. 科技资讯, 2015,30:23+25.

[10] 韩义. Web3D及Web三维可视化新发展——以WebGL和O3D为例[J]. 科技广场, 2010(5):81-86.

[11] Jonathan D. Hiller, STL 2.0: A proposal for a Universal Multi-material Additive Manufacturing File Format[C]. Solid Freeform Fabrication Symposium (SFF'09), 2009, 8: 3-5.

[12] Khronos. WebGL-OpenGL ES 2.0 for the Web [EB/OL].[2016-04-03]. https://www.khronos.org/webgl/.

[13] Wikipedia. WebGL(Web Graphics Library)[EB/OL].[2016-03-31]. https://en.wikipedia.org/wiki/WebGL.

[14] Wikipedia. STL(file format)[EB/OL].[2016-03-31]. https://en.wikipedia.org/wiki/STL_(file_format).

[15] 刘运增. 互联网上的三维技术:Web3D[J]. 计算机与网络,2003,10:32-35.

[16] 王磊,高珏,金野,许华虎. 基于Web3D无插件的三维模型展示的研究[J]. 计算机技术与发展,2015,04:217-220.

[17] 黄健. 面向通用性的Web3D虚拟展览馆的设计与实现[D]. 成都：电子科技大学,2012.

[18] 赵孔阳,朱军,尹灵芝. 基于WebGL的虚拟场景网络漫游研究[J]. 测绘与空间地理信息,2015,12,40-43.

Analysis and Design of an online 3-dimension Viewer for Supporting Different File Formats

Tong Ling, Ouuang Chunping, Luo Lingyun

(School of Computer Science and Technology, University of South China, Hengyang 421001, China)

Web 3D browsing has never become a popular trend among customers. There are a number of reasons. One is that 3-dimensional files vary from place to place, and they don't form exact criteria. Customers have difficulties in viewing these files on browsers. To solve the inconvenience of viewing online, the authors propose a method which can make varied 3-dimension files readable in websites. Besides, the article also explores the methods of displaying 3D model in browser. The result indicates that the platform which runs well in both Windows and Mac systems can successfully present 3D models online in a very effective way. However, 3-demension files can be opened currently only in specific design software, which is hard to be viewed in web browsers.

Three-dimension files; Online view; File-format transformation; three.js

童 凌(1994-)，男，浙江丽水人，研究方向：软件工程与Web开发。 欧阳纯萍(1979-)，女，博士研究生，讲师，研究方向：语义web、领域数据集成等。 罗凌云(1981-)，女，博士后，讲师，研究方向：语义Web技术及其应用，医学信息学，理论计算机科学。

1007-757X(2017)04-0076-05

TP311.5

A

2016.09.22)