摘 要

本文基于船舶动态监控系统，实现了Web端的3D动态监控。本文介绍了WebGL技术的出现与推广，为三维WebGIS提供了新的解决方案。本文同时对其第三方应用框架Three.js引擎进行了研究，提出了基于瓦片、DEM数据的三维地形的搭建方案；并针对OBJ格式船舶3D模型提出了系统的模型加载以及船舶模型运动方法；同时描述了交互平台基本架构的搭建以及各个功能模块的实现；最后本文讲解了水面效果优化算法并实现真实水面动态效果。

本文充分发挥了WebGL的开放性、跨平台、免插件、硬件加速等优势，创建了基于浏览器平台的船舶动态监控系统，不仅打破了传统船舶检测方法的瓶颈，更是为未来WebGL在各个领域中进行应用的打下了坚实的基础。

关键词：WebGL；Three.js；三维地形；DEM；OBJ模型加载；交互设计；水面优化算法

Abstract

This article is based on ship dynamic monitoring system, a Web-side three-dimensional dynamic monitoring. This article described the emergence and promotion of WebGL technology, and it provides new solutions for three-dimensional WebGIS. Besides, this article have a study on it’s Third-party application framework——Three.js engine, and provided a constructor for three-dimensional terrain based on tiles and DEM data; then proposed an approach for model loading and model motion aimed on ship model OBJ format; at the same time, this article described the basic infrastructure build of interactive platform and the implementation of various functional modules; finally, this paper explained the optimization algorithms of water effect and achieve the dynamic effect.

In this paper, we gave full play to the advantages such as openness、cross-platform、free plug-in、hardware acceleration of WebGL, and created ship dynamic monitoring system based on browser platform, not only to break the bottleneck of traditional ship detection methods, but also laid a solid foundation for the application of WebGL in various fields in future.

Key Words: WebGL; Three.js; 3D terrain; DEM；Three.js；OBJ model loading；interactive design；optimization algorithms of water effect

目 录

摘 要 I

Abstract II

第一章 绪论 1

1.1 问题的提出 1

1.2 开发的意义 2

1.3 国内外发展现状 2

1.4 本文结构 3

第二章 关键技术 4

2.1 HTML5介绍 4

2.1.1 Canvas API 4

2.1.2 HTML5 Web Sockets API 4

2.2 WebGL介绍 5

2.2.1 three.js框架介绍 6

2.3 本章小结 8

第三章 系统设计 9

3.1 功能设计 9

3.2 系统实现流程 9

3.3 本章小结 12

第四章 三维地形的设计与实现 13

4.1 基本原理 13

4.2 DEM数据的获取与处理 13

4.3 基于DEM数据获取高程值 15

4.4 地形搭建 17

4.5 地形图片处理与加载 19

4.6 三维地形优化 22

4.7 本章小结 23

第五章 船舶模型加载与运动 24

5.1 外部模型加载 24

5.1.1 OBJ与MTL文件介绍 24

5.1.2 OBJ MTL模型加载 24

5.2 外部模型的运动 27

5.2.1 物体运动原理 27

5.2.3 外部模型运动实现 27

5.3 本章小结 28

第六章 交互设计 29

6.1 鼠标事件 29

6.2 键盘事件 30

6.3 本章小结 31

第七章 水面动态效果优化 32

7.1 水纹的设计与实现 32

7.1.1 水纹仿真方法研究 32

7.1.2 Perlin噪声方法 33

7.2 水面镜面反射设计与实现 34

7.3 环境生成 36

7.4 效果展示 37

7.5 本章小结 37

第八章 结语 38

8.1 工作总结 38

8.2 工作展望 38

参考文献 39

致 谢 40

第一章 绪论

1.1 问题的提出

如今仿真技术在 PC端的应用已经非常成熟，随着Web2.0时代的到来，网络三维技术（HTML5 WebGL）逐渐成为新的发展焦点，其优秀的实时互动性、数据共享性、跨软硬件平台等有点令其也成为各个传统监控系统的必然发展趋势。利用新兴的HTML5 WebGL技术，不仅可以在网络上建立可互动的虚拟世界，突破空间与地域的限制，为用户带来新的不一样的交互体验，与此同时，满足了传感器拓扑实时信息交互的精准再现与预警分析的新要求，减少了传统系统的安装成本并跨越了软硬件壁垒。

实际船舶在运营时，其运营状态、承载能力、耐久力等方面都需要进行实时的监控，为船舶的航行管理提供可靠的数据与协助。本文对于基于WebGL的船舶动态仿真中的关键技术进行了设计与研究，并提出了融合 HTML5和WebGL 等新兴技术的一套适合长期需求的可视化船舶动态安全监测系统，具有实时监控、故障预警、船舶数据采集分析与处理、船舶健康状态评估等功能，并且操作简单支持跨平台远程网络访问的B/S船舶实时动态监控系统。拥有开阔的应用前景与实际的开发需求。

1.2 开发的意义

HTML5 WebGL技术克服了传统WebGIS^[1]中的一些缺陷例如必须在浏览器中安装插件。利用WebGL是基于GPU硬件加速的特性，可以将三维画面展示的更加流畅，增强了用户在运行时的体验效果。HTML5 WebGL技术的优势还不止于此，它强大的开放性以及免插件特性，能够帮助开发人员快速便捷的进行开发，无需再考虑到开发后的兼容性问题，有效降低了软件开发的周期，提高了效率。与此同时，WebGL仅需一个浏览器即可进行可三维场景的交互，而现如今大部分浏览器都支持WebGL，所以其优势不言而喻。

本文利用了WebGL HTML5技术的框架Three.js进行了三维地形的构建与渲染，将船舶模型加载进入地形中并实现动态交互，以及水面动态效果的优化^[2]。

1.3 国内外发展现状

现如今国内船舶动态监控大多使用的是传统的C/S模式开发，使用单机版系统通过链接互联网从而实现对于船舶的动态监控。而这样的监控具有非常大的局限性，因为单机应用程序无法适用于任何环境下，而且也会对于电脑的配置有相应的要求。为了解决这一问题，有些开发人员为了节约开发成本，解决单机C/S模式带来的不便，利用传统的HTML JavaScript来设计基于Web端B/S模式的二维船舶动态监控系统。而这样的监控系统拥有一个最明显的缺点，那就是无法直观的观察到船舶周围的环境信息，用户体验相对较差。