基于Unity3D的數據結構算法交互式可視化平臺

方子寧 曹正昊 孫瑞 郭清桐 朱玉晟

摘? 要：文章重點研究數據結構算法交互式的可視化平臺。由于數據結構的難點就是如何形象化其抽象的邏輯說明，并培養出完善的思維體系。團隊致力于搭建交互式模型，利用Vue搭建網站，通過Unity3D這款軟件編寫算法底層邏輯代碼，并且借助DoTweening等插件，達到算法動態的展示，通過Unity3D打包成WebGL和前端Vue交互，實現了數據結構算法的可視化互動學習。

關鍵詞：交互式模型；Unity3D；Vue；數據結構算法；可視化演示

中圖分類號：TP311.5? 文獻標識碼：A? 文章編號：2096-4706（2023）15-0006-06

Interactive Visualization Platform for Data Structure Algorithms Based on Unity3D

FANG Zining， CAO Zhenghao， SUN Rui， GUO Qingtong， ZHU Yusheng

（School of Electronics and Computer Engineering， Southeast University Chengxian College， Nanjing? 210088， China）

Abstract： This paper focuses on researching an interactive visualization platform for data structure algorithms. The difficulty of data structure is how to visualize its abstract logical explanation and cultivate a sound thinking system. The team is committed to building interactive models， using Vue to build websites， using Unity3D software to write underlying logic code of algorithms， and utilizing pluggable units such as DoTweening to achieve dynamic display of algorithms. Through packaging Unity3D into webgl and interacting with front-end Vue， visualization and interactive learning of data structure algorithms are achieved.

Keywords： interactive model; Unity3D; Vue; data structure algorithm; visual demonstration

0? 引? 言

數據結構算法學習的一大難點[1]就是如何形象化其抽象的邏輯說明，并培養出一套完善的思維體系框架，而該過程是十分枯燥的。對算法的理解學習要求學習者不僅有深厚的數學功底，還要有良好的邏輯思維能力才能夠理解書本上大量抽象的算法公式和枯燥煩瑣的代碼運算過程。而就目前的情況而言，課堂上教師們的授課大多也是采用口頭講述結合書本文字，輔以筆頭繪圖來進行授課，更遑論部分自學者只能通過鉆研代碼來理解算法，可見傳統的學習方式對初學者來說并不是非常便捷。因此，現階段很需要一個將數據結構算法動態可視化的平臺，通過實例帶入和交互式可視化演示技術[2]，來幫助用戶用更加生動形象的方式來理解數據結構和其所擁有的各項算法。

在經過團隊一系列的研究和搜索后，發現目前國內外有不少對于算法可視化的網站[3]和輔助工具，比較熟知的有VisuAlgo和Data Structure Visualizations[4]等，而這每個網站也各自有自己的獨特之，例如Data Structure Visualizations網站特點為過程可以自己控制，VisuAlgo則是加入了文字講解和復雜度的備注。但目前所使用的可視化網站[5]，大多都是2D的過程展示，較少有通過3D模型來進行演示的平臺，且交互性也不夠強。同時由于不是專門用于學習數據結構的工具，因此這些網站包含了較多其他邏輯類的算法，而有很多數據結構特有的算法沒有得到展示。

在一系列權衡之后，項目組成員決定采用Unity平臺，在基于在校期間學習的各類算法的學習基礎上，再加上網站的制作和運行技術，來搭建一個基于Unity3D的數據結構算法交互式可視化網站。在充分研究了項目可行性后，團隊成員進行了各項分析并逐漸完成了平臺的設計與交互式可行性分析。Unity3D是一項對于動態模型搭建非常便捷的平臺，但是還需要一個媒介將unity3D的動態演示給展現出來，因此在經過一系列了解后，團隊選用了現在常用的網頁制作工具Vue。

1? 理論基礎

1.1? 開發工具介紹

1.1.1? Unity3D

Unity是由Unity Technologies公司開發的跨平臺專業游戲引擎，也是實時互動內容創作和運營平臺，其功能涵蓋了包括游戲開發、美術、建筑、汽車設計、影視在內的多個領域。Unity平臺提供一整套完善的軟件解決方案，可用于創作、運營和變現任何實時互動的2D和3D內容，支持平臺包括手機、平板電腦、PC、游戲主機、增強現實和虛擬現實設備。

Unity的3D[6]開發平臺是行業內領先的，Unity引擎的靈活性和實時互動性，為創作者提供了極大的便利，完善的技術和豐富的個性化功能可以滿足開發者在使用時幾乎所有的要求。同時Unity也密切關注著教育行業的發展，為學生使用Unity平臺時提供了較多的便捷[7]。Unity提供易用實時平臺，開發者可以在平臺上構建各種3D互動模型。

1.1.2? Vue

Vue是一種漸進式的Web前端開發框架[8]，它基于標準HTML、CSS和JavaScript構建，提供容易上手的API和一流的文檔。它擁有豐富的、可漸進式集成的生態系統，可以根據應用規模在庫和框架間切換自如。Vue采用自底向上的增量開發設計，且它的核心庫只關注視圖層，非常容易學習，并且很易于與其他庫或已有項目整合。

Vue出色的性能和豐富的場景對于本團隊這種初學開發者來說實用性高[9]，上手度快。并且根據團隊成員所查到的文獻資料可知，Unity平臺可以和Vue進行交互式的聯動，實現兩者數據的傳參，通過這個特性，可以將這個平臺的功能進一步完善。

1.2? 設計思路

在進行項目統籌設計時，團隊采用了漸增模型來設計，將網站所需要的一系列組成部分拆分為每項單獨的增量構件，每個增量構件都是項目系統的一個子集，能夠完成特定的功能。從最初進行網站的頁面設計，而后在Vue搭建時進行算法展示窗口設計，完成這一部分時團隊成員又開始研究窗口內動態模型所需要的交互部分，以此類推，逐步完善項目的網站系統，本系統的功能結構圖如圖1所示。

在設計網站時，團隊初步構思了如下幾個組成頁面，包括主頁的算法分類維護，算法展示和算法查找。其中，主頁面會呈現該平臺所有的算法并進行歸類，用戶可以根據自己的需求下拉找到想看的算法或者使用搜索欄進行關鍵字搜索，如果沒有對應的算法系統會讓用戶重新輸入，同時，用戶輸入的關鍵字，系統也會自動補齊相關算法并顯示在搜索框的下方供用戶選擇。

當用戶點擊對應的算法圖片后，會彈出該算法的展示界面，此時的界面共有三個部分，左邊為Unity3D平臺的動態實例展示窗口，右側上半部分為該算法的文字介紹部分，下面則是用C++語言展示出來的主要邏輯代碼。同時在展示實例的下方會有交互輸入窗口，用戶可以輸入自定義數據，而后上方的動態實例展示窗口會根據數據生成對應的模型。模型建立好后用戶可以點擊對應的開始和暫停按鈕，以觀察模型的變化，流程如圖2所示。

2? 需求分析

數據結構算法[10]是計算機的中心思想課程，讓程序員更好地了解程序之間的結構關系，因此結構的可視化非常重要。更重要的是要讓人們對這門課的學習有更加輕松的體驗，因此選取合適的3D模型進行交互式可視化演示就極其重要。本網站不僅適用于教師進行授課使用，也適用于希望初步自學數據結構的學生或者工作者，在對某一算法概念不清晰時，可以通過對本網站的使用加深自己的概念理解，模型的可交互性也增加了用戶的使用體驗。

該平臺基于其他網站的優點，結合3D模型的具體化演示，通過搭建可交互式模型，網站實現算法如下：

1）線性表：順序表和鏈表的基本操作，循環鏈表，雙向鏈表。

2）棧和隊列的基本操作，循環隊列。

3）字符串的模式匹配。

4）矩陣的壓縮存儲和廣義表的存儲。

5）樹：線索二叉樹，前中后遍歷二叉樹，赫夫曼樹。

6）圖：DFS，BFS，普利姆算法，克魯斯卡爾算法，拓撲排序，關鍵路徑，最短路徑。

7）查找：靜態查找：順序查找，折半查找，索引順序查找。

8）動態查找：二叉排序樹，二叉平衡樹，B-樹，哈希表。

9）排序：直接插入，希爾排序，直接選擇，堆排序，冒泡排序，快速排序，歸并排序，基數排序。

3? 系統實現

3.1? Unity3D模型搭建

在經過研究后，為保證組內各位成員所制作的工程不會產生版本誤差導致無法互通，團隊在Unity Hub中選擇了同一版本2020.1.01f1來進行制作，而后通過多種渠道的自主學習，成員們初步了解了該如何使用Unity中的自帶模型來完成初步的動態建模。

但由于大多數的教程都著重于如何使用Unity來設計一個游戲，因此都比較看終于動態模型的導入與動作的產生。而動作控制與本平臺所需要的算法可視化并無太多關聯，因此成員們在學習時主要選擇通過講解視頻來了解并學習Unity中C#語言的應用和掌握，考慮重心在物體的材質、移動、旋轉及多物體間的聯動反應。在完成常用功能的學習后看，團隊的研究重點在Unity模型的與Vue輸入數據的交互性上。

為了實現交互式功能，團隊并沒有直接將物體排布在展示窗口中間，而是設置了預設體，這樣可以讓物體按照用戶輸入的數據自動生成對應的物體在窗口中。

3.2? Vue搭建

負責界面設計的成員照著設計時所畫的界面設計圖，如圖3所示，插入對應的標簽、文本框和圖片插件，網頁的圖片也已經設置了跳轉鏈接，用戶點擊后就可以進入對應分類詳細查看該類別中的算法，再點擊單個算法的圖片縮略圖就可以進入該算法的動態模型演示頁面。進入頁面后，網頁右半部分設置了文字注釋部分以及代碼注釋部分，結合所用的動態模型，可以更直觀地讓大家理解這個算法。同時，手動輸入數據進行交互式演示可以讓抽象的算法變得具體。該網頁在演示中也設置了暫停與開始按鈕，方便用戶暫停演示時可以查看該步驟所對應的代碼。

3.3? 服務器搭建

在比較了網絡上各類云服務器的優劣性后，結合該項目的運行內存大小，團隊成員選擇了阿里云服務器。阿里云是創立于2009年的全球領先的云計算及人工智能科技公司，致力于以在線公共服務的方式，提供安全可靠的計算和數據處理能力。阿里云服務器是簡單高效、安全可靠、處理能力彈性伸縮的計算服務器，常適用于開發者將完成的個人網站部署到云服務器上，較為輕松便捷。

在購買了云服務器之后，負責服務器搭建的成員按照操作流程設置好了端口，再設置好管理員的賬號密碼等內容，就可以開始上傳文件，而后進行環境變量的配置。配置完成后就可以開始上傳網站的源碼，再部署Web項目包，最后經過調試就可將該平臺成功放置在云服務器上。

3.4? 功能實現

打開鏈接跳轉后，會首先進入該網站的首頁。經過討論，本團隊將首頁設計成了算法縮略圖加上簡易文字說明的組合，將所有算法分為幾類，而后進入每個分類可以再看到該類別中的幾種詳細算法首頁Vue界面與算法分類Vue界面如圖4、圖5所示。

這里就用冒泡算法的實現過程來進行簡單介紹。冒泡排序是簡單的排序算法，它的基本原理就是比較相鄰的元素，如果第一個比第二個大，就交換他們兩個。對每一對相鄰元素作同樣的工作，從開始第一對到結尾的最后一對。這個比較的步驟要不停地重復，直到沒有任何一對數字需要比較，而最后完成的數列應是按照從左到右從小到大的順序排列整齊的。

所以在本模型中，團隊成員采用了柱體來表示數字大小的不同，將每個元素比較大小轉換為多個柱體比較高度的模型，更為直觀。

為了做到交互式，通過在Vue的文本輸入框輸入數字，在進行數據傳參傳遞到Unity中，這樣就可以讓每個柱體根據輸入數據的不同改變自身的高低。而后通過對底層邏輯的編寫和位置轉換函數的研究，成功實現了點擊界面Start按鈕即可讓生成的柱體依照冒泡排序的邏輯順序開始自動交換位置的，同時會生成一個對應的有序數列。

在實現動態變化的同時，模型變換中還結合了Unity3D中物體材質的改變，讓柱體在位置轉換時可以實現顏色的轉變，將每次需要交換的兩個物體用亮色標記，交換完成后回到原來的顏色，而后過程都重復這一步驟，這樣使得整個流程更加完善更加清晰。

3.5? 代碼思路闡述

3.5.1? Unity3D系統

算法演示動態模型的搭建步驟大致相同，這里選取冒泡算法的制作過程來進行簡單闡述。首先搭建好預設體的模型并分類命名，例如Obj[0]為柱體，Obj1[0]為文本等，第二步設置類型轉換函數numberString將文本轉換為數字，并設置數字的有效讀取范圍為0～9。其次這是數據類型轉換函數將轉換后的數字設置為int型。數字讀取部分就基本完成了。

然后是預設體的模型部分。第一步先確認在鏡頭中三維坐標，第二步設置參數x，x是獲取到的數字進行處理后得到的數字。設GetComponent函數中localScale參數來實現自身的縮放，得到的新物體縮放比例為（1，numberInt，1），設置position參數將預設體的位置移動到鏡頭中合適的地方。物體移動至對英文之后，再次使用GetComponent函數中的text參數部分將物體對應的數字文本進行顯示，并使用position參數移動至該物體前方便于觀察。至此模型的生成部分就基本完成。

第三部分則是物體的動態部分，主要包括物體的位置移動，物體的材質變化（當前進行移動的物體會改變顏色來重點說明），以及文本對應的下挪。當前物體移動完成后，執行waitForSecond函數來等待，而后在執行下一個物體的移動。此處團隊選用if函數來實現物體的動態演示，通過大小的自動比對來實現物體間的交換。

3.5.2? Vue代碼

在主頁以及算法選擇頁面部分團隊成員插入了文本框、按鈕、圖片等部分，通過參數設置將各個部分大小調整為比例顯示，以達到在不同的設備上都可以得到恰當大小的展示的目的。通過點擊圖片或對應文字就可以通過設置的跳轉參數自動進入對應界面，流程如圖6所示。

而后在動態模型展示界面主要設置了與Unity相關聯的函數，例如querySelector函數可用于進行查詢篩選，獲取單個元素。navigator.userAgent函數可用于判斷當前瀏覽器所處的環境，篩選用戶所使用的設備，createElement函數用于創建數據節點。

最后比較重要的部分就是sendMsgToUnity函數，該函數用于實現Vue和Unity之間的參數傳遞，通過Unity中GameObject自帶的SendMessage函數實現輸入文本的傳輸，同時注意與Unity代碼中的receiveMsgFromVue函數實現一一對應，這樣才能保證輸入的數據可以準確地在模型中展示出來，部分代碼如圖7所示。

4? 項目創新點

相比較其他數據結構算法可視化網站，該平臺實現了與用戶動態交互，可以按照用戶需求進行算法演示。在目前的市場中有很多關于數據結構算法可視化的網站，但是很多網站的可視化均是基于后臺固定的數據進行算法的展示，用戶無法自主的更改數據，喪失了算法的動態性。而本網站的一大亮點便是通過Unity平臺與Vue框架進行交互處理，用戶可以在Vue的界面中自主定義數據，然后通過Vue進行傳遞參數，同時Unity平臺則會接收到這些參數，并提取到用戶傳遞的數據，于是該算法便會基于用戶所給予的數據進行動態的演示，增強了用戶的使用體驗，而不是僅僅觀看了一次靜態的動畫演示，從而使用戶更能理解到算法的本質。

5? 結? 論

數據結構算法學習對計算機本專業的學生已是一門較為困難的學科，其他沒有經過系統學習的卻想自學的開發者或學生就更難了。相比其他的算法2D展示網站，基于Unity3D完成的動態建模更為直觀清晰。

今后該平臺也會在現有這么多算法的基礎上不斷完善，加入現實中的實例來幫助使用者理解各算法的邏輯步驟，通過不同的可視化提高工具的適用性與推廣性，讓數據結構的算法不再那么困難。

參考文獻：

[1] JUNAIDU S. Effectiveness of multimedia in learning & teaching data structures online [J].The Turkish Online Journal of Distance Education，2008，9（4）：97.

[2] 張一馳.大數據十大經典算法可視化實例教學系統研究與實現 [D].西安：西安石油大學，2021.

[3] 劉叢.針對數據結構的命令式算法可視化系統設計與開發 [D].長沙：湖南大學，2015.

[4] 胡珊.程序可視化方法在程序設計課程教學中的應用 [J].電腦知識與技術，2021，17（7）：104-105.

[5] WIBAWA P A，DWIYANTO A F，WIDIYANINGTIYAS T，et al. Utilization visualgo.net as a data structure learning media based on cdio [C]//2nd International Conference on Statistics，Mathematics，Teaching，and Research.Makassar：IOPscience，2018：012064[2023-01-06].https：//iopscience.iop.org/article/10.1088/1742-6596/1028/1/012064.

[6] 顧笑迎，吳瑨，李碩.基于Unity3D的自引查找工具設計與實現 [J].圖書館研究與工作，2022（12）：74-78+82.

[7] 朱青.基于項目驅動的Unity3D開發基礎教學分析 [J].科技視界，2021（35）：125-126.

[8] 劉亞茹，張軍.Vue.js框架在網站前端開發中的研究 [J].電腦編程技巧與維護，2022（1）：18-19+39.

[9] 趙龍，王風碩.基于Vue的圖書銷售系統設計與實現 [J].電腦知識與技術，2021，17（36）：81-82+85.

[10] 嚴蔚敏.數據結構：C語言版 [M].北京：清華大學出版社，2007.