7 D5 V6 M8 h+ _6 n O( R
( b5 p, _; b' k$ D/ m$ r% ~ 前言
, d2 @ B4 `' W
9 Q+ r& C+ r' h H% _
, |; P9 Z2 S, B5 R/ |4 E 我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。 3 _4 }. F5 l9 R! w
9 h/ ^5 |: B7 t$ P / n, b" o' l: M% _! [
风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。 : F5 d: J: s% _* C& L9 e0 l" e g: A5 h$ c
- A+ m# d" a Y" v5 {& y( K. ^
/ P5 u Z t+ w. u3 @7 e 介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。 ) J, y5 Q+ H m) ?; t f1 ?, c, ^
) S+ t4 y- G" B- O' l 7 N* s* r# X, t5 v* M0 c% w, w
界面简介及效果总览
$ Z. P5 \* l a! J7 R+ s . [3 o. I. k* f
4 Y- W& P" x/ h) u
( i; l! Q/ N8 W) T' }
# `0 j" u; B7 i5 y: e B5 ^
: ]( n9 ?7 _! H; ^; k- I' x Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。
6 U2 |' O' y& R2 e2 V$ A% j7 x8 n
4 @4 E6 ]5 A/ c% h 1 l% B: k% C' B
1 I; q$ g) b8 v3 W' R
# k! |0 L/ h! N3 h! m# `
6 l& u0 s3 j, d 点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。 * H6 Y5 q% z/ N. Y! j; ^
& c& g. h4 s" k1 n- ?# v9 } ; R9 I# o% m. ]) U
实现过程 6 K3 C% W$ [& ^1 h& i$ i; `
- R3 C% [1 `! O% F: x7 o 6 f/ \% O$ o* a" Q
场景加载 : y' J* z2 m- ~+ j. ^
; P4 K! ^2 v& [0 |& q7 U+ |
; |* C) A* K4 r1 ~/ t) F+ U. \& ] 在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。
7 P( \$ k; |* M* I9 O0 C
# j4 ?$ A; h# U1 t
3 \1 m' H" J! t 开场动画 Y+ C% Y6 B) r0 j2 N2 D! u4 \
* ~" n- m% ]3 Q0 B* d0 f
, M$ b, G% k, Z8 J) k
: q+ N& Y% [! I& Z
: ^# C s3 r) |# J7 i
' l7 L3 o @1 A. E8 g1 z 本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。
3 D' H7 ]/ j0 A
' g7 M* Z# s, O* h( j; ^+ ~5 y" Z
+ X) x6 }$ x$ C$ e& 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 参数进行。 , t" U2 Q, L' S- V6 [+ a
2 k" ~" s9 S$ w; I
) K' R( u2 l* P% z6 W finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。 6 D/ I0 f+ c! ?/ X
$ z. ]" X: w7 F z
1 X1 w; P/ F) O1 w8 X C 本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。
2 S, U3 I7 q& | b
( m7 \( U0 a3 o- i4 h% E. z/ \, h
2 ` |1 s# j6 m; V$ a1 J& | 实现价值
' ?' e4 J- N- B9 A8 n6 b& i, @ . E+ o+ b4 A6 g
$ y$ h$ @8 o$ j9 h# B9 U m- c 风电机组： 3 [6 t5 p/ \, o, U
7 m+ c: I8 ]# S" {
3 E3 P- m; s5 `5 c& s
随风而动，将海上风能转化为电能
5 x( o; h6 F- J3 G5 X4 }" A& p/ H7 s
6 V, n; Z* ]( h( f ; Q A8 c- ]; P; {+ X
: {& w1 R+ E" U7 ?- {" Y: Y: ]: z
# G f+ U+ Z- u4 k% K0 E I$ `' n: k
1 @9 L# P# P2 D/ Z; V* R5 B4 r$ v" S 在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。 9 B' D$ r2 L8 \/ r! j7 F( @/ q
B, S8 p$ T- K, D
! ^( c( |6 ?% d 批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示：
$ V' x7 U9 b0 _$ D
- Q2 C7 N2 f9 K$ e# f8 _: y. |0 }1 o
) M3 D' J3 S, P# }4 M
- c. m6 Y) y2 q- I2 |7 F# c# y
# a) S9 k( Y# B0 c/ _ 8 z/ e$ H8 F: M" t3 x
8 j8 a2 M, p9 J! ^8 V " E2 _* p. ?! N; f: M1 J, I/ _: z% G1 R
0 z0 ]# k4 D% X; f
在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。 6 m: p+ D' y8 _) v$ w
+ t; E1 }8 _! R% f$ E 1 d) }# O" j* h2 q4 _" e% k
风电机的详细信息： $ H$ x( i c# {0 A( A( O9 q
# b6 n) I$ w4 s3 t1 ~ & V7 c4 ~; G6 ^. m8 V* U3 k( ^
进入微观视角，将风电机的一切尽收眼底
/ W$ T* p9 y5 z. r3 F! g
' ~! G' _% G7 \. G
2 t; Z% u* f# e5 k8 I 6 m* m+ Q) d0 m4 t: c
; Z8 w% D3 |7 H4 w + e) I2 r* z5 N8 R( ?
点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。 + \9 |7 U6 l B) ~' v
1 z- k( G3 s. [2 e1 Q- Y
& c- j! ~) c. i. F 输电系统： p) Z3 C& P/ d
0 ^9 q; E0 K$ b. T
7 f8 ?+ ]' @. H7 D 不辞劳苦，将电能源源不断地输送给升压台
8 |4 h5 S, e, o
4 l- h0 K4 Z' |5 @" E - s9 O$ A/ ]! Z m2 t
经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。
" s ?/ N' X1 b8 _& o, E
7 O7 Q" \2 |9 G! p- p- L. O
" I8 u, |3 |9 \ 在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示：
3 R1 a: V# s4 R 5 |6 O9 t% ~# K' d% J% E3 ^
& b/ f' h8 A7 v# w9 @3 x; ?8 ^3 _
, V/ D6 J- J( D9 A
. [! Z6 m, f1 J3 N, ]) ]1 Y$ O( r
5 ^0 N$ a. F2 b) J, T 总结 7 J% W4 A' k3 X( N2 _4 b
( {# G- i5 f, y1 \ 1 i4 w/ W8 P) ^1 D/ w% x4 H, y+ J$ ]
建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。 0 r) i9 u. ?9 P m* R( ^
& C# v" ~3 b& g+ w& S8 E
: V) K# N* A' D" q6 M5 A
举报/反馈
8 C9 K* J; z( i5 n$ D/ T % Z: O. w8 R2 H' s) Y
& y0 \/ v$ `' L8 b
' ?% [5 L+ I/ a) w' O- T
4 x! @1 B' {; O3 n- r/ }6 k3 U; w0 r- k& j
| 
