9 J5 a8 a: g8 d2 E5 _
3 g7 O. w! W$ X
前言 , e/ r$ E" D( Y: }/ w
+ [/ V; u+ S0 v% Q1 }$ V. L
. P( t' ?3 e8 X# {% J5 N! K 我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。 ! W; |: M: T0 b! a6 Z+ A! N: P& ~
# m' }# p5 O$ ~1 ~* a0 a
v/ ^8 `- w1 [) H0 ~
风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。
: g& b; `, o' P/ \! _3 F/ w2 Z, q 6 K" |6 b' E& ?1 _* Z! L
" g9 Z& ?% x0 f+ {7 g3 ~
介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。
$ b- V! o8 C( f3 \! u. G" F
9 T& d; o. D6 m( A - U$ _. F M# A3 c2 g5 J+ a. K
界面简介及效果总览
) w% y/ Y2 a$ d4 c$ i1 f& R
, U; ^# q- x: G3 b
, E4 I' X6 `2 f' }( a0 { k
! r0 i1 ]% h, L) ?9 h: _2 ?8 W # j% _; L; t- _$ j+ v7 l8 r7 g1 m+ D
' \7 q& ?, \' S4 c Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。 $ v% b% I+ a; ?0 `% y
0 w; o7 x {& [- S4 T
/ s4 q3 X y) w. w/ t) k
9 a" M5 \7 u% i4 ^) Y 3 q( o) ]% q9 s
$ s1 J9 [- A7 S/ [% Z0 H6 p
点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。 % v* F; ]& A+ g6 P
# ]$ _9 s7 P$ E
! H5 \: h {: g. {! ~) U+ O( i
实现过程
. Z5 M0 H9 X$ A f
$ B/ f& |. @+ G6 @& s
) V8 |8 b7 y/ b 场景加载
8 H7 L. ]& B) V/ a d+ \4 i" B' Q; H
5 g5 a* N. }- A( i- o
在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。
7 d2 n7 c" y' X1 A# w9 A* Z! @ 7 e) q* ~& ~1 c$ Q# q, }# d$ Y
& J# O, B5 a+ \- K 开场动画
% L0 d7 X3 q/ G; G * q# ?7 E2 s- T5 E) o6 F- R; [
1 A( l. P0 R9 j. ^1 ?! n6 x5 ?
5 D0 X: _; K) F- o : P. l B4 ]& b9 Y& [& z7 t7 a
2 C5 C1 S$ k! s, `- i
本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。
# A$ ^# c B2 e) v; l 2 Y8 ~; U" r' L0 x
4 T. X. h# S. Q7 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 参数进行。 ' U7 N3 |9 F: N% K
/ d) ?! u0 l* | q$ \. v, I
( U; C/ @4 w2 h! G$ p7 T finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。
5 N0 n2 V& E' R) g" r4 _+ n & ^7 X' W3 U! ?( X3 `3 q3 d- y: T
$ H: ], D% d% V6 q: z
本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。 2 A% k( w! |. w4 A4 F
. ?3 A1 z( H& o( S1 c6 s u7 m1 s& X8 G: P4 v
实现价值 ! X8 t4 j/ {, p) O
, F7 f0 M) x4 V
, Z& `0 [$ r9 X' R7 N, F2 a4 P 风电机组： 8 m2 O! {% ~) h; [; R8 A% }; g
: e6 X1 e; _$ _1 A( `
* x/ U. r5 x- f0 o) L
随风而动，将海上风能转化为电能
3 x5 H* c @$ s% F2 `7 C4 J . n, C `3 r! \+ S: Y6 b' Z- \4 e
& `3 m a% i) B$ X
5 f3 F! L% Q4 p: m3 h5 H # |) c+ }8 M( \# O" y
. k, k6 T- V+ g+ [) g3 R j 在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。
1 t B( b+ C) B6 L2 V ; j, m. g8 u; c; {
0 {% ` g5 w! O 批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示： / o4 r/ v- i( o& @* r; F( ?0 h
: q5 `& t: [7 i. q- f# U4 \$ d
# Q; v0 f1 a; H# w
" T4 R U9 U8 P
7 x" h1 c7 x' [3 w . c$ ~0 K9 h( G+ G/ H8 ?$ C
" E& n1 s% _- b1 L
5 o1 |. I% e2 D( g* T( T- Q. k+ [# c 7 f. |3 h3 K) @" d1 c7 V
在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。 % X: S) E6 K3 X6 [6 r% ^
7 x" o* {* t/ N# Q) j% I( s/ g
9 k; G* J6 v- k* @ 风电机的详细信息： + d8 o2 ]" Y* R+ _" P+ e' E
3 {8 Q; q$ m! Y" q4 N' q M, i. [! E2 \& F
进入微观视角，将风电机的一切尽收眼底
& h1 z4 }% g4 a8 U$ w2 o6 h 0 `( j; _& @% Y% Y4 H
" P! C, z- v5 K I: I 2 z! X) ]1 A8 N
; _2 ~) O/ t; N* x' ?
v$ ^/ p, y9 r$ c- h$ O0 I( k* } 点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。 ( @- v+ w+ V: M5 F. W, ?" z( a* M) d
0 ] k. b# N8 Z
( f. y$ |! G2 y
输电系统： 4 C) @5 W$ Q8 b D7 F
" b _+ ~' J) }5 {) E" L* z2 A+ J 0 F& C6 n* x! [" ~8 P# L
不辞劳苦，将电能源源不断地输送给升压台
8 c" E* k7 S- U+ Q0 ~, T 2 q( y. m. ?% [: ]
1 P% B0 U$ g- w8 S& ?7 c. h 经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。 9 {: _/ D) L8 f, q- n& @ H8 e( h5 D
! I+ k# ~% n: g; @) i2 l* _
6 f2 ?9 p3 a1 D) Q" p8 V 在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示： % H/ l* s+ |" |9 {0 q! A) ~
% T; a& O0 T" s+ ]& D* t
/ p6 M. T& v9 `9 J : q7 k. n/ y; m7 ]
3 f$ x# i7 Q8 Q5 d( [1 ?$ h2 a
, Y. ^" G- t4 `9 u( | `: c0 W 总结 ! j, P3 p j R9 X) c8 {% ^9 T) s
5 R. w/ T+ V. N1 f1 N" N. v7 `' g1 x0 i
3 Q) M7 _: b) r
建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。 / g( g$ t! L v) N
% `, T4 L G; l w2 m6 g
, @! h3 D% H/ V8 f4 s- A
举报/反馈
! |$ X2 ^9 ?" o0 b/ z( ]1 @% V 3 w' d* p; N$ |/ c5 @# H
: _6 ]; [+ Z+ ^; x; K
% Q% {3 r5 f) g% J( U
" G7 E3 k2 t/ T2 _7 ?" X* o; m) q! K% i3 H
| 
