基于光线投射的体渲染技术以其易于实现、算法变化灵活、可生成复杂光照效果等优点，被广泛应用于医学图像分析、资源勘探和科学仿真数据分析等涉及3维数据可视化的领域。但该算法对硬件平台的计算能力和存储带宽要求较高，高分辨率CT及MRI数据的交互实时重建通常在高性能GPU工作站或计算集群上才能实现，而用户对这些昂贵计算资源的访问一般均限制在较小的地域空间内。近年来随着网络基础设施的逐步完善，用户几乎可随时随地接入网络，因此远程服务越来越受到欢迎和重视。与本地渲染方式相比，远程渲染具有以下几大优点^[1]：首先，远程渲染可使计算资源有限的设备(如通用台式机、笔记本电脑及平板电脑等移动设备) 成为1台虚拟高性能图形工作站；其次，远程渲染服务器的计算资源在同一时刻可为多个终端用户提供服务；最后，远程渲染可作为种高效的跨平台渲染解决方案。

目前远程渲染系统的设计主要采用C/S (client/server) 架构和B/S (browser/server) 架构。其中C/S架构需要在客户机平台上安装客户端软件，因此需要为不同操作系统开发相应的软件，且给用户的安装设置带来不便；此外，随着操作系统及一些中间件的淘汰，客户端软件也须重新开发。采用B/S架构的系统则较好地弥补了C/S架构的缺点，几乎所有的现代智能设备均支持Web浏览器，用户可在任意安装浏览器的设备上使用远程渲染系统，免去了下载安装的过程；而开发人员只需维护1套Web应用程序便可轻松实现跨平台解决方案。由于技术限制，早期的B/S架构系统需在浏览器中安装插件(Flash, Java Applet等) 以支持多媒体应用程序^[2]，这种方式会存在插件安装失败，插件被屏蔽以及引发安全隐患等弊端。HTML5原生支持绘图及Socket通信API，给图形应用程序的开发带来前所未有的方便。文献[3-5]研究了采用HTML5技术实现交互医学影像可视化的可行性并给出了实现的基本框架。

体渲染中引入基于物理的真实感光照能够帮助用户更好地感知3维数据的形态，其中，间接光照作为一种重要的视觉提示，在给观察者提供3维物体深度信息的同时也可较好地展示体数据中重要的全局信息以及局部细节结构。因为基于物理的真实感光照的计算量较大，所以大多数国内外学者主要研究如何利用GPU快速近似生成真实感光照效果的算法以达到交互级渲染速度^[6-9]。相比于现有的各种近似算法，基于蒙特卡罗(MC) 方法的物理光照计算能够在不损失光能传输计算精度的条件下渲染出更加具有物理真实感的图片。此外，该算法能够在主流GPU平台上以交互渲染速度运行。Kroes等人^[10]开发的Exposure Render很好地证明了采用随机MC方法计算光照不仅没有其他方法对灯光配置和相机模型等的限制，而且可以较好地解决传统光线投射体渲染中由光线步进引起的年轮(wood ring) 失真^[6]。

图 1所示为面向Web的远程真实感体渲染系统总体架构示意图。系统分为服务端和客户端两大部分；服务端可进一步划分为渲染集群和Web服务器，渲染集群负责快速生成体渲染图像，Web服务器负责前端页面逻辑处理及图像发送。系统有2条主要的数据通道，其中一条负责用户交互事件的传送，另一条用以向在线用户分发渲染图像。当用户通过网络连接至Web服务器后，可选择存储服务器中现存的数据或通过上传本地数据进行渲染；计算量较大的渲染任务由渲染集群中的1个渲染器实例负责，渲染器实例启动后将渲染图像序列通过Web服务器连续发送给对应用户；用户通过浏览器产生的交互事件(视角变换、灯光设置、裁剪面设置、体数据属性设置等) 则通过Web服务器转发至对应的渲染实例用以渲染新的图像。由于用户接入的网络情况各异，为了使不同带宽的网络用户尽可能以最快的速度获得较高质量的图片，渲染集群中的自适应优化组件根据不同接入用户的网络情况选择最佳的图片质量与压缩策略对原始渲染图像进行压缩编码。

真实感渲染是图形渲染领域的个重要研究方向，它致力于合成与照片无差别的图像。如何准确地模拟光线与虚拟环境的各种交互效果是真实感渲染的关键所在。现有的各种全局光照求解方法中，双向路径追踪是一种统计无偏蒙特卡罗算法，它可以模拟各种渲染方程描述的光能传输效果并且可用GPU高效并行实现^[11]。Lafortune和Willems首先提出了体路径追踪方法，该方法在路径追踪的基础上引入光的散射效果以模拟光线在介质中的传输^[12]。

面绘制渲染方程假设场景中的物体处于真空环境中，光线在物体之间的传输不会发生辐射亮度的变化。但是在体渲染场景中，必须考虑介质对光线辐射亮度的影响。光与介质的交互主要有3种过程会影响辐射亮度的分布(图 2)：1) 光子撞击介质后可能会被介质吸收转化为其他形式的能量，导致辐射亮度降低；2) 高温介质可能会以光子的形式向外辐射能量；3) 光子与介质碰撞后能量不变但方向改变，偏离视线方向的事件称为外向散射，由其他方向进入视线方向的事件称为内向散射。综合这3个主要因素，光线在介质中的传播可用辐射传输方程(RTE) 描述^[13]为

$ \begin{array}{*{20}{c}} {\left( {\mathit{\boldsymbol{\omega }} \cdot \nabla } \right)L\left( {\mathit{\boldsymbol{p}},\mathit{\boldsymbol{\omega }}} \right) = - {\sigma _t}\left( \mathit{\boldsymbol{p}} \right)L\left( {\mathit{\boldsymbol{p}},\mathit{\boldsymbol{\omega }}} \right) + }\\ {{\sigma _{\rm{s}}}\left( \mathit{\boldsymbol{p}} \right)\int_\Omega {p\left( {\mathit{\boldsymbol{p}},\mathit{\boldsymbol{\omega '}},\mathit{\boldsymbol{\omega }}} \right)} L\left( {\mathit{\boldsymbol{p}},\mathit{\boldsymbol{\omega '}}} \right){\rm{d}}\mathit{\boldsymbol{\omega '}} + }\\ {{\sigma _{\rm{a}}}\left( \mathit{\boldsymbol{p}} \right)L\left( {\mathit{\boldsymbol{p}},\mathit{\boldsymbol{\omega }}} \right)} \end{array} $

(1)

式中，$L(\mathit{\boldsymbol{p}},{\rm{ }}\mathit{\boldsymbol{\omega }})$为光线沿$\mathit{\boldsymbol{\omega }}$在$\mathit{\boldsymbol{p}}$处的辐射亮度；${\sigma _t}\left( \mathit{\boldsymbol{p}} \right) = {\sigma _{\rm{a}}}\left( \mathit{\boldsymbol{p}} \right) + {\sigma _{\rm{s}}}\left( \mathit{\boldsymbol{p}} \right)$称为消光系数，${\sigma _a}\left( \mathit{\boldsymbol{p}} \right)$为吸收系数，${\sigma _{\rm{s}}}\left( \mathit{\boldsymbol{p}} \right)$为散射系数；$p\left( {\mathit{\boldsymbol{p}},\mathit{\boldsymbol{ \omega '}},\mathit{\boldsymbol{\omega }}} \right)$描述光线在不同方向上的散射分布，称之为相函数；${L_{\rm{e}}}(\mathit{\boldsymbol{p}},\mathit{\boldsymbol{\omega }})$为介质的外向辐射。式(1) 中等式右边的3项分别描述了介质对光的吸收(包括外向散射)、内向散射、介质外向辐射。

因为大多数CT或MRI扫描的物体几乎无外向可见光辐射，所以本文的实现忽略介质外向辐射项。对RTE积分可得体渲染方程

$ \begin{array}{*{20}{c}} {L\left( {\mathit{\boldsymbol{p}},\mathit{\boldsymbol{\omega }}} \right) = T\left( {{\mathit{\boldsymbol{p}}_0},\mathit{\boldsymbol{p}}} \right)L\left( {{\mathit{\boldsymbol{p}}_0},\mathit{\boldsymbol{\omega }}} \right) + }\\ {\int_{{\mathit{\boldsymbol{p}}_0}}^\mathit{\boldsymbol{p}} {T\left( {\mathit{\boldsymbol{p'}},\mathit{\boldsymbol{p}}} \right)} {\sigma _{\rm{s}}}\left( {\mathit{\boldsymbol{p'}}} \right)\int_\Omega {p\left( {\mathit{\boldsymbol{p'}},\mathit{\boldsymbol{\omega '}},\mathit{\boldsymbol{\omega }}} \right)} L\left( {\mathit{\boldsymbol{p'}},\mathit{\boldsymbol{\omega '}}} \right){\rm{d}}\mathit{\boldsymbol{\omega '}}{\rm{d}}\mathit{\boldsymbol{p'}}} \end{array} $

(2)

式中，等号右边2项分别表示背景光线透射后的辐射亮度以及累积内向辐射亮度。

光线步进算法是种易于实现的求解体渲染方程的方法，但是每一步阴影的计算将导致算法的复杂度变为${\rm{O}}\left( {{n^2}} \right)$，其求解速度十分缓慢^[14]。不同于光线步进方法每次光线前进一小段距离，本文采用Woodcock tracking算法^[15]，通过对透光率函数$T$进行重要性采样获得光线下一次的步进长度，即$\mathit{\boldsymbol{p}}\prime = \mathit{\boldsymbol{\omega }} \times \frac{{ - ln\left( {1 - \xi } \right)}}{{{\sigma _{{\rm{max}}}}}},\xi \in [0,1)$，则式(2) 除背景光透射项外可表示为^[16]

$ \begin{array}{l} L\left( {\mathit{\boldsymbol{p}},\mathit{\boldsymbol{\omega }}} \right) = \\ \;\;\;\frac{1}{N}\sum\limits_{i = 0}^{N - 1} {\frac{{{\sigma _{\rm{s}}}\left( {{{\mathit{\boldsymbol{p'}}}_i}} \right)}}{{{\sigma _{\rm{t}}}\left( {{{\mathit{\boldsymbol{p'}}}_i}} \right)}}} \int_\Omega {p\left( {{{\mathit{\boldsymbol{p'}}}_i},\mathit{\boldsymbol{\omega '}},\mathit{\boldsymbol{\omega }}} \right)} L\left( {{{\mathit{\boldsymbol{p'}}}_i},\mathit{\boldsymbol{\omega '}}} \right){\rm{d}}\mathit{\boldsymbol{\omega '}} \end{array} $

(3)

由于体数据并未显式定义法线向量，所以单一体渲染方程并不能呈现出高光带来的细节增强，如图 3(a)所示。本文采用Kroes等人^[10]提出的方法解决该问题，令${P_{{\rm{brdf}}}} = 1 - {\rm{exp}}\left( { - \left| {\nabla {\tau _n}\left( \mathit{\boldsymbol{x}} \right)} \right|} \right)$，$\left| {\nabla {\tau _n}\left( \mathit{\boldsymbol{x}} \right)} \right|$为$\mathit{\boldsymbol{x}}$处的归一化梯度向量长度，随机取$\xi \in [0,1)$则$L\left( {\mathit{\boldsymbol{p}},\mathit{\boldsymbol{\omega }}} \right) = \frac{1}{N}\sum\limits_{i = 0}^{N - 1} {{L_i}\left( {\mathit{\boldsymbol{p}}\prime ,\mathit{\boldsymbol{\omega }}} \right)} $，其中

$ \begin{array}{*{20}{c}} {L\left( {\mathit{\boldsymbol{p'}},\mathit{\boldsymbol{\omega }}} \right) = }\\ {\left\{ \begin{array}{l} \int_\Omega {\frac{{{\sigma _{\rm{s}}}\left( {{{\mathit{\boldsymbol{p'}}}_i}} \right)}}{{{\sigma _{\rm{t}}}\left( {{{\mathit{\boldsymbol{p'}}}_i}} \right)}}\int_{{\rm{phase}}} {\left( {\mathit{\boldsymbol{p'}},\mathit{\boldsymbol{\omega '}},\mathit{\boldsymbol{\omega }}} \right)} L\left( {\mathit{\boldsymbol{p'}},\mathit{\boldsymbol{\omega '}}} \right){\rm{d}}\mathit{\boldsymbol{\omega '}}} \;\;\;\;\;\xi > {P_{{\rm{brdf}}}}\\ \int_\Omega {{P_{{\rm{brdf}}}}\left( {\left( {\mathit{\boldsymbol{p'}},\mathit{\boldsymbol{\omega '}},\mathit{\boldsymbol{\omega }}} \right)L\left( {\mathit{\boldsymbol{p'}},\mathit{\boldsymbol{\omega '}}} \right)} \right.\left| {\cos \left( \theta \right)} \right|{\rm{d}}\mathit{\boldsymbol{\omega '}}} \;\;\;\;其他 \end{array} \right.} \end{array} $

(4)

若将式(4) 中的$\frac{{{\sigma _{\rm{s}}}\left( {\mathit{\boldsymbol{p'}}} \right)}}{{{\sigma _{\rm{t}}}\left( {\mathit{\boldsymbol{p'}}} \right)}}$与相函数项合并，将$\cos \left( \theta \right)$与BRDF项合并，则式(4) 可统一表示为

$ \int_\Omega {{f_{{\rm{reflect}}}}\left( {\mathit{\boldsymbol{p'}},\mathit{\boldsymbol{\omega '}},\mathit{\boldsymbol{\omega }}} \right)L\left( {\mathit{\boldsymbol{p'}},\mathit{\boldsymbol{\omega '}}} \right){\rm{d}}\mathit{\boldsymbol{\omega '}}} $

(5)

本文使用CUDA实现体路径追踪算法以利用GPU提供的大规模并行计算能力，此外GPU还可提供更高的存储带宽以及硬件实现的三线性纹理插值计算，这些功能对体渲染程序的性能都有较大影响。GPU实现中，每个CUDA线程在1次迭代计算中执行的体路径追踪算法的核心步骤如下：

1) 由相机中心和像素区域内随机采样点构建主光线；若主光线与体数据相交则继续；否则返回背景光。

2) 由Woodcock tracking方法确定下一次光线发生散射的位置距当前位置的距离$t$；若$t > {t_{{\rm{far}}}}({t_{{\rm{far}}}}$为光线下一次穿过体数据所需最大步长) 则返回背景光；否则计算散射位置$\mathit{\boldsymbol{p}}\prime = \mathit{\boldsymbol{x}} + \mathit{\boldsymbol{t}} \times \mathit{\boldsymbol{\omega }}$并继续。

3) 对灯光位置进行采样并结合当前位置$\mathit{\boldsymbol{p}}\prime $构建阴影光线，由Woodcock tracking方法确定阴影光线能否到达当前位置；若光线能到达当前位置则以灯光的辐射亮度$L(\mathit{\boldsymbol{p}}\prime ,\mathit{\boldsymbol{\omega }}\prime )$作为直接光照量；否则直接光照量为0。

4) 对BSDF进行采样，确定散射光线方向。

5) 由Russian Roulette算法决定光线是否终止；若光线在算法中胜出，则追踪散射光线，转步骤2)；否则，终止光线追踪，返回光线的辐射亮度。

采用基于HTML5的Web技术设计交互界面并使用WebSocket进行服务器与浏览器的通信。WebSocket是一种基于TCP协议的全双工通信方式，服务器可以在无浏览器请求的情况下向已建立连接的浏览器推送消息，与此同时，浏览器也可向服务器发送请求。在交互过程中，远程服务端的渲染器将渲染结果传递至Web服务器并由后者发送给浏览器；但由于渲染器和Web服务器的输出速率不一致，因此本文设计了一种耦合算法连接两种输出系统使两者的工作性能互不影响。评价一个远程应用程序最直接的标准是用户能够感受的服务质量，系统结合了MC渲染的特点以及应用环境的要求，在渲染过程中选择不同的渲染图像压缩质量使用户获得更好的交互体验。

系统将服务器功能分为2个功能模块：1) 浏览器通信模块；2) GPU体渲染模块。客户端部分可以分为3个功能模块：1) 服务器通信模块；2) 图像显示模块；3) 交互动作监听模块。下面介绍服务器和客户端各模块的主要实现步骤。

当用户发起连接请求时，浏览器通信模块建立1个WebSocket实例并等待用户连接。该实例以字符串的形式接收来自浏览器的JSON格式指令及参数，解包后交予指令对应部件执行。渲染器输出的图像以PNG或JPEG格式传输至该模块，WebSocket以二进制的格式将其发送到浏览器。浏览器接收到图像数据后可直接用HTML5的canvas显示，无需任何显式解码过程。GPU体渲染模块负责生成体数据渲染图像，当渲染器收到浏览器通信模块传递的指令和参数时便进行相应的渲染参数调整，之后进行新一轮的渲染并将生成的图像数据传输至浏览器通信模块。

客户端是1个支持HTML5 canvas的浏览器。浏览器通过WebSocket与服务器进行通信，由Javascript捕获用户的键盘与鼠标事件发送至服务器并从服务器接收渲染图像。客户端的服务器通信模块通过由Javascript创建的WebSocket实例与服务器进行异步消息传递；实例创建后进入等待状态，一方面监听服务器发送的图像数据，另一方面负责等待发送用户请求。当服务器通信模块收到服务器发送的图像数据后将其分发至图像显示模块，显示模块调用ImageUpdate函数将最新图像显示在canvas标签内。用户交互事件主要包括鼠标在canvas上产生的视角变换事件和各参数窗口中滑块移动产生的参数改变事件。交互动作监听模块通过Javascript定义发生在canvas上的各种鼠标事件回调函数以及各窗口控件的回调函数获取交互事件，并通过{eventName:name, eventParams:parameters}的JSON格式由服务器通信模块发送至服务器。

图 4所示为1个用户交互事件产生至浏览器获得新渲染图像的Web交互过程。通过这样的交互循环，系统可以在任何支持HTML5的设备上实现1种真实感光照体渲染的伪3维交互模式。

随机MC渲染算法通常每个像素需要几百至几千次的采样才能获得高质量的图像。较少采样次数渲染的图像包含大量噪点，尤其是最初的几十次渲染结果；用户可接受的图像需要经过数百次的迭代渲染，高质量图像则需要千次或更高的迭代次数。然而用户关心的是最终的渲染图像，中间图像是否全部依次呈现并不重要；若整个渲染过程中的中间结果均不向客户端发送而只发送最终渲染图像则会影响用户交互体验，使用户得不到即时的交互反馈。因此，在交互过程中服务器需发送中间渲染图像但无需发送全部中间渲染图像至浏览器。

系统中渲染图像的输出分为渲染集群向前端Web服务器的输出和前端Web服务器向浏览器的输出。渲染集群的图像输出速度主要取决于GPU的计算性能、渲染算法、渲染参数以及体数据结构；Web服务器通过网络输出图像，网络带宽、图像分辨率及图像质量综合决定了其输出速度。表 1所示为GPU在不同渲染参数下的渲染性能范围，可见其渲染速度均高于Web服务器向浏览器流畅发送图像的速率，因此需要选择合适的算法将2种输出速度差异较大的系统进行耦合。

渲染集群输出1帧图像的时间为$\mathit{\Phi = }\sum\limits_{i = 0}^n {{\alpha _i}} + \beta + \gamma $，其中，$\sum\limits_{i = 0}^n {{\alpha _i}} $为迭代计算时间，即1次图像输出中所有单次迭代计算时间总和；$\beta $为GPU拷贝图像至主机内存所需时间，由数据大小和硬件性能决定；$\gamma $为图像编码压缩时间，其大小取决于图像的内容和图像的压缩质量。若每次迭代计算的结果均向浏览器输出，则迭代计算时间仅占$\mathit{\Phi }$的一小部分，渲染集群输出图像性能受$\beta $和$\gamma $的限制较大。但分析表明无需输出所有中间渲染图像，因此可以通过调整$\sum\limits_{i = 0}^n {{\alpha _i}} $中的迭代计算次数$n$以及图像编码压缩时间获得更好的输出性能。

通常使用高速缓冲区连接2种输出速度不同的系统，本文使用FIFO队列作为缓冲区耦合2个输出系统，渲染集群以较高的速率向队列输出数据，而Web服务器则以较低的速率读取数据。令$n$和$n\_{\rm{max}}$分别为渲染集群1次图像输出的迭代渲染次数和最大迭代渲染次数阈值，输出系统耦合算法流程如图 5所示。

渲染开始时，渲染器以最快的速度($n$=1) 将图像数据送入队列，以确保队列中有充足图像可供Web服务器连续发送至浏览器。若渲染器发现缓冲队列已满，则表明渲染器输出图像速率超出了Web服务器发送承载量；算法通过改变渲染器每次图像输出的迭代计算次数以调整每次图像输出的时间间隔，迭代计算次数越多，输出时间间隔越大，但下一次输出的图像质量越高。当Web服务器以较慢的速率发送缓冲队列中的图像时，渲染器则以较高的速度迭代计算图像，可更快获得高质量图像。算法初始设置1个最大迭代计算次数的阈值$n\_{\rm{max}}$，表示渲染器输出速率能使Web服务器流畅输出的最大估计迭代计算次数；当队列满时若当前迭代次数$n$小于$n\_{\rm{max}}$则进行乘法增加，以更快获得使渲染器输出速度和Web服务器输出速度相平衡的$n$值；若渲染器依然检测到队列满，则进行加法增大以避免迭代计算次数过大(图像输出时间间隔过大) 导致系统发送卡顿。当Web服务器检测到缓冲队列为空时，表明渲染集群的图像输出速率过低，需增大其输出速率；算法通过乘法减小渲染集群当前迭代渲染次数$n$以缩短图像输出时间间隔，从而使渲染集群快速输出；更新$n\_{\rm{max}} = n/2$获取当前网络状态下渲染器单次图像输出最大估计迭代次数。该算法的主要优点在于，渲染器可根据网络情况调整图像输出间隔使渲染器工作在最佳性能状态下；在网络状态较好时，Web服务器输出速度快，渲染器单次图像输出迭代计算次数少，输出图像多；在网络状态较差时，Web服务器输出速度慢，渲染器单次图像输出迭代次数多，输出图像少。

当用户进行交互时，渲染器需要根据最新渲染参数重新渲染，此时清空队列中以前的渲染图像并重新进入快速输出。当渲染集群发现总迭代渲染次数达到系统预设或用户设置值，表明系统默认或用户可接受图像质量符合要求，则以无损压缩算法对图像编码并发送至浏览器；之后清空缓冲队列并暂停渲染器和Web服务器，直至用户产生新的交互事件。

更新渲染参数后重新渲染的前十几至几十帧图像包含大量的噪点，随着迭代渲染次数的增加，噪点减少速率减缓(MC收敛速度为${\rm{O}}\left( {\sqrt n } \right)$)，渲染质量不断提高。由于用户并不关心中间渲染图像的质量，因此对这些图像采用有损压缩方式可大幅减小数据大小；最终渲染图像则采用无损压缩方式以保证图像无细节丢失。系统使用JPEG作为有损图像压缩方式，使用PNG作为无损图像压缩方式。图 6所示为Mecanix数据集渲染前300帧图像在不同JPEG质量参数$Q$下的压缩率。由图可知，$Q$值越高其压缩率越小；相同$Q$值的压缩率与图像内容有关，噪点越多压缩率越小。因为用户进行交互后可见的仅为最初渲染的几十帧图像，结合上述分析可采用较低的$Q$值压缩图像以尽量维持较高的交互刷新率；用户停止交互后随着渲染图像质量提高可逐步提高$Q$值使用户可看到视觉上满意的图像。

采用过低的JPEG质量压缩图像会导致解压后的图像产生严重的方块效应，使得图像无法辨认。虽然初始渲染的几十帧图像并非用户最终需要的结果，但其仍然为用户交互提供一定的视觉反馈，引导用户尽快调节到所需的渲染参数，因此需要为不同阶段的图像选择合适的$Q$值。在图像大小和图像质量之间达到平衡。图 7所示为Mecanix数据集第一次迭代渲染图像在不同$Q$值下的效果图。由图可知$Q$为0时图像颜色信息严重损失，不宜用作反馈图像；$Q$为20及以上的图像视觉上与原图较接近；$Q$在90之前的所有图像之间的大小增量较小，而90与100的图像大小差值较大。结合图 6分析可确定初始渲染的50帧图像可直接使用30左右的JPEG质量压缩，之后的图像根据网络情况及用户期望的交互帧率动态选择3090的值，最终的图像使用PNG格式传输至浏览器。

实验使用基于Kepler架构的NVIDIA GTX760显卡作为渲染加速器，其GK104核心GPU有6个流多核处理器共1152个CUDA核心，4GB显存，最高时钟频率为1.18 GHz。渲染器部分采用C++和CUDA C编写，使用的CUDA版本为7.5；采用Python tornado编写Web服务器。

图 8和图 9所示分别为系统交互界面和系统运行于移动设备的效果图。系统界面主要分为2个部分，左侧的画布用以绘制远程服务器发送的渲染图像并接受用户的鼠标拖拽以及滚轮操作(移动设备的单指拖拉以及两指缩放操作) 产生视角变换事件；右侧的工具栏以百叶窗的形式提供传输函数、灯光参数、裁剪面参数和相机参数调整的空间组。

图 10展示了系统提供的各种渲染功能，用户可以通过调整传输函数$\left( {{\sigma _{\rm{t}}},{\sigma _{\rm{s}}}} \right)$以及材质(散射次数、BRDF)、设置灯光参数(位置、大小、颜色)、调整相机参数(光圈、焦距等) 和放置裁剪面获得各种自定义显示效果。图 10(a)所示为不同传输函数下的渲染效果，通过修改传输函数可以显示数据集中不同的特征部分；图 10(b)所示为不同裁剪面设置时的渲染效果，用户可以同时在3个正交方向设置不同位置的裁剪面以观察数据集内部结构；交互过程中，灯光位置也是常用设置参数之一，通过在不同空间位置放置灯光可以获得不同的光影效果(图 10(c)所示)；图 10(d)所示则为改变光圈大小后获得的不同景深效果。

实验选取Manix、Mecanix、VisMale和Bonsai作为测试数据集，分别统计了采用文中提出的输出系统耦合算法发送渲染图像和发送所有迭代渲染图像在校园局域网(BW: 100 Mb/ps，RTT: 1.33 ms，Packet loss: 0%) 和宽带(BW: 10 Mb/ps，RTT: 45 ms，Packet loss: 0.89%) 环境下渲染这些数据集，从交互动作停止至渲染结束，客户端浏览器收到的总帧数以及完成所需时间数据。实验中渲染图像的分辨率为640×480像素，JPEG质量为90(1100)，总迭代计算次数为1 000，缓冲队列长度为60，Web服务器以30帧/s的速度输出图像，表 2所示为测试结果。

表 2数据表明采用文中提出的输出系统耦合算法渲染不同数据集在LAN和WAN两种环境下所需的完成时间均少于未采用输出系统耦合算法渲染不同数据集在2种网络环境下所需的完成时间。该结果说明采用文中提出的耦合算法连接渲染器和Web服务器能够较好地提高整个系统的性能，使系统在较好和较差的网络传输环境中均能以较快的速度输出最终的高质量渲染图像。

分析表 2中采用输出系统耦合算法的测试数据可发现：1) LAN环境中渲染不同数据集的过程中浏览器收到的总帧数远大于WAN下浏览器收到的总帧数，但2种网络环境下渲染不同数据集对应所需完成时间相差很小。显然在相近的时间内接收到的帧数越多，显示效果越平滑。因为LAN环境下Web服务器输出较快且稳定，渲染器的平均每次图像输出的迭代计算次数较少，故输出图像较多；而WAN环境下Web服务器输出速度较慢且可能出现丢包，因此缓冲队列被填满的概率较高，输出系统耦合算法增加渲染器每次输出图像的迭代计算次数，故整个渲染过程中输出图像变少。2) LAN环境中渲染不同数据集的平均帧率大致相同，因此完成渲染任务所需时间越短，浏览器收到的总帧数越少；而WAN下渲染不同数据集浏览器收到的总帧数相差较小。因为Web服务器在LAN中能较稳定发送图像，渲染器能较快找到和Web服务器发送速度相平衡时的迭代计算次数，因此浏览器可以较稳定的帧率接收图像；WAN的不稳定性则使渲染器每次图像输出的迭代计算次数不停大幅波动，即使能达到平衡，每次图像输出的迭代计算次数也较大，因此整个过程输出的图像数量较少。

表 2中未采用输出系统耦合算法获得的数据则说明了：1) 系统会将每次迭代计算渲染的图像都发送至浏览器，因此2种网络环境下浏览器收到的总帧数相同。2) LAN下不同数据集渲染完成所需时间基本相同，而WAN下不同数据集渲染完成所需时间相差较大，且均高于LAN环境中对应的数据集所需时间。因为渲染系统1次迭代计算输出图像所需时间小于Web发送间隔，所以其完成所需时间约为Web服务器发送1 000帧图片所需时间，因此所需时间基本相同；而WAN环境所需时间完全取决于网络环境，无相关规律。

相比于原始直接连接渲染器和Web服务器时的系统性能，采用输出系统耦合算法连接渲染器和Web服务器可较大地缩短整个渲染过程所需时间，提高系统性能，使用户在不同的网络环境中均可以较快的速度获得高质量渲染图像。在大带宽低延迟的局域网内，渲染器能通过缓冲队列的状态较快调整其每次图像输出间隔使得其输出速度与网络承载能力相平衡，并能相对平稳保持该状态，因此用户在整个渲染过程中能以较流畅的视觉体验观察图像的输出过程。在网络传输情况难以预测的广域网环境中，渲染器的计算速度远大于Web服务器的输出速度，此时渲染器会调整每次图像输出的迭代计算次数至1个较大的值，因此渲染器每次输出图像间隔变大，在渲染过程中输出较少图像，所以虽然图像输出帧率不高，但整个渲染过程所需时间基本不变。

本研究设计并实现了面向Web的远程真实感体渲染方法。本方法的特点是将渲染和显示进行分离，计算量巨大的渲染任务在专用渲染服务器或工作站上执行，而用户则可以使用任何支持HTML5的设备以交互级速度使用远端渲染系统。本文提出的输出系统耦合算法能够将渲染集群和Web服务器这2个输出速度相差较大的系统进行连接，使用户在较好的网络环境下可以获得较流畅的图像输出；在相对较差的网络环境下，用户虽然会发现整个渲染过程中接收图像的帧率不高，但同样能够在较短的时间内获得最终渲染图像。

本文在图像传输方式上采用发送JPEG图像，缺少帧间压缩带来的更好压缩效率，因此在后续研究中将研究如何合理结合文中提出的输出系统耦合算法和x264视频编码算法，采用流的方式发送图像数据，减少网络传输的压力。