吴文蔚

(山西职业技术学院,山西 太原 030006)

0 引言

早期的三维图像处理技术有很多，例如虚拟现实建模语言(Virtual Reality Modeling Language，VRML)技术，它是一种面向WEB应用的三维建模语言，虽然集合了XML、JAVA等先进技术，具有较强的三维图像计算能力，但在模型渲染质量与交互性等方面却差强人意；Shockwave 3D是基于Shockwave多媒体播放软件拓展了英特尔的3D渲染功能的三维图像处理技术，Shockwave 3D在三维交互与实时渲染两方面的处理性能较好，但其本质是一种播放器程序，应用于WEB服务时，只要更换环境，用户就需要下载新的插件，并且对数据传输的网络带宽要求很高，使其在WEB应用中很难被普及。WebGL技术就是在这样的背景下发展起来的专门面向WEB应用开发的一款三维图像处理技术，一方面WebGL提供有硬件调用接口，可以直接调用GPU部件实现硬件加速图形处理[1]，另一方面WebGL通过JavaScript语言封装以标签的形式嵌入在HTML页面中[2]，便于WEB应用的直接调用，而无需下载任何插件。因此本研究采用WebGL技术构建一个基于WEB应用的三维图形渲染系统，既可以大大提高图形的处理效率，还便于系统的应用推广。

1 系统采用的核心技术

1.1 WebGL技术

WebGL是WEB 3D图形应用开发的标准应用程序编程接口(Application Programming Interface，API)，WebGL在OpenGL基础上将JavaScrip与OpenGL相结合，实现了基于WEB前端三维图形的硬件加速渲染功能[3]，大大提高了WEB浏览器中三维图形的处理速度。WebGL通过JavaScrip封装了对各类硬件接口的功能调用方法，再通过HTML5(HyperText Markup Language 5)的Canvas元素获取WebGL的上下文环境，如此WEB前端的开发人员就可以实现对底层硬件的直接访问和功能调用。

1.2 HTML5

HTML5实现了对移动端的显示支持和突破性的多媒体支持，特别是增加了JavaScript 的通用API，为基于WEB服务的图形处理提供了先进的技术。HTML5浏览器支持多线程、并发式线程管理、全双工实时通信、数据存储本地化等功能，大大提高了WEB应用的事件响应效率和数据通信效率。除此之外，HTML5在图形处理方面，新增了Canvas功能，通过在Canvas元素中嵌入JavaScrip脚本语言实现二维图形的绘制、着色，也为三维图形处理的功能扩展提供了技术基础。

1.3 JavaScript语言

JavaScript是一款轻量级的、即时编译型语言，核心语言库简小精干，可以通过各类语法糖来实现功能扩展[4]。在图形处理方面，WebGL、Canvas 2D都是JavaScript的API扩展，集合了图形处理的所有软、硬件优势。

2 三维图形渲染系统设计

三维图形渲染系统整体架构设计见图1。

上层应用基于HTML5的Canvas元素，以标签形式嵌入JavaScript脚本的API，再通过调用JavaScript 内的WebGL应用程序编程接口实现对三维图形的各类处理。在WebGL接口调用之前，访问用户可以通过上层应用进行图形辅助渲染与渲染要素的参数配置、模式切换等操作。其中渲染要素用于配置三维图形的光源模式、着色器类型、渲染视角、相机、贴图材质等参数；辅助渲染用于对转换为网格对象的三维图形进行渲染前的计算分析。

图1 三维图形渲染系统架构

渲染层主要实现两方面功能，一是依据上层应用的渲染要素参数设置建立要素之间的关联关系，并调用对应的函数接口；二是获取WebGL的绘图上下文配置接口，建立对应的WebGL渲染管线。

WebGL渲染管线用于处理具体的图形渲染事件，该层上集中了各种三维图形的渲染算法，包括视图变换算法、投影变换算法、边界表示算法等。其中视图变换算法主要是实现三维模型——视图矩阵的转换；投影变换算法用于构建三维模型的投影矩阵，着色器使用投影矩阵将三维顶点的坐标信息投影在二维空间的坐标当中；边界表示算法是针对三维模型曲面进行绘制的算法，通过对三维模型的边界描述来捕获模型的曲面细节，边界描述涉及两个方面的信息描述，一是三维图形的拓扑信息，用于曲面与相邻面的边界信息，二是三维曲面的几何信息，也就是以曲面方程表示的信息。边界表示算法设计较为简单，适用于曲面构成没有过于复杂的三维图形渲染。

WebGL渲染管线通过WebGL的应用编程接口可以直接调用底层的图形处理器硬件，完成三维图形的加速渲染。GPU是专用于图形处理的显示硬件，特别是针对三维图形的处理，所采用的核心技术包括光影转换技术、多矩阵的顶点混合技术、渲染压缩技术等等。

3 系统功能设计与实现

三维图形渲染系统功能设计见图2。

三维图形导入/编辑模块用于实现外部三维图形的导入、格式转换、内部三维素材编辑等功能。系统支持的文件导入格式包括：MAX、C4D、FBX、OBJ等。可编辑的素材包括贴图材质、光源及场景。贴图材质支持外部导入，文件格式主要包括JPEG、PNG等常见的图片格式，WebGL通过Image DOM接口调用实现外部材质的导入，并通过纹理映射函数将贴图赋予三维模型表面，同时可以对贴图材质的颜色、明暗、反射、折射、透明度、光泽度等属性进行编辑与调整。光源编辑提供常规的几种光源设置，包括：定向光、点光源、聚光灯和环境光，可设置的光源属性包括通用属性与特殊属性两种，其中通用属性指的是所有光源都具备的属性，例如光源的强度和颜色属性，特殊属性是指不同光源所具备的属性，例如光源位置、方向、光距等，光源属性的设置对场景不会产生影响，只针对三维模型的贴图渲染产生效果。场景编辑用于实现场景的创建、编辑功能，通过WebGL的Scene对象可以创建一个场景，场景默认会添加一个相机组件和一个网格组件，相机组件用于提供场景显示的视角，并且可以对相机视角的位置坐标、旋转角度、宽高比、景深、最近渲染平面、最远渲染平面等参数进行设置。

图2 三维图形渲染系统功能设计

三维图形预处理模块用于实现三维图形的网格计算、着色器设置和渲染参数配置、创建渲染器等功能。三维图形网格处理就是将三维图形转换为由若干标准几何体拼装而成的网格对象，再通过WebGL的BufferGeometry类的实例化对象可以对网格对象进行渲染前的优化。着色器配置用于实现着色器属性的相关设置，WebGL预置了多种着色器用来满足常见的着色需求，例如模拟风、雪、雨、雾的天气环境等。着色器配置功能可以对风速、风向、重力模拟、草的密度、高度等属性进行具体设置。渲染参数配置是对提取后的三维图形顶点信息进行一定阈值范围的微调，以矫正部分面的渲染细节，例如曲面的边界识别精度、数值范围等。

三维图形渲染管理模块用于实现系统内所有渲染任务的管理，以及具体任务的进度管理。系统内建立的所有渲染任务可以通过渲染队列模块进行管理，在渲染队列中可以查看和管理渲染任务列表；渲染进度管理模块用于查看和管理具体一个渲染任务的渲染进度。

三维图形导出模块用于查看和管理已完成的渲染任务，并提供渲染文件的导出接口，用户可以通过手动设置，导出指定格式的渲染文件。

4 结语

在WEB服务应用开发中，图形处理是非常重要的一项功能，本研究针对三维图形处理技术在WEB服务中的应用发展过程和具体的技术特性进行了全面、深入的研究，并提出了以WebGL作为核心技术的三维图形处理的解决方案，设计与实现了一个三维图形渲染系统，有效提高了WEB服务在三维图形处理方面的系统性能。