虚拟电路实验平台

刘家祺 王宏坡

摘 要：随着计算机技术的快速进步，科技的果实逐渐被大众享用。例如学生的网上学习，然而学习更需要实践的积累，而不能一直停留在理论的学习中，由于实验条件的限制，虚拟电路实验平台可以提供学生相关经典电路实验的操作，便于老师的教学和学生的学习。

本系统是基于WebGL和Three.js技术的虚拟电路实验平台，主要分为数字电子电路运行仿真算法、动态电路实现、电子元件拾取与放置和服务器实现四个部分。仿真算法主要使用了深度优先搜索和动态规划思想。动态电路实现是使仿真效果极佳。电子元件拾取与放置主要通过mesh模型构建和存储逻辑结构进行遍历。服务器实现为了客户端和数据库的功能交互和信息交流。

关键词：虚拟实验、JS、WebGL、MySQL数据库

一.虚拟电路实验平台概述

1.开发背景

虚拟实验室是一种较为真实的仿真系统，但市面上几乎全部都是2D的虚拟仿真系统，如nobook虚拟实验室及仿真系统。本实验平台是一款针对高等教育中的数字电子电路实验课程而开发的在线双端使用的虚拟实验平台，弥补了关于高等教育仿真实验的空白，模拟了许多经典的数字电子电路实验。

当今社会智能手机已经变成了每个人的必要用品，不仅仅可以成为娱乐游戏的工具，也可以成为学习的工具，近年来，网络学习软件的开发应用愈来愈多。现在网上也有很多实验工具，但是更多的是初高中的物理化学实验，但是有关于更高层面的电子电路实验平台则开发很少，而且很多是2D的效果，所以一款3D的虚拟电路实验平台变成了市场的一种需求。

2.开发目的

本实验系统使用WebGL+Three.js开发。主要是针对各大高校的数字电子电路这一门课程设计，帮助学生自主完成学习过程，同时辅助教师完成授课教学环节。除了一些经典的数字电子电路实验，自由模式的开发，还可以使学生自主创造搭建实验。

由于互联网技术的不断进步和革新，例如中国大学MOOC软件的出现，在线学习的方式变得逐渐火热，因此人们利用零碎时间随时随地的学习。本实验系统正是顺应了这股潮流，因此开发了PC、手机端双端使用的在线虚拟数字电子电路实验平台，针对各大高校数字电子电路这一门课程，帮助学生自主学习，同时辅助老师教学进度与方式。

3.设计思路

首先，对于客户端，即前端的页面显示，主要采用了WebGL技术和Threejs技术相结合来实现，而且使用了3D效果来对系统进行设计，不仅有更好的视觉体验，而且更有贴近实际的感觉，仿真模拟了实验环境和实验工具，让学生置身于虚拟现实的情景之中，不仅可以增加对实验的兴趣而且可以提高实验动手能力。

其次，对于服务器端，主要目的是用Java语言和MySQL数据库来完成的背景下编写代码，使用Java语言的转换来实现机器语言的功能，MySQL数据库用来进行表格的设计及数据整合统计，如，实验详情表、单片机表和实验器件表格等。

4.相关技术

近年来，WebGL 技术得到广泛关注。WebGL 技术支持在浏览器中渲染三维图形[1]，它能直接调用底层 GPU 对图形进行渲染。该技术对浏览器的兼容性强，且支持支持基于本地架构的APP应用[2-3]。

使用WebGL 具有以下优点[4-5]：不用安装额外的插件程序就可以直接在网页中加载和渲染三维场景；它可以直接调用设备的硬件来加速渲染三维场景；开发 Web 三维场景时调用Web 的 3D 图形库非常方便。此系统实现三维虚拟实验平台。

二.平台可行性分析

1.效益分析

电路实验是一个繁琐复杂的过程，而且涉及到方方面面，所以我们在进行物理实验为了能够减少一些资源的消耗，并且提高相应的学习效率，从而开发虚拟电路实验平台会带来更多的经济效率。虚拟电路实验平台的使用，不仅减轻了物理条件及器件的压力，而且简化了实验的条件，一般情况下，我们需要进入到实验室中，而现在只需要在手机端或者电脑端登录系统就可以完成相应的实验任务，不仅节省了时间而且提高了学习频率和便宜性。

2.技术可行性分析

虚拟电路实验平台系统主要采用JS和WebGL作为设计工具，学习起来十分容易并且使用方便快捷。

决定整个虚拟电路实验平台系统可行性的最直接的因素是技术可行性，没有十分强硬的技术作为基石，这个平台就不能够进行正常的使用和获取稳定的运行状态。首先我们需要分析整个虚拟电路实验平台系统使用的技术具有什么特点，其次与平台的应用特点相融合进行更加周全的分析，这样的相互结合分析的方式才能够做好虚拟电路实验平台系统的技术可行性分析。本研究构建的是基于MySQL的虚拟电路实验平台系统，不仅采用了成熟的语言技术，而且利用JS语言和WebGL技术作为研发工具，并将整个系统分为客户端和服务器这两个部分。

3.性能需求分析

一个产品或者系统的出现，总会获得不同的响应程度。本系统操作简易，只要平时有经常使用电脑的习惯都可以进入该系统，而且能够及时掌握实验内容，在进入系统后，即可进行相关实验，对于学生来说，极大地简化了实验的方式，而且利用琐碎时间就可以进入系统进行学习，老师也可以通过此系统查看学生的学习记录和实验情况，给予及时的纠正和教学安排。而且在操作上也是可行的，满足学生、老师的实验需要。

三.平台设计要点

1.概要设计

本虚拟实验平台采用客户端和服务器端两种方式，客户主要进行数据交互的服务器，该服务器主要是处理数据，在客户端实现画面的再现，客户端使用WebGL的开发工具和服务器主要采用Java语言和MySQL数据库技术。

2.结构设计

该平台分为了用户模块和管理员模块，用户模块主要是个人中心的实现，进行实验相关操作的管理、学习進度管理和信息管理。而管理员模块主要的任务是进行用户的管理和系统页面的管理及后台管理和实验器件参数设置的管理。

3.元件设计

用户点击电子元件时，摄像机会发出一道捕捉射线，拾取器件的mesh模型，我们根据mesh模型和其存储的逻辑数据进行遍历，找到该mesh所属的自定义对象，用户再次点击时将其放置到面包孔的所属位置上，放置器件之后需要同时将器件对应的逻辑属性进行更新，方便进行进一步的计算。

由于本数字电子电路实验系统中所有的实验搭建操作都要在面板上进行，而面包板上有许多小孔，为了能够使电子元件能够正确的插入学生指定的位置，我们开发了电子元件坐实脚本，能够准确的将电子元件放置到对应的小孔中。

本试验系统中有多种电子元件，每种元件的模型都不同，因此在学生进行删除电子元件工作的时候，首先需要判断的是学生需要删除元件的种类，然后将选中的电子元件所有属性置空。

四.经验与体会

在大四上学期期末时，导师就与我们联系商定讨论我们的定题和相关想法，最终将题目定了下来，然后进行开题报告的设计和确定，我便开始在学校的图书馆搜集相关文献和资料，面对一些疑难问题则会在网上进行搜索，网络资料库真的是无比丰富，搜集了许多资料之后，我用电脑对这些资料进行了分类整理，而且對其中的问题和要点进行标记，对于不同类别的笔记和内容进行分类的归纳和总结，尽量使总结的材料和论文相符合，从而更好的对论文内容进行编写和设计。遇到甚难的问题则会向老师请教，在老师的细心指导下，了却了心中很多的疑难问题，而且找出了大量的相关论文，认真的阅读，总结笔记，为自己的论文添砖加瓦，而且要避免有重复的观点等问题。

虽然在完成毕业设计系统的过程中有过烦恼，有过悲伤，但是在这段时间内不仅加强了和老师的交流而且在遇到问题时，与同学们一起探讨，找出问题解决问题，不仅提高了学习能力，而且加强了同学之间的感情。通过这段时间也让我明白了以后对待学习与工作要有一丝不苟的态度，而且要具备较强的责任心和一定的沟通能力以及发现问题解决问题的应变能力以及通过与同学的互补学习与交流行成一种团队合作的精神，更有利于完成毕业设计的任务。

参考文献：

[1] Cantor D，Jones B.Web GL beginner's guide[M].Packt Publishing Ltd，2012.

[2] Charland A，Leroux B.Mobile application development： web vs. native[J].Communications of the ACM，2011，54（5）：49-53.

[3] Nazarov R，Galletly J.Native browser support for 3D rendering and physics using WebGL， HTML5 and JavaScript[J].Communications of the ACM，2013，10（5）：21-23.

[4] 欧阳峰，龚桂荣，何列松，面向 WebGL 的矢量数据三维绘制技术[J]，测绘科学技术学报，2016，33（6）：635-638.

[5] 黄若思，李传荣，冯磊，唐伶俐，基于几何的WebGL矢量数据三维渲染技术研究术[J]，遥感技术与应用，2014，29（3）：463-468.

作者简介：

刘家祺，男，生于1998年11月，汉族，安徽宿州人，天津农学院，本科在读，计算机科学与技术专业方向.

通讯作者：王宏坡