4 W5 x% ?$ b& O6 p+ u& c * D5 w+ n% \: f" ^$ j0 F
前言
3 r2 L b9 {$ V* z6 M' ]
, B- y- M( P* C5 e0 m9 V
9 w& G3 u& _2 ~! E8 L. W 我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。 0 H2 T6 D8 r4 M
6 u' @* s) r% J J. d& X1 {
: q, H% q5 l) Y6 d- O
风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。 7 p/ C9 ]' G/ y" F+ V( D
* G9 u. c/ Z% y/ e$ U" J4 g" _
* x: w- N: p% s( I 介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。 ' K. d4 R) z: i% n9 v! n' f
5 A/ U* Y1 L( j/ \. \6 v$ U
' r: ^1 P# @8 `. C) r 界面简介及效果总览 : i0 g" t. A& S# n
. p8 g9 z9 Y( a" H& f 9 W& i0 `7 `1 {% |
. X2 k( h8 t% @& f2 h- h( w- Q * K6 k( Y$ z5 y# w. G. ~- ~
( b7 Z d4 W& q% B" f9 E# `: U
Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。 6 O: D( {+ @" G Q9 t
; B5 D0 x9 T$ ~0 S2 } 8 r" R" u" o$ N) ~+ k
' u8 V9 v; d7 J) E/ V
/ s: z! I6 Y3 x" a2 E: V" r9 J
$ Q7 U9 x* l O' n5 J& t9 ` 点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。
+ c4 v7 s* e. f4 } 0 i( k& Z" e; h! J, p
3 w# V- _- d2 I' C
实现过程 & |- i* m& k1 {9 U
, Z. K/ P5 U; i$ c5 J , V% d1 [6 A$ q# y. }* C4 a
场景加载 K3 e! Y& {7 P8 _. l
( G2 f9 ~9 I4 g! E+ t
0 m0 o/ X. [+ L1 e1 q" ^ 在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。
8 \, y# V/ p5 m# L1 ^; M ! ~3 Q# h4 {7 i- _
( R- V, S" |3 |& \ 开场动画 / k% r% @4 J; x# V
5 O7 r+ T1 D5 k9 D+ ~
1 l! g" Q- B' |. T S1 v' K
4 ]( F" n' Y- y1 V# I9 z
% i/ _6 K- K+ |+ o- T5 } " F" P, M" u6 L2 ^# W6 U0 K8 x7 {+ q
本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。 , `+ H2 f7 w" e; U
) h8 _' b6 A3 C2 {9 n) N, r0 G: Y( p " G9 e/ ?% _& l0 E9 d
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 参数进行。 6 z( V0 `/ p- \$ w
& P) Z" T+ o h H" k5 _* |- h7 Q 2 k5 j3 Y; \, i) J) b# h
finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。 # l: G* O; {7 u
: D' U, \4 W8 i8 B. T4 w
+ ]4 d* F* ]3 B4 _4 `; _( s# C
本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。 - y/ v' }0 }! i# W; n% A
+ a, _/ q4 R; n5 V3 g% t
2 S0 P/ ]- D% j6 k 实现价值
- a9 _6 }3 {$ n& d2 g
8 a9 R$ u2 H3 ^1 s& G# w( ~3 N * m `: `9 p: A" j3 e0 t
风电机组：
6 B2 B, I. D- N8 Z5 D9 \, X& P : U3 ~+ k ~) G
6 O" Y9 H) L2 w$ s5 J; V4 B! z4 ^7 b
随风而动，将海上风能转化为电能
) U, X% {4 d1 X$ g+ g
% f; N' f: o6 [& z |; F ) N$ u* Q5 P+ n3 v' v" l6 ~
4 S2 ?% n& |0 s / T% p6 D Y3 N- v+ S7 C1 ?
/ y4 H/ F- A3 k
在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。 6 p* t: C" u2 k1 O( l; |5 S2 ]
& U# `1 G! N* m- X* Q. `: C4 q: N
. I9 ?1 V! v/ e0 Y2 ?% \: |7 N 批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示： 5 l! a; S7 ?, A
5 v; K1 k( u. _ x6 S: {* W' R9 c0 f/ V
# ~# v1 v3 J( }
' ~4 f- @5 ?* X, H$ P 3 `6 y: t; z: e7 t
! k' ~/ m i1 c. A3 m$ k( t; K 9 f: }" R) x6 c* l, ?8 G( d5 i
2 T8 z5 I* V$ H2 V
: q1 u, y; I% z4 @, Q5 W$ E* j 在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。 # f; b7 L8 w w, y
5 q9 E+ a7 Y6 [2 B* _
) {! O8 H! d/ ]" p, v9 y1 B& Q9 }
风电机的详细信息：
- R9 b6 V" w1 I/ ?0 O* J $ K; B: Q |. b, @$ a7 h" [4 o1 W
) j! J0 O; S* g1 v 进入微观视角，将风电机的一切尽收眼底 5 ~* @) X1 Q' E% A3 n5 ~8 |
$ C+ T5 L4 E4 z
9 }* V* R5 D+ d9 G" \
9 w6 m4 p. ~* G4 }5 v0 @2 o3 h
* _0 a* N% P: Y5 K) }" M1 ~
" P$ L; ?5 b8 x* y 点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。
5 g; d8 i0 z" c 2 W- T% \+ n+ G7 c6 M Y+ r
+ Q) g- Y0 D6 f2 o
输电系统：
- d3 w( I) \* D2 X! s: ^1 C * k: c. R/ ?: t
/ |! h3 ?0 I9 E2 M% Y
不辞劳苦，将电能源源不断地输送给升压台
9 F5 E: P/ A k7 b9 y+ }
7 `6 U) p1 h0 y9 A# x1 B: Q - `# F% P' c3 h% K8 ]4 o/ E$ H
经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。 * n) h. u7 ^' d. F* |) o
" A R3 r$ D, w4 i, i+ W * {2 L5 x5 k/ Z8 v
在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示： - N& ]: p: x- y, {9 Q; F
$ R: P8 v: A% m4 Y, O 5 a% t+ M- t. y2 m# V$ c
* Y# ~; `# ~) @ ' e) z" T4 v' D9 M5 j+ Q5 g% E
0 t, }4 Y7 v+ |5 w/ J8 E* U4 ]8 P
总结 , d( Y* y* [/ y3 d
7 K8 j/ `: l3 |+ _3 u( x
, o5 n6 D' X4 ~! R# q8 f, Y" u
建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。 ; V @8 o5 [$ _7 i$ @
3 V4 r4 m" p( P) ~9 @2 Z3 A9 b# b
- B( B, K5 {/ j k5 i- q
举报/反馈
5 z+ U: A/ D" M8 o0 V
0 M6 h0 Z3 s7 o0 n7 Z
J5 A9 O8 o: L. e/ `' [4 S9 e/ o3 X; U
0 a3 G1 x+ b% Q2 k7 P- j; Y# S& ~1 S4 I* O
| 
