验证WebGL是有效实现Web3D场景构建的方式

3.0 闻远设计 2024-03-14 20 4 372.2KB 7 页免费

侵权投诉

验证 WebGL 是有效实现 Web3D 场景构建的

方式

0、引言

受制于 Web3D 技术的瓶颈,传统的用以实现三维 WebGIS 场景的 Web3D 技术,包括

Flash(Flex)、Java3D、X3D 等技术, 都需要加载组件或者预先安装客户端 (或插件),而且具有显示

效果不佳、兼容性差等缺陷。

WebGL 作为新一代 Web3D 图形标准,具有不需要组件加载、渲染效果好、兼容性好等优点并且

取得了众多浏览器生产厂商的支持,具有以往技术无法比拟的优势。本文在前人所做的众多探索

的基础上,采用 WebGL 作为图形引擎来展开无组件三维 WebGIS 场景系统的实现,比较了各种技

术之间的优缺点,实验验证了 WebGL 是一种非常有效的实现三维 WebGIS 场景渲染的技术手

段。

HTML5 标准发布以来,已经有不少学者开展了基于此标准的 GIS 应用研究,但是多是以 canvas 的

2D 环境为图形基础,无法满足三维 WebGIS 的应用要求,作为 canvas 的3D 环境,WebGL 具有能够

直接调用硬件图形引擎,兼容性好等多种优点。

展开这一研究有着较大的现实意义和长远的工程学意义。首先进行这项研究具有短期的现实意

义,如果能够找到一种不需要预先安装客户端或者加载组件的方法,可以避免大组件的安装,用户

不再需要等待较长时间,大大提高了用户体验。其次进行这项研究有深远的工程意义。人们一直

以来都在进行三维 WebGIS 解决方案的研究和探索。

目前 WebGL 已经展现出了强大的生命力,国内外包括谷歌、诺基亚在内的多家企业都已经展开

了基于 WebGL 的GIS 展示端研究工作,有些公司甚至已经推出了相关 GIS 案例展示。如果本研

究能够证实 WebGL 是一个有效的实现 Web3D 场景构建的方式,将给 WebGIS 这一领域找到一

种新的实现浏览器端三维场景构建的途径,而且摒弃传统技术的弊端,具有较高的商业和工程意

义。

1、需求定义

本文以三维 WebGIS 的展示功能作为主要的功能性需求,所设计的三维 WebGIS 场景展示系统应

具有如下功能:

(1)展示一个 Web 端的三维 GIS 基本场景,所有的 GIS 图层元素将加载在基本场景上。

(2)场景能够进行 360°的全方位展示和移动,视角能够进行放大和缩小。

(3)系统应该能够实现所有基本的 GIS 图层元素的生成、加载、卸载,按照一般 GIS 系统的要求,

所能加载的 GIS 元素包括如下几种:中英文文字标注,主要用于地名、兴趣点等的标注;图形标注,

主要用于与文字标注相结合进行地点标示;矢量线,主要用于道路、河流、轨迹、境界等的标示;

矢量面,主要用于区块、行政区域、湖泊等的标示;三维模型,主要用于在场景中加载建筑、植

被、公共设施、地形等;影像切片,主要用于基本地表的绘制。

本文的出发点是为了解决现有的三维 WebGIS 场景都需要加载或者预先安装组件来实现的问题,

以提高用户体验和交互性,因此系统应该具有如下的非功能性需求:

(1)不能加载任何组件或者插件;(2)具有较好的用户体验。

2、系统设计

目前业界已经有几个较为成熟的基于 WebGL 的Java-Script 三维图形框架,较为流行的有

Three.js、Oak3D 等。为更加适用于 WebGIS 开发需求和减小脚本体积,本人决定抛弃这些庞大

的框架, 按照面向对象设计的理论,以JavaScript 为编程语言,建立一套应用与网页的三维图形

库。

2.1 渲染流程

WebGL 编程通过调用内嵌于浏览器中的 WebGL 上下文环境中的图形接口进行图形绘制,因此

不再需要任何组件的加载。浏览器直接通过 GPU 进行硬件图形加速。使用WebGL 进行图形绘

制的流程如图 1 所示。首先,获取WebGL 上下文环境,根据着色器代码片段创建着色器,一般包

括顶点着色器(VertexShader) 和片元着色器(Frag-mentShader),将着色器绑定给 WebGL 上下文,

联接之后生成 WebGL program。接着为需要绘制的图形对象创建顶点数组与颜色数组,如果使

用索引方式构建面的话还要使用顶点索引数组,如果使用贴图的话还要生成纹理对象以及顶点纹

理坐标数组等。然后为WebGL 上下文绑定着色器需要的这些数组以及纹理对象,同时要为

WebGL 上下文设置着色器需要的变量,包括投影矩阵、模型视图矩阵等。最后调用 WebGL 的

基本图元绘制方法进行图形对象的绘制。

2.2 模块划分

为使图1中的绘制流程适用于 WebGIS 场景的绘制,系统需要设计相应的顶点着色器以及片元着

色器,以及用于数学向量矩阵运算的函数库,和能够进行各种 GIS 场景元素创建和绘制的 GIS 图

层元素类库。因此系统将包括数学运算模块、着色器、图层元素模块等3个主要部分。

3、详细设计

3.1 数学运算模块

图2是提供了基本图形计算功能的数学运算模块的类图。该模块包括经纬度坐标类Point2D 和

三维空间坐标类Point3D,它们提供了经纬度坐标以及三维空间坐标的相互转换。也包括四维向

量类 Vector4f,提供向量乘法和加法运算。四阶矩阵类 Matrix44f,提控了四阶矩阵的乘法运算以

及逆运算。同时该模块包含了透视投影矩阵类 ProjPer-spective 和正投影矩阵 ProjOrtho,用以满

足系统对三维空间投影的需求。

3.2 图层元素模块

根据图1中WebGL 的渲染流程,我为所有的场景元素设计了一个统一的创建和绘制流程,如图 3

所示。首先根据图层元素的需要进行对象初始化,例如获取标注类型的文字标注信息、图标路

径,矢量类型的顶点数据等。接着根据获取到的数据进行各种 buffer 的创建,例如顶点数组、面

的顶点索引数组、贴图的纹理坐标数组、颜色数组等。

接着根据需要设置元素对象的透视投影矩阵和模型视图矩阵。通常以场景的基本透视矩阵为元

素的投影矩阵,场景的模型试图矩乘以元素对象的模型变换矩阵作为元素对象最终的模型试图矩

阵。绘制的时候给着色器设置相关变量后,依次绑定前步生成的各种 buffer 以及投影矩阵和模型

变换矩阵。最后调用 WebGL 的基本图元绘制方法进行图层元素的绘制。

统一的创建和绘制流程有利于进行场景元素对象的创建和统一绘制调用,同时有利于系统的扩

展,因为图层元素不能仅仅局限于上述的几种。为使所有的场景元素能够实现统一的创建和绘制

流程,系统通过 JavaScript 原型继承方法实现了图层元素的面向对象设计。首先设计了一个

BaseClass 类作为所有类的基类,它提供了一个 extend 方法来实现 JavaScript 的原型继承,该方法

在执行的时候会将没有经过重声名的父类函数成员继承给子类,同时为子类的原型添加新的函数

成员。接着设计了一个所有场景元素类的基类RenderableObject,这个类相当于一个抽象类,包含

了获取program、buffer 创建、设置矩阵和Draw 方法等。这些方法都将在继承了

RenderableObject 类的场景元素类中实现。

Draw 方法包含了绑定buffer、绑定矩阵、设置贴图、调用图元绘制等子流程。这些类之间的关

系如图 4所示,其中 RenderableObjectList 是为具有多个子对象的场景对象设计的场景元素类,通

常用来表示整个图层或者一组元素。

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

免费 4人已下载

立即下载

摘要：

验证WebGL是有效实现Web3D场景构建的方式0、引言受制于Web3D技术的瓶颈,传统的用以实现三维WebGIS场景的Web3D技术,包括Flash(Flex)、Java3D、X3D等技术,都需要加载组件或者预先安装客户端(或插件),而且具有显示效果不佳、兼容性差等缺陷。WebGL作为新一代Web3D图形标准,具有不需要组件加载、渲染效果好、兼容性好等优点并且取得了众多浏览器生产厂商的支持,具有以往技术无法比拟的优势。本文在前人所做的众多探索的基础上,采用WebGL作为图形引擎来展开无组件三维WebGIS场景系统的实现,比较了各种技术之间的优缺点,实验验证了WebGL是一种非常有效的实现三维...

展开>> 收起<<

验证WebGL是有效实现Web3D场景构建的方式.docx

共7页,预览3页

还剩页未读，继续阅读

验证WebGL是有效实现Web3D场景构建的方式

相关推荐

开通VIP享超值会员特权

作者详情

相关内容

推荐作者

热门标签

举报选择: