# B. y+ o7 W4 ]1 Z' G' Z
3 \ ] n1 T% B3 F 前言 & ]- [/ o" c* ^: h$ H9 P
0 _; X5 Z: c: H* T: P4 J
% P8 E# f1 d& k1 t9 P4 w 我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。 6 F' K4 A0 ^" ^1 a4 z
6 T. F7 C0 \8 { M W% X P' g& k. M' \9 @2 t' A c7 i
风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。
! _& N. ~7 U- P) V$ q p! _ ) k. y/ F0 l" E5 \/ b
) z" b* q, G3 F- h; _/ y2 q 介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。 : P) ?0 R" D5 z( j2 [3 |
" z" W$ }3 l1 |! K2 j
( c0 b! K @# w: ?
界面简介及效果总览 - ^! V1 i1 l0 l! o2 ?# g3 w, Q
; c4 i/ L9 S }; g' R1 f [ c
# |7 a* Y: g$ ?8 b; m9 S: X+ o " R3 o$ q0 E/ t, }7 ?- l& `9 _5 X" `
) d3 ]! r& C3 l0 n6 E' t. k, @
A0 z) J. a6 \: m Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。 6 M2 t5 L2 o1 M
; r/ d2 v9 |# a5 ~( l3 v # u# p1 x& ]. q' X# x0 X/ K' c
( h* a3 B- g+ y% e+ }5 H
% t5 m2 M' j |1 u
( d b1 o3 j b0 R6 G 点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。 . K) @' Z/ h! ^2 x5 F0 N+ i: T
. \+ H1 q( _% p9 S0 [0 [/ j 9 h( d' q' f7 D* g) W5 r# u+ _
实现过程
7 h9 n5 q( X* A* A1 |2 v
" O1 c2 U7 ~ |# s0 ? - I" r, u6 }7 _1 I/ a0 N
场景加载 5 X6 c' p6 {: o1 S! S
5 b" y" a6 R6 w, q& `1 B ! f# C; L# D( L5 f
在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。 \# t# c. l4 y9 `4 t: ]2 y
: G8 ~# v$ L, C8 n5 L/ e* C7 x
7 U8 ~( f7 E; j% ~- c% q H 开场动画
A* U2 U9 U# r& w$ n9 u 7 @ _. k; f% {# o0 k
7 e' w% _: f* l; b3 K; M- A& K. g# N% i
* }6 m& W. ?# j. r
& H' B( ^2 \/ f4 ^/ B% U4 Y
: O7 z: F' m0 b; W% | 本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。
* r4 o8 h$ p1 Y+ w% F% Q " [5 ~8 T0 F* V* T3 w
( j6 ^! H/ [% 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 参数进行。
+ l3 a! d8 J0 V$ U0 G) q" { : g# Q/ w( I0 ^/ u
! H# D" X5 W, O. v! E2 W finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。 - p" C+ w/ z+ o* ?% J! L' Q0 h
6 g0 q- m5 Q7 P1 u4 S. y: H : R$ Y6 [1 a/ ~; _, c
本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。 " H: X/ T& C( l! i" x* G6 s
5 H6 I7 p$ I- }0 n' q" u 7 n% i, o" b8 M {6 y5 |
实现价值
, U% }) O6 Z) R% e; G/ _1 j) K 3 n1 n( g4 H4 g2 R7 c6 T
3 i0 C: U% m! S" B
风电机组： $ u3 {. i6 t4 F% h7 Q% \/ a6 q
( L2 Y( }& U6 I4 S' h! q
_5 [2 R+ S6 F 随风而动，将海上风能转化为电能 7 j0 h; v, E8 l6 D! @
' W- E4 R) \% z- C( W+ ]
1 Z4 l' ]: [2 a9 l * c+ ~3 P: l6 L: @: ^4 j- i3 o
$ V) A6 x- y1 h8 F* ?4 i9 E: r 0 W I! ^) F6 ^: h
在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。
% P$ h+ B) ?( D& \3 q& }5 u . F/ U4 S! T" D; p
6 \1 T J5 v% s( M
批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示： - d! e4 C+ v" q1 b: s
. ^3 a$ G2 C' n+ n
0 g X: J A$ O. `
( b5 Q8 r/ b J% Y 9 y, Q" \* l, K
) l9 `% I& T* t A. [. A
7 \* ?- K6 G& ^* {$ \5 e! H3 u ! M M* X. ?1 y
* `' ~7 W1 O5 ]0 e, L 在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。 5 e8 q' v. a8 u) j& j0 M) N
2 B' Q9 c+ q7 { k, H6 I
$ S4 q1 U% ~& M$ R 风电机的详细信息： : {) l/ G8 }( }$ x4 l' p. [
# E4 }! I: O: g h$ K8 b: l
% \% j: i) J# }* R7 P1 ^; v% r 进入微观视角，将风电机的一切尽收眼底
0 F; L$ \( Q4 k6 V* M. [0 n* X 7 w3 |& H) r) l+ a# S, A
. s! i( a( C: u4 h. p" w1 U
9 p6 |7 Y% b" G& e
o) `% B' L0 _5 i. ^/ z ( I8 E: |4 m! |* P) G# i5 r& ^
点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。 ; v/ M! D2 x$ ^1 p
" d" K: t' N; c' z
" P3 f5 x( [- d1 S& S- U+ z1 Y+ P 输电系统： 0 q% \" J* x6 E. _8 w
# w4 y5 g; d9 S, J
) R- w! O& |0 I+ }' @8 Y# h9 { 不辞劳苦，将电能源源不断地输送给升压台
- d0 L$ H4 Z. s8 B$ Z* J
- k0 B$ }# y3 k6 B; I5 h, r$ Q' p: Y$ X
0 h: ?5 r4 b% @, t4 c, j* [ 经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。 6 e, V: e1 l/ a2 e! R- M
F' [3 U: Z! c. ^
6 R1 @0 U# x U$ p7 H 在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示：
3 ~( S% w. i2 n6 o7 V
2 K2 O( ~6 J6 _* A& F) v
5 @ i& ?. }; c5 c! d ; n X, a5 G& A, q6 L5 R
' x. K" }* s7 x3 c3 @. K1 i
5 {( y; m! C# Y) \0 i 总结 , p& V( n" b& d3 S- g! c, N7 w
3 _# M/ J, h, l8 Q
! i8 H( G5 h; q4 A3 e! \$ M
建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。
1 e% o+ z# C$ v" C# l7 O# Y
& h n, t' S: |+ v 6 x" W% o3 c* Z. o P- ^; [" D0 s
举报/反馈 7 `2 x; e2 ]& g! z$ Q9 F
" t/ O6 p! V% K8 x* t t4 ]2 M0 S8 g! b& J0 J% v
/ _: C$ ]" [, }2 I5 x- @- ?6 j# G& j5 F" ]
# D8 b; m' h* _0 c0 g
| 
