- E, S$ l9 U0 W" M2 h* @
3 l% M3 x0 u* P. i! \' _. ]" R 前言 + K! u0 j x5 m$ Y) f
' N4 O( B$ I) k3 ]
+ q4 C5 G" c6 ^) c4 J2 W/ U- c 我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。 " a4 |, b8 w% S9 {# A0 Y' J1 ]2 x
$ m6 M9 q# k! [) u; _) o
; @- a2 x, i1 Z8 _& c 风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。
8 h w* {& p6 [+ Z' _
5 k$ [ F/ c4 ~/ E* K) I4 W, ^4 i/ u A/ \% {# m3 _* N
介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。 6 g: w4 [- l3 U1 {
4 Z% e3 F6 A3 L. w
. T( r# }* Q7 ?* B 界面简介及效果总览
4 T# {& M; R' B
$ q. V+ V# O& Q( V3 v) M/ @
Z7 a% F) Y. p9 W/ S- S% ~ 4 P+ {& o k j" t9 J
5 z: t1 t9 f y% |% ?0 ~0 F + w( t" ?; u4 h0 [4 E, p+ ^
Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。
( k2 m/ j4 ]* ^& ]: N" [
7 T2 P4 a5 }% P# y4 w% ^ 3 b) t6 ^1 P' _& x6 ^2 b3 ~; G* `
4 u& C& b6 H! }. u' j H5 p" r0 @; K) E% k
$ i' O, K* B4 m) A
点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。 ; X' E. ?8 J+ M1 A+ l
7 F1 S A) f& [/ f( X; x! W
, L0 y) g% C% @: C0 `: E 实现过程
) Y! [, f0 N& a+ \) P5 F5 Z
6 Q- ~' f$ d) T) Y: B q3 ^" h/ r 3 x# l: I" w) g# N
场景加载 v! e2 r5 `0 I& P
% J, y2 o8 N' p( c. D5 q; m' s* U+ q0 z 3 K" X1 W( W% K! `4 ?0 n, f/ T$ V$ S
在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。
g0 ~2 e$ P9 @, k4 l P
% [! s1 N/ a, P: L/ ~ + h8 j' ^" }( U8 `9 |# y
开场动画 / |/ c; b; P$ G. o$ M
% v% p4 u* h2 R% k9 |3 l* K1 R& T
, {) {: X2 U: H" u; ~' s5 l# M, X 3 h4 ?+ |# \. i
6 Y2 T- x$ S8 @* k1 `4 P1 ?: \ ' z0 W- K0 c7 V' j. ^. Q9 u
本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。
" r% l4 {/ ~( q. ]! K5 W, V 3 t0 z0 X4 i: u2 P
7 d) x- h' F5 R' |3 E 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 参数进行。
) @6 j2 L% {& v* V6 T/ z9 W 8 N0 i6 N9 R5 Z3 z& O
* a( h N& K! p' ^( |7 `! [) G finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。
! p1 z7 A4 N2 @; v: ^ 6 O& G3 A6 H m, I; x. x
# D5 K2 ^( Q, A1 f 本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。 3 M' K9 R) q) A8 x ], s' U
6 U+ I& ]3 }( k6 A# z6 t- ?4 H2 Z" y
4 {0 L, E2 N V
实现价值 + G: E! {, G* ]
2 v% Z, [4 X+ ~4 w2 w1 k) }
8 i, I6 v/ u' Y# {
风电机组：
& U+ v( U. s9 E/ T& \* e' g / Z) P, N6 ?/ ? `: n9 S
+ o; Z" P4 ~1 ~9 G 随风而动，将海上风能转化为电能 & H8 X/ l- K5 n1 y3 g( d! B
9 d2 |! ~: w9 ~4 B
7 u, {+ p0 L% d. k* m* y
8 _1 Z5 l5 ] N, [; V! a
. x8 y% g6 w; v& y) |6 m f
2 s; X: L; d9 n; O+ Y3 L 在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。
2 Q1 _8 P9 b$ V, E( z, X0 Z$ i4 a h
) E& ` b* K" R9 M- }, O2 f & K+ I7 s9 h' h! l0 V9 H! D
批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示： ! ^5 p6 v9 \# j4 @
0 W" y% R2 H- z4 d7 E
" y* }- J5 Q! K4 F, }
% r2 v! H' }) O& R4 ?9 n$ k
; e8 f9 r& v( H1 y& [ X/ U6 x . A4 q; }9 f1 v+ O V0 u7 E
" x( C. o9 z& c; A. X4 i
6 S8 c, {/ O0 C e! z9 ?& x# _3 N y
在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。 , ]0 P2 }$ j y9 k4 g e& \$ x9 U: x
' [5 G/ U' M( ]) A
1 g3 q% K5 l0 M- j 风电机的详细信息：
v4 i- ]9 k) U" K8 Q4 q . X9 S& |9 j9 t M
1 R! m. z8 e/ M, b; L
进入微观视角，将风电机的一切尽收眼底 ) B7 |& x+ }; E
( j4 M Y0 }- k" ]4 |2 g& }8 v, o : Y" P) y& e2 R, Z4 U# J
9 I" [1 d. h+ M4 h% w
) h: e1 i' A: Q0 d' ?
% r, v* V+ Q! L 点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。
5 z. `4 }+ Y( S S) U
- q; W" A( r9 W J3 p E# [2 U . \, d- g* n+ M/ e
输电系统：
3 s. i7 J1 H- Z) d2 G9 Q) J
0 a- W) w) ?# E8 R r/ d( A 3 u6 G) d5 J# G1 N6 W- B
不辞劳苦，将电能源源不断地输送给升压台 : i" p# B% e6 M5 b9 D
) m0 {5 _ Q& c' S% t9 o6 b
* h8 G+ ~: |0 r5 l( J 经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。
- J( g4 _. r1 C; s7 V: b3 k+ K9 z. I3 M- n : n0 H6 ^& h0 j8 r$ e
# }/ f. ~# h* u+ P
在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示： & y- h: d0 P6 n) v
! f* r9 j/ I( B7 K- o( {7 p0 R. Y* a 7 J' R7 f$ `* P& {; [2 W( S0 W
5 R K* N* C' K3 k2 U: i! V
4 o& o$ l4 I8 w1 L$ J: u% P1 F `3 i' ]
1 [9 v/ V$ S% C& N: A1 I 总结
5 ^ _) Q2 p* T- ` 4 j @- ]' t3 ~
, S: d' Z H2 V2 q 建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。
5 ^3 f# `8 }' x/ M/ n # s: c1 f4 E X9 m0 }9 m r Y
9 a- [. a0 L1 I2 Y) y 举报/反馈 ' T! u6 q5 }( k# \8 _! l" X& ~
+ Q0 u/ ^ ]% A: ?; _2 B0 M3 \% s- I0 e$ T; ?4 I7 Q
6 i5 D% x6 z/ }/ }
4 F/ W, G! B3 x& v. o- y- u* O/ V# e4 }1 ]
| 
