1 k' F, } h' m& @$ R
( l0 A2 n6 ?, O2 t i 前言 # M/ h# n' \9 s. E/ u
+ \" L- j# p+ C8 z" `9 ]1 z
, { w$ J5 k9 | 我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。 9 |! C4 J3 U: {3 k; @$ ^1 p, F
9 @" h# i- l7 b5 n ' i3 S1 _. [3 Q6 H2 ]
风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。 * R2 A, c5 n& |" }5 q
2 @( Y# M0 g! s8 R& }) W$ s, t# { 8 Y& g& U9 V' l b3 J' L
介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。 - G4 f2 n6 @3 j* k
# M) c( @& ]0 L9 w
- j) x+ ?% |( I* z& N2 O$ j$ o4 ]
界面简介及效果总览
- x5 i; l6 N; z q : A7 ^+ B. w; [) i ]+ h7 d, s v0 U- P
: h# N6 G% S+ _" ~ W/ e
0 s& c$ x: Q: p1 J D& w
6 i# l" o1 \2 P, [ 3 L' k$ z5 ?3 k! P
Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。
2 V+ h0 b9 C2 C% H- r& k' e* k 1 w" V: T l$ e% x2 p$ h A1 H
8 e8 N" O2 k0 J) Q/ U3 I 5 j* x5 ], Z. D3 w
# E0 J- V1 h4 b. n; x. x1 x( J 9 a# j# f2 {* _, X- d
点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。
! v' K0 I+ C! z& h* Z% Y1 a- ~, T: V
, Q/ M1 J* G3 z * ^8 h0 v1 I" j$ Q
实现过程
3 t2 n2 \5 F; g0 ^4 C" o# L
- k- P8 e' r& l- A# [# w: @& f
% T! X! R; n1 u* z; r/ ^$ L) e 场景加载
1 K/ U, J5 ~) n K
( Y/ c, i! c/ @0 H6 q, a; d& a ; y$ k0 J. e) n8 }+ s
在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。
+ M3 v( z* x4 i6 ?: S 5 \* r5 ?, T! a5 Q0 f0 a
0 z/ a9 b# Q: u9 K. P6 H( \8 H% X
开场动画
1 B; T/ s# B! G$ P z, Q" `
- K. D7 T9 u0 Y- G1 n% Z
K- w/ \ r# [' W5 n% w
$ B3 B5 V/ C/ ^ 0 a6 X1 @4 A- i2 X; `
* O5 a2 X8 a, q8 V$ U6 E% Z/ d
本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。 9 W1 c$ `! Y0 W8 F* q/ T6 H# l
, q6 F! n( G" `1 f 8 Z- q9 Z+ h7 @5 [6 ~# Y. ^0 t
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: p- n, }7 Q) g7 e' q" M: L- w
4 b8 `5 H3 M8 O# I+ l
' ~1 e1 o% Y7 x: G: h7 X) Q( e finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。
3 V4 P! w/ A$ W9 a 9 O2 T' w9 ]5 X! R' H
7 O0 K8 q2 v& { ]8 ~- q1 d! f
本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。
) j9 J$ q0 u/ O* N! h( i
% [, o8 j9 }8 l/ y8 }( i3 q; r& O# M
& H: A9 @7 I" d0 X8 r" O; E 实现价值 c8 F* ^: p m
+ j7 x# Z4 k2 W+ L$ E8 r 8 c- i, t: u X8 y2 p' f
风电机组： 3 P" r- }: g9 c7 j6 Y7 ]
5 r/ u. _' ] y0 J
9 C3 G# A0 V7 `. t- u" K) B 随风而动，将海上风能转化为电能 8 Y2 |7 P; j7 k3 c% H2 A
& e/ Q$ n! K2 Z' v# A2 {7 m7 |) l4 `
4 f% y5 T* T! e2 J' ^ : v3 h( Y! U" e. d' X" _
: n- B6 _2 x I8 m4 S B$ Y; s6 E) c8 R+ g4 H
在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。
6 m6 z. l. [! \! s- V# @6 x' B # J& u9 f" o7 k- z" I. {, f
; M- Z( w! k) c1 ^+ v 批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示：
, Y, p b" Z+ s$ y& I/ t" [. O4 g
}- w$ U8 D5 Q$ y! H; ? T7 b: |$ u2 e
- P" k3 I1 P: |* i
2 j" z/ l) W* _
2 @- }+ g+ m: r+ m5 z/ @. P 7 X+ |1 N1 ^& o! t" v) C
- x1 x8 O( p0 Q4 K% W" y* ~
' B& p8 s2 m( H& P7 Y
在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。
$ L6 F( N- h+ ^7 W+ ^/ l ! y* [5 A0 }2 ^* c7 h
4 e- S) w; p! ]$ h0 t" R
风电机的详细信息：
1 e7 w3 Z2 A( ]3 A/ X0 m ; f6 V) @+ I/ F$ W' j
) z+ ^& ]; K9 r, U/ o 进入微观视角，将风电机的一切尽收眼底
9 Z, k' [- W- C B2 D8 Z # |3 Z1 [' ?7 P" N+ S$ u
! j/ s" a4 @2 \. h, x 6 K' Q- a0 _$ A; `: r$ O' [
$ N" `: E' O* n5 {" }, m) Y" h
6 K' h; U# i( k7 l# W" h+ n! }7 j9 v 点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。 : H. N8 Y% e$ E6 r w [& v4 `7 h3 X
- C+ [1 a* K& p9 `
0 f; a1 Q" j4 H% r 输电系统： 2 P& q' z' Y7 x2 I: N C$ U
/ u" m# N$ y& r3 b3 U: J
9 F, ^6 r2 I( ~ 不辞劳苦，将电能源源不断地输送给升压台 . f: u4 @& ?' [; X. Q! _6 w
( k& o/ J7 v& n
$ C& I6 q+ b5 M( k4 }
经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。
5 V# @- w8 `6 d' e# L
; n8 c8 Q+ I/ I2 Y. p
' F3 q5 p4 b9 F2 \! G5 k } 在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示：
1 r$ Q8 B) a2 _& k, a& r5 e B/ \1 [8 i9 f' T# N; i0 t, x
) t4 C% M9 k6 E: n% b/ p2 x
( J, S3 d# ]: h" w& K& b6 y
6 a+ Q+ h2 [9 G) K/ D/ f + S/ ~8 R: O& @2 ~
总结 : S) z$ \/ j& C3 a
% L! c$ v4 T* a' x$ d M& ]: T; D ( l9 u& U x$ c, s5 M+ K
建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。 ( c& @+ p3 p; o& |$ P% ?
! v: U* o3 ~% x" O0 S- K
4 U; I8 o( K3 e4 M9 P 举报/反馈
9 p) h) w, `' ~: X# l! \ 3 N. |" p0 l$ S; h! C3 ?4 F
# m; n i/ B! L3 k" D6 d( r& J/ W( g1 C' s
8 Q3 |) v+ M5 `, ?$ Z
, A% y+ Y& U2 Y! T; p5 z8 @; o | 
