/ _+ U( E% Z/ D4 m* e9 {1 b& } # J) I/ C" W0 {7 s7 _2 [
前言 . y; |$ g, B1 \4 H9 O2 _0 M
' Q& w- h# |9 o3 P0 k. Z6 P x 5 v }, l2 b7 v
我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。 6 T1 I) Y0 ?/ V5 c0 ~
1 P0 A% k7 `" J4 N
' K h! j) ?5 C$ s4 p
风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。 4 {% c, [. ?9 ~6 H
4 a- W1 \! g( ~: z( a - m3 S- ]: H# v% u7 C
介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。
7 H3 Z) ]/ ]6 \& a+ T
- ?/ W" k" l0 U- a: Y) `* z ) _) X. V" b4 N
界面简介及效果总览 : b6 c; T) G4 H0 d* ]" d; j
# a6 W0 ~9 @" j# f
+ d' Z7 K2 X7 i* x. a 7 I' c2 M7 f; i3 s7 ?) v
2 m. D+ v4 ]! z3 |6 r3 H2 G
! R1 ?/ D' T0 l1 i: f+ l
Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。 * V- _6 E# s+ Z% O7 D/ Y4 e
# ]. D9 D$ O% X+ f# G9 ? 4 ~5 Z' s, f% G4 F# Z$ o
; t; `- _/ h3 z6 k& N3 ?( W
* n, F, z2 l; [9 a4 y+ [8 N- p
- Y2 J5 f* b! r" y$ h1 D1 K: L
点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。
& V# E) G' n1 C( m' X/ e( R
1 m* K8 {, Y& _. r z* ?/ {
2 B2 K. P4 n4 b/ ?9 [% L 实现过程 & F0 f' i+ M* ~) ]. j' `
- y) ^2 e$ q2 R* c& [& b
( l6 B8 C. P+ a5 G& i
场景加载 6 e+ s5 Z4 S8 X9 V4 w
6 D) F( U1 e% R0 {% r" ]
3 \- t/ f, s# }$ \, I
在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。
( Z, r" d1 p3 K8 o' v) I
0 p7 f( |! R) t! j x# d5 D! {5 L- N- f
开场动画
/ K8 {( L; {( y+ z$ d
: J1 h; E5 d o& m , [8 k7 y5 ?6 A' G2 X
' F7 [: l4 ]1 J1 E' o9 D/ S! J
. a" n( w: }& i, M( ^. w
5 _& t( x* I. n2 Q 本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。
* }% V5 R: `5 Q% \5 i/ s
2 E$ { h$ A& ?$ o, I$ q + W0 l8 }/ l' D6 w4 ]/ p2 [
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 参数进行。 2 U, b& o Z# ?' t& m* J! _
U- s' c% \3 s4 b1 ^3 w3 C & g; F- ~: y' |# z' l7 x
finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。 ( v }& J# U- Z
" `+ Y9 x% t5 ~6 c: W) Y : y& A" q7 N$ v J
本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。
4 r p2 ~3 {* m( c L
o) E; R; [+ K0 F
3 |1 R) w$ H, o3 c# x3 Y 实现价值 2 n1 [8 i$ t, V% k
# m+ v+ }& ~. A+ f9 T# K
2 a2 B1 M. {4 X0 l) U
风电机组：
2 ~3 e: Z0 L2 ~ h
, p6 j% w0 f6 s/ \
9 ?+ O% x# n' K( Z* E 随风而动，将海上风能转化为电能
' c$ }2 z3 a0 f9 p( J, ~ w% U& F2 I, K
x- B7 s/ @- v" Q" }' S
8 s6 u A8 V. S Z- W. T- S. y4 v- w J 6 p% ?' O) C7 x* b
- U, b9 r8 X; ?" V! G* f 在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。
: d8 m1 L2 R5 @4 z
S0 K7 ^$ E# C' `* U6 D4 v
4 ~/ z: S K+ h7 M0 O 批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示：
8 T3 i3 |: J+ b6 Z " f+ o5 v; d" ?, ?2 D' [- h: N
6 v* j: X1 y* u) L8 n6 j) o( S
* O0 l) m( o* V
) q' R0 h2 T( O; Z+ N
! j: ]: G. u) G! o ; ~3 X& O6 K2 v% j. L: C
J0 w" p# x2 ^
" o5 t* V2 P0 W! G& ?! V) O
在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。 ) `" A+ @6 D. b$ F$ d/ ?
1 k: \8 b+ N7 p I8 N
5 r7 j8 q1 m5 p 风电机的详细信息：
2 I2 a* g. R5 J* \# l* s/ @ 9 h9 f" W5 n5 ^! `4 m
) j7 s7 @( e1 k, z 进入微观视角，将风电机的一切尽收眼底 " j2 z. J7 O5 ?0 }% h" j
% R. `/ Z/ N( A+ v5 s9 E
# b, G2 [7 `( J( [2 b+ u
6 m: e7 Y3 a8 }6 M0 G$ j P6 m p% |) ]5 A' D) P6 E; e& u s5 B
! Y0 K" E2 x; q
点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。 ; r. T8 h1 h' J. T7 P
% x% N- {8 S) y9 y
3 J5 C* M& f/ E
输电系统：
1 }4 C' _3 t5 N$ A; K1 n: w ( @" J9 s* ]3 n
( ~1 z. E7 F+ l4 g# o+ {. D" F
不辞劳苦，将电能源源不断地输送给升压台 $ v+ ?( x" K# y' N; w& V) i- A
. k1 U; n( l& `& c! G; w5 X
6 f/ i/ v! L+ M 经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。
0 q2 [0 P- Q; X$ W" e6 K2 z
2 o; o: q) H+ N, q
1 U8 a/ k' O5 ], Y2 I 在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示：
0 m1 Y7 d6 J! `5 F5 t; V: x % v' C' z8 m8 b& S# y' k
# w+ B! j5 K- r, ] a
8 z4 j! I3 K% V/ K9 J9 H
; ^) t6 {0 F4 | 8 @4 H& w5 x+ M/ ?7 G
总结 / C6 H7 d. N: c/ N, q
2 [( o9 m u' {, ^5 r # j' n! C4 M. l+ ^4 a# l& _9 r( E
建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。 % J2 ~& e! D4 Y2 S' ]' d
- T! ~# b9 C7 `( R X+ _& M: M8 P0 w
2 o. p, l) K3 l$ Y0 X, z. ]
举报/反馈 ! d( R" `$ z' T g& o
" _5 E) r, t7 ~. J# c5 l
* m3 D! V6 c8 F
; ?! e2 F7 V3 z$ [! y. g& p: L( }( e4 E& p* N$ @9 L8 Y8 Y5 S: M
$ J9 g7 m- o7 E; h, @" I" O | 
