" y3 q) V" a' R0 [, V0 f
) d* P: a( e) C1 b- g8 p 前言 . H( `' c2 o9 _1 e; A
2 l9 a) V3 |' [% }# e' j & A5 ^3 K' u; f' \$ b% R, F: M
我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。 3 s/ w. ]" u% v* a2 B' G' W! W$ [
( I2 ^: Y' g. K0 D
' M& Y$ G8 N- E0 }1 c0 w! r0 e! r 风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。
, ^( s6 i4 [; s4 u
4 c p$ z8 Z6 Z6 M' H3 P 8 R1 V v# D4 q4 x* _% t
介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。
5 J( s3 D2 b; P: v: N1 K( q
4 d r; `1 b& r' l E* { , K: F* C$ |) ?0 N& [
界面简介及效果总览
; L/ R( H/ k( ]' r. T1 G9 H
8 z3 G. S3 b, a5 ~7 Q# F+ B - f- a! a/ G8 |9 N1 m+ n% @+ q
/ V2 ? }: F. L8 V) @$ w C
q3 F/ q# j3 J4 I# i 6 |, `' `% ?+ n; }. {6 r
Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。 0 I* M& P/ X/ x$ G6 {6 h- L u0 J6 D$ k; B
U! l% a% c2 j+ m! m) i) d
7 @) t8 P$ C5 v, [8 c- k; ^
n8 A* i3 H3 t
$ F% q; \; r; S2 i" t+ I" O
, M1 B8 `. a& l' k 点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。
% @3 h% d4 a; D' j1 @- e; m 3 D' [) b+ r y( d, o
/ x1 R) t& e6 I, }- g7 f2 I. m$ o 实现过程
H W+ V3 Y. I2 }
6 \$ d/ e8 C0 ?: w# X% Z/ c W
- ~9 c5 b* H" F5 v# J' i. u 场景加载
+ Y- p& P) ]0 z; Y& `/ d0 J, s& V
L+ t3 x( Z5 I! _$ N2 z5 w
# ~/ f, F H$ n1 u 在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。
* b2 [! k9 d' b4 z4 }# Q, f / P" z( g) W# g3 f
0 Y$ n! s4 z1 E) n6 u8 a7 E
开场动画 % q( F0 g. O2 e' M& n* W
& [& ~, k# _3 ]. @* V 1 w( o4 M% t3 K* C* w" h( R
- X% F" N* i- p* X 1 _& B% q" a2 `+ ?
( ^, C& S& _0 D( z: {
本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。
2 l# N. v7 W% x! ~2 D8 h 7 ]( G/ E( m) ^+ O3 o
. ~2 X6 Q+ s. u9 N* t7 o2 `
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 参数进行。 ' a$ j% m$ u7 P/ ~9 Q
$ R' k% ^& ^: P6 o' x
2 I1 U8 x$ o& ~# F! a finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。
; N* \0 T' ]1 f ( r n0 o( q1 ]2 R8 { E% c
2 }6 K. H! i& y* K) a9 Z 本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。 ) t! D" [/ l3 R# f1 v- P
. k$ {( r' g, A1 H/ K
& j' I3 W' p1 ?* W2 q# s; F 实现价值
2 X/ c! i8 d$ e+ c6 P
* N2 H% j: d+ j: J. f " M9 n) z7 S; Y0 l2 Q
风电机组：
8 K0 C. e8 z7 ~$ n
" r K x' ?% o2 [' o% |
+ U9 l7 Y, ^# v 随风而动，将海上风能转化为电能 + q v9 l9 O7 c
% N; M2 j' U j7 y2 ]
- w* h2 K7 E6 I" s. \# j : ?% L y! y3 b( f- U9 M
+ Q- [5 |& | o# [ G + K; r j5 H% S) i9 c
在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。
7 R& h- J, n4 H' o& Z * `" S* ^ ^1 K# ^3 p
8 w* I, I) f/ t2 Q# S+ x
批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示：
! \& S8 ^" R; Q, M
; r4 q# r: F6 Y4 j9 [
+ f+ p( r# V7 G( P3 L4 v# K( | - m! D J d: S3 N
3 N. L2 `$ j( Y4 G
* A: V3 L7 j1 v r0 W6 J+ X $ r a+ q- d: t' n
. C9 T( X' q, ~3 h, X$ a: `
& x. |. \3 i" e/ k3 N" \9 j 在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。 $ e: e. E4 W, p+ l1 s7 Y* x
& U8 d R7 y# g7 `
/ X# \; S4 `; M 风电机的详细信息： 4 L* e2 ~( A5 l
3 x% S9 b8 R: Q5 Q8 r% {0 I6 N
: a3 c/ i) H% y* [' v 进入微观视角，将风电机的一切尽收眼底
% r) z% U1 a% X9 j; N$ w3 A: J
& l6 m' z v$ G, i A( k0 N
% Q' c6 B6 l& @9 \
! h" e4 M5 ^" F% U8 }3 ^
0 P& g# z- b7 m5 P5 j, o
8 F9 Q0 q# w4 J. L: ^4 A U: ~ 点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。
# Q# l5 f, G: F: g5 I
$ T$ s# W1 w& _1 U1 G; B / e% c% f& ^9 T" a1 p
输电系统：
' y5 V' V) u& ^" N6 v
; M" n t1 e! p& z
( z- U# i. n' W 不辞劳苦，将电能源源不断地输送给升压台
& a. U. F6 m7 s8 R, k
0 b* s1 d/ [" W, L. B& X; g- i: I% | 4 q0 V- o: |, Y+ Y: [9 J
经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。 $ X8 _' ~5 Z$ C* H7 w; k! @
7 }2 Q* T& L8 l# } 6 B2 E$ i7 g* q4 r; J
在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示：
# B2 c2 d$ J3 d7 o/ w0 P+ r9 z 8 `4 W) m f/ i+ r1 x
! }2 ]. a9 X% N _( E$ t! O
6 `8 ^8 n% r: b0 ? u 7 W, j, `9 K2 y7 c
' M( Z) k7 Q' \- X 总结
' V8 [# C; T* n# D: o' n1 G( j
9 U8 A2 m- `& O) P& ~; d! ]$ n* S Z/ ^7 C, b) g! i7 O, c
建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。
* ?; d$ C" b0 D# B4 B( T) B6 ~' K / y/ ~' ~8 l2 |! r- R5 q, I
: k! W( \4 S p$ U4 r4 Q4 ~
举报/反馈
- o% a \% M }0 P7 x ) h. u% G/ m4 Q' k! K
* j0 G& Y" R, ~7 f8 M0 p& ~# O% z. S7 u/ ^% p
2 \: m8 G# y9 ]! S' {" D2 U! b# R1 X9 s/ t3 g1 O& O
| 
