基于WebGL的3D可視技術研究與實現(xiàn)

◆高綺蔚 郭雅杰 高 琴 劉 慧

基于WebGL的3D可視技術研究與實現(xiàn)

◆高綺蔚 郭雅杰 高 琴 劉 慧

（都靈理工大學電影與信息工程學院 意大利都靈 10129）

現(xiàn)階段各個可視交互模型的大多采用的是二維顯示的方式建立，在具體操作中存在交互體驗弱、分析效率低下、信息層次不夠豐富等問題。隨著社會科技的發(fā)展，人們在原有二維交互平臺的基礎上提出了網(wǎng)頁三維交互平臺。本文在闡述基于WebGL的3D可視交互平臺基本構架的基礎上，對其各個功能模塊的應用實現(xiàn)進行分析，并闡述基于WebGL和Three.js圖形庫的實現(xiàn)方式。

WebGL；可視分析；Web3D；人機交互

0 前言

三維可視化交互技術是一種應用圖形學技術創(chuàng)建的信息化交互平臺，能夠涵蓋數(shù)據(jù)更多維度的內容，加強用戶對交互數(shù)據(jù)模型的整體感知。在互聯(lián)網(wǎng)技術的不斷發(fā)展下，Web瀏覽器逐漸發(fā)展成為三維交互程序的一個重要發(fā)展平臺。將基于WebGL的3D交互技術應用于網(wǎng)絡安全數(shù)據(jù)的可視分析中可以增加可視系統(tǒng)的交互性和分析效率。

1 WebGL技術

WebGL技術是在OpenGL ES2.0基礎上發(fā)展起來的底層Web3D繪圖API標準，是HTML5規(guī)范的一部分。WebGL在應用中首先需要借助瀏覽器獲取WebGL的繪制環(huán)境，使用著色器調用顯卡進行大量的顏色、位置等信息的高速計算來完成3D場景構造。基于WebGL的三維可視化可以讓用戶在交互中更快獲得數(shù)據(jù)特征，優(yōu)化體驗和分析效率，適合創(chuàng)建復雜的可視交互平臺。

2 3D可視交互平臺的建設

2.1 技術的環(huán)境建設

Three.js的應用需要依賴相應的網(wǎng)頁結構，為此系統(tǒng)的構建需要以HTML結構為基本依托，實現(xiàn)主程序在HTML的里面標簽中的操作和編寫。在完成Three.js基本結構構建之后，還需要對相關的環(huán)境進行設置，具體的設置內容體現(xiàn)如下：（1）WebGL技術下渲染器的應用。渲染器的應用能夠充分實現(xiàn)WebGL技術的應用效果，滿足Three.js的應用需求。（2）相機的安排設置。WebGL技術支持下的Three.js能夠支持兩種相機類型的應用包括透視性相機和正交式相機，大多數(shù)情況下應用的是透視相機。（3）系統(tǒng)場景和光源的安排。WebGL技術系統(tǒng)三維場景應用常使用THREE.Scene()實現(xiàn)，主要提供了四種類型的光源，包括環(huán)境光、點光源、聚光燈和平行光。

2.2 技術實現(xiàn)的外在模型形式

本文的可視交互平臺中應用的三維系統(tǒng)模型是三角形結構或者四邊形結構組成。其中，在Three.js圖形庫中應用THREE.Mesh來代表網(wǎng)絡的基本模型，在模型中的第一個參數(shù)是THREE.Geometry類型對象，包含了各個模型頂點之間的重要的連接關系。在模型中的第二個參數(shù)對模型的性質、材質進行了定義，模型的光照等變量對Mesh的應用效果會受材質的影響。系統(tǒng)應用的模型由Blender制定，在模型的制定和應用下能夠導出OBJ格式的信息，同時還會導出MLT格式的材料信息。加載OBJ文件的程序流程具體如圖1所示。通過圖1發(fā)現(xiàn)，在系統(tǒng)模型加載的步驟中，最為重要的是對OBJ文件的導入。應用正則表達式來對OBJ文件的信息內容進行分析處理，經(jīng)過處理將頂點、向量、UV坐標和索引信息轉變成各種頂點索引。OBJ模型在借助文本方式讀取數(shù)據(jù)之后展示的內容具體如圖2所示。讀取圖2的頂點坐標信息操作的正則表達式是:/v（+[d|.|+|-|e|E]+）（+[d|.|+|-|e|E+]）（+[d|.|+|-|e|E]+）/: