風(fēng)能，作為一種清潔無公害，取之不盡，用之不竭的可再生資源，非常適合用來發(fā)電。我國風(fēng)能資源豐富，可開發(fā)利用的風(fēng)能儲量約為 10 億千瓦，其中海上可開發(fā)和利用的風(fēng)能儲量達(dá)到了 7.5 億千瓦。依托于豐富的海洋風(fēng)能資源，加快海上風(fēng)電項(xiàng)目的建設(shè)和發(fā)展，對加速沿海地區(qū)的能源轉(zhuǎn)型，推動地方經(jīng)濟(jì)發(fā)展，提升沿海地區(qū)的生態(tài)環(huán)境，推動風(fēng)電技術(shù)進(jìn)展和產(chǎn)業(yè)升級，促進(jìn)能源結(jié)構(gòu)調(diào)整具有重要的意義。因此，海上風(fēng)力發(fā)電場應(yīng)運(yùn)而生。

Demo 主頁面中展示了海上風(fēng)電場的基本構(gòu)成，包括一定規(guī)模數(shù)量的風(fēng)電機(jī)組,輸電系統(tǒng)和升壓臺。風(fēng)電機(jī)組有序排放，葉片隨風(fēng)向和風(fēng)速不停轉(zhuǎn)動，將海洋上豐富的風(fēng)的動能經(jīng)過一系列轉(zhuǎn)換，轉(zhuǎn)化為寶貴的電能輸出；每個(gè)風(fēng)電機(jī)節(jié)點(diǎn)產(chǎn)生的電能經(jīng)過輸電系統(tǒng)源源流動，如同水流般匯聚于海上風(fēng)電場的“心臟”——升壓臺。

點(diǎn)擊風(fēng)機(jī)葉片，可以進(jìn)入葉片的微觀世界，以微觀視角看風(fēng)機(jī)的詳細(xì)信息，包括風(fēng)機(jī)參數(shù)，環(huán)境參數(shù)，發(fā)電信息和故障信息等。場景的搭建采用圖撲軟件（Hightopo） 的HT 自主研發(fā)的基于 HTML5 的 2D/3D 渲染引擎完成，其中的動畫和人機(jī)交互也是基于自主研發(fā)的組件，依托于 JavaScript 和 HTML5 完成。

場景加載：

在前面部分，文章提到本案x例的場景都是通過自主研發(fā)的渲染引擎完成，那么搭建好的場景如何通過代碼加載，呈現(xiàn)給用戶呢？在 HT 中，我們通過 ht.graph.GraphView和ht.graph.Graph3DView 分別來呈現(xiàn) 2D 和 3D 場景，然后通過反序列化完成場景的加載。

開場動畫：

預(yù)加載后面的場景，使進(jìn)入主題頁面更為順暢。

本案例的開場動畫相對比較簡單，動畫的核心機(jī)制是使用了 HT 內(nèi)部封裝的動畫函數(shù) ht.Default.startAnim()，通過啟動一個(gè)動畫對象來使整個(gè)動畫運(yùn)行起來。ht.Default.starAnim() 支持 Frame-Based 和 Time-Based 兩種方式的動畫，F(xiàn)rame-Based 的方式是用戶通過指定 frames 動畫幀數(shù)，以及 interval 動畫幀間隔參數(shù)來控制動畫效果，而 Time-Based 的方式是用戶只需要指定 duration 的動畫周期的毫秒數(shù)即可，HT 將在指定的時(shí)間周期內(nèi)完成動畫；還設(shè)定了 delay 動畫延遲執(zhí)行的時(shí)間來搭配動畫實(shí)現(xiàn)的效果；easing 參數(shù)則是用于讓用戶自定義函數(shù)，通過數(shù)學(xué)公式控制動畫，如勻速變化、先慢后快等效果；action 函數(shù)的第一個(gè)參數(shù) v 代表通過 easing(t) 函數(shù)運(yùn)算后的值， t 代表當(dāng)前動畫進(jìn)行的進(jìn)度 [0, 1]，一般屬性變化根據(jù) v 參數(shù)進(jìn)行。finishFunc 參數(shù)代表動畫結(jié)束后的動作。action 函數(shù)和 finishFunc 動畫結(jié)束回調(diào)函數(shù)，通過一些效果的搭配使用，可以使用戶達(dá)到平滑的動畫效果。本案例的開場動畫通過設(shè)置起始和終止視角的位置，在一定周期內(nèi)， 使用 setEye(eye) 來完成視角的變化。

風(fēng)電機(jī)組：

隨風(fēng)而動，將海上風(fēng)能轉(zhuǎn)化為電能。

在海上風(fēng)電場項(xiàng)目中，風(fēng)電機(jī)組的數(shù)量都是具有一定規(guī)模的，這些風(fēng)電機(jī)組收集海上豐富的風(fēng)能，轉(zhuǎn)化為人類所需的電能。那對于這些一定規(guī)模數(shù)量的風(fēng)電機(jī)組，如何保證其運(yùn)行的流暢性呢？本案例使用了圖撲軟件（Hightopo）的 HT 提供的批量 （batch）提高系統(tǒng)性能。

批量的原理即如果圖元一個(gè)個(gè)單獨(dú)繪制模型時(shí)性能較差，但是當(dāng)一批圖元聚合成一個(gè)大模型進(jìn)行一次性繪制時(shí)，則會極大提高 WebGL 的刷新性能。批量的使用方法是先通過 ht.Default.setBatchInfo 函數(shù)全局注冊批量，再對 Data 使用 .s('batch', 'batchName') 設(shè)置對應(yīng)的 batch 批量名。流程如圖所示：

在本案例中，每個(gè)風(fēng)機(jī)模型被分為三部分，標(biāo)簽部分1，葉片部分2 和 主體部分 3。在上面圖示的 batch 流程中，可以發(fā)現(xiàn)只對標(biāo)簽部分 1 和 主體部分 3 應(yīng)用了 batch 操作，但是沒有對主體部分 2 運(yùn)用 batch。這是因?yàn)槿~片部分需要隨風(fēng)轉(zhuǎn)動，其屬性會發(fā)生頻繁變化，在 batch 里面的圖元盡可能避免頻繁的變化，如果屬性頻繁變化，將可能起到反作用。

風(fēng)電機(jī)的詳細(xì)信息：

進(jìn)入微觀視角，將風(fēng)電機(jī)的一切盡收眼底。

點(diǎn)擊每個(gè)風(fēng)電機(jī)的葉片，都能打開風(fēng)電機(jī)的詳細(xì)頁面。在此場景中，我們采用了科技線框風(fēng)格來展示風(fēng)電機(jī)的內(nèi)部架構(gòu)，相對于大部分的實(shí)景搭建，感官上更為震撼和炫酷。在展示風(fēng)機(jī)內(nèi)部結(jié)構(gòu)的同時(shí)，兩側(cè)還展示了該風(fēng)機(jī)周圍的環(huán)境參數(shù)，海上風(fēng)向風(fēng)速信息，風(fēng)機(jī)本身的數(shù)據(jù)監(jiān)測，發(fā)電參數(shù)等。點(diǎn)擊風(fēng)電機(jī)的某個(gè)部位，可以看到以 billboard 樣式展示的詳細(xì)信息。

輸電系統(tǒng)：

不辭勞苦，將電能源源不斷地輸送給升壓臺。

經(jīng)過風(fēng)電機(jī)轉(zhuǎn)換而來的電能，通過輸電系統(tǒng)源源不斷地輸送給升壓臺，如同涓涓細(xì)流匯入大江大河。在本案例中，輸電系統(tǒng)是使用空間管線 ht.polyline 實(shí)現(xiàn)的，ht.polyline 繼承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三維空間點(diǎn)描述。ht.polyline 的走向由 points 和 segments 決定。案例中的流動效果是通過使用 setInterval 方法來不停地動態(tài)改變管線的 top.uv.offset 屬性來實(shí)現(xiàn)。輸電系統(tǒng)的管道也是數(shù)量龐大的，因此也采用 batch 實(shí)現(xiàn)。其流程如上圖所示。

人類對海洋的探索永無止境，全面、準(zhǔn)確而深刻地了解海洋，掌握海洋的運(yùn)動規(guī)律，開發(fā)海洋，經(jīng)略海洋，保護(hù)海洋，拓展藍(lán)色經(jīng)濟(jì)空間，已經(jīng)成為人類生存和社會發(fā)展的趨勢。海洋經(jīng)濟(jì)，海洋科技將來是一個(gè)主攻方向，而海上風(fēng)力發(fā)電場作為海洋強(qiáng)國的一部分，也將會涌現(xiàn)一批又一批精品工程，圖撲軟件也會更加專注于自主產(chǎn)品研發(fā)，在力所能及的領(lǐng)域貢獻(xiàn)一份力量。