; r w2 Q O. v h! R3 Y
& ?; A, f0 b5 W. i4 C3 T 前言
8 h- V+ S: U# k+ P4 E $ X% h& V1 M% w
( K' L' |& |: C* N7 F 我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。 $ W2 d8 s, e% R5 _, y5 i3 S
$ O3 K# v& O4 I 8 T8 d( u& b4 Q4 \/ e. ^ |
风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。
" Z4 j3 A8 R$ c, O$ H+ N% A
8 p( ^- Y/ p5 f ; A6 G6 B F* E: t
介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。 2 U* C2 X. _2 y( G) i. [
' V1 t ]5 Z0 O
8 ^- M1 d. M' B8 m4 G
界面简介及效果总览 3 i" R& Y0 x1 A
2 r. ?$ y1 v1 ?) Y7 ] , e+ B! r) t* F' ~
+ L- I+ l9 K: M! b8 J$ c/ S% |
5 q% p, F( K' R" a ' J6 V+ s; W' a/ L: ?) M- k
Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。
1 x% U5 ?* l3 Q4 k! X
- L6 {+ X1 z ~6 S/ @( |
* Y# o- J! s$ J# J% T& C
?8 h3 d* ^2 ]3 d) b6 @ 2 }; L( d' y0 p, K+ d
- Z# j: x( ~; A 点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。
+ T9 a* I+ \. Q* Q: e2 D; f
# c) t/ a3 V2 f- c) \* W% d( [" @7 n
) ~# l- r* A Z* O5 W 实现过程 z; s2 I" o2 Q. T
! x& \! D/ H% @$ Q2 N; X
2 c. M/ d# Y3 `: P1 K' X+ n- a 场景加载 1 _2 j$ h+ p* s% i( ]( l6 ?
' T- T. M9 U+ y1 f: c6 g- h; o
9 h2 C1 D4 z; D/ W, X( l" S9 B 在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。 * i6 q+ K, T; ]1 g/ o% N
" }5 i+ `6 H I' s9 e) J8 ^
$ Q8 W" y: d6 D" k 开场动画
! Q$ w" c' l$ I9 ^8 d
' L. p/ Y, e- ^5 f! h
- G+ g8 I9 D6 E 8 Q+ i) X m' a' z) u+ q9 a& a
2 Z. R% q5 J( ~# {9 v* ?0 ^, H
* n+ z5 _& d# ~+ v 本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。
, M2 k! G7 {( W& ?
3 c8 n8 `- Y6 N
: g: M: Z8 J& r2 R: Q) S 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 参数进行。 ) o) [8 x1 T3 r2 p& j
# ]/ Q2 S1 a3 Y
. [4 ^; O) v9 r6 w4 V' q! w1 M& r finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。
. m1 p8 {5 d6 _) P; _4 K
) \ P2 |7 ]" ?. g: c# Z " `: x# T' H# V7 T6 Z/ h9 s U
本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。 ! t2 i Q9 y+ H! W( x
8 D1 }# [$ k% B
( v; ^8 q' p' q& j( n7 v- X 实现价值 2 _0 ^6 ^( S% C) Y! e( g
) K y; w1 t# l 0 D5 }) ~! J; j. {) a: }) P
风电机组： 5 Q1 `/ z) f- Q( e$ Z) M
* I8 R% S* D8 V A' n
3 O3 S1 Q8 |- F. n 随风而动，将海上风能转化为电能 S. I3 G* `2 L, L# O+ z K
6 n8 {# q; w- F$ S0 x
' K. x# v+ ^8 H4 l: D / [/ u7 e& K* g
7 P7 D* j" I2 k; f9 A
8 n Z" h9 _) Q2 \5 c% y" V
在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。
, [; `5 z1 Z- w3 N( ]& { $ o5 C o% _( w: `
2 |* P8 V0 p$ ]6 A6 t2 L6 o! L* { 批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示：
3 r0 X/ \7 ^& m& j1 p# d : D+ W, ]" Y: Y9 o! y; M
0 H2 o' F$ H* [4 p7 @& `2 c8 w
* v6 u5 w; `! {4 g2 j$ ]
. M& ~# q! ~% v; d3 k* ? f9 }
0 N% X' Z0 P3 Q+ m+ N" K 4 T9 ]. }/ I; Y! M9 u: _, A2 I
D* c8 |7 _" n( L
& [0 @! w2 s0 R& ^, _5 Z$ O 在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。
" Z; V' y2 ~. ~1 J1 l) s
6 w6 ~, P" P1 { K" A, k" K1 y7 ?& W . N3 y9 M5 B; S/ G
风电机的详细信息： % \' { I8 o# }% t3 S4 v
6 T! w6 k- |/ x( A- ] : T( d1 h: }% K; A5 u
进入微观视角，将风电机的一切尽收眼底
- O# l2 z/ I& ^& T1 k% c) B) C! S
! D, Z5 k1 ]" j- v; h% t # p2 d* {: y% C3 t
6 w# c5 u( I- c; _# G K% M
* l9 c- ^# V" A; B) \1 K
- I' k8 O( S$ Q6 ]' l
点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。 3 Z6 b0 ^, m5 H/ s
7 c5 d3 w" g7 H. I9 p, _( r 5 \5 C T7 f% v9 q, ]
输电系统：
% t G4 [( p7 _* j: L
" e! m- G" }/ J. V$ U
]1 ?8 N8 N+ y' c7 Q- N+ V ` 不辞劳苦，将电能源源不断地输送给升压台 * d/ s; K; p0 H; D% s
- E8 q! ~# z3 L- Y0 @
+ F; U- |/ \3 a( J g& M
经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。 # ~; d. R8 A; v7 ~: f' T
8 i. Y& c! g# h! j3 e6 E# u% M
, K' M4 t/ Q) ?1 t; [
在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示： 9 r: @& q3 o3 _. u
' c) ?% F1 h$ z; G7 f* ?7 G
% S. w% ^1 Y2 t2 m- c+ r
2 m& v; X, u) J( m
3 P& t& v0 l, ?2 y/ K, X . m/ c% W N% |* F( J) q, d
总结 ! S# T' _. `. w6 C( ?6 t' I* f$ P2 n
1 q# o8 B/ d4 u. C: |
9 t& H4 o7 k, n1 _9 H) O Y 建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。 3 R! y# f+ | ^6 @
o( R9 d6 w; }2 K4 y
6 B0 ^* m* k' I- y 举报/反馈
$ k0 U9 V2 o+ @& d ! Y) N% g8 N) W5 d& i' {
/ @9 `+ ?* R$ v6 C9 W" _* y3 c
3 I4 E- g# S' o! i
( P/ A1 O8 R8 J9 j
0 U4 f% h; E" c* s4 k | 
