2 a" q- V& m0 w% R! L2 S6 \
- z6 Q* E5 T+ E 前言 / C# q: H; p; r' |0 D
2 G# `( B. f9 @ # X' O# X$ P% G: ~6 y' i
我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。 ; k1 J0 J* s6 f7 C( q, b7 k6 N
0 ]: a& S! U8 g- O; C& J
3 q# c$ ?4 A! _ 风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。
w1 G1 W+ ~! f$ |' R/ N, ~
+ A6 A3 z1 V4 p$ @4 x9 _! \) p; h( `
& b( L) O5 H2 L5 j& d2 N/ K8 Q 介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。 - Z+ \" A( m6 z8 X
( s: H! l5 j* Y; Z4 Z
0 M# p" |. S# f6 }1 a. S; n 界面简介及效果总览
+ e j7 \: x T" w# \6 o* J
( p: k; n" h7 _3 Z
. C# ^# H6 K9 S2 q5 R7 o" g
( z% x9 z9 U: A( ?' c + ~6 N& L) m1 B
, p0 |: E9 m2 P. K6 W( {. p7 w
Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。 0 `6 ~5 n4 f' N+ M# F
$ ~# r, Z" w5 G. }8 F8 s
! D7 q, F( a6 X & u( i* C* l3 U7 q' y
7 ], b% w/ `( b
" H! L6 I4 J6 N* I' r" F 点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。 ) ^/ z2 P9 E0 h3 W- m* Z1 p
3 v6 ?* ^0 i. F( ]) ?5 [
$ w* d8 ~+ d. R% V! K1 t 实现过程
7 T0 i) {# B. n; }6 y6 W
% @* z0 _# L1 E: \5 W( C1 B; | . J$ T3 W' r/ G2 E
场景加载 # k$ X0 d, i. q A
& B% K0 B7 m+ d3 X: X & g/ s( T! k# o9 o( F5 e9 y% w$ x- A
在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。 . p+ N' P5 m3 X7 B, l
" g+ S/ k. R5 H: t- N" a3 q 1 a% M' e0 ]# z; r! H
开场动画 . o u, }: ^! o9 A+ k8 j. {7 E
- Y2 M3 u6 y8 s ' P: A" z0 [7 b
J% B: C2 t" D0 Y6 s* ?
9 h( ~0 b, G8 {' e
- E k6 g2 a1 _ 本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。 ) U# ?1 v3 g4 K4 Y
, f; f7 J$ V$ H, q4 Y
% |6 P3 Z- k* `4 [/ F! d) e 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 参数进行。 * ?1 p4 r; _5 z: F. S' S. D
/ ^/ M1 a9 D- w7 }+ s3 o1 F' u
3 h# [+ }! Q# E finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。
3 K0 f \, [& W |% M& a
" y8 y) u2 v8 g6 g
9 g# H, L' n! q/ z$ `+ [ 本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。
" P2 c/ O ] a% F % w4 x0 y: n) r
2 [/ c6 J* r' F* _+ Q0 m* h& X 实现价值 4 T7 a" Z+ G- S7 x5 T$ w
* ?6 g% K. N! l& V
5 w. n- l( h9 j9 d; h3 r 风电机组：
- n9 @7 a1 b3 u: k1 g
/ ?4 [7 Q4 t! t 8 f( L+ U6 k! r; H) ]* a
随风而动，将海上风能转化为电能
8 }8 {8 T2 K5 v4 V# q! h( K- ^
" Q" X% f! K" P; X ' z" E7 m2 n- P1 P S
4 f& f& h# H: \, a: O) G$ ~# O
) T6 k5 E" s& P
5 l- F, R0 ?$ m/ D1 k
在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。
% M( ^, a) Q3 Q' C% c( s % V. U% t4 d d' O! j& S$ e; |
: u% `0 S5 J) w) N0 Y
批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示： $ c# w5 y9 M2 |% Q0 {
; M/ G+ U4 ^0 j$ ^' I
$ F G4 {5 D$ _0 t - B5 `8 ~% A8 p2 o4 V' O
6 V0 x3 o- V+ E! H8 d5 {
! o" J, Z# v+ O# ^6 M9 _- g1 ~. [$ r. M
6 y% {# f2 [* q( b
( n7 K& F m& e, I/ S/ V8 R
7 L7 s4 a. r# w) Z# j- ? 在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。
! {" O/ A% ^& A# `& p
; Q( \+ C, M* i. [0 p0 d5 _2 F
4 W5 L) [% s# R/ [5 F: W4 ]8 e 风电机的详细信息：
% _% R5 b9 a; V9 r# O 6 p/ ]/ ~) L9 N4 v) u3 s$ ^
: `$ O9 }! j$ y3 _5 ^: e+ B+ H 进入微观视角，将风电机的一切尽收眼底
' L/ B! M# u8 N+ F! J ' Q- {& m9 h, n3 W: `+ t: a! F
" c2 r0 M% P# K4 O* u4 n! Z
8 S- t, D3 Q7 Y7 x: Y1 K
' N6 S% I8 a- V$ x1 H7 J+ |7 q
6 w7 I1 \" c( ^ 点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。 7 m5 i3 t& h4 V5 [9 z* C8 m
" H7 e8 Q) U8 ?" {! A# O- Z / u8 m) M. E' ], p
输电系统：
{& M6 o- l( n, L 3 O" \2 ~1 P- O& j
, @/ N; d f* k+ l; O2 P 不辞劳苦，将电能源源不断地输送给升压台
' `+ i9 _% Y" o9 E6 C' \- O
5 F8 k3 x) b! B/ S% F% u1 {' K m$ Z$ Q; C. O# R% k. v- b
经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。 6 z% k! i; o: R( u& \ D
6 V% H% g( ?* Z0 X0 q& \
+ B0 r8 R" M2 O& H; r1 n T
在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示： 2 ^2 n3 x6 o- W3 K0 S! J& J( x# \
/ k# t$ E; O/ A+ A5 S/ x- J 5 N) i( }0 D/ W/ o, a
% C1 i! z2 t7 X T8 p( O
6 S6 C. X1 s% P5 I) M( i* e $ h& P8 c% ]. X
总结
7 U+ _2 e; l) U; g* n* q * i8 e# w& z) _8 ^
2 U2 e- `9 i" ?5 l7 O 建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。
- K! h4 d' |* z7 F8 [( P3 H
' n# ]0 e [, j+ ?$ | , N1 w" |* }# O. M
举报/反馈 % [; S5 D- N/ Q
3 n* Z; c' I% S, t: v$ z# i+ m5 D N9 w+ d
: M% n& T5 L' ]
0 W- u9 s) ?7 K X6 v0 o
- p6 h0 f2 L" I. N) ?: u0 a' ^9 P | 
