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

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

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

場景加載：

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

開場動畫：

預加載后面的場景，使進入主題頁面更為順暢。

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

風電機組：

隨風而動，將海上風能轉化為電能。

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

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

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

風電機的詳細信息：

進入微觀視角，將風電機的一切盡收眼底。

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

輸電系統(tǒng)：

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

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

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