基于WebGL的交互平台设计高级图形学大作业论文.doc

基于WebGL的交互平台设计 徐彬 2111512104 指导老师：张繁 摘要:介绍了WebGL技术及其应用用框架Three. js，描述了交互平台基木架构搭建和各个功能模块的设计与实现过程，并针对OBJ格式的3维模型提出一个模型加载算法解析模型的顶点、面和法向量等数据，然后把三维模型加载到网页平台中来。 关键词:WebGL;Three. js;模型加载;交互设计 1.课题背景： 随着GPU绘制技术和互联网应用的飞速发展，WebGL技术的异军突起掀起 了一场图形绘制领域的新革命，它加速了web应用的发展，在不需要任何额外插件的基础上使得交互式3D网页内容的呈现成为了一种潮流趋势。 在过去的十年里，互联网技术有了突飞猛进的发展，逐渐参透到人们生活的各个角落，使人们的生活方式产生了巨大的改变[1]。在互联网的各个领域中，发展和变化最快的就是Web应用的发展，已经成为当今网络技术的研究重点[2]。随着人们对网页体验的要求不断提高，网页正在逐渐地从传统的二维平而网页向交互式三维网页发展。 但是，早期的技术并不成熟，比如Java Applet所实现的非常简单的Web交互三维图形程序，不仅需要下载一个巨大的支持环境，而且画而非常粗糙，性能也很差，其主要原因就在于Java Applet在进行图形渲染时，并没有直接利用到图形硬件本身的加速功能[3]。 后来，Adobe的Flash Player浏览器插件和微软Silverlight技术相继出现，逐渐成为了Web交互式三维图形的主流技术。与Java Applet技术不同，这两种技术直接利用操作系统提供的图形程序接口，来调用图形硬件的加速功能，从而实现了高性能的图形渲染。但是，这两种解决方案都存在一些问题。首先，它们是都是通过浏览器插件形式实现的，这就意味着对于不同的操作系统和浏览器需 要下载不同版本的插件;其次，对于不同的操作系统，这两项技术需要调用不同图形程序接口。这两点不足在很大程度上限制了Web交互式三维图形程序的使用范围。 普通的Web浏览器正日益成为能应用丰富3D交互式程序的一个平台[4]。2014年10月，万维网联盟完成了HTML5的标准制定，而作为HTML5标准之一的WebGL很好地解决了上述两个问题:首先，它通过JavaScript脚本实现Web交互式三维图形制作程序的设计与实现，无需任何浏览器插件支持;其次，它利用底层图形硬件的加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL ES2.0实现的。 利用WebGL技术构建三维交互平台并加载三维模型，实现鼠标与键盘和网页三维场景中的模型进行互动。目前，国内关于WebGL和HTML5的研究还是比较少的。 WebGL技术及Three.js介绍 WebGL是基于OpenGL ES 2.0的一种新的API，在浏览器中与Web页而的其他元素可以无缝连接;WebGL具有跨平台的特性，可以运行在从手机、平板到家用电脑的任何主流操作系统当中[5]。WebGL运行时其内部主要元素之间的关系如图1所示。 如图1所示，浏览器打开包含Canvas元素和JavaScript程序的网页，然后获取3D上下文环境(3Dcontext)对象，该对象可以作为在Canvas元素上绘制3D场景的接口，并且还可以把OpenGL ES2.0和浏览器连接在一起。其中，Canvas是HTML5引入的一个新元素，该元素可以在页而上指定位置实时渲染2D图像和3D图像，开发者不仅可以通过HTML5CanvasAPI在Canvas画布上显示各种形状、渲染文宇或者直接显示一幅图片，还可以自行操作画布颜色，并对其进行旋转，调整色彩透明度和填充色等，这些操作都是通过JavaScript程序实现的。 但是，直接基于WebGL开发交互式三维网页应用是非常困难的，需要对OpenGL、三维设训一以及WebGL的原生API非常了解，而且在实现过程中也极易出错。为了解决这些问题，一些开发人员开发出了许多基于WebGL的开源框架，从而为其他开发人员开发类似的程序提供了便利。口前·比较流行的WebGL框架有Three. js,PhiloGL、Babylon.js, SceneJS等。每个框架都有自己的特点。其中，Three. js是一个轻量级的用于在浏览器中创建3D计算机图形图像应用程序的JavaScript库万[6]。选用Three. js来开发系统，主要是因为Three. js是口前应用最广泛的WebGL框架，其文档资料也是最丰富的，而且完全采用JavaScript编写而成，非常适用于三维网页的开发[7]。 交互系统构建 3.1 基