% d: d" w% F J/ l8 T) J 9 B% {1 u) t( R& L+ x- o
前言 6 a8 G1 y5 ?$ V2 w. a1 |
- v; P/ z- ?6 v/ \
( G% R6 Q+ F3 o2 J! X
我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。
8 X4 T. J; y. }8 l' E$ s! U
& A! X, T7 a. I% t
3 L O7 b2 S; T( J/ p; Z 风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。 / Y3 Z6 _4 ]: |& w9 d/ i
$ j. [2 }3 k$ u( u2 L4 v
5 G3 `/ r8 s) u7 m7 ]& {+ _ 介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。
5 d% M$ j0 N, F, \# M
0 R7 v& `/ P9 J' _8 m
2 f# f. c; Y P8 w1 {$ p6 z- F 界面简介及效果总览 - Y6 T" W: e/ \# M* Y9 b8 u1 E
9 C9 M4 T7 F# H) @6 J. [
& W4 U/ n8 ^) ]+ a9 k3 `1 A3 k# i 1 x+ d& ^& ?, D |9 G$ D1 _
7 v8 v; L( t/ I3 f" }& Z, Z t/ n
" B+ Y# z: F z' L8 D2 x
Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。 ! S7 z9 k$ P8 L
5 N0 {1 p" n# {# R3 Y+ p
) U4 \5 z# v+ T( ? + `! F% s# K- ]0 d, v
/ b5 v$ g t' h$ O7 g 2 ~9 N$ X" b5 P j2 k& e: T! A: W
点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。 : v$ {. ]8 I2 Y) M8 x
% D& A8 n( k6 Z % m# ^3 K X. p4 ]. Y
实现过程
! r$ \" \( i. I6 |" G D. x" |7 ~: r, t8 I. m
) k: P1 ~" N8 f% y# e+ X. u; {
场景加载
! K; R3 K' M* f+ w. v& [; S7 K
7 @# T# ]" H3 }" L' k6 Y2 H9 O2 `7 U
4 W- ~4 W8 G5 }1 R) ^ 在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。 " t1 {* A; |) e! R- s
% B* p& h+ S& D" ]5 }' N8 i" q) z . h9 b4 d, P9 z- g' i
开场动画
2 N: H7 x% Q0 t * w. z, @" @; b5 @2 k/ ~3 R8 U$ K
' {& T1 P- W1 y; N( J1 b7 ?! F # w+ M* c7 }* l g v
7 \3 B! M1 ]( M" K' T( }0 X0 i
% Y) O$ x+ L$ I: N& w 本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。 & s# P; d4 V; f- S+ S
0 m3 j5 Q1 f" B" O: h ! L; u& e7 b0 r) g" J0 ]
ht.Default.starAnim() 支持 Frame-Based 和 Time-Based 两种方式的动画，Frame-Based 的方式是用户通过指定 frames 动画帧数，以及 interval 动画帧间隔参数来控制动画效果，而 Time-Based 的方式是用户只需要指定 duration 的动画周期的毫秒数即可，HT 将在指定的时间周期内完成动画；还设定了 delay 动画延迟执行的时间来搭配动画实现的效果；easing 参数则是用于让用户自定义函数，通过数学公式控制动画，如匀速变化、先慢后快等效果；action 函数的第一个参数 v 代表通过 easing(t) 函数运算后的值， t 代表当前动画进行的进度 [0, 1]，一般属性变化根据 v 参数进行。
0 @+ v7 s! I, Z+ {+ x8 ` 1 K j% U& r, u i$ c* q+ z
5 ~9 d+ l" q8 l, c' |+ u finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。
$ ]$ H" Y# A. Y9 m4 n" P4 M
: r* e' K" C/ ?
s( [3 n N! L, f4 Q4 S7 N 本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。
) d" i% a" j( ` d$ V: ?* d $ T4 _ G( Q" C1 `
; ~( z/ b3 J W( ]) t
实现价值
, v: I0 Y! F4 U) b; M
8 s! ]5 `# i6 b" J
+ z b1 e# R$ d M6 r: F 风电机组：
9 Y: b7 H* {/ ]' O3 U
! n" N/ m5 g( k5 v
8 J+ q% @9 |; { j% z5 v* ~! I 随风而动，将海上风能转化为电能 . _/ u% F% r E& {" L
" d5 e \7 A/ V3 d. w: n3 O w
5 r" A/ R) j( \ P$ f3 u
P* P$ S* {' ~4 B5 Q . B" `. B1 a; r& }7 [ b3 G- [$ W5 b2 g
9 E9 j5 ^0 {# O5 l E# n$ a# ?( N2 ~$ ^( U
在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。
: D+ T! ]( f% n( ]6 D8 j$ l
1 w- }. g- L$ ?% ^. g* @" u ' N1 `! O: y8 D2 S' p/ g# Q" O% V
批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示： : v% ]# R1 H# p4 \" z1 ]. T8 ~
3 S$ F: z9 n5 g# ?" o
- p1 v+ y. c: ]8 G
" k& u. S& e ~+ F+ R1 E `
@/ l: b' `7 p* v% ~ $ M, r/ F4 {. i8 H' _
* {9 P6 [+ T4 `, O0 B0 T$ d
3 e8 R) V9 Z1 ^1 B z
8 M% D( u. x# G: l c0 G4 e 在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。
q# v5 S5 R A' d* g: N" M
8 n% h* D! y( t 2 c- c; d. \4 c( W% T
风电机的详细信息：
7 E; A$ t& v h( i4 {
: f! D& T" {+ A! u 8 i, X# b6 ^3 E7 v
进入微观视角，将风电机的一切尽收眼底
% Y$ g" L; m) G1 o- L1 u
' D5 ]: q) J7 a4 p- D: [
4 p4 B8 [7 H+ `% Z7 Q3 F1 n * g5 o) M5 M- Q8 |5 _& i1 i
& c3 R ^' y! w4 x9 m0 `) I
, G3 V3 w" x' ^+ t; b* ?+ a& @ 点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。 - }* V& H$ h' s( P3 [
" u% A( L3 J8 f
3 y4 q! z. `: Y, Q
输电系统：
" ~( p! D0 w" q8 B# L8 `0 J S! u) I1 a" T2 c. Y# t4 Q$ l6 E
3 A, b5 f" A5 C* W* m3 P
不辞劳苦，将电能源源不断地输送给升压台 $ r- t# S3 _1 r6 U# e9 y
. m9 F' Q0 B3 @" P2 @3 d6 g, y + T( V: W) h) T- C9 T0 b
经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。 4 f- i! V% a' _1 p
8 l' y6 N3 d N " ^1 Z2 Z% {5 t
在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示：
. o! p6 k& }7 \3 [2 c
2 s3 q$ L4 r1 Z8 m8 y Y: L- Y # O) P# z! x% t8 V- I3 S
. n0 G4 o9 Z$ A/ ?/ Z* G, z
* x5 Z3 N2 t( A( N0 c1 L ! x5 N6 W. B+ t
总结
7 `- }1 A6 z3 v7 q & Y0 ~, @# z2 f( ]; B
( X" o6 ]: M, {3 H 建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。 ; v6 P' ?0 ` Z& o8 [8 g
5 ^& p' W+ l% x
8 }) V! v" R; v+ I1 c" z
举报/反馈
, r( N8 W* y/ d0 M F$ u* Z
# P' d8 J1 I. I; p, v/ h0 v% x1 T! s/ Q& N5 t
7 |9 c4 \7 B* o: ]1 ~- t9 L
! F/ B a3 `* h: h& W7 `" j9 r& ~9 s$ {
| 
