面向移动设备的真实感体渲染和交互系统及其工作方法技术领域
本发明属于图形处理技术领域，具体涉及一种面向移动设备的真实感体渲染和交
互系统及其工作方法，尤其是一种面向移动设备的基于物理的真实感体渲染和交互系统。
背景技术
目前通过计算机断层扫描（CT）以及磁共振成像（MRT）获取患者病变部位的影响图
片是医生进行临床诊断、手术规划和检测药物介入治疗效果的常用手段。体渲染技术
（Volume Rendering）可以由CT等设备产生的离散三维标量数据产生能够直观传递三维体
数据形状、深度和大小信息的二维图片。高分辨率CT及MRI数据的三维交互式重建通常在高
性能图形处理器（GPU）工作站或计算集群上才能实现，但一般用户很难接触到这些昂贵的
计算资源。即使医院等机构拥有高性能计算设备，其同时也只能为一个用户服务，导致计算
资源利用率较低。此外，高性能计算设备体积较大，缺乏便携性，对其使用受到空间位置限
制。
目前大多数移动设备（如智能手机或平板电脑等）所配备的多点触控屏幕使其非
常适合作为医学应用的交互接口，移动设备显示质量和分辨率都能和常用桌面设备相媲
美，最重要的是移动设备的可便携性以及现在无处不在的网络连接使得医生在进行协作诊
断和治疗时不再被限制在医院里的工作站设备。但交互式真实感医学数据可视化需要巨大
的计算能力和存储容量及存储带宽，移动设备和普通桌面设备很难达到该要求。
发明内容
本发明要解决的技术问题是提供一种面向移动设备的真实感体渲染和交互系统
及其工作方法，采用浏览器/服务器（B/S）架构将计算设备与交互显示设备进行分离，用户
可通过接入网络的移动设备透明使用远端高性能真实感体渲染服务器而无需关心交互显
示设备的计算能力。
为解决上述技术问题，本发明的实施例提供一种面向移动设备的真实感体渲染和
交互系统，包括服务器端和客户端，所述服务器端包括：
渲染服务器，处理体渲染任务；
Web服务器，处理Web页面、发送渲染图像并接收交互事件；
耦合组件，连接渲染服务器和Web服务器；
所述客户端包括：
客户端浏览器，接收并显示Web服务器发送的渲染图像，并将用户产生的交互事件发送
至Web服务器。
其中，所述服务器端包括GPU体渲染模块、消息管理模块和浏览器通信模块，所述
GPU体渲染模块包括渲染服务器管理单元、体渲染单元和图像输出单元，所述消息管理模块
包括图像数据分发单元和交互事件分发单元，所述浏览器通信模块包括图像数据发送单元
和交互事件接收单元。
其中，所述渲染服务器管理单元从渲染服务器集群中选择一台计算资源充足的主
机，启动体渲染单元；
所述体渲染单元从服务器端体数据存储服务器中将体数据拷贝到渲染服务器的显存
中，设置渲染参数，进行渐进式迭代渲染，将迭代渲染结果移交至图像输出单元；
所述图像输出单元根据服务器端耦合组件的状态信息决定是否将图像送入耦合组件
缓冲队列。
其中，所述图像数据分发单元为图像数据增加用户信息，将其移交至浏览器通信
模块；
所述交互事件分发单元从交互事件信息中提取用户信息、交互事件名称和交互事件参
数，根据用户信息将交互事件分发至GPU体渲染模块。
其中，所述图像数据发送单元根据图像数据的用户信息将其发送至对应用户；
所述交互事件接收单元负责接收客户端浏览器发送的交互事件信息并将其移交至消
息管理模块。
其中，所述客户端包括图像显示模块、交互动作监听模块和服务器通信模块，所述
图像显示模块根据接收到的压缩图像格式选择相应的解压算法对图像数据进行解压并在
客户端浏览器的页面上显示；
所述交互动作监听模块监听图像旋转、缩放和平移操作，传输函数改变操作，灯光参数
改变操作，裁剪面设置操作，相机参数设置操作，侦测到交互操作后将交互事件封装到JSON
结构体中并移交至服务器通信模块；
所述服务器通信模块包括图像数据接收单元和交互事件发送单元，所述图像数据接收
单元负责接收来自Web服务器的压缩渲染图像，将其移交至图像显示模块，所述交互事件发
送单元负责将封装好的交互事件消息发送至Web服务器。
其中，所述耦合组件包括自适应渲染服务器图像输出速度调整模块和图像压缩模
块；
所述自适应渲染服务器图像输出速度调整模块的缓冲队列连接渲染服务器和Web服务
器，当缓冲队列被填满时说明渲染服务器输出图像速度高于Web服务器发送图像的速度，此
时增大渲染服务器输出图像的时间间隔，减小其输出速度；当缓冲队列被取空时说明Web服
务器发送图像的速度高于渲染服务器输出图像的速度，此时需要减小渲染服务器输出图像
的时间间隔，增大其输出速度；
所述图像压缩模块为了在不同网络环境下提高交互刷新率，对每次重新迭代渲染的前
几十帧图像采用较低的JPEG质量压缩，提高压缩率，对中间渲染结果采用中等偏高的JPEG
质量压缩，在保证一定压缩率的条件下保持较好的图像质量；对最终的高质量渲染结果采
用PNG格式压缩，避免图像细节丢失。
本发明实施例还提供一种面向移动设备的真实感体渲染和交互系统的工作方法，
包括如下步骤：
S101、用户通过客户端浏览器输入服务器端Web服务器的主机地址，客户端浏览器向
Web服务器发送请求登录页面的HTTP请求，Web服务器向客户端浏览器返回登录页面的HTML
内容；
S102、用户输入用户名、密码等验证信息后向Web服务器发送登录验证请求，验证通过
后Web服务器返回体数据管理页面；
体数据管理页面的逻辑处理包括：
S102-1、从Web服务器获得该用户已上传的体数据，在体数据管理页面上列出数据列
表；
S102-2、用户可删除已有体数据，向Web服务器发送删除请求；
S102-3、用户可选择上传新的体数据，从本地选择一个或多个体数据上传至体数据存
储服务器；
S102-4、从列表中选择一个体数据进行渲染。
S103、用户在体数据管理页面上选定目标渲染体数据后，Web服务器向渲染服务器
发送启动体渲染器实例的指令，并将体数据描述信息发送给渲染服务器；
S104、渲染服务器收到启动指令及体数据描述信息后创建一个体渲染器实例；从体数
据存储服务器中检索出所需渲染的体数据后将体数据复制到渲染服务器的显存中并启动
体渲染器实例，开始渲染体数据；
S105、Web服务器确认体渲染器实例启动后向客户端浏览器发送渲染服务器启动成功
信息和交互渲染工作页面；
S106、客户端浏览器收到渲染服务器启动成功信息后与Web服务器之间建立WebSocket
通信通道；
S107、WebSocket通信通道建立后开始交互体渲染循环，该循环由服务器端和客户端共
同完成。
进一步，所述交互体渲染循环的实施流程包括：
S107-1、客户端的交互动作监听模块通过为交互工作页面的每个可交互元素编写的
Javascript回调函数用以监听用户交互操作；
S107-2、发生用户交互事件后，回调函数将交互事件的参数封装成{event_name:name,
event_parameters:parameters}的JSON格式移交至客户端的服务器通信模块；
S107-3、客户端的服务器通信模块调用WebSocket对象的发送方法发送给Web服务器；
S107-4、位于Web服务器上的浏览器通信模块收到交互事件消息后将其移交给消息管
理模块；
S107-5、消息管理模块从交互事件JSON结构中提取交互事件名及交互事件参数后更新
事件名对应的渲染参数，将更新后的渲染参数发送给服务该用户的体渲染器实例的GPU体
渲染模块；
S107-6、GPU体渲染模块将新的渲染参数拷贝到渲染服务器GPU的显存后重新开始体渲
染迭代计算；
S107-7、GPU体渲染模块根据自适应优化组件提供的信息确定每次图像输出所需的迭
代计算次数n，经过n次迭代计算后输出一次渲染图像；
S107-8、渲染图像经过压缩编码后发送到Web服务器的消息管理模块；
S107-9、Web服务器的消息管理模块确定对应用户地址后将压缩后的图像移交给浏览
器通信模块；
S107-10、浏览器通信模块通过调用WebSocket的发送方法将压缩图像发送至客户端浏
览器；
S107-11、客户端浏览器接收到压缩图像后将其移交至图像显示模块；
S107-12、图像显示模块对压缩图像进行解码后由HTML5的canvas标签显示。
其中，客户端的用户交互界面上设有画布区域、控件组区域、选择数据按钮、传输
函数设置按钮、灯光设置按钮、裁剪面设置按钮和相机参数设置按钮；
点击所述选择数据按钮可返回数据管理页面，同时关闭当前渲染工作；
所述画布区域包含两个功能：
（1）显示接收到的渲染图像；
（2）生成相机位置变换交互事件：a、单指滑动进行相机围绕体数据中心旋转；b、双指捏
合调整相机与体数据中心的距离，距离越近，被渲染的对象越大，反之被渲染的对象越小；
c、三指滑动进行相机平移；
用户通过点击传输函数设置按钮、灯光设置按钮、裁剪面设置按钮和相机参数设置按
钮进行传输函数、灯光参数、裁剪面和相机参数的设置，所需控件显示在控件组区域内。
优选的，传输函数设置包括：
（1）颜色设置，设置体数据不同数值在渲染时对应的颜色；
（2）密度设置，设置MCPT渲染算法中体数据不同数值代表的透光程度；
灯光参数设置包括：
（1）灯光个数，可增减光源个数；
（2）灯光颜色，每个光源颜色可独立设置；
（3）灯光大小，每个光源的面积大小可独立设置；
（4）灯光位置，每个光源的位置可独立设置，为渲染对象的不同部分提供不同光照；
（5）HDR光源，选择不同的HDR图片作为环境光，增强渲染真实感；
裁剪面设置可同时在X、Y和Z三个方向放置裁剪面并分别设置三个裁剪面的位置，显示
渲染数据的内部结构；
相机参数设置包括：
（1）视角（Field Of View, FOV）设置，调整视角大小可调整渲染图像内容的范围；
（2）光圈大小，调整不同光圈大小可提供不同的景深效果，增强渲染真实感；
（3）曝光值，渲染器输出的原始图像采用HDR格式，设置不同的曝光值可调整图像的整
体明暗度。
本发明的上述技术方案的有益效果如下：本发明采用自适应算法连接渲染服务器
器和Web服务器可较大地缩短整个渲染过程所需时间，提高系统性能，使用户在不同的网络
环境中均可以较快的速度获得高质量渲染图像。在大带宽低延迟的局域网内，渲染服务器
能通过缓冲队列的状态较快调整其每次图像输出间隔使得其输出速度与网络承载能力相
平衡，并能相对平稳保持该状态，因此用户在整个渲染过程中能以较流畅的视觉体验观察
图像的输出过程。在网络传输情况难以预测的广域网环境中，渲染服务器的计算速度远大
于Web服务器的输出速度，此时渲染服务器会调整每次图像输出的迭代计算次数至较大的
值，因此渲染服务器每次输出图像的时间间隔变大，在渲染过程中输出较少图像，所以虽然
图像输出帧率不高，但整个渲染过程所需时间基本不变。
附图说明
图1为本发明的总体设计方案图；
图2为本发明一个交互渲染循环的数据流向图；
图3为本发明的自适应渲染服务器与Web服务器连接算法流程图；
图4为本发明客户端交互渲染页面示意图。
附图标记说明：
1、选择数据按钮；2、画布区域；3、传输函数设置按钮；4、灯光设置按钮；5、裁剪面设置
按钮；6、相机参数设置按钮；7、控件组区域。
具体实施方式
为使本发明要解决的技术问题、技术方案和优点更加清楚，下面将结合附图及具
体实施例进行详细描述。
如图1所示，一种面向移动设备的真实感体渲染和交互系统，包括服务器端和客户
端，所述客户端包括客户端浏览器，所述服务器端划分为渲染服务器、Web服务器以及连接
渲染服务器和Web服务器的耦合组件，计算量较大的体渲染任务由服务器端的渲染服务器
加速完成；Web服务器负责Web页面的处理、发送渲染图像并接收交互事件；耦合组件用于连
接输出图像速度不一致的渲染服务器和Web服务器。
所述耦合组件包括自适应渲染服务器图像速度调整模块和图像压缩模块，所述自
适应渲染服务器图像输出速度调整模块缓冲队列连接渲染器和Web服务器，当缓冲队列被
填满时说明渲染服务器输出图像速度高于Web服务器发送图像的速度，此时增大渲染器输
出图像的时间间隔，减小其输出速度；当缓冲队列被取空时则说明Web服务器发送图像速度
高于渲染服务器输出图像的速度，此时需要减小渲染器输出图像的时间间隔，增大其输出
速度。
所述图像压缩模块为了在不同网络环境下提高交互刷新率，对每次重新迭代渲染
的前几十帧图像采用较低的JPEG质量压缩，提高压缩率；其余中间渲染结果采用中等偏高
的JPEG质量压缩，在保证一定压缩率的条件下保持较好的图像质量；最终的高质量渲染结
果采用PNG格式压缩，避免图像细节丢失。
服务器端按功能分，包括GPU体渲染模块、消息管理模块和浏览器通信模块，其中，
所述GPU体渲染模块包括渲染服务器管理单元、体渲染单元、图像输出单元。渲染服务
器管理单元从渲染服务器集群中选择一台计算资源充足的主机，启动体渲染单元；体渲染
单元是采用蒙特卡罗路径追踪（Monte Carlo Path Tracing, MCPT）的物理真实感体渲染
器，体渲染单元从服务器端的体数据存储服务器中将体数据拷贝到渲染服务器的显存中，
设置渲染参数，进行渐进式迭代渲染，将迭代渲染结果移交至图像输出单元；图像输出单元
根据耦合组件的状态信息决定是否将图像送入耦合组件缓冲队列。
所述消息管理模块包括图像数据分发单元和交互事件分发单元。图像数据分发单
元为图像数据增加用户信息，将其移交至浏览器通信模块；交互事件分发单元从交互事件
信息中提取用户信息、交互事件名称和交互事件参数，根据用户信息将交互事件分发至GPU
体渲染模块。
所述浏览器通信模块包括图像数据发送单元和交互事件接收单元。图像数据发送
单元根据图像数据的用户信息将其发送至对应用户；交互事件接收单元负责接收客户端浏
览器发送的交互事件信息并将其移交至消息管理模块。
所述客户端浏览器只需接收并显示Web服务器发送的渲染图像，并将用户产生的
交互事件发送至Web服务器。
客户端可以分为图像显示模块、交互动作监听模块和服务器通信模块，其中，
所述图像显示模块根据接收到的压缩图像格式选择相应的解压算法对图像数据进行
解压并在页面上显示。
所述交互动作监听模块监听图像旋转、缩放和平移操作，传输函数改变操作，灯光
参数改变操作，裁剪面设置操作，相机参数设置操作，侦测到交互操作后将交互事件封装到
JSON结构体中并移交至服务器通信模块。
所述服务器通信模块包括图像数据接收单元和交互事件发送单元，图像数据接收
单元负责接收来自Web服务器的压缩渲染图像，将其移交至图像显示模块；交互事件发送单
元负责将封装好的交互事件消息发送至Web服务器。
如图1~3所示，本发明的面向移动设备的真实感体渲染和交互系统的工作方法包
括如下步骤：
S101、用户需要使用远程真实感体渲染系统时通过浏览器输入该系统Web服务器的主
机地址，浏览器向Web服务器发送请求登录页面的HTTP请求，Web服务器返回登录页面的
HTML内容；
S102、用户输入用户名及密码等验证信息后向Web服务器发送登录验证请求。验证通过
后Web服务器返回体数据管理页面；
其中，体数据管理页面的逻辑处理包括：
S102-1、从服务器获得该用户已上传的体数据，在页面上列出数据列表；
S102-2、用户可删除已有体数据，向服务器发送删除请求；
S102-3、用户可选择上传新体数据，从本地选择一个或多个体数据上传至体数据存储
服务器；
S102-4、从列表中选择一个体数据进行渲染。
本发明采用PACS服务器作为体数据的组织和存储服务器，以方便渲染器在渲染前
能快速的调回使用。
S103、用户选定目标渲染体数据后，Web服务器向渲染服务器发送启动体渲染器实
例的指令，并将体数据描述信息发送给渲染服务器；
S104、渲染服务器收到启动指令及体数据描述信息后创建一个体渲染器实例；从PACS
服务器中检索出所需渲染的体数据后将体数据复制到渲染服务器GPU的显存中并启动体渲
染器实例，开始渲染体数据，渲染服务器采用CUDA C或Open CL编写以利用GPU的大规模并
行计算能力加速体渲染计算。
S105、Web服务器确认体渲染器实例启动后向客户端浏览器发送渲染服务器启动
成功信息和如图4所示的交互渲染工作页面；
S106、客户端浏览器收到渲染服务器启动成功信息后与Web服务器之间建立WebSocket
通信通道；
说明：WebSocket是一种基于TCP协议的全双工通信方式，服务器可以在无浏览器请求
的情况下向已建立连接的浏览器推送消息，与此同时，浏览器也可向服务器发送请求。
S107、WebSocket通道建立后开始交互体渲染循环，该循环由远程服务器端和客户
端共同完成。
其中，所述交互体渲染循环的实施流程如图2所示，包括：
S107-1、客户端的交互动作监听模块通过为交互工作页面的每个可交互元素编写的
Javascript回调函数用以监听用户交互操作；
S107-2、发生用户交互事件后，回调函数将交互事件的参数封装成{event_name:name,
event_parameters:parameters}的JSON格式移交至客户端的服务器通信模块；
S107-3、客户端的服务器通信模块调用WebSocket对象的发送方法发送给Web服务器；
S107-4、位于Web服务器上的浏览器通信模块收到交互事件消息后将其移交给消息管
理模块；
S107-5、消息管理模块从交互事件JSON结构中提取交互事件名及交互事件参数后更新
事件名对应的渲染参数，将更新后的渲染参数发送给服务该用户的体渲染器实例的GPU体
渲染模块；
S107-6、GPU体渲染模块将新的渲染参数拷贝到渲染服务器（GPU）的显存后重新开始体
渲染迭代计算；
S107-7、GPU体渲染模块根据自适应渲染服务器图像速度调整模块提供的信息确定每
次图像输出所需的迭代计算次数n，经过n次迭代计算后输出一次渲染图像；
S107-8、渲染图像经过压缩编码后发送到Web服务器的消息管理模块；
S107-9、Web服务器的消息管理模块确定对应用户地址后将压缩后的图像移交给浏览
器通信模块；
S107-10、浏览器通信模块通过调用WebSocket的发送方法将压缩图像发送至客户端浏
览器；
S107-11、客户端浏览器接收到压缩图像后将其移交至图像显示模块；
S107-12、图像显示模块对压缩图像进行解码后由HTML5的canvas标签显示。
渲染服务器输出一帧图像的时间为，
其中，为迭代计算时间，即一次图像输出中所有单次迭代计算时间总和；β为GPU
拷贝图像至主机内存所需时间，由数据大小和硬件性能决定；γ为图像编码压缩时间，其大
小取决于图像的内容和图像的压缩质量。
若每次迭代计算的结果均向客户端浏览器输出，则迭代计算时间仅占Φ的一小部
分，渲染集群输出图像性能受β和γ的限制较大。但分析表明无需输出所有中间渲染图像，
因此可以通过调整中的迭代计算次数n以及图像编码压缩时间获得更好的输出性能。
耦合组件采用FIFO图像数据缓冲队列连接渲染服务器和Web服务器这两种输出速
度不同的系统，渲染服务器以较高的速率向队列输出数据，而Web服务器则以较低的速率读
取数据。令n和n_max分别为渲染服务器一次图像输出的迭代渲染次数和迭代渲染次数阈
值，本发明提出的渲染服务器和Web服务器的自适应连接算法主要流程为：
渲染开始时，初始化一个空图像数据队列。
渲染器以最快的速度（n = 1）将图像数据送入队列，以确保队列中有充足图像可
供Web服务器连续发送至客户端浏览器。
算法初始设置一个最大迭代计算次数的阈值n_max，表示渲染服务器输出速率能
使Web服务器流畅输出的最大估计迭代计算次数。
若渲染服务器发现缓冲队列已满，则表明渲染服务器输出图像速率超出了Web服
务器发送承载量；算法通过改变渲染服务器每次图像输出的迭代计算次数以调整每次图像
输出的时间间隔，迭代计算次数越多，输出时间间隔越大，但下一次输出的图像质量越高。
队列满时若当前迭代次数n 小于n_max则进行乘法增加，以更快获得使渲染服务
器输出速度和Web服务器输出速度相平衡的n 值。
若渲染服务器依然检测到队列满，则进行加法增大以避免迭代计算次数过大（图
像输出时间间隔过大）导致系统发送卡顿。
Web服务器以当前网络可承载速度从图像数据队列头部取出图像数据。
当Web服务器检测到缓冲队列为空时，表明渲染服务器的图像输出速率过低，需增
大其输出速率；算法通过乘法减小渲染服务器当前迭代渲染次数n 以缩短图像输出时间间
隔，从而使渲染服务器快速输出；更新n_max=n/2获取当前网络状态下渲染服务器单次图像
输出最大估计迭代次数。
每次更新渲染参数后，渲染服务器重新开始迭代渲染。最初迭代渲染输出的几十
帧图像包含大量噪点，其压缩效率较低。图像压缩模块对交互过程中，每次重新渲染输出的
前50帧图像采用较低的JPEG质量（20/100）进行压缩，以大幅减小这些图像的数据大小，以
最大可能在较差网络条件下提高交互刷新速率。
通常50帧之后的图像只有在交互停止后才能得到输出，对这些图像采用数值为75
的JPEG质量压缩，在获得10:1的压缩率的条件下能获得较好的图像质量。
所有迭代计算完成后输出的最终高质量图像采用无损PNG格式压缩以避免图像细
节丢失。
如图4所示，客户端的用户交互界面上设有画布区域2、控件组区域7、选择数据按
钮1、传输函数设置按钮3、灯光设置按钮4、裁剪面设置按钮5和相机参数设置按钮6。
点击所述选择数据按钮1可返回数据管理页面，同时关闭当前渲染工作。
所述画布区域2包含两个功能：
（1）显示接收到的渲染图像；
（2）生成相机位置变换交互事件：a、单指滑动进行相机围绕体数据中心旋转；b、双指捏
合调整相机与体数据中心的距离，距离越近，被渲染的对象越大，反之被渲染的对象越小；
c、三指滑动进行相机平移。
用户通过点击传输函数设置按钮3、灯光设置按钮4、裁剪面设置按钮5和相机参数
设置按钮6进行传输函数、灯光参数、裁剪面和相机参数的设置，所需控件显示在控件组区
域7内。
其中，传输函数设置包括：
（1）颜色设置，设置体数据不同数值在渲染时对应的颜色；
（2）密度设置，设置MCPT渲染算法中体数据不同数值代表的透光程度；
灯光参数设置包括：
（1）灯光个数，可增减光源个数；
（2）灯光颜色，每个光源颜色可独立设置；
（3）灯光大小，每个光源的面积大小可独立设置；
（4）灯光位置，每个光源的位置可独立设置，为渲染对象的不同部分提供不同光照；
（5）HDR光源，选择不同的HDR图片作为环境光，增强渲染真实感。
裁剪面设置可同时在X、Y和Z三个方向放置裁剪面并分别设置三个裁剪面的位置，
显示渲染数据的内部结构。
相机参数设置包括：
（1）视角（Field Of View, FOV）设置，调整视角大小可调整渲染图像内容的范围；
（2）光圈大小，调整不同光圈大小可提供不同的景深效果，增强渲染真实感；
（3）曝光值，渲染器输出的原始图像采用HDR格式，设置不同的曝光值可调整图像的整
体明暗度。
以上所述是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员
来说，在不脱离本发明所述原理的前提下，还可以作出若干改进和润饰，这些改进和润饰也
应视为本发明的保护范围。