/ Y1 L$ N7 L, Y9 H* [
5 i# M q# _8 X' b" B: O; c 前言 3 a5 D- B4 o1 ~+ X/ \/ L
2 n) k& }: ^( l' u1 Z: P1 J' e: A
0 [# K+ b. f3 T$ A- P5 f' h 我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。
. |( I9 t+ R1 p8 ^2 g5 o- ^; D" L% J $ j( x, q( R3 D7 d) x w
! l# N) c7 v, p8 k/ x' ~+ D 风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。 * z) |- I: w9 v. C0 g; {
M# ^7 d, L7 \) a3 c ; s7 v7 a# ~ l* ~: p' i4 I
介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。
) k2 n3 v6 w3 v7 e _- K4 k0 v 4 v# ^4 @! S# d9 Q
, ^$ m, @/ C( H+ D0 M J
界面简介及效果总览 3 ?* J' E; I* L/ V6 ^
8 N1 i, z |: K3 E$ v+ h& P * c- x. u0 s5 z4 {! z R9 K- o) S) S
, k% h4 n n# O0 U , r. H, @; `* n' L
: t3 p- h S0 W/ `9 M3 L( w
Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。 h' M2 d% q/ w- y4 K1 v
5 F6 f# u t$ |3 G% \
/ R9 w* g% ^9 q+ v v$ V- q+ j 2 A" R& A* D/ v
. `7 e2 c& I& x + H6 `, i( ~8 K. `
点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。
/ D6 y1 Q& n; i: Y5 ] . M5 t# f& o% M8 o, z1 p: l- \
) l+ X4 f9 R7 g2 B r
实现过程 ) o6 g5 ~% U3 E3 F
3 Q2 K8 f8 |/ T. _5 z, {, t
; l4 i1 O8 f" [4 G4 ?$ m/ A 场景加载
; f. [7 G0 u! z7 A+ `3 `" N; M8 S: M 7 H* R5 Z" r; Q, a3 Z
/ r( l2 S& v2 h 在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。
, F5 U, Y0 w. U' _" `) h3 n * @% v2 M2 _) X4 g% W! q
7 N8 c! e: N) C: Q
开场动画 ! n3 H3 h6 [/ [. i' |( `9 \
! }2 I/ B1 i ] J7 _ ( P) i$ z9 u9 E9 G, j! F
( t1 p, ^4 y; P* k% q8 _& C% I
* d+ O+ L( f5 t9 Z
# r, {: a# \8 ^% P) c 本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。 ( O4 h: a6 w! }# A, M
+ y* X/ c: M6 S0 z# o$ i3 d
# _3 N, w% b) N, h2 L# r# A! ~/ t7 v/ o 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 参数进行。 ( l W" |7 x t+ {, d
+ d9 k$ P( W3 w7 d1 R. t( q
$ V+ m1 h& b+ k4 l
finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。 , \% b$ z8 t* N0 w2 ]
8 _9 B4 U4 f3 A0 j* S5 \/ o8 z
) a( J& }9 D% i% m# |3 Q1 G 本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。
- W% h- H5 O) m6 f% k8 t) k- P 7 H% M! C/ g+ v- P& A W q
7 s# ^( |: F- k+ e
实现价值 1 P. Z! g" _0 D' f. a1 ^6 [
' D. [& J8 P/ z7 @5 ~
3 [3 P& F& _2 x$ I9 L0 O9 ]5 a 风电机组： 1 P: A. v. b9 Z+ L
) [+ f, _# a9 q; F1 \2 Y% i; S! p' a
; m0 U. }' w8 ], _ 随风而动，将海上风能转化为电能
% M O, L2 ]3 K2 y% S! A
4 \% K% }$ m, e
) y, L& ?1 a% I: D4 m& W- a 2 ~' T7 F; b1 |- C; b8 F+ s
# ~# r7 l% A$ n% k" u) ^0 }
4 V& Y& a- r: ~# B
在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。 / g: H, [( z' ]1 E! t
" x9 I @. v5 \( H( i
* s2 O* S6 p- D 批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示：
; S" @1 a9 j( d( [- P6 K
J3 e2 N6 n* e. i: r: @4 ~ 2 t% C9 h4 }. W! n+ s; l R
* I# v) F1 f+ r6 T " A2 g1 L6 S8 R3 W4 l+ U+ w* H5 a% e
: d# h N4 [8 \& } h0 t( D6 `
5 e2 X: W+ J4 M 7 H% S: a( ^$ A n
- L) f5 w4 q5 h9 X9 G
在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。 ! T) b) O" [7 X( k
, M% T! L8 r: L$ {
0 x i# g) Y& r
风电机的详细信息： " t1 M, `$ |2 \. ^8 y( q' z
: S. S% L |- x2 R/ V" C9 B. b' x * a+ [* O$ h, p; U
进入微观视角，将风电机的一切尽收眼底 3 I5 C2 r( U% p6 G
3 b" D' w; d6 Y8 u7 l $ w7 X# x3 X2 L% ?' A( `$ u/ u' v
5 V& n5 C" F6 F% ]( z. C+ ]8 a" V
8 m {: q% v9 w) z/ _' ^; s) k
% j; @/ ?3 Y2 S3 g4 k7 |
点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。
5 e8 o/ c8 W+ V
/ r% R6 f/ w' _0 K3 z
! d7 k- A; w+ W- n' u2 Q 输电系统：
. F$ v( t$ t4 C: m( C
: T% P% }9 q: C2 ?" k
$ ~7 ?. T) g9 W/ {% i% L1 F 不辞劳苦，将电能源源不断地输送给升压台
4 H2 [' t6 d! ~" e- t! x* Q: T4 o
) x8 j( G, n" `" P* s6 s + o' l Z8 p/ v
经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。
9 J2 W2 }* q- V i 0 R; V4 p$ Z$ |: }
7 P$ W: x" q5 f6 v 在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示：
. W0 i' X' k& C( v. f- [& K' c& t 9 `. V. Y5 u1 |" p3 F0 D0 Z/ ?
5 V3 ^! a/ G0 K* C2 x$ Q+ K 5 ^9 i9 ` _" g" E/ J4 y
! r0 e) P; p3 I: E1 f3 k, ~
3 A; I) R/ O, B* _: ^' T# }% [ 总结
, n T) `6 [! x$ R4 X; V* t " |8 [$ u; D$ T1 M4 e/ W: @# B9 w3 D
3 B. d3 m- ~& w6 ]! V
建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。
) O! m5 M8 O$ i, [; G8 B& ^
7 I. r& P( V! S& P . K. A- [. R+ r
举报/反馈 * y: j& q9 l+ H% d7 E9 B4 d
" D" A6 B8 [6 Z% U6 ]4 K& m9 ~5 n$ x( n+ r6 x9 A
1 h( P* v8 \% l9 n9 W
) @& F: f$ U4 I: R; |
; m+ i b, E" S/ V5 d: c2 v | 
