郭稳稳 仲梁维

摘  要：随着网页技术的快速发展，在网页上能够创建更多的复杂页面。本文使用WebGL技术构建虚拟三维场景，在三维场景中加载渲染中间格式的三维模型，实现三维模型在网页环境下的可视化展示;并使用射线相交法、几何变换、相机投影，运用计算机图形学相关知识，实现模型的交互，主要表现为鼠标点选模型，模型的旋转、缩放、平移，通过鼠标手势改变相机的位置和姿态，实现了虚拟场景的漫游，从不同角度对模型进行观察。通过以上研究，构建了一个具有良好交互性的沉浸式场景漫游系统。

关键词：WebGL;模型交互;可视化;三维场景;漫游

中图分类号：TP399     文献标识码：A

Abstract： With rapid development of web technology， more complex pages can be created on the web. This paper proposes to use WebGL （Web Graphics Library） technology to construct virtual 3D scenes， at which intermediate format 3D models are loaded and rendered to realize visual display of 3D models in web environment. Ray intersection， geometric transformation， camera projection， and related knowledge of computer graphics are used to realize interaction of the model， which is mainly manifested as mouse click on the model， the model's rotation， zoom， and translation. Mouse gestures can change position and posture of the camera to realize roaming of the virtual scene， and observe the model from different angles. Through the above research， an immersive scene roaming system with good interaction is constructed.

Keywords： WebGL; model interaction; visualization; three-dimensional scene; roaming

1   引言（Introduction）

互联网的快速发展推动着人们获取知识方式的进步和升级[1]。二维网页以文字、图片、视频组合的方式呈现的信息有限，对三维模型信息的展示具有有限性和不充分性，传统的二维网页获取信息的方式已无法满足人们的要求。三维图形相对二维图形有着无法比拟的直观性，因此越来越多的开发人员将三维应用融入Web页面中去[2]。目前，对三维应用的研究主要集中在优化页面性能，优化页面呈现效果，提高用户体验。

WebGL是网页版的3D绘图协议，它源于免费的、统一的、标准的OpenGL协议，将JavaScript和OpenGL ES进行绑定，通过HTML5的Canvas标签获取WebGL上下文对三维模型进行渲染。同时，WebGL可以调用电脑GPU进行硬件加速，大大提高了渲染质量和效率。目前，几乎所有的浏览器都已经支持WebGL，不需要依赖任何插件且兼容性好[3]。……