3 n1 | |' a5 N1 f, W
4 ?1 o8 M4 V+ W- `3 l
前言
7 f; S4 r0 N: B( v * ^% H! k1 J0 t. e( T8 B b
2 C( A0 i; N2 C( _/ W' W
我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。 7 _% Z+ [+ T4 B& @) I6 V2 g2 f
5 B3 o: D6 r p' Z/ `+ w
b6 g! p }' k
风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。
% A/ q0 H5 I1 J4 Z( B 1 H6 n3 D7 u$ ^: ?* \8 q
- O8 N: Z' Y! T) c8 i 介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。
5 Y' k; d1 I( Z, ^, o& U t ) {* n+ g* N' C5 W
3 ~! j7 y1 R7 Q" b& ]) J+ o
界面简介及效果总览
) u5 H5 I5 ]5 P# H5 F5 @& c ' l: I, {+ S# ~" Y% J( x+ f* b) k
9 ]% j9 r* U+ I8 ^7 Z
% E: n) f" x# k! } t
+ l, C: h, E9 Q 8 k6 y) t7 w- G1 N" f, A- b! E9 n
Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。
( H5 {6 l9 V& Y9 M- j# h+ ^ # \6 q0 r9 K9 l# D) C
# g2 I9 u- E2 L0 K- z4 v2 n _3 B 4 m I3 N) [8 J* ]! n. Z9 D- K
) z3 D0 b; [: I: X; B$ m
J* K- l2 x) e$ k8 f% e 点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。 + ? s2 N. M9 j2 C& S
p0 g( A3 i, a) {3 Z) B + s7 {+ \* q8 \+ m' f1 P
实现过程 . E1 J& W! Y* V7 N% [9 Z
/ F- D& T# D+ x; p Z' h5 U3 j$ ?% E
场景加载 0 e' P% z, y9 @) i# i
- g3 w1 X( x; h$ K! x
# j. u1 X, Y( C; s 在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。
& z' ^7 F# h- h1 D* G, S 8 j5 k5 P0 J& F, T5 E, j
) j3 I5 [: }+ `" ^4 }
开场动画 % V1 n5 H8 Q z3 Q$ v$ `& N: _
% z( r5 x0 g7 [" [8 b! h+ A$ x% T
& i5 `% i. n2 k; T ' \) j3 E4 _, O
; l( S3 \+ V% L. x8 c9 i7 O
: k( Y+ k5 P9 F9 I/ y; [2 y
本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。 0 s6 P+ N( _7 \- d; v; Z! l& b
2 D1 @. d7 p$ K+ e" U$ }( {$ A
5 C( Y9 W5 }0 N* ^8 u 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 参数进行。 7 w* v( N5 b, Z+ \; j) t$ @
2 \. k: b) q( `2 J* l 5 P# m* G# B% v- k2 h6 E6 z3 W. g
finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。
g6 y. M" V& t+ O( p; V- C % h" q8 ^7 M! e; h- L" Y
; P. P3 B f+ l# [% V( H
本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。 6 P$ j/ o9 L9 W" c9 Y
/ ]* E- r/ j; a9 [5 @5 I
) [; \ ~4 t! u& S 实现价值
4 x- V8 A3 B2 U& H' C% L' P 9 e4 u5 B4 c; k J
E. b. G3 _1 V0 N! M8 R/ d7 F 风电机组： }& j! D" I" v& O% t3 P7 q7 Y
9 p8 k. b& X1 N$ f0 Y& x% g
5 k4 O9 H# R3 Z8 q/ Q. a: z! E 随风而动，将海上风能转化为电能
: W: y k6 w8 q5 ~2 R3 E7 N
4 ~! p0 R( \: S1 I- p& Q' ? # Z4 b$ u( f" E3 X0 ?4 b) N, T
0 B) s' B5 r' N: s; I/ h, J
$ U& N# |# F. _1 X) T: A5 v8 U
8 L) n5 ?& o+ G6 ^ 在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。
3 b" i) [! ?! r+ w! b u7 p$ c 7 D4 V/ O( z% ~ N) o# t3 p
- V! Q b1 Q" Q4 H2 \+ `6 I: j 批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示： 7 v C4 v# m! f6 Z6 P) V$ D) W$ T
7 q5 n) _8 W! P3 T2 z2 @ ! [- e/ @, H2 P7 x
6 D9 D$ S8 @# Y$ @9 P: @+ u
2 m& ~: A/ P l% q8 G( O
, R0 x9 l! F& Z) L2 o
1 i- q3 ^9 R, E7 ?6 [& o7 K" o; @ 6 e* _0 u5 n; g8 A
+ v& i) p5 _* H* w/ ~ 在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。
2 _& `' J$ C! ~# s " t- a+ {* ]9 I0 g# d
6 A8 d/ T4 Y; M2 H7 Q; k. N
风电机的详细信息：
6 e1 O1 O* i6 ]0 s- j
- ] z. p1 s8 H" U
& W" i2 w/ K' @- a 进入微观视角，将风电机的一切尽收眼底
6 i" t& a: s$ {7 u- C
. {$ J7 R7 k4 c# T% F
) K3 P$ s) y7 G" s
1 Z5 V$ f/ s# v8 |* R7 C! q& H& E ' W" @! O1 O/ N0 C
. w1 ` ?- }, E0 Q) _ 点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。
9 m, H+ m; @! R6 M 8 U7 J1 ]0 ^- ^$ T9 {
( p% ?" p% a; j6 z( m7 A
输电系统：
5 W5 r( x; w. @% m% \7 X! O
0 U. u" l. l$ v, Q+ K
9 @- p- }; [2 c1 ^; p8 v7 x! X 不辞劳苦，将电能源源不断地输送给升压台
' M8 s' i6 G4 k2 r. D
1 M# D0 {: ~' y
/ C# {# } D. v' n5 ^1 p5 z# ? 经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。 2 u& ?7 H5 E& j. E2 b
( Z) n6 j& I1 [
( @7 n# v% B4 k' `7 \% B 在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示： 3 L" N8 v+ Z$ F) U' t/ N2 q, q
& b8 v+ @3 \8 M6 _
# \" v9 O4 V+ D ~
9 s. ~! D8 e9 Y8 t: L& g( Z% W' X : B: J/ ]- ] J
* b9 ?( n% G7 j2 R3 @: Y
总结 R( T/ g$ f) q9 }) p# u
8 V! A2 e, }& k
8 {% S+ x- z! t 建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。 # W$ M# S) j! a
, K) K# c+ Q6 [; D
% p1 O; I2 D) D 举报/反馈 4 |, }1 Z/ T$ P, Y3 K
% S- D( V! a% K0 x5 Y# k
* `1 o) u9 g! m7 Q9 u7 E- H, |' A! Q& p% `$ F6 ]8 E
2 P& w$ i* z5 N
* ?$ `9 _# o# X, F | 
