韓慧彥

（山西省財(cái)政科學(xué)研究院，山西 太原 030006）

引言

目前，現(xiàn)代化機(jī)加工車間已廣泛應(yīng)用各類數(shù)控車床、鏜銑床、磨床、沖床、加工中心等先進(jìn)精密設(shè)備實(shí)現(xiàn)各類零部件的自動(dòng)化生產(chǎn)制造[1-2]。同時(shí)，通過自動(dòng)導(dǎo)航小車（Automated Guided Vehicle，AGV）、送料料機(jī)器人、視覺定位系統(tǒng)、全自動(dòng)換刀裝置等設(shè)備實(shí)現(xiàn)機(jī)加工生產(chǎn)整線的全自動(dòng)高質(zhì)量連續(xù)不間斷生產(chǎn)[3-4]。隨著工業(yè)物聯(lián)網(wǎng)、智能感知、大數(shù)據(jù)、云計(jì)算、機(jī)器學(xué)習(xí)等人工智能技術(shù)的迅猛發(fā)展[5-6]，在以機(jī)器代人的基礎(chǔ)上實(shí)現(xiàn)信息化、網(wǎng)絡(luò)化和智能化的高精尖制造，能夠進(jìn)一步提升生產(chǎn)效能和產(chǎn)品質(zhì)量，打造簡(jiǎn)單靈活、高效柔性的智能制造體系。

在工業(yè)物聯(lián)網(wǎng)（cyber-physical system,CPS）的基礎(chǔ)上，數(shù)字孿生系統(tǒng)（digital twin system,DTS）通過在網(wǎng)頁(yè)構(gòu)建設(shè)備實(shí)體的虛擬鏡像模型，并借助各類帶網(wǎng)絡(luò)接口的傳感器采集并傳遞設(shè)備的實(shí)時(shí)工況、狀態(tài)和位置等數(shù)據(jù)，將實(shí)體的真實(shí)表現(xiàn)通過孿生體進(jìn)行動(dòng)態(tài)可視化[7-8]。DTS 不僅可以替代裝備實(shí)體實(shí)現(xiàn)網(wǎng)絡(luò)可視化監(jiān)控，并通過機(jī)器學(xué)習(xí)等智能數(shù)據(jù)分析技術(shù)，提出設(shè)備工藝參數(shù)和產(chǎn)線整體架構(gòu)的優(yōu)化、診斷等方案[9-10]。盡管目前DTS 已在國(guó)內(nèi)眾多行業(yè)得到應(yīng)用，但大部分集中在外觀和動(dòng)畫的改進(jìn)，由2D 組態(tài)變換為3D動(dòng)態(tài)顯示等[11-12]。較少涉及從幾何模型、物理模型到數(shù)據(jù)模型的精細(xì)化構(gòu)建、分析和優(yōu)化，尤其對(duì)于高速數(shù)控機(jī)床、高端鍛壓成形設(shè)備、全自動(dòng)產(chǎn)線等復(fù)雜高端裝備制造領(lǐng)域。

本文對(duì)數(shù)控機(jī)床設(shè)備及其智能產(chǎn)線的DTS 網(wǎng)頁(yè)編程設(shè)計(jì)方法進(jìn)行研究。首先對(duì)數(shù)控加工中心、六軸機(jī)械臂等設(shè)備，運(yùn)用基于WebGL 的Three.js 引擎庫(kù)，建立設(shè)備的網(wǎng)頁(yè)3D 可視化孿生體模型，并為模擬設(shè)備的實(shí)際運(yùn)行提供動(dòng)態(tài)數(shù)據(jù)接口。在此基礎(chǔ)上，基于Node.js 搭建的網(wǎng)頁(yè)后臺(tái)服務(wù)器，存儲(chǔ)物聯(lián)網(wǎng)存儲(chǔ)設(shè)備傳感器實(shí)時(shí)發(fā)送的各項(xiàng)狀態(tài)數(shù)據(jù)。然后前端網(wǎng)頁(yè)通過Ajax.js 調(diào)用后臺(tái)服務(wù)器中的JSON 數(shù)據(jù)，由動(dòng)態(tài)數(shù)據(jù)接口驅(qū)動(dòng)3D 模型，同時(shí)實(shí)時(shí)顯示在網(wǎng)頁(yè)數(shù)據(jù)面板模塊中對(duì)各設(shè)備的運(yùn)行數(shù)據(jù)。

1 DTS 網(wǎng)頁(yè)編程技術(shù)

網(wǎng)頁(yè)編程通常分為前端和后端兩部分。前端指網(wǎng)頁(yè)的顯示界面；后端服務(wù)器為前端提供各類應(yīng)用程序接口（Application Program Interface，API）和存儲(chǔ)數(shù)據(jù)庫(kù)；前端頁(yè)面通過調(diào)用API 進(jìn)行事件程序響應(yīng)和數(shù)據(jù)交互。構(gòu)建制造裝備及產(chǎn)線的DTS，在前端開發(fā)中，需要在網(wǎng)頁(yè)上顯示裝備的3D 虛擬模型以代表制造車間中實(shí)際設(shè)備。在后端開發(fā)中，需要在后臺(tái)服務(wù)器接收并存儲(chǔ)設(shè)備傳感器實(shí)時(shí)采集的狀態(tài)數(shù)據(jù)。下面先介紹前后端的各種編程技術(shù)。

1.1 Three.js 3D 引擎

Three.js 是在WebGL 基礎(chǔ)上的Javascript 開源框架，將WebGL 的API 抽象封裝，使模型拆解為網(wǎng)格和材質(zhì)，場(chǎng)景拆解為相機(jī)和光源，并優(yōu)化了渲染的方法、順序和性能。Three.js 服務(wù)器設(shè)置在本地，跨平臺(tái)使用者只需安裝瀏覽器即可運(yùn)行系統(tǒng)。

1.2 Node.js 框架和工具

Node.js 是運(yùn)行在服務(wù)端的JavaScript，通過其中包管理器npm 提供的數(shù)量龐大第三方軟件包，能大大簡(jiǎn)化開發(fā)過程。

1.3 JSON 數(shù)據(jù)

前端網(wǎng)頁(yè)實(shí)時(shí)更新設(shè)備信息以及動(dòng)畫化顯示，需要獲取存儲(chǔ)在服務(wù)器的設(shè)備狀態(tài)數(shù)據(jù)。JavaScript 對(duì)象表示法（JavaScript Object Notation，JSON）是一種儲(chǔ)存交互文本信息的語(yǔ)法，用于與服務(wù)器端交互數(shù)據(jù)，類似于可擴(kuò)展標(biāo)記語(yǔ)言（eXtensible Markup Language，XML），但比XML 更小更快更易解析。

2 基于Three.js 的車間設(shè)備3D 網(wǎng)頁(yè)建模

采用Three.js 構(gòu)建網(wǎng)頁(yè)3D 模型的整體步驟如圖1 所示。首先創(chuàng)建場(chǎng)景，在場(chǎng)景中添加光源，創(chuàng)建或?qū)胪獠磕Ｐ?，并為模型配置材質(zhì)。然后為場(chǎng)景配置模擬相機(jī)進(jìn)行投影，最后利用渲染器將相機(jī)投影出的場(chǎng)景渲染到網(wǎng)頁(yè)中。

2.1 創(chuàng)建場(chǎng)景

Three.js 首先需要?jiǎng)?chuàng)建虛擬場(chǎng)景，作為相機(jī)、燈光、模型、渲染器等其他元素的載體。需要?jiǎng)?chuàng)建場(chǎng)景變量及初始化構(gòu)造函數(shù)，同時(shí)可配置坐標(biāo)、網(wǎng)格等元素。

2.2 設(shè)置虛擬光源

為了更好的渲染場(chǎng)景和顯示模型，通常需要設(shè)置不同的光源和及其強(qiáng)度參數(shù)。Three.js 可設(shè)置環(huán)境光、點(diǎn)光源、平行光等多種光源。環(huán)境光沒有特定光照方向，以整體改變場(chǎng)景明暗為主，但強(qiáng)度較弱。點(diǎn)光源從某一個(gè)點(diǎn)向外均勻發(fā)散，在不同位置接收的光照強(qiáng)度不同。平行光是一組設(shè)置在無(wú)限遠(yuǎn)的平行光線。本文采用三種光源相互配合創(chuàng)建虛擬光源，能夠使模型在網(wǎng)頁(yè)中顯示的更加真實(shí)明亮。

2.3 導(dǎo)入3D 模型

Three.js 以Mesh 型式構(gòu)建模型，包含幾何體Geometry 和材質(zhì)Material 兩部分，Geometry 由一系列頂點(diǎn)構(gòu)成模型骨架，Material 定義了附著在骨架上的皮膚。數(shù)控機(jī)床設(shè)備結(jié)構(gòu)復(fù)雜，直接在three.js 由頂點(diǎn)構(gòu)建其3D 模型難度較高。為此，可通過三維軟件進(jìn)行建模，并轉(zhuǎn)換為.stl,.obj,.gltf 等Three.js 支持導(dǎo)入的文件格式，由對(duì)應(yīng)格式加載器（Loader）把模型文件轉(zhuǎn)化為Three.js 對(duì)象結(jié)構(gòu)。本文采用Pro/Engineering 分別構(gòu)建車間設(shè)備的3D 模型，并統(tǒng)一轉(zhuǎn)化為.obj 頂點(diǎn)文件，同時(shí)會(huì)導(dǎo)出一個(gè).mtl 材質(zhì)文件，分別OBJLoader 和MTLLoader 由進(jìn)行加載。如圖2-1 所示為數(shù)控加工中心的.obj 模型，圖2-2 所示為加載到網(wǎng)頁(yè)的three.js模型。

2.4 設(shè)置虛擬相機(jī)

Three.js 模型要在網(wǎng)頁(yè)上顯示，采用的是照相機(jī)的原理。設(shè)置了場(chǎng)景、模型和燈光后，就需要一臺(tái)虛擬相機(jī)將場(chǎng)景元素投影到網(wǎng)頁(yè)上。除了設(shè)置相機(jī)位置及其投影角度外，還需要設(shè)置投影方式。常用的Three.js投影方式有正投影相機(jī)OrthographicCamera 和透視投影相機(jī)PerspectiveCamera。正投影的投影模型大小與距離無(wú)關(guān)，更能表現(xiàn)模型的真實(shí)結(jié)構(gòu)尺寸；透視投影的模型大小除了與角度有關(guān)，還和距離相關(guān)。圖3 比較了數(shù)控加工中心系列產(chǎn)線的兩種相機(jī)投影效果，可見采用正投影相機(jī)更能真實(shí)展現(xiàn)制造車間設(shè)備的運(yùn)行工況。

2.5 渲染器渲染圖像

渲染器的作用類似于拍照和沖印動(dòng)作。首先初始化設(shè)置渲染到網(wǎng)頁(yè)上的尺寸和位置、范圍背景顏色等。網(wǎng)頁(yè)上執(zhí)行渲染需要?jiǎng)討B(tài)更新，因此除了初始化構(gòu)造函數(shù)外，還需要一個(gè)可作為Animate 部分的渲染構(gòu)造函數(shù)。

重復(fù)上述Three.js 程序模塊分別對(duì)數(shù)控車床、磨床、沖床、送料機(jī)械臂、AGV 小車等設(shè)備進(jìn)行建模，并根據(jù)實(shí)際空間和運(yùn)行工況對(duì)其位置等參數(shù)進(jìn)行設(shè)置。通過網(wǎng)頁(yè)訪問其整體場(chǎng)景，如下頁(yè)圖4 所示?？梢娡ㄟ^three.js 可構(gòu)建完成智能制造車間的整體DTS 模型。

3 基于Node.js 的車間設(shè)備數(shù)據(jù)服務(wù)器

3.1 Node.js 數(shù)據(jù)交互

DTS 除了模型孿生，為了實(shí)時(shí)監(jiān)測(cè)車間設(shè)備運(yùn)行工況，還需要由設(shè)備數(shù)據(jù)驅(qū)動(dòng)網(wǎng)頁(yè)模型實(shí)現(xiàn)動(dòng)態(tài)化并實(shí)時(shí)顯示數(shù)值指標(biāo)。因此在設(shè)備端，實(shí)現(xiàn)CPS 升級(jí)的方式是在設(shè)備上增加各類傳感器，實(shí)時(shí)采集設(shè)備的運(yùn)行狀態(tài)數(shù)據(jù)。通過高速寬帶網(wǎng)絡(luò)鏈接，將狀態(tài)數(shù)據(jù)存儲(chǔ)在服務(wù)器數(shù)據(jù)庫(kù)中，并在網(wǎng)頁(yè)端實(shí)時(shí)顯示。本文采用node.js 提供的Express 工具框架快速簡(jiǎn)潔的搭建本地靜態(tài)服務(wù)器。

Node.js 可通過npm 安裝mysql 驅(qū)動(dòng)與sql 數(shù)據(jù)庫(kù)進(jìn)行連接，存在和讀取車間設(shè)備的各項(xiàng)數(shù)據(jù)。對(duì)mysql 的數(shù)據(jù)庫(kù)操作本文不在贅述。在前后端JSON數(shù)據(jù)交互中，采用AJAX（Asynchronous JavaScript and XML）技術(shù)，實(shí)現(xiàn)可以在不重新加載網(wǎng)頁(yè)的情況下更新部分網(wǎng)頁(yè)內(nèi)容。通過AJAX 的XMLHttpRequest對(duì)象，能夠在滿足HTTP 情況下，向遠(yuǎn)程服務(wù)器發(fā)送請(qǐng)求。服務(wù)器端響應(yīng)就緒時(shí)返回JSON 數(shù)據(jù)，使用JSON.parse()將數(shù)據(jù)轉(zhuǎn)換為JavaScript 對(duì)象直接載入網(wǎng)頁(yè)中；在向服務(wù)器發(fā)送數(shù)據(jù)時(shí)，采用JSON.stringify()將JavaScript 對(duì)象轉(zhuǎn)換為JSON 數(shù)據(jù)。

3.2 網(wǎng)頁(yè)前端數(shù)據(jù)表單

在網(wǎng)頁(yè)前端分別對(duì)車間各設(shè)備的運(yùn)行狀態(tài)數(shù)據(jù)進(jìn)行顯示。通過HTML 創(chuàng)建網(wǎng)頁(yè)數(shù)據(jù)表格并寫入實(shí)時(shí)采集的數(shù)據(jù)，再使用CSS 層疊樣式表調(diào)整表格屬性。例如對(duì)數(shù)控加工中心在各驅(qū)動(dòng)電機(jī)及各軸進(jìn)給位置進(jìn)行實(shí)時(shí)顯示，如圖5 所示。

4 智能制造車間DTS 的網(wǎng)頁(yè)布局

本文中將頁(yè)面分為三部分，如圖6 所示，左半部分為可視化界面，展示了構(gòu)建的鍛壓設(shè)備的基本運(yùn)行狀況；右半部分為一般數(shù)據(jù)和報(bào)表界面，與后臺(tái)服務(wù)器交互更新車間整體數(shù)據(jù)；頁(yè)面下半部分為設(shè)備運(yùn)行狀況監(jiān)測(cè)界面，實(shí)時(shí)接收后臺(tái)服務(wù)器的數(shù)據(jù)，顯示設(shè)備的運(yùn)行狀況。

5 結(jié)語(yǔ)

建立智能制造車間生產(chǎn)線的數(shù)字孿生系統(tǒng)，通過實(shí)時(shí)遠(yuǎn)程監(jiān)控和數(shù)據(jù)分析預(yù)測(cè)，有利于提高設(shè)備產(chǎn)線的生產(chǎn)效率、降低生產(chǎn)成本、優(yōu)化產(chǎn)線結(jié)構(gòu)。本文在網(wǎng)頁(yè)編程技術(shù)的基礎(chǔ)上，通過Three.js 引擎導(dǎo)入鍛壓設(shè)備的3D 網(wǎng)頁(yè)模型，并對(duì)投影光源、相機(jī)、渲染器等要素進(jìn)行設(shè)置，使鍛壓設(shè)備的孿生模型3D 實(shí)時(shí)可視化顯示。在此基礎(chǔ)上搭建的DTS 的后臺(tái)數(shù)據(jù)庫(kù)，利用Node.js 創(chuàng)建了前后端的連接，用Ajax 實(shí)現(xiàn)不刷新頁(yè)面更新服務(wù)器端數(shù)據(jù)功能。從而創(chuàng)建了較為完整的Web 前端頁(yè)面3D 顯示、后端數(shù)據(jù)庫(kù)以及前后端的交換。由于數(shù)控機(jī)床設(shè)備結(jié)構(gòu)復(fù)雜，狀態(tài)自由度多，目前只能實(shí)現(xiàn)較為簡(jiǎn)單的動(dòng)畫模擬設(shè)備實(shí)際運(yùn)行工況。在后續(xù)開發(fā)升級(jí)中，將逐步完善設(shè)備three.js 模型的數(shù)據(jù)驅(qū)動(dòng)動(dòng)態(tài)化運(yùn)行。并對(duì)數(shù)據(jù)面板等模塊進(jìn)行優(yōu)化和豐富。