虛擬電路實驗平臺

劉家祺 王宏坡

摘 要：隨著計算機技術的快速進步，科技的果實逐漸被大眾享用。例如學生的網上學習，然而學習更需要實踐的積累，而不能一直停留在理論的學習中，由于實驗條件的限制，虛擬電路實驗平臺可以提供學生相關經典電路實驗的操作，便于老師的教學和學生的學習。

本系統是基于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月，漢族，安徽宿州人，天津農學院，本科在讀，計算機科學與技術專業方向.

通訊作者：王宏坡