基于WebGL标准的家庭娱乐终端上Web3D渲染的实现

(武汉铁路职业技术学院电子电气工程系，湖北 武汉430074）

近几年来，家庭娱乐终端设备的性能在不断增强，如高清机顶盒、智能电视机等都可以支持越来越复杂的应用。然而，在这些终端上进行3D图形的渲染还是一个比较困难的任务。目前常见的家庭娱乐终端3D渲染方式有3种[1-2]：3D渲染硬件架构、远端3D渲染架构(渲染过程由远端功能强大的服务器，渲染结果通过网络以视频方式传送到家庭娱乐终端设备）、软件架构(整个渲染过程在家庭娱乐终端上执行）。第3种方法非常有前景，但是比起另外2种所引起的关注度要小。最有成绩的一个结果是对传统基于多边形3D渲染方式的替代技术[3]。其目的是降低3D渲染过程的复杂性，而不显著降低渲染图形的品质。近几年，OpenGL ES作为一个家庭娱乐终端设备基本的3D图形渲染标准出现了，OpenGL ES的出现是基于传统的多边形渲染方法。下面，笔者在家庭娱乐终端设备上进行基于多边形的Web3D内容渲染，使用WebGL API创建渲染引擎，实现传统的着色、光照及导航算法。

1 系统体系架构

笔者在开源浏览器WebKit的基础上，按照WebGL规范要求，创建了如图1所示的3D图形渲染引擎，实现传统的着色、光照和导航过程。该引擎由4个模块构成。

1）渲染器模块 其主要功能是管理所有的渲染过程，在必要的时候调用其他的模块。它的输入包含3D元件数据及用户交互事件的XML文件。它的输出是用户当前视角的3D场景图。

图1 WebKit浏览器中Web3D组件结构示意图

2）事件管理器模块 其主要功能是负责处理用户与浏览器交互时的用户事件(如着色模型的改变）及实现动画功能的动画事件(如定时器更新事件）。事件管理模块还包含从XML解析模块传入的Web3D场景路径。事件管理模块在接收到渲染器模块输入的事件后，按要求更新Web3D场景路径，并将更新的Web3D场景路径输出到场景管理模块，由其做进一步的显示处理。

3）场景管理模块 场景管理模块主要负责Web3D场景的可视化处理过程。其接收事件管理器输出的路径更新信息及XML解析的场景节点信息，调用渲染器的渲染呈现函数，由渲染器模块在终端屏幕上呈现当前3D场景的渲染结果。

4）解析模块 其主要功能是进行XML文件解析，提取文件中的3D场景节点及路径，分别输送到场景管理和事件管理模块。

图2 场景创建和渲染的流程示意图

2 3D渲染呈现

3D场景的建立和渲染管线工作流与标准的3D虚拟现实应用的流程类似，其流程如图2所示。嵌入动态内容的Web页面中，所有的页面逻辑都在HEAD部分定义，在BODY部分有页面结构及UI元件。在这些元件中，最重要的当然是Canvas对象，也就是WebGL实现屏幕渲染的地方。

Canvas在脚本的末尾输出的区域register，对于一个脚本对象来说，它是一个连接各种canvas事件的特殊函数。

对3D场景建立的来说，glMolViewer对象是主要成员，这个对象的结构包含WebGL提供的事件处理子系统。Canvas事件触发一个专有函数，WebGL在JavaScript语言的基础上开发了一个动态加载和删除的listener和redirect时间。下面这个例子是一个listener示例：

初始化和数据加载由load函数完成，它是渲染器的主要特性，包含输入数据的加载和着色器的编译。

这种整体的数据管理方式对一个单一的、紧凑的网页数据库来说是很好的方式。更多的的时候，还需要利用异步加载机制，使得大型的流／离散数据库的加载或者用户动态加载远程文件更加有效。绘制函数中包含了实际的渲染代码：

这个函数可以持续或按需调用，当用sglRegisterCanvas函数注册一个Canvas后，如果参数是0，那么Canvas只是重画，否则该参数表示画面呈现理想的帧率。在每一个 “tick”，WebGL将调用更新函数，然后重画。在这2种情况中，只要检测到一个WebGL帧缓冲区变化，Html渲染引擎将启动一个页面制作操作。GLSL着色器包含在Web页面的HEAD部分的脚本实体。

一个3D娱乐场景的实现代码可以按上述示例的方式逐一设计和组织。这个简单的示例是一个优化的起点，对于有经验的图形编程人员来说非常的简单。

[1]Antochi I，Juurlink B，Vassliadi，S．Selecting the Optimal Tile Size for Low-Power Tile-Based Rendering [A]．Proceedings of the thirteenth Annual Workshop on Circuits，Systems and Signal Processing [C]．ProRISC，2002：1-6．

[2]Burigat S，Chittaro L．Location-aware Visualization of VRML Models in GPS-based Mobile Guides [A]．Proceedings of the tenth international conference on 3DWeb technology [C] ．New York：ACM Press，2005：57-64．

[3]Buttussi F，Chittaro L，Nadalutti D．H-Animator：A Visual Tool for Modeling，Reuse and Sharing of X3DHumanoid Animations [A]．Proceedings of the eleventh international conference on 3D Web technology [C]．New York：ACM Press，2006．