html 图形库,基于HTML5 WebGL的3D图形库的设计与实现

摘要：

WebGL(Web Graphics Library)技术使得前端开发者可以使用JavaScript脚本代码在HTML5 canvas元素窗口中绘制三维图形.直接利用WebGL开发可交互的三维图形应用既复杂又费时.开发者需要了解WebGL的内部细节,学习复杂的着色器语法,才能用好WebGL.因此,前端开发者通常使用一个封装了 WebGL功能的类库来进行三维图形应用的开发,该类库要能为开发者提供一套非常易用的JavaScriptAPI.这样在不必学习WebGL细节的情况下,开发者也可以使用这些API创建漂亮的三维图形.本文所设计和实现的3D图形库就是这样一个类库.因此,本文的主要工作如下:(1)分析现有的基于WebGL的3D图形库,设计3D图形库的大部分功能.为开发者提供场景,相机,渲染器来绘制三维图形;利用层次结构组织场景中的三维图形,以此方便三维图形的定位和变换;使用骨骼以及骨骼混合算法进行三维图形的变形;为三维图形设计并实现补间动画等.(2)解决大部分3D图形库不将图形选取和碰撞当作事件来处理的问题,使用射线处理三维图形的选取然后产生选取事件,使用层次包围盒算法进行碰撞检测然后产生碰撞事件,以此设计并实现3D图形库自己的事件处理机制.(3)使用AABB层次包围盒来提高检测图形选取和碰撞事件的效率,并改进AABB层次包围盒的更新方法,进一步提高算法的效率.(4)提供载入外部模型文件的方法,以便开发者使用复杂的三维图形.(5)对3D图形库功能和性能进行测试.如此,前端开发者可以使用该3D图形库创建或载入三维图形,控制三维图形的变换,变形,动画等,还可以利用事件处理机制开发三维图形应用的交互功能.

展开