论文总字数：27715字

摘 要

09015307 高冠宇

指导教师：唐 慧

在科学计算可视化中，各种算法被广泛用于三维标量场的可视化，这些标量场通常是均匀的数值网格，例如磁共振成像（MRI）或计算机断层扫描（CT）。目前市面上已存在许多功能强大的交互型体数据浏览软件，但它们多为桌面版，存在不可忽视的软件体积过大、安装不便、跨系统兼容性差等问题；相比之下，网页端应用则体现出强大的优势。WebGL作为一种已被主流web浏览器集成的3D绘图协议，为网页版体数据可视化应用的开发提供了便利。

常见的体数据可视化方法有最大密度投影（MIP）、表面绘制（SSD）和体积绘制（VR），这三种方法在实际的医疗实践中有着不同的作用。最大密度投影算法将每束从视点出发射向投影平面的平行光线中遇到的具有最大密度的体素投影在可视化平面中。表面绘制通过给定的阈值来提取等值面以绘制出观感真实的表面图像。体积绘制通过沿着出发于视点的光线对数据进行采样，并为每个采样点分配颜色值和透明度，从而将三维数据转换为便于观察的图像。

本文应用WebGL实现在网页上进行体数据可视化，具体实现办法为把三维体数据作为3D纹理被存储于GPU渲染器中，把体绘制算法作为着色器程序。WebGL 1.0并未支持三维纹理，若想如果在WebGL 1.0上实现体绘制则需要提前对数据进行处理，而三维纹理作为新特性加入WebGL 2.0为体数据可视化在web上的推广提供基础。因此，本文讨论了体绘制算法的数学背景，实现了基于WebGL 2.0的体数据可视化。实现的算法包括前述三种体绘制方法，验证了通过web浏览器进行高性能交互型三维体数据可视化的可能性及其诸多优点。

关键词：体数据可视化，医学可视化，WebGL，体绘制，最大密度投影，表面绘制，光线投影

ABSTRACT

09015307 Gao Guanyu

Mentor：Tang Hui

In scientific visualization, several methods are widely used to visualize 3D scalar fields. These scalar fields are often uniform grids of values, such as an MRI or CT scan.

Currently, there are a lot of powerful interactive applications aimed at displaying volumetric data (medical datasets mostly), however, most of them are developed as desktop apps, which brings problems such as excessive size, inconvenient installation, and poor cross-system compatibility. Web apps, by contrast, show their advantages. WebGL, as a 3D rendering protocol that has been integrated by mainstream web browsers, makes it easier to develop volumetric data visualization applications for the web.

Common visualization methods of volumetric data, such as Maximum Intensity Projection (MIP), Shaded Iso-surface Display (SSD) and Volume Rendering (VR), have different effects in medical practice. MIP projects the voxel with the maximum density in the visualization plane encountered by each ray parallel to the projection plane from the viewpoint. SSD extracts the iso-surface with a given threshold value to draw a realistic surface image. VR samples the data along with rays from the viewpoint and assigns color and transparency to each sample so that 3D data could be displayed as images easy to view.

This article presents a web application aiming at the visualization of volume data in which 3D data is stored as 3D textures in a GPU renderer and rendering algorithms are executed with shader programs. However, 3D textures were not supported in WebGL 1.0, requiring pre-processing steps to convert 3D textures to 2D textures. Recently, WebGL 2.0 added support for 3D textures, allowing for an elegant and fast volume renderer to be implemented entirely in the browser. In this publication, we will discuss the mathematical background for volumetric data visualization and how to create an interactive volumetric data renderer in the web browser with WebGL 2.0. Three rendering methods mentioned above are implemented, meanwhile, running interactive volume renderer in web browsers are proved possible and superior.

Keywords: Volumetric Data Visualization, Medical Visualization, WebGL, Volume Rendering, Maximum Intensity Projection, Iso-surface Display, Ray Casting

目 录

摘 要 I

ABSTRACT II

第一章 绪论 1

1.1引言 1

1.2相关概念 1

1.2.1 CT 1

1.2.2 体素 2

1.2.3 体数据 2

1.3 体数据可视化的发展历程 2

1.4 三维体数据可视化常用方法 3

1.4.1 表面绘制和体绘制 3

1.4.2 最大密度投影 4

1.5 本文研究目的和主要研究内容 4

1.5.1 研究目的 4

1.5.2 研究内容 4

第二章 WebGL和Three.js与体数据可视化 6

2.1 Web版三维图像应用开发的现状 6

2.1.1 WebGL和WebGL2 6

2.1.2 Three.js 6

2.2 着色器程序 6

2.3 Three.js特性 7

2.3.1 渲染器 7

2.3.2 透视相机和正交相机 7

2.3.3 内置uniform和attribute 7

2.4 在WebGL 1.0中使用“三维纹理” 8

第三章 体数据可视化算法及实现 10

3.1 体数据可视化算法概述 10

3.2 光学模型 11

3.3 体积光线投影 11

3.4 表面绘制 12

3.4.1 原理 12

3.4.2 算法实现 13

3.4.3 特点 14

3.5 最大密度投影 14

3.5.1 原理 14

3.5.2 算法实现 15

3.5.3 特点 15

3.6 体绘制 16

3.6.1 原理 16

3.6.2 算法实现 17

3.6.3 特点 18

第四章 Web应用搭建 19

4.1 Web项目框架搭建 19

4.2 Web应用设计 20

4.2.1 数据输入 20

4.2.2 绘制结果窗口 20

4.2.3 切换绘制算法 21

4.2.4 配置表面绘制参数 21

4.2.5 配置体绘制参数 21

4.2.6 传输函数设计 22

4.3 项目部署 22

4.4 跨平台兼容性测试 22

第五章 结论与展望 24

5.1 工作小结 24

5.2 本课题特点 25

5.2.1 绘制方式的实时切换 25

5.2.2 较高的自由度 25

5.2.3 流畅的视角变换和三维交互 25

5.3 研究展望 25

参考文献 27

致 谢 29

第一章 绪论

1.1引言

交互式三维体数据可视化是一项重要技术，其在生物医学、地球物理、计算流体力学、有限元模型和计算化学等领域有广泛的应用。目前已有很多基于OpenGL的体数据可视化桌面应用存在，包括一些为临床医疗提供服务的大型专业医学图像显示软件，但此技术在web中的实现仍较少。在越来越多的场景中，web应用相比于传统的桌面应用显示出无法替代的优越性，如跨设备跨平台的移植性以及更便捷的使用方式。

在WebGL标准出现以前，在web中实现三维体数据可视化比较困难，往往需要专门的语言，伴随着对解释器插件的强依赖和对更高级的渲染支持的要求^[1]，幸运的是，WebGL标准的出现使得问题有了更好的解决方案。

剩余内容已隐藏，请支付后下载全文，论文总字数：27715字