基于webgl和html5的网页3d动画的设计与实现

《基于webgl和html5的网页3d动画的设计与实现》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、ISSN1009-3044E-mail:eduf@cccc.net.cn第7卷第28期(2011年10月)第Com7p卷第uterK28now期ledge(2011andTec年hno10logy月电脑知识)与技术ComputerKnowledgeandTechttp://www.dnzs.net.cnhnology电脑知识与技术Vol.7,No.28,October2011.Tel:+86-551-56909635690964基于webGL和HTML5的网页3D动画的设计与实现谭文文，丁世勇，李桂英（山东科技大学，山东青岛266071）摘要：该文介绍了webGL如何把JavaScrip

2、t和OpenGLES2.0结合在一起，对网页中的三维可视化图像进行实现，讲述了基于we-bGL和HTML5的应用程序回调函数的具体用法与实现，并通过具体的应用实例验证了设计的正确性。关键字：webGL；JavaScript；OpenGLES2.0；HTML5中图分类号：TP311文献标识码：A文章编号：1009-3044(2011)28-6981-03Web-3DanimationDesignandImplementationBasedonwebGLandHTML5TANWen-wen,DINGShi-yong,LIGui-ying(ShandongUniversityofScience

3、andTechnology,Qingdao266071,China)Abstract:Inthispaper，itintroduceshowwebGLcombinesJavaScriptwithOpenGLES2.0forthewebof3Dvisualizationimage.IttellsthespecificusageandimplementbasedontheapplicationcallbackfunctionsofwebGLandHTML5,andshowsthecorrectnessofthede-signthroughanapplicationexample.Keywor

4、ds:webGL;JavaScript;OpenGLES2.0;HTML5WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGLES2.0结合在一起，通过增加OpenGLES2.0的一个JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。HTML5将成为HTML、XHTML以及HTML

5、DOM的新标准。HTML的上一个版本诞生于1999年。自从那以后，Web世界已经经历了巨变。HTML5仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5支持[4]。1程序设计中所引用的关键技术介绍1.1HTML5的Canvas元素HTML5的canvas元素使用JavaScript在网页上绘制图像。相当于画布，它是一个矩形区域，您可以控制其每一像素，canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。我们可以通过下面语句创建并规定canvas元素的id、宽度和高度：

6、vas>canvas元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成：varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);上述这段语言完成了在canvas中绘制一个红色的矩形。1.2webGL中的可编程处理器WebGL中引用了OpenGLes2.0的可编程处理器，这也是webGL的关键所在，即顶点着色器和片元

7、着色器，所以接下来本文详细论述了可编程管线是如何对数据进行处理的。1.2.1可编程管线的具体流程图1描述了顶点着色器和片元着色器在可编程管线中的具体位置以及整个API的调用顺序，这个示意图也向我们展示了可编程管线的流处图1webGL的可编程管线图收稿日期：2011-07-25基金项目：青岛市科技发展计划项目（批准号：11-2-4-4-(6)-jch）；山东省优秀中青年科学家科研奖励基金（批准号：BS2011DX029）作者简介：谭文