虛擬電路實(shí)驗(yàn)平臺(tái)

劉家祺 王宏坡

摘 要：隨著計(jì)算機(jī)技術(shù)的快速進(jìn)步，科技的果實(shí)逐漸被大眾享用。例如學(xué)生的網(wǎng)上學(xué)習(xí)，然而學(xué)習(xí)更需要實(shí)踐的積累，而不能一直停留在理論的學(xué)習(xí)中，由于實(shí)驗(yàn)條件的限制，虛擬電路實(shí)驗(yàn)平臺(tái)可以提供學(xué)生相關(guān)經(jīng)典電路實(shí)驗(yàn)的操作，便于老師的教學(xué)和學(xué)生的學(xué)習(xí)。

本系統(tǒng)是基于WebGL和Three.js技術(shù)的虛擬電路實(shí)驗(yàn)平臺(tái)，主要分為數(shù)字電子電路運(yùn)行仿真算法、動(dòng)態(tài)電路實(shí)現(xiàn)、電子元件拾取與放置和服務(wù)器實(shí)現(xiàn)四個(gè)部分。仿真算法主要使用了深度優(yōu)先搜索和動(dòng)態(tài)規(guī)劃思想。動(dòng)態(tài)電路實(shí)現(xiàn)是使仿真效果極佳。電子元件拾取與放置主要通過(guò)mesh模型構(gòu)建和存儲(chǔ)邏輯結(jié)構(gòu)進(jìn)行遍歷。服務(wù)器實(shí)現(xiàn)為了客戶端和數(shù)據(jù)庫(kù)的功能交互和信息交流。

關(guān)鍵詞：虛擬實(shí)驗(yàn)、JS、WebGL、MySQL數(shù)據(jù)庫(kù)

一.虛擬電路實(shí)驗(yàn)平臺(tái)概述

1.開(kāi)發(fā)背景

虛擬實(shí)驗(yàn)室是一種較為真實(shí)的仿真系統(tǒng)，但市面上幾乎全部都是2D的虛擬仿真系統(tǒng)，如nobook虛擬實(shí)驗(yàn)室及仿真系統(tǒng)。本實(shí)驗(yàn)平臺(tái)是一款針對(duì)高等教育中的數(shù)字電子電路實(shí)驗(yàn)課程而開(kāi)發(fā)的在線雙端使用的虛擬實(shí)驗(yàn)平臺(tái)，彌補(bǔ)了關(guān)于高等教育仿真實(shí)驗(yàn)的空白，模擬了許多經(jīng)典的數(shù)字電子電路實(shí)驗(yàn)。

當(dāng)今社會(huì)智能手機(jī)已經(jīng)變成了每個(gè)人的必要用品，不僅僅可以成為娛樂(lè)游戲的工具，也可以成為學(xué)習(xí)的工具，近年來(lái)，網(wǎng)絡(luò)學(xué)習(xí)軟件的開(kāi)發(fā)應(yīng)用愈來(lái)愈多?，F(xiàn)在網(wǎng)上也有很多實(shí)驗(yàn)工具，但是更多的是初高中的物理化學(xué)實(shí)驗(yàn)，但是有關(guān)于更高層面的電子電路實(shí)驗(yàn)平臺(tái)則開(kāi)發(fā)很少，而且很多是2D的效果，所以一款3D的虛擬電路實(shí)驗(yàn)平臺(tái)變成了市場(chǎng)的一種需求。

2.開(kāi)發(fā)目的

本實(shí)驗(yàn)系統(tǒng)使用WebGL+Three.js開(kāi)發(fā)。主要是針對(duì)各大高校的數(shù)字電子電路這一門課程設(shè)計(jì)，幫助學(xué)生自主完成學(xué)習(xí)過(guò)程，同時(shí)輔助教師完成授課教學(xué)環(huán)節(jié)。除了一些經(jīng)典的數(shù)字電子電路實(shí)驗(yàn)，自由模式的開(kāi)發(fā)，還可以使學(xué)生自主創(chuàng)造搭建實(shí)驗(yàn)。

由于互聯(lián)網(wǎng)技術(shù)的不斷進(jìn)步和革新，例如中國(guó)大學(xué)MOOC軟件的出現(xiàn)，在線學(xué)習(xí)的方式變得逐漸火熱，因此人們利用零碎時(shí)間隨時(shí)隨地的學(xué)習(xí)。本實(shí)驗(yàn)系統(tǒng)正是順應(yīng)了這股潮流，因此開(kāi)發(fā)了PC、手機(jī)端雙端使用的在線虛擬數(shù)字電子電路實(shí)驗(yàn)平臺(tái)，針對(duì)各大高校數(shù)字電子電路這一門課程，幫助學(xué)生自主學(xué)習(xí)，同時(shí)輔助老師教學(xué)進(jìn)度與方式。

3.設(shè)計(jì)思路

首先，對(duì)于客戶端，即前端的頁(yè)面顯示，主要采用了WebGL技術(shù)和Threejs技術(shù)相結(jié)合來(lái)實(shí)現(xiàn)，而且使用了3D效果來(lái)對(duì)系統(tǒng)進(jìn)行設(shè)計(jì)，不僅有更好的視覺(jué)體驗(yàn)，而且更有貼近實(shí)際的感覺(jué)，仿真模擬了實(shí)驗(yàn)環(huán)境和實(shí)驗(yàn)工具，讓學(xué)生置身于虛擬現(xiàn)實(shí)的情景之中，不僅可以增加對(duì)實(shí)驗(yàn)的興趣而且可以提高實(shí)驗(yàn)動(dòng)手能力。

其次，對(duì)于服務(wù)器端，主要目的是用Java語(yǔ)言和MySQL數(shù)據(jù)庫(kù)來(lái)完成的背景下編寫代碼，使用Java語(yǔ)言的轉(zhuǎn)換來(lái)實(shí)現(xiàn)機(jī)器語(yǔ)言的功能，MySQL數(shù)據(jù)庫(kù)用來(lái)進(jìn)行表格的設(shè)計(jì)及數(shù)據(jù)整合統(tǒng)計(jì)，如，實(shí)驗(yàn)詳情表、單片機(jī)表和實(shí)驗(yàn)器件表格等。

4.相關(guān)技術(shù)

近年來(lái)，WebGL 技術(shù)得到廣泛關(guān)注。WebGL 技術(shù)支持在瀏覽器中渲染三維圖形[1]，它能直接調(diào)用底層 GPU 對(duì)圖形進(jìn)行渲染。該技術(shù)對(duì)瀏覽器的兼容性強(qiáng)，且支持支持基于本地架構(gòu)的APP應(yīng)用[2-3]。

使用WebGL 具有以下優(yōu)點(diǎn)[4-5]：不用安裝額外的插件程序就可以直接在網(wǎng)頁(yè)中加載和渲染三維場(chǎng)景；它可以直接調(diào)用設(shè)備的硬件來(lái)加速渲染三維場(chǎng)景；開(kāi)發(fā) Web 三維場(chǎng)景時(shí)調(diào)用Web 的 3D 圖形庫(kù)非常方便。此系統(tǒng)實(shí)現(xiàn)三維虛擬實(shí)驗(yàn)平臺(tái)。

二.平臺(tái)可行性分析

1.效益分析

電路實(shí)驗(yàn)是一個(gè)繁瑣復(fù)雜的過(guò)程，而且涉及到方方面面，所以我們?cè)谶M(jìn)行物理實(shí)驗(yàn)為了能夠減少一些資源的消耗，并且提高相應(yīng)的學(xué)習(xí)效率，從而開(kāi)發(fā)虛擬電路實(shí)驗(yàn)平臺(tái)會(huì)帶來(lái)更多的經(jīng)濟(jì)效率。虛擬電路實(shí)驗(yàn)平臺(tái)的使用，不僅減輕了物理?xiàng)l件及器件的壓力，而且簡(jiǎn)化了實(shí)驗(yàn)的條件，一般情況下，我們需要進(jìn)入到實(shí)驗(yàn)室中，而現(xiàn)在只需要在手機(jī)端或者電腦端登錄系統(tǒng)就可以完成相應(yīng)的實(shí)驗(yàn)任務(wù)，不僅節(jié)省了時(shí)間而且提高了學(xué)習(xí)頻率和便宜性。

2.技術(shù)可行性分析

虛擬電路實(shí)驗(yàn)平臺(tái)系統(tǒng)主要采用JS和WebGL作為設(shè)計(jì)工具，學(xué)習(xí)起來(lái)十分容易并且使用方便快捷。

決定整個(gè)虛擬電路實(shí)驗(yàn)平臺(tái)系統(tǒng)可行性的最直接的因素是技術(shù)可行性，沒(méi)有十分強(qiáng)硬的技術(shù)作為基石，這個(gè)平臺(tái)就不能夠進(jìn)行正常的使用和獲取穩(wěn)定的運(yùn)行狀態(tài)。首先我們需要分析整個(gè)虛擬電路實(shí)驗(yàn)平臺(tái)系統(tǒng)使用的技術(shù)具有什么特點(diǎn)，其次與平臺(tái)的應(yīng)用特點(diǎn)相融合進(jìn)行更加周全的分析，這樣的相互結(jié)合分析的方式才能夠做好虛擬電路實(shí)驗(yàn)平臺(tái)系統(tǒng)的技術(shù)可行性分析。本研究構(gòu)建的是基于MySQL的虛擬電路實(shí)驗(yàn)平臺(tái)系統(tǒng)，不僅采用了成熟的語(yǔ)言技術(shù)，而且利用JS語(yǔ)言和WebGL技術(shù)作為研發(fā)工具，并將整個(gè)系統(tǒng)分為客戶端和服務(wù)器這兩個(gè)部分。

3.性能需求分析

一個(gè)產(chǎn)品或者系統(tǒng)的出現(xiàn)，總會(huì)獲得不同的響應(yīng)程度。本系統(tǒng)操作簡(jiǎn)易，只要平時(shí)有經(jīng)常使用電腦的習(xí)慣都可以進(jìn)入該系統(tǒng)，而且能夠及時(shí)掌握實(shí)驗(yàn)內(nèi)容，在進(jìn)入系統(tǒng)后，即可進(jìn)行相關(guān)實(shí)驗(yàn)，對(duì)于學(xué)生來(lái)說(shuō)，極大地簡(jiǎn)化了實(shí)驗(yàn)的方式，而且利用瑣碎時(shí)間就可以進(jìn)入系統(tǒng)進(jìn)行學(xué)習(xí)，老師也可以通過(guò)此系統(tǒng)查看學(xué)生的學(xué)習(xí)記錄和實(shí)驗(yàn)情況，給予及時(shí)的糾正和教學(xué)安排。而且在操作上也是可行的，滿足學(xué)生、老師的實(shí)驗(yàn)需要。

三.平臺(tái)設(shè)計(jì)要點(diǎn)

1.概要設(shè)計(jì)

本虛擬實(shí)驗(yàn)平臺(tái)采用客戶端和服務(wù)器端兩種方式，客戶主要進(jìn)行數(shù)據(jù)交互的服務(wù)器，該服務(wù)器主要是處理數(shù)據(jù)，在客戶端實(shí)現(xiàn)畫面的再現(xiàn)，客戶端使用WebGL的開(kāi)發(fā)工具和服務(wù)器主要采用Java語(yǔ)言和MySQL數(shù)據(jù)庫(kù)技術(shù)。

2.結(jié)構(gòu)設(shè)計(jì)

該平臺(tái)分為了用戶模塊和管理員模塊，用戶模塊主要是個(gè)人中心的實(shí)現(xiàn)，進(jìn)行實(shí)驗(yàn)相關(guān)操作的管理、學(xué)習(xí)進(jìn)度管理和信息管理。而管理員模塊主要的任務(wù)是進(jìn)行用戶的管理和系統(tǒng)頁(yè)面的管理及后臺(tái)管理和實(shí)驗(yàn)器件參數(shù)設(shè)置的管理。

3.元件設(shè)計(jì)

用戶點(diǎn)擊電子元件時(shí)，攝像機(jī)會(huì)發(fā)出一道捕捉射線，拾取器件的mesh模型，我們根據(jù)mesh模型和其存儲(chǔ)的邏輯數(shù)據(jù)進(jìn)行遍歷，找到該mesh所屬的自定義對(duì)象，用戶再次點(diǎn)擊時(shí)將其放置到面包孔的所屬位置上，放置器件之后需要同時(shí)將器件對(duì)應(yīng)的邏輯屬性進(jìn)行更新，方便進(jìn)行進(jìn)一步的計(jì)算。

由于本數(shù)字電子電路實(shí)驗(yàn)系統(tǒng)中所有的實(shí)驗(yàn)搭建操作都要在面板上進(jìn)行，而面包板上有許多小孔，為了能夠使電子元件能夠正確的插入學(xué)生指定的位置，我們開(kāi)發(fā)了電子元件坐實(shí)腳本，能夠準(zhǔn)確的將電子元件放置到對(duì)應(yīng)的小孔中。

本試驗(yàn)系統(tǒng)中有多種電子元件，每種元件的模型都不同，因此在學(xué)生進(jìn)行刪除電子元件工作的時(shí)候，首先需要判斷的是學(xué)生需要?jiǎng)h除元件的種類，然后將選中的電子元件所有屬性置空。

四.經(jīng)驗(yàn)與體會(huì)

在大四上學(xué)期期末時(shí)，導(dǎo)師就與我們聯(lián)系商定討論我們的定題和相關(guān)想法，最終將題目定了下來(lái)，然后進(jìn)行開(kāi)題報(bào)告的設(shè)計(jì)和確定，我便開(kāi)始在學(xué)校的圖書(shū)館搜集相關(guān)文獻(xiàn)和資料，面對(duì)一些疑難問(wèn)題則會(huì)在網(wǎng)上進(jìn)行搜索，網(wǎng)絡(luò)資料庫(kù)真的是無(wú)比豐富，搜集了許多資料之后，我用電腦對(duì)這些資料進(jìn)行了分類整理，而且對(duì)其中的問(wèn)題和要點(diǎn)進(jìn)行標(biāo)記，對(duì)于不同類別的筆記和內(nèi)容進(jìn)行分類的歸納和總結(jié)，盡量使總結(jié)的材料和論文相符合，從而更好的對(duì)論文內(nèi)容進(jìn)行編寫和設(shè)計(jì)。遇到甚難的問(wèn)題則會(huì)向老師請(qǐng)教，在老師的細(xì)心指導(dǎo)下，了卻了心中很多的疑難問(wèn)題，而且找出了大量的相關(guān)論文，認(rèn)真的閱讀，總結(jié)筆記，為自己的論文添磚加瓦，而且要避免有重復(fù)的觀點(diǎn)等問(wèn)題。

雖然在完成畢業(yè)設(shè)計(jì)系統(tǒng)的過(guò)程中有過(guò)煩惱，有過(guò)悲傷，但是在這段時(shí)間內(nèi)不僅加強(qiáng)了和老師的交流而且在遇到問(wèn)題時(shí)，與同學(xué)們一起探討，找出問(wèn)題解決問(wèn)題，不僅提高了學(xué)習(xí)能力，而且加強(qiáng)了同學(xué)之間的感情。通過(guò)這段時(shí)間也讓我明白了以后對(duì)待學(xué)習(xí)與工作要有一絲不茍的態(tài)度，而且要具備較強(qiáng)的責(zé)任心和一定的溝通能力以及發(fā)現(xiàn)問(wèn)題解決問(wèn)題的應(yīng)變能力以及通過(guò)與同學(xué)的互補(bǔ)學(xué)習(xí)與交流行成一種團(tuán)隊(duì)合作的精神，更有利于完成畢業(yè)設(shè)計(jì)的任務(wù)。

參考文獻(xiàn)：

[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] 歐陽(yáng)峰，龔桂榮，何列松，面向 WebGL 的矢量數(shù)據(jù)三維繪制技術(shù)[J]，測(cè)繪科學(xué)技術(shù)學(xué)報(bào)，2016，33（6）：635-638.

[5] 黃若思，李傳榮，馮磊，唐伶俐，基于幾何的WebGL矢量數(shù)據(jù)三維渲染技術(shù)研究術(shù)[J]，遙感技術(shù)與應(yīng)用，2014，29（3）：463-468.

作者簡(jiǎn)介：

劉家祺，男，生于1998年11月，漢族，安徽宿州人，天津農(nóng)學(xué)院，本科在讀，計(jì)算機(jī)科學(xué)與技術(shù)專業(yè)方向.

通訊作者：王宏坡