三維標(biāo)注在Web環(huán)境下的顯示瀏覽方法研究

汪 耀，盛步云

（武漢理工大學(xué)機(jī)電工程學(xué)院，湖北 武漢 430070）

1 引言

目前，隨著經(jīng)濟(jì)全球化的發(fā)展，機(jī)械制造業(yè)面臨的是一個協(xié)同設(shè)計與分布式制造的時代。傳統(tǒng)的CAD軟件正在面臨挑戰(zhàn)，發(fā)展三維瀏覽擺脫大型軟件安裝，實現(xiàn)CAD模型的顯示W(wǎng)eb化是一種時代趨勢[1]。

現(xiàn)代互聯(lián)網(wǎng)的發(fā)展十分迅猛，網(wǎng)絡(luò)傳輸速度節(jié)節(jié)攀升以及近年的5G技術(shù)革新，則都為傳統(tǒng)的三維CAD軟件走出PC束縛實現(xiàn)Web三維創(chuàng)造了條件。近年來，三維產(chǎn)品模型開始利用Web3D技術(shù)來實現(xiàn)Web瀏覽，以實現(xiàn)設(shè)計人員的協(xié)同合作以及非設(shè)計人員的交流溝通、模型共享等功能。目前，當(dāng)在Web環(huán)境下顯示三維CAD模型時，其相應(yīng)的產(chǎn)品制造信息（如尺寸、表面粗糙度、形位公差等標(biāo)注信息）便會丟失，這與信息化社會對制造業(yè)產(chǎn)品設(shè)計提出的基于信息共享的可視化、集成化、協(xié)同化的發(fā)展要求不相符合[2]。

為了解決三維產(chǎn)品模型在Web環(huán)境的顯示時三維標(biāo)注信息丟失的問題，提出三維標(biāo)注在Web環(huán)境下的顯示瀏覽方法。選擇以UG平臺下的三維標(biāo)注為例，通過使用WebGL技術(shù)實現(xiàn)三維標(biāo)注在web環(huán)境下的信息重構(gòu)和實時顯示。經(jīng)實例驗證，該三維標(biāo)注的信息重構(gòu)與實時顯示方法實現(xiàn)了三維標(biāo)注在web環(huán)境下的顯示，并能在模型位姿變化等情形時使三維標(biāo)注信息得到正確的實時顯示控制。

2 三維標(biāo)注在Web環(huán)境下的顯示瀏覽系統(tǒng)的總體結(jié)構(gòu)設(shè)計

為了在Web環(huán)境中實現(xiàn)三維標(biāo)注的顯示瀏覽系統(tǒng)，首先分析系統(tǒng)需求，并設(shè)計得出解決方案，Web環(huán)境下的三維標(biāo)注顯示瀏覽系統(tǒng)的整體架構(gòu)框架，如圖1所示。

圖1 系統(tǒng)整體結(jié)構(gòu)設(shè)計Fig.1 Overall Structure Design of the System

如圖1，在對UG平臺下的MBD模型的三維標(biāo)注信息進(jìn)行深入的分析研究后，通過UG/Open工具，提取模型的三維標(biāo)注信息，在服務(wù)器端進(jìn)行Web環(huán)境下的三維標(biāo)注顯示瀏覽系統(tǒng)的開發(fā)。根據(jù)所提出的系統(tǒng)設(shè)計思路，實現(xiàn)Web環(huán)境中三維標(biāo)注的顯示瀏覽，主要分為三個部分進(jìn)行研究。

2.1 模型的三維標(biāo)注信息提取

UG軟件的三維標(biāo)注是通過PMI模塊實現(xiàn)的，標(biāo)注信息封裝在MBD模型對象的標(biāo)注信息集中，傳統(tǒng)三維模型通過Web3D技術(shù)進(jìn)行顯示時會丟失MBD模型的標(biāo)注信息，更不可能實現(xiàn)三維標(biāo)注信息在Web環(huán)境下的圖形渲染，綜合分析后決定采用UG提供的UG/Open工具對模型的三維標(biāo)注信息進(jìn)行提取，并在提取完成后將所有三維標(biāo)注對象封裝為JSON文件，便于前端瀏覽器的信息傳遞和解析。

2.2 三維標(biāo)注在Web環(huán)境的信息重構(gòu)

結(jié)合HTML5和JavaScript語言，加載傳輸三維標(biāo)注對象數(shù)據(jù)，以便瀏覽器可以讀取服務(wù)器上的標(biāo)注信息JSON文件，調(diào)用Web繪圖標(biāo)準(zhǔn)，以Three.js作為3D引擎，在HTML5的Canvas上實現(xiàn)三維標(biāo)注的靜態(tài)信息重構(gòu)。

2.3 三維標(biāo)注在Web環(huán)境的實時顯示

三維標(biāo)注在Web環(huán)境下的顯示位置和顯示姿態(tài)（包括標(biāo)注平面法向量方向、文字書寫方向等）應(yīng)隨著三維模型位姿的變化而變化。為了實現(xiàn)三維標(biāo)注的動態(tài)準(zhǔn)確顯示，研究了三維場景對象的每個渲染循環(huán)中三維標(biāo)注的動態(tài)準(zhǔn)確顯示方法，通過計算每一個渲染循環(huán)中，三維模型姿態(tài)變化對應(yīng)的三維標(biāo)注的實時變換矩陣來確保三維標(biāo)注的實時顯示控制。

3 三維標(biāo)注在Web環(huán)境下的信息重構(gòu)與實時顯示方法

3.1 三維標(biāo)注信息提取

UG軟件的三維標(biāo)注功能，可以實現(xiàn)在三維空間中將產(chǎn)品制造信息（即，諸如產(chǎn)品尺寸、表面粗糙度、形位公差等三維標(biāo)注信息）直接標(biāo)注在三維CAD模型上。三維標(biāo)注一般分為五種類型的標(biāo)注：尺寸標(biāo)注、基準(zhǔn)標(biāo)注、幾何公差標(biāo)注、粗糙度標(biāo)注和技術(shù)要求注釋。

不同類型的三維標(biāo)注信息形成CAD模型的標(biāo)注信息集合，如圖2所示。每種類型的一個三維標(biāo)注集合都可以抽象成由一個三維標(biāo)注對象與相關(guān)標(biāo)注平面對象組成，其中三維標(biāo)注對象代表的是標(biāo)注信息的組成元素，標(biāo)注平面對象代表的是標(biāo)注信息的位置信息。UG軟件的模型三維標(biāo)注信息提取流程可分為3大步驟：獲取各類型三維標(biāo)注信息集合；遍歷標(biāo)注信息集合，提取標(biāo)注信息元素并封裝成標(biāo)注對象；進(jìn)一步封裝標(biāo)注對象集合為JSON格式文件，如圖3所示。

圖2 三維標(biāo)注信息集合Fig.2 3D Annotation Information Collection

圖3 三維標(biāo)注信息提取流程Fig.3 3D Annotation Information Extraction Process

（1）應(yīng)用程序初始化，輸入帶用三維標(biāo)注信息的MBD模型文件，通過UG/Open提供的相關(guān)API獲取各類型三維標(biāo)注信息集合。

（2）針對在Web環(huán)境下對三維標(biāo)注進(jìn)行信息重構(gòu)時所需要的標(biāo)注元素，提取各標(biāo)注信息集合內(nèi)的指定信息，并將每個三維標(biāo)注封裝成獨立的對象。

（3）對所獲取的標(biāo)注對象進(jìn)一步封裝，得到便于web傳輸?shù)腏SON格式文件。

3.2 三維標(biāo)注在Web環(huán)境下的信息重構(gòu)方法

作為一種3D繪圖標(biāo)準(zhǔn)，WebGL將JavaScript和OpenGL ES2.0結(jié)合在一起，可以為HTML5 Canvas提供硬件3D加速渲染，能在網(wǎng)頁上創(chuàng)建復(fù)雜的3D場景、模型[3]。

Three.js是通過對底層WebGL圖形接口進(jìn)行封裝，形成的一個優(yōu)秀的第三方庫，完全支持三維標(biāo)注在web環(huán)境下的圖形文字及線條樣式的繪制。它支持外部各種字體及文字的導(dǎo)入，提供三維數(shù)據(jù)渲染的虛擬平臺。采用WebGL技術(shù)，以Three.js作為3D引擎從而實現(xiàn)三維標(biāo)注在Web環(huán)境下的信息重構(gòu)，以直線尺寸標(biāo)注為例，其在Web環(huán)境下的信息重構(gòu)算法流程圖，如圖4所示。

圖4 Web環(huán)境的三維標(biāo)注信息重構(gòu)算法流程圖Fig.4 Flow Chart of 3D Annotation Information Reconstruction Algorithm in Web Environment

首先，根據(jù)標(biāo)注信息JSON文件，讀取當(dāng)前標(biāo)注樣式（即，諸如尺寸線長度、粗細(xì)；箭頭大小、形狀；文字字體、大小等信息）以及標(biāo)注平面對象（平面法向量norV、文字書寫位置d′、文字書寫方向向量writeV）等尺寸標(biāo)注對象信息。然后根據(jù)尺寸標(biāo)注樣式進(jìn)行三維尺寸標(biāo)注的繪制，繪制完成后，再根據(jù)標(biāo)注平面對象信息計算出三維尺寸標(biāo)注的初始顯示矩陣M。最后根據(jù)尺寸初始顯示矩陣M，在三維場景中渲染出尺寸標(biāo)注對象。此時，尺寸標(biāo)注對象的位置、姿態(tài)是由原始標(biāo)注平面對象確定的，并不會隨著模型位姿的改變而改變。

算法實現(xiàn)具體步驟如下：

Step1：確定文字書寫坐標(biāo)系；

Step1.1：讀取JSON文件，獲取標(biāo)注平面法向量norV（c1，c2，c3）和文字書寫方向向量writeV（ɑ1，ɑ2，ɑ3）并且單位化

Step1.2：根據(jù)右手定則，計算書寫坐標(biāo)系第三個分量（b1，b2，b3）=（c1，c2，c3）×（ɑ1，ɑ2，ɑ3）

Step1.3：單位化向量（b1，b2，b3）

Step2：計算文字偏移量（dx，dy，dz）；

Step2.2：計算文字偏移量（dx，dy，dz）=-（d1，d2，d3）

Step3：得到文字變換矩陣M

Step4：計算標(biāo)注文字在三維空間的顯示位置

norV代表標(biāo)注平面法向量，writeV代表文字書寫方向向量，d（d1，d2，d3）代表文字創(chuàng)建時文字書寫位置代表文字實際書寫時文字位置，如圖5所示。

圖5 文字書寫示意圖Fig.5 Text Writing Diagram

3.3 三維標(biāo)注在Web環(huán)境下的實時顯示方法

在操作者與三維場景的交互過程中，三維標(biāo)注的位置、姿態(tài)并不是一成不變的，根據(jù)JSON文件讀取的標(biāo)注平面對象只能確定當(dāng)前三維標(biāo)注對象在當(dāng)前相機(jī)視角下的位置及姿態(tài)。而在每一個渲染循環(huán)中，由于三維CAD模型在平移、旋轉(zhuǎn)時位置姿的改變，三維標(biāo)注的實時顯示矩陣需要重新計算。

為了解決實際情形中三維標(biāo)注需要隨著CAD模型位姿變化而旋轉(zhuǎn)、顛倒等問題，主要對以下3個因素進(jìn)行了考慮：三維標(biāo)注的實時正確位置、標(biāo)注文字的正反面以及標(biāo)注文字的正確書寫順序，最終決定采用通過計算每個渲染循環(huán)中三維標(biāo)注的實時變換矩陣的方法來實現(xiàn)三維標(biāo)注位姿的動態(tài)改變。

以直線尺寸標(biāo)注為例，由上述三維標(biāo)注的初始顯示矩陣M可知尺寸標(biāo)注的初始位置、標(biāo)注平面法向量和文字書寫方向。所以，三維標(biāo)注在web環(huán)境下的實時顯示需要考慮的問題主要為兩點：（1）CAD模型位姿改變時標(biāo)注平面法向量的變化；（2）CAD模型位姿改變時文字書寫方向的變化。三維標(biāo)注的實時顯示算法流程，如圖6所示。

圖6 Web環(huán)境的三維標(biāo)注實時顯示算法流程圖Fig.6 Flow Chart of 3D Annotation Real-Time Display Algorithm in Web Environment

算法實現(xiàn)具體步驟如下：

Step1：標(biāo)注點在屏幕上左右判斷；

Step1.1：標(biāo)注的起點與終點的對應(yīng)屏幕位置轉(zhuǎn)化，T1為轉(zhuǎn)化矩陣

Step1.2：判斷標(biāo)注點在屏幕上的左右

Step1.3：得到文字變換矩陣M1

Step2：標(biāo)注平面是否需要反向判斷；

Step2.1：計算當(dāng)前渲染循環(huán)中標(biāo)注平面法向量norV與相機(jī)向量camV的夾角Angle（0～180°）

Step2.2：保證標(biāo)注平面處于視角正向

Step2.3：得到文字變換矩陣M2

Step3：得到文字實時變換矩陣M

Step4：計算標(biāo)注文字在三維空間的實時顯示位置InPt′

模型旋轉(zhuǎn)過程中，標(biāo)注文字書寫順序反向示意圖，如圖7所示。

圖7 文字書寫方向反向Fig.7 Reverse Writing Direction

模型旋轉(zhuǎn)過程中，標(biāo)注平面法向量與相機(jī)向量的夾角關(guān)系示意圖，如圖8所示。

圖8 標(biāo)注平面法向量與相機(jī)向量夾角關(guān)系Fig.8 The Relationship Between the Plane Normal Vector and the Camera Vector

以上算法通過三維標(biāo)注的實時變換矩陣保證了三維標(biāo)注的正確顯示。在不同的渲染循環(huán)中，當(dāng)CAD模型位姿發(fā)生改變時，世界坐標(biāo)與對應(yīng)投影的設(shè)備屏幕坐標(biāo)發(fā)生改變，相機(jī)向量發(fā)生改變，更新三維標(biāo)注信息集合中的每一個三維標(biāo)注的位置信息（即實時變化矩陣），即可實現(xiàn)三維標(biāo)注的動態(tài)顯示控制。

4 應(yīng)用實例

為了驗證所提的三維標(biāo)注在Web環(huán)境下的信息重構(gòu)與實時顯示方法的有效性?；赪ebGL技術(shù)，選擇Three.js作為3D引擎，搭建一個基于Web的三維標(biāo)注顯示瀏覽系統(tǒng)，并導(dǎo)入基于UG的帶標(biāo)注信息的三維模型，運(yùn)行實例以測試算法的有效性。原始模型，如圖9所示。

圖9 實驗原模型Fig.9 Experimental Original Model

使用所提三維標(biāo)注信息重構(gòu)方法的三維模型標(biāo)注信息在Web環(huán)境下的顯示效果圖，經(jīng)多次實驗證明該方法能很好在Web環(huán)境下實現(xiàn)出三維標(biāo)注的初始姿態(tài)顯示，如圖10所示。另外，為驗證模型翻轉(zhuǎn)、旋轉(zhuǎn)時標(biāo)注信息的實時動態(tài)顯示的準(zhǔn)確性。在Web虛擬三維場景中對三維模型進(jìn)行旋轉(zhuǎn)等交互操作，使用所提方法的三維標(biāo)注實時顯示效果圖，如圖11所示。

圖10 Web環(huán)境的三維標(biāo)注信息重構(gòu)Fig.10 3D Annotation Information Reconstruction in Web Environment

圖11 模型旋轉(zhuǎn)過程中三維標(biāo)注實時顯示Fig.11 Real-Time Display of 3D Annotation During Model Rotation

從左到右分別為，在側(cè)面視角下模型位姿不斷變換時，三維標(biāo)注在Web環(huán)境中的顯示效果圖，經(jīng)過多次改變模型位姿，證明所提方法能夠很好的實現(xiàn)三維標(biāo)注在Web環(huán)境中的動態(tài)正確顯示。

5 結(jié)論

從系統(tǒng)整體結(jié)構(gòu)設(shè)計出發(fā)，結(jié)合應(yīng)用實驗，可知Web環(huán)境下的三維標(biāo)注顯示瀏覽系統(tǒng)設(shè)計滿足預(yù)期結(jié)果，解決了CAD模型在瀏覽器端進(jìn)行顯示時，三維標(biāo)注信息丟失的問題，保證了設(shè)計人員協(xié)同合作過程中，對CAD模型信息的直觀獲取。

具體體現(xiàn)在：

（1）與傳統(tǒng)CAD模型Web顯示技術(shù)相比，系統(tǒng)使用WebGL技術(shù)實現(xiàn)，直接使用底層的圖形硬件進(jìn)行圖形渲染，避免了瀏覽器端插件的安裝。

（2）通過Web端的標(biāo)注信息重構(gòu)與實時顯示方法，實現(xiàn)了Web環(huán)境下的三維標(biāo)注完整顯示，完全解決以前存在的三維標(biāo)注丟失問題，便于設(shè)計人員實時瀏覽。