验证WebGL是有效实现Web3D场景构建的方式
验证 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 是为具有多个子对象的场景对象设计的场景元素类,通
常用来表示整个图层或者一组元素。
摘要：
展开>>
收起<<
验证WebGL是有效实现Web3D场景构建的方式0、引言受制于Web3D技术的瓶颈,传统的用以实现三维WebGIS场景的Web3D技术,包括Flash(Flex)、Java3D、X3D等技术,都需要加载组件或者预先安装客户端(或插件),而且具有显示效果不佳、兼容性差等缺陷。WebGL作为新一代Web3D图形标准,具有不需要组件加载、渲染效果好、兼容性好等优点并且取得了众多浏览器生产厂商的支持,具有以往技术无法比拟的优势。本文在前人所做的众多探索的基础上,采用WebGL作为图形引擎来展开无组件三维WebGIS场景系统的实现,比较了各种技术之间的优缺点,实验验证了WebGL是一种非常有效的实现三维...
相关推荐
-
2024年党建工作要点工作计划5篇供参考
2023-12-16 999+ -
2025年专题生活会对照带头严守政治纪律和政治规矩，维护党的团结统一等“四个带头方面”个人对照检查发言材料4110字文稿
2024-12-21 999+ -
2025年医保局局长、科技局领导干部专题“四个带头”方面对照检查材料2篇例文（附：反面典型案例剖析情况）
2025-02-09 458 -
2025年国有企业党委书记、市总工会党组书记民主生活会“四个带头”方面对照个人检查发言材料2篇文(附：典型案例、上年度整改+个人情况)
2025-02-09 507 -
2025年市委组织部部长、教育局党委书记生活会“四个带头”个人对照检查发言材料2篇文(典型案例+个人事项)
2025-02-09 627 -
2025年市财政局党组书记、局长、市检察院党组领导班子对照“四个带头”方面生活会个人对照检视发言材料2篇文（含以案为鉴反思、以案促改促治方面）
2025-02-09 509 -
市检察院党组、市财政局领导班子2025年生活会对照“四个带头”方面检视发言材料2份文【含以违纪行为为典型案例剖析】
2025-02-09 461 -
2025年市财政局领导对照“四个带头”生活会检视发言材料2篇例文【含以违纪行为为典型案例剖析】
2025-02-09 586 -
单位领导班子2025年聚焦“四个带头”生活会对照检查材料2篇文(含：典型案例剖析反思、落实意识形态责任制)
2025-02-09 758 -
2025年镇党委副书记、市科学技术局领导班子生活会对照“四个带头”检视材料2篇文【含违纪行为典型案例分析】
2025-02-09 257
作者：闻远设计
分类：其它行业资料
价格：免费
属性：7 页
大小：372.2KB
格式：DOCX
时间：2024-03-14
