劉家祺 王宏坡

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

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

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

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

1.開發(fā)背景

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

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

2.開發(fā)目的

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

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

3.設(shè)計思路

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

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

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

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

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

二.平臺可行性分析

1.效益分析

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

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

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

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

3.性能需求分析

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

三.平臺設(shè)計要點(diǎn)

1.概要設(shè)計

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

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

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

3.元件設(shè)計

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

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

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

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

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

雖然在完成畢業(yè)設(shè)計系統(tǒng)的過程中有過煩惱，有過悲傷，但是在這段時間內(nèi)不僅加強(qiáng)了和老師的交流而且在遇到問題時，與同學(xué)們一起探討，找出問題解決問題，不僅提高了學(xué)習(xí)能力，而且加強(qiáng)了同學(xué)之間的感情。通過這段時間也讓我明白了以后對待學(xué)習(xí)與工作要有一絲不茍的態(tài)度，而且要具備較強(qiáng)的責(zé)任心和一定的溝通能力以及發(fā)現(xiàn)問題解決問題的應(yīng)變能力以及通過與同學(xué)的互補(bǔ)學(xué)習(xí)與交流行成一種團(tuán)隊合作的精神，更有利于完成畢業(yè)設(shè)計的任務(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] 歐陽峰，龔桂榮，何列松，面向 WebGL 的矢量數(shù)據(jù)三維繪制技術(shù)[J]，測繪科學(xué)技術(shù)學(xué)報，2016，33（6）：635-638.

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

作者簡介：

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

通訊作者：王宏坡