8 L0 @# n8 @' X1 C# @+ a B
- ]( f- ?+ y# \7 M( m4 e 前言 4 t2 `- K/ a" [0 h8 S, M
* ]+ d6 K d" J* A" z
- c7 f9 t/ r! k 我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。
) T7 j8 I/ ]* U: H5 l$ w. F1 { * m8 ^8 G* \' I ^& o7 n
( k& l3 r& m) y' X 风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。
$ ]- t7 |3 c- V2 D; [2 T0 y 9 p$ f$ E$ q( ~6 m
' D2 U1 ?2 k6 B$ n4 O8 R- a
介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。 + H, p. ~% E& F+ F- P
) J+ f% ~- \$ q" C) p7 B2 ^
7 u, t" R/ U' e5 i) ?8 c1 Z 界面简介及效果总览
6 y: A: ?, ^- F8 n2 j* p
+ Q3 x" }- M8 X& L& t
1 i8 [* Q& y" Y2 _- q* @' ?
3 O+ G+ e* s7 F/ F) z( z& V
8 \5 g- O2 E0 r* n4 j m5 P1 z / r' J! |+ G# r" ~# z
Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。 B5 ^6 H5 R$ s% e5 Y d; G
6 C3 E Q& L0 [% h$ q & X- M/ T# F) {* \
/ Q" A( P1 ~; Y5 h; K9 M+ X- c
- d5 e2 w, M9 ~: G* t: J 7 u0 [% P9 Q8 e: i% m
点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。
6 [& x8 H; L4 v9 U9 {% I
3 }' v7 Y- T8 j0 u1 R 1 q2 |. d4 d% \( r! c+ E
实现过程 : t/ f+ S- `% e3 N* D
) C' m1 {2 m w' O2 }% o
. ~- S% P; f7 F( H6 g 场景加载 $ s. ]9 n* }( f6 Q' ^
* a* V2 a. {$ g1 }' l( e
% s! H9 J$ ]! W6 z* w G. @
在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。 , h( b9 N" x! o7 i7 q+ ^
1 a/ U7 G, _+ ?$ @5 D* g" ^ . }9 ~& j" _7 |
开场动画
! M/ _+ K0 ^* ~0 g/ N8 n
/ D% o6 B0 U( l# o" v ( q' B" o/ N" |
6 h+ h* T1 A# w' Z* ?
! Y2 O8 F+ S/ F$ w
, B; j. j. U H# m7 N 本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。 5 W5 z2 D4 j7 F8 }% r" u
6 V7 t" v/ e; p y0 ] : D' \" I% k0 ?4 [
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 参数进行。
. @; ]# R/ ]/ W: ^% Y; d9 u
& X! w6 N4 ?- k$ ?) ?, N : e6 J" l- V' z/ j# d6 W
finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。 + o/ D! F+ E8 Q' Q
1 C. H1 E6 I1 E' `
( z; s/ J* ^9 P& n" v1 ? 本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。 & f2 A) w9 k8 W s- ]& \$ {
( U0 q6 z' ]7 b/ j% V t/ V! ]- p
6 @, N4 p1 e9 j6 W
实现价值 # i; u( p( A' h* S. ~( }4 w0 `
- Q1 ~( `. V+ B' h4 d; M
& G' Q/ B) M8 @5 o
风电机组：
- S0 Y$ R1 c4 }2 ]3 v 5 Y% q) G6 n$ v6 `. Z
* G% e! N* ?7 [, i( v# l4 @
随风而动，将海上风能转化为电能 # @# u1 x3 T# j( q7 s2 z! ?
! {( s' o6 g( }8 B- g; z
! T7 c' i$ m" X5 o
. G( f5 s& M6 M3 q: B/ J I 8 H4 H) _& l" o; g' q! S
! o; X/ d5 A4 _; a5 o c+ K
在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。 5 i- W: m9 h% ^. k q- Z# C
. J& b2 U Z9 h- \
, T1 f) P% C" f% J2 C 批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示：
" P- y3 E8 [7 L) A $ P6 r) F" k$ b! t- X0 @
: u/ ~- r% J3 b
- K. @% o% c% Z% m3 J+ o
+ c8 M) | E4 h2 Z! B8 w9 J# B7 I) d
0 M7 {* l6 ?' ? - P$ u0 @# ]* v! y
* h6 l& R' M8 c1 y3 a , s- @; h* N2 C% g/ _' C+ Y* b% r
在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。
9 q5 g X( v/ l1 j
`8 o( {6 a) p+ S 5 t0 g/ F3 z: `3 @8 N) X" u
风电机的详细信息： 2 l: h+ T, k* X2 n6 n) f5 q
( ]: k3 Z& @" u4 k% V) s! ~3 J
& c; ^2 R# w5 ?$ C6 N3 J
进入微观视角，将风电机的一切尽收眼底
- q! o4 ~# H' r" i
8 Z- s! U0 V3 z9 Q # z ^, Y" A% s4 _1 l5 M+ v
2 O% ]5 j/ U! N1 C: j: i, |
( P0 x9 i" }3 ^ o. T" n8 N * C" a0 m$ M4 k, b1 L# \! B
点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。 - N4 @/ M: h& N
& c! M) h6 P: T! j
+ f7 `# |7 I3 x8 _1 s8 l1 K
输电系统：
2 i" F/ n) O5 Q
! t% J0 l8 m- V" t% t 5 {4 v3 T; b/ [; p7 E4 \- ^8 z
不辞劳苦，将电能源源不断地输送给升压台 4 Q3 `; r7 k7 r4 ]( N' I
( S! D3 G8 w8 t2 S2 o/ l3 V , c5 k" j" @/ ^8 M# v
经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。 Z; N" K$ Y$ d8 i% ^
$ E, B& B. _. Y' C : a2 g. J1 P8 a
在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示： 2 h5 \$ e+ G; a. m' Y
" ~3 h/ P& z# _- r/ M* g h
7 _- Z3 {6 Y5 i# Y; k" R4 {0 S+ N
% O6 P# m0 Z# U& _3 b3 o% t0 j
0 F- T/ S9 J/ D' e % `* }- _' f" { c# o4 S! D" N+ e
总结 1 i. y4 K0 l! a; d, n' |: b
. K5 E8 H( {8 p/ ~; ~- ^
: m$ _: p4 H! O
建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。
; \0 G* q) z. x; B7 o! z ! i9 o0 ?9 @/ d* q7 U
! J1 [, p! ]5 [# h; R# _
举报/反馈 5 Y9 Q9 o! i8 q1 b
2 I: G5 _" w0 t8 {4 N# Q" I1 t0 c' W
" s" J; Y, L0 o. A3 U3 G/ h6 h4 h$ |- a. `
0 v8 [9 N, w3 N9 w) L
% W( S5 f! P4 ~9 P- G- U | 
