一種Web端圖形引擎中自定義空間多邊形面積的計(jì)算方法

劉秋燕　孫騫　楊禮國

摘? 要： 伴隨WebGL技術(shù)的發(fā)展，Web端上的圖形引擎應(yīng)用越來越廣泛。研究發(fā)現(xiàn)，當(dāng)前大多數(shù)圖形引擎在線測量功能無法正確測量自定義空間多邊形面積。本文按照三點(diǎn)共面的原理，自動拾取空間中同一平面的點(diǎn)，利用線段相交判斷方法規(guī)避多邊形區(qū)域重疊，最終將不規(guī)則的多邊形拆分為多個三角形，利用海倫公式及點(diǎn)和區(qū)域的相對關(guān)系正確計(jì)算自定義多邊形的面積。該計(jì)算方法擴(kuò)展了Web端圖形引擎的測量功能，對BIM行業(yè)在線測量和在線規(guī)劃有重要意義。

關(guān)鍵詞： 自定義空間多邊形; 面積計(jì)算; 圖形引擎; 海倫公式; BIM

中圖分類號：TP399? ? ? ? ? 文獻(xiàn)標(biāo)識碼：A? ? ?文章編號：1006-8228（2022）04-55-03

A calculation method of custom space polygon area in Web graphics engine

Liu Qiuyan Sun Qian Yang Liguo

（1. PowerChina Huadong Engineering Corporation Limited， Hangzhou， Zhejiang 311122， China;

2. Zhejiang Huadong Engineering Digital Technology Co. Ltd.）

Abstract： With the development of WebGL technology， graphics engine on Web is more and more widely used. It is found that most of the online measurement functions of graphics engines cannot correctly measure the area of custom spatial polygons. According to the principle of three points coplanar， points on the same plane in space are automatically picked up. The intersection judgment method of line segments is used to avoid overlapping polygon areas. Finally the irregular polygon is divided into multiple triangles， and the area of the custom polygon is calculated correctly by using Heron's formula and the relative relationship between points and areas. This calculation method extends the measurement function of the Web graphics engine， and is of great significance to the on-line measurement and on-line planning of BIM industry.

Key words： custom spatial polygon; area calculation; Web graphics engine; Helen formula; BIM

0 引言

Building Information Modeling（BIM）即建筑信息模型，該概念是由美國喬治亞理工大學(xué)的ChuckEastman教授于1975年提出的[1]。隨著WebGL技術(shù)的發(fā)展，BIM技術(shù)逐漸從C/S（Client/Server）架構(gòu)的可視化系統(tǒng)向B/S（Browser/Server）架構(gòu)的在線可視化方向發(fā)展。B/S架構(gòu)的Web端圖形引擎的出現(xiàn)使得用戶無需安裝各種BIM專業(yè)軟件使用瀏覽器即可輕松預(yù)覽各種建筑模型，同時包括視圖管理、測量、漫游等在內(nèi)的各種工具也成為Web端圖形引擎的必備功能。當(dāng)前大多數(shù)圖形引擎在線測量功能無法正確測量自定義空間多邊形面積?？臻g中自定義多邊形是指將鼠標(biāo)選取的點(diǎn)連線所形成的封閉多邊形，三維空間中選點(diǎn)有著高度的自由性和不確定性，三維空間中自定義多邊形面積的測量可以分以下幾步來實(shí)現(xiàn)：確定多邊形所在平面，自動將后續(xù)點(diǎn)擊的點(diǎn)投影到已確定的平面上，同時在多邊形繪制過程中對區(qū)域是否交叉做出判斷，規(guī)避用戶的無效行為，最后將多邊形拆分為多個三角形進(jìn)行面積計(jì)算，在計(jì)算過程中需要對多邊形類型進(jìn)行判斷以保證計(jì)算結(jié)果的準(zhǔn)確性。

1 WebGL技術(shù)簡介

WebGL是由Khronos協(xié)會開發(fā)的一套新的圖形繪制技術(shù)標(biāo)準(zhǔn)[2]。作為一種主流的Web端3D繪圖協(xié)議，WebGL可以為HTML5的Canvas容器提供硬件3D加速渲染，在Web端輕量級地展示3D交互場景和模型[3]。WebGL包含了許多可以跨多個平臺的、免費(fèi)的圖形開發(fā)API，常用于在Web瀏覽器中創(chuàng)建3D圖形。通過WebGL可以在Web瀏覽器網(wǎng)頁中進(jìn)行三維的圖形交互，而不需要另外安裝任何瀏覽器插件。另外，通過在HTML5的畫布中加入JavaScript的代碼，可以給程序提供硬件支持的三維效果的加速渲染。解決了傳統(tǒng)的三維應(yīng)用程序在場景交互時需要另外安裝特定插件以及系統(tǒng)不兼容等問題。

2 關(guān)鍵技術(shù)與實(shí)現(xiàn)

2.1 自動拾取同一平面中的點(diǎn)

空間多邊形測量的第一步需要確定多邊形所在的平面，根據(jù)數(shù)學(xué)知識可知三個不共線的點(diǎn)即可確定一個平面，因此在用戶選擇空間多邊形時，判斷最開始選取的三個點(diǎn)是否共線，如果共線則第二個點(diǎn)為冗余點(diǎn)，舍棄第二個點(diǎn)繼續(xù)選取，如果不共線則這三個點(diǎn)所確定的平面就是多邊形所在的平面，后續(xù)的選擇的點(diǎn)通過投影計(jì)算，自動拾取到該平面。

2.2 多邊形面積計(jì)算

不規(guī)則多邊形無法通過公式直接計(jì)算出面積，但是可以將多邊形區(qū)域拆分為多個三角形，然后累加三角形的面積得到多邊形的面積，單個三角形的面積可以根據(jù)海倫公式計(jì)算得到。

多邊形分為凸多邊形（每個內(nèi)角都是銳角或鈍角，也就是沒有大于180°的優(yōu)角的多邊形）和凹多邊形（至少有一個優(yōu)角的多邊形），計(jì)算凹多邊形面積時需要用已確定多邊形面積減去新三角形的面積，如圖1，多邊形ABCDE是一個凸多邊形，它的面積只需要累加三角形ABC、三角形ACD和三角形ADE的面積即可得到，而多邊形ABCDEF是一個凹多邊形，它的面積則需要多邊形ABCDE的面積減去三角形AFE的面積。

因此，在計(jì)算多邊形面積時需要判斷多邊形是否是凹多邊形。如果待確定的點(diǎn)在已確定點(diǎn)所組成的區(qū)域內(nèi)，則形成凹多邊形，反之則為凸多邊形。本文使用射線法來進(jìn)行確定，即：從待確定點(diǎn)做一條射線，計(jì)算它跟已確定多邊形邊界的交點(diǎn)個數(shù)，如果交點(diǎn)的個數(shù)為奇數(shù)，那么點(diǎn)在多邊形內(nèi)部，否則點(diǎn)在多邊形外部。在這一步的判斷中，參考圖 1此處不需要考慮線段AF、EF與相鄰線段之外的線段的交叉情況，區(qū)域交叉問題會在后續(xù)介紹。

判斷射線是否穿過線段只需判斷線段的兩個端點(diǎn)是否分別在射線的兩側(cè)即可，我們可以假設(shè)一個方向來幫助我們做判斷，如圖2所示，我們可以假設(shè)射線經(jīng)過的點(diǎn)以及上方區(qū)域在射線之上。

因?yàn)樵谌S空間中獲取到的點(diǎn)坐標(biāo)都是三維坐標(biāo)，所以為了方便計(jì)算這里將三維空間中的點(diǎn)轉(zhuǎn)換為二維空間中的點(diǎn)，實(shí)現(xiàn)思路是判斷這一組點(diǎn)坐標(biāo)的xyz坐標(biāo)的值，去除掉數(shù)值相同的坐標(biāo)，例如A（2、3、5）B（4、5、5）的Z坐標(biāo)相同，則可以將AB視為二維xy平面的點(diǎn)，判斷點(diǎn)在區(qū)域內(nèi)的算法如下[4]。

2.3 判斷區(qū)域交叉

如果區(qū)域交叉，使用三角形面積累加的方式計(jì)算多邊形面積會出現(xiàn)面積的重復(fù)計(jì)算。在這里，使用線段相交的方法去判斷區(qū)域是否交叉，分別使用待確認(rèn)點(diǎn)F與上一確認(rèn)點(diǎn)E構(gòu)成的線段和待確認(rèn)點(diǎn)F與初始點(diǎn)A組成的線段分別與其余相鄰點(diǎn)組成的線段做相交判斷。如果存在交點(diǎn)，判斷交點(diǎn)是否相同，交點(diǎn)相同則說明F點(diǎn)在多邊形的邊界上，區(qū)域不相交;交點(diǎn)不相同則區(qū)域相交[5]，如圖3所示。

2.4 線段相交的計(jì)算方式

如果一條線段的兩個端點(diǎn)分別處于另一條線段的兩側(cè)，那么這兩條線段是相交的。使用一條線段的兩個端點(diǎn)A、B與另一條線段的兩個端點(diǎn)C、D分別組成三角形ABD和三角形ABC，如圖4，通過向量叉乘計(jì)算兩個三角形的面積，因?yàn)橄蛄渴怯蟹较虻模杂?jì)算出的面積也是有方向的，如果兩個面積的正負(fù)號相同，則說明C、D兩點(diǎn)在線段AB同側(cè)，兩條線段不相交;反之兩條線段相交，最后通過直線的一般方程來計(jì)算交點(diǎn)坐標(biāo)，公式如下：

通過線段相交的判斷對用戶行為進(jìn)行提示，規(guī)避用戶的不當(dāng)操作，從而保證面積測量的準(zhǔn)確性。

3 結(jié)束語

針對當(dāng)前大多數(shù)圖形引擎在線測量功能無法正確測量自定義空間多邊形面積給出錯誤測量結(jié)果的問題，本文提出了一種通過自動拾取同一平面坐標(biāo)點(diǎn)，規(guī)避多邊形區(qū)域相交的方法，從實(shí)驗(yàn)結(jié)果可以看出，該方法可以有效提高自定義空間多邊形測量效率，避免多邊形測量錯誤，優(yōu)化了Web端圖形引擎的測量功能，對BIM行業(yè)在線規(guī)劃和在線校審有重大意義。下一步將繼續(xù)研究相交多邊形面積計(jì)算方法，提高計(jì)算準(zhǔn)確度和精度。

參考文獻(xiàn)（References）：

[1] 祝連波.我國建筑業(yè)信息化研究文獻(xiàn)綜述[J].生產(chǎn)力研究，2010（1）：254-256

[2] 劉丞.基于WebGL的大規(guī)模場景實(shí)時漫游技術(shù)研究[D].廣州工業(yè)大學(xué)，2019

[3] 李桉，許華虎.基于WebGL的無插件虛擬漫游關(guān)鍵技術(shù)的研究[J].計(jì)算機(jī)應(yīng)用研究，2020，37（S1）：227-229

[4] 劉瑜.一個點(diǎn)是否在多邊形區(qū)域內(nèi)的判斷方法：中國，CN111161525A[P].2020-05-15

[5] 孫春生.基于掃描線法的數(shù)字線劃圖中多邊形相交檢測算法[J].城市勘測，2020，177（2）：128-130