基于WebGL的三维算法演示系统的设计与实现

发布时间：2018-08-21 08:43

【摘要】：算法是计算机学科中的重要基础和核心专业知识。然而算法的学习过程中涉及到大量抽象和复杂的概念,学生极易感到枯燥,失去学习兴趣。采用算法演示系统可加深学生对算法知识的理解,提高教学质量。目前,国内外已有一些算法演示系统应用在教学活动中,并取得了较好的效果。但这些算法主要是二维平面展示,且普遍存在着运行环境复杂,操作繁琐,交互方式差,运行界面不友好等问题。为改善上述情况,论文基于WebGL技术设计和实现了一个三维的算法演示系统。WebGL是一种3D绘图标准,通过WebGL技术,前端web开发工程师可以轻松的在浏览器里创建和展示复杂的3D场景和模型。该系统共分为算法演示和自定义代码编辑两大模块。算法演示模块能够在浏览器中利用3D模型对算法执行过程进行详细的演示,而且用户可以对算法的参数和算法的执行步骤进行手动控制。目前算法演示模块已经完成了对10种常见算法的可视化。自定义代码编辑模块为用户提供了自定义代码编辑器,用户可以根据自己的理解使用编辑器对更多的算法进行可视化实现。这对于系统内容丰富化的推进具有极大的推动作用。因此基于WebGL的三维算法演示系统的开发应用具有极其广阔的前景。论文着重介绍了相关技术、系统的需求分析、系统总体设计、关键问题的解决和系统详细设计、系统的实现与测试等内容。在相关技术中,详细介绍了开发过程中所使用的技术。在系统需求分析阶段,从功能性需求和非功能性需求两个方面对系统进行详细分析明确了系统的各项要求。在系统总体设计阶段,提出了组件化和模块化的设计原则,确定了系统的总体功能框架,并通过系统功能架构图进行全面展示。在详细设计阶段,首先介绍了系统中一些关键问题的解决方案,其次利用时序图对各个算法进行详细的分析,同时提取出各个算法中相同的功能逻辑模块,设计相应的实现函数。这大大提高了代码的重复利用率和系统开发的速度。其中包括冒泡排序、插入排序、选择排序、快速排序、归并排序、希尔排序、折半查找、二叉树-堆、图的深度遍历和广度遍历、单链表的增删改查共10种算法。在系统实现和测试阶段,通过关键代码和界面截图对系统功能的实现情况进行展示。并按照系统的功能测试用例对系统各个模块和算法进行全面的测试,根据出现的问题进行修改和完善。论文对基于WebGL的三维算法演示系统的设计与实现过程进行了详细的描述和展示。最后对已完成的工作进行了总结,并对系统以后的完善方向提出了展望。
[Abstract]:Algorithm is an important foundation and core professional knowledge in computer science. However, the learning process involves a large number of abstract and complex concepts, students can easily feel boring and lose interest in learning. Using the algorithm demonstration system can deepen the students' understanding of the algorithm knowledge and improve the teaching quality. At present, some algorithms demonstration systems have been used in teaching activities at home and abroad, and good results have been obtained. But these algorithms are mainly two-dimensional plane display, and there are many problems such as complex running environment, complicated operation, poor interaction mode, unfriendly running interface and so on. In order to improve the above situation, this paper designs and implements a 3D algorithm demonstration system. WebGL is a 3D drawing standard based on WebGL technology. Front-end web development engineers can easily create and display complex 3D scenes and models in browsers. The system is divided into two modules: algorithm demonstration and custom code editing. The algorithm demonstration module can use 3D model in the browser to demonstrate the algorithm execution process in detail, and the user can manually control the parameters of the algorithm and the execution steps of the algorithm. At present, the algorithm demonstration module has completed the visualization of 10 common algorithms. The custom code editing module provides the custom code editor for the user. The user can use the editor to visualize more algorithms according to his own understanding. This is a great push to enrich the content of the system. Therefore, the development and application of 3D algorithm demonstration system based on WebGL has a very broad prospect. This paper mainly introduces the related technology, the requirement analysis of the system, the overall design of the system, the solution of the key problems, the detailed design of the system, the realization and test of the system, and so on. In the related technology, the technology used in the development process is introduced in detail. In the phase of system requirement analysis, the requirements of the system are analyzed in detail from the two aspects of functional requirements and non-functional requirements. In the stage of the overall design of the system, the design principles of componentization and modularization are put forward, the overall functional framework of the system is determined, and the system function architecture diagram is presented. In the detailed design phase, the solution of some key problems in the system is first introduced, and then each algorithm is analyzed in detail by using sequence diagram, and the same functional logic module is extracted from each algorithm. Design the corresponding realization function. This greatly improves the code reuse rate and system development speed. It includes bubble sort, insert sort, selection sort, quick sort, merge sort, Hill sort, half search, binary tree-heap, depth traversal and breadth traversal of graphs, and the addition and deletion of single chain table. In the phase of system implementation and testing, the realization of system function is demonstrated by key code and interface screenshots. According to the system function test cases, the system modules and algorithms are tested comprehensively and modified and improved according to the existing problems. In this paper, the design and implementation of 3D algorithm demonstration system based on WebGL are described and demonstrated in detail. Finally, the finished work is summarized and the future improvement direction of the system is prospected.
【学位授予单位】：山东师范大学
【学位级别】：硕士
【学位授予年份】：2017
【分类号】：TP311.52

【参考文献】