基于WebGL的3D可视技术研究与实现

◆高绮蔚 郭雅杰 高 琴 刘 慧

基于WebGL的3D可视技术研究与实现

◆高绮蔚 郭雅杰 高 琴 刘 慧

（都灵理工大学电影与信息工程学院 意大利都灵 10129）

现阶段各个可视交互模型的大多采用的是二维显示的方式建立，在具体操作中存在交互体验弱、分析效率低下、信息层次不够丰富等问题。随着社会科技的发展，人们在原有二维交互平台的基础上提出了网页三维交互平台。本文在阐述基于WebGL的3D可视交互平台基本构架的基础上，对其各个功能模块的应用实现进行分析，并阐述基于WebGL和Three.js图形库的实现方式。

WebGL；可视分析；Web3D；人机交互

0 前言

三维可视化交互技术是一种应用图形学技术创建的信息化交互平台，能够涵盖数据更多维度的内容，加强用户对交互数据模型的整体感知。在互联网技术的不断发展下，Web浏览器逐渐发展成为三维交互程序的一个重要发展平台。将基于WebGL的3D交互技术应用于网络安全数据的可视分析中可以增加可视系统的交互性和分析效率。

1 WebGL技术

WebGL技术是在OpenGL ES2.0基础上发展起来的底层Web3D绘图API标准，是HTML5规范的一部分。WebGL在应用中首先需要借助浏览器获取WebGL的绘制环境，使用着色器调用显卡进行大量的颜色、位置等信息的高速计算来完成3D场景构造。基于WebGL的三维可视化可以让用户在交互中更快获得数据特征，优化体验和分析效率，适合创建复杂的可视交互平台。

2 3D可视交互平台的建设

2.1 技术的环境建设

Three.js的应用需要依赖相应的网页结构，为此系统的构建需要以HTML结构为基本依托，实现主程序在HTML的里面标签中的操作和编写。在完成Three.js基本结构构建之后，还需要对相关的环境进行设置，具体的设置内容体现如下：（1）WebGL技术下渲染器的应用。渲染器的应用能够充分实现WebGL技术的应用效果，满足Three.js的应用需求。（2）相机的安排设置。WebGL技术支持下的Three.js能够支持两种相机类型的应用包括透视性相机和正交式相机，大多数情况下应用的是透视相机。（3）系统场景和光源的安排。WebGL技术系统三维场景应用常使用THREE.Scene()实现，主要提供了四种类型的光源，包括环境光、点光源、聚光灯和平行光。

2.2 技术实现的外在模型形式

本文的可视交互平台中应用的三维系统模型是三角形结构或者四边形结构组成。其中，在Three.js图形库中应用THREE.Mesh来代表网络的基本模型，在模型中的第一个参数是THREE.Geometry类型对象，包含了各个模型顶点之间的重要的连接关系。在模型中的第二个参数对模型的性质、材质进行了定义，模型的光照等变量对Mesh的应用效果会受材质的影响。系统应用的模型由Blender制定，在模型的制定和应用下能够导出OBJ格式的信息，同时还会导出MLT格式的材料信息。加载OBJ文件的程序流程具体如图1所示。通过图1发现，在系统模型加载的步骤中，最为重要的是对OBJ文件的导入。应用正则表达式来对OBJ文件的信息内容进行分析处理，经过处理将顶点、向量、UV坐标和索引信息转变成各种顶点索引。OBJ模型在借助文本方式读取数据之后展示的内容具体如图2所示。读取图2的顶点坐标信息操作的正则表达式是:/v（+[d|.|+|-|e|E]+）（+[d|.|+|-|e|E+]）（+[d|.|+|-|e|E]+）/: