, c/ R8 k! K, |) v
( d0 y7 r( ^% _; T2 \8 r) I 前言
+ q, T! ~9 W7 W$ z6 ~/ ^ 6 E- _. A3 Y- n+ d x6 O
5 p2 N+ p9 w$ T( T6 T
我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。
& z t5 O2 D+ s# Y* Y: L8 M/ r7 X
& S. c9 y" m$ R4 k' w6 y
: { ^" v# q; o9 }! }, r' w- G( ^ 风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。 ; D I) Y- w2 K9 w; }5 j
8 V$ V3 a" [" \8 Q. b
, P5 K0 P1 E; m/ I 介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。
y0 F6 ^4 z, j# i; `! i" A8 I( U7 N) Y 8 ?( ~$ |, {8 G! w9 A
# A+ e% n4 b) m9 }; F6 H" P6 D
界面简介及效果总览 / [ e0 D& @9 {) L# e' e: V
4 ~- U% T: i H# L& n
. o3 S' F# K0 J- w8 v/ \
9 }7 a7 Z2 [3 Q7 h
! J& M& O2 ^- L9 Z7 e, x2 ]1 w & C1 i8 ]6 h. T' ]0 `
Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。
% ]' P2 [+ t4 w- O$ q$ ~& H% B2 S8 l
- }* r+ |* S3 m 4 K% W5 c* O) s9 ]( C
I, k+ @% d7 y6 h 3 @$ a8 E2 Z' ~" m1 [
# s; T; |/ a4 u( n8 Z
点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。
9 U2 p1 i$ I, G8 q# A) m/ f
! P; y- \6 O( Z% A9 q. X
8 _: h O1 L @, Y% ?( J+ _) w 实现过程 0 `6 l6 M2 [( p' N2 \" S" I4 O
( i; V( o6 Y$ I6 T: a- g) Q- G : X4 f/ K1 \: c& _& L7 Y+ R2 t: f
场景加载 ) _* z0 h* k j7 V; K
1 C6 g ~' T# d1 [4 J; O; Q( _$ ~
' ]* D }) [& ]0 ]# ^2 ]1 m, g$ s
在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。 8 u2 J- J# J' ^# q1 {
" Y) b% s2 w& A 0 J& R( A9 M$ N' V1 ]
开场动画 ) Q/ F" {! ]7 {9 \& n
9 K5 I9 T* ^+ b; k
4 x" Y# x( z& i
, Y0 k: [0 \: N. ~$ [& Z& H$ i
8 ]( X; Z) A4 p9 K2 o: p+ \2 i 5 F5 S& V3 g% w1 Y+ F+ a0 |! u# a
本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。 7 ~, Q5 S' ^5 X, J
& ?- g% j4 j2 d( Q- r6 x! D
" d5 \; b- `8 w9 A) 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 参数进行。
7 X$ s: D! c& e/ G ) R; n9 i Z% N+ V) z. d- Z4 g
( W; w+ X4 Z R9 W: k5 q! u3 x" _ finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。 + d |9 i& n4 C5 M% ~
4 q& U* f! X2 Y3 m E- C, C
4 s" z x. B+ C; s% \# Q
本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。 & M, ?4 F; p% x, Z/ ^ @/ H
( B+ n/ J, Q* k5 A# K( u% N% I 0 `+ U* K# V' H# a! }
实现价值
( }- c7 i/ {6 G$ m) g; R+ o8 G
2 G: K; x7 |. n' z% o+ u7 L $ l4 d' r) Z0 Y
风电机组： ( n: h; q# U2 E: b* q0 ~, x
2 P% |$ l9 p0 v- R$ _7 a2 j, f% G# t 1 }- O7 _+ \0 Y' ~ u( D
随风而动，将海上风能转化为电能
1 ~4 s$ ^- P8 V 3 ?2 n/ \6 Y; v! R$ J! }7 P' d
q; t4 F$ e/ [) V/ I
2 z$ u# v C# T/ \
* W$ j9 F9 C: P
# i- ~+ i D x) i 在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。 / D [7 H' P6 _9 h
: @9 h8 j# L+ ]8 m1 X: W1 J) m
% ?8 ^) Z- |: A1 ~ 批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示： $ \! Q5 M+ b) u$ ~1 ?. |
8 M3 B, W0 m, ~5 h 6 |3 f- J; i, @* m
8 V5 w7 V6 i# m' e
6 z. M A2 c" n4 _ 1 P; G# z6 Z, T: m
# q: J; B& @0 x: m/ s& Q 2 k( {3 b3 b% D
% H3 k9 V+ d7 \7 M G& P& W
在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。
8 y% Q i1 [) o4 _# l! T; d $ Q0 I6 L3 R' q! W% H3 ]
n' D( u# F3 A- C. \ 风电机的详细信息：
4 s/ H1 x1 [( s- W& g' I: G4 N2 o
4 \- T. s! p Y7 O 6 H+ q- u: J: t7 w$ @
进入微观视角，将风电机的一切尽收眼底 9 F3 q* w& \; j: K- w. O
& b5 O. C6 X! z$ r# ` * Z$ E% Q& X+ c9 ~6 I# e
6 M9 d0 e- b2 e) K" ]
; i. `/ b! l9 \5 Q2 ^& H6 i; o $ }$ U6 X% o# D3 j# G$ b
点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。 . Y1 h- `; R+ X/ o& W6 D
5 E4 }0 d. W4 d0 @. H- s
( J- c6 S; d& I) T7 u 输电系统：
8 ^5 q) t2 i( y$ i" X0 w3 w5 e% T
: Z2 H) a5 ] p9 r * R, L4 B/ H7 @+ g# a3 f+ Z; F
不辞劳苦，将电能源源不断地输送给升压台 / n$ M; f6 g5 Y; y" r, A: C
6 p* f0 `& u- A n0 P# E0 X
9 j% x4 w" w3 v" I w3 a4 o y 经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。 g% p9 o3 s; b, u2 [
: r% E& _# d$ [+ v5 {7 m4 h/ I p & m( N* B& b8 s
在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示：
( ]% B6 K! b6 l9 z6 q
9 y/ e) P, S( Q7 n) i
! t2 G! o6 j) k8 Z/ k ( Y6 ^' f3 Y; H- G
; c6 ^. @$ ?7 d- ?9 f2 F * e( ]# n& ^# B |% I) C; j# V
总结
3 H0 w6 g- X1 S* R# @% o
/ j8 j3 `; i$ }4 `1 c5 j1 d
" V" ]8 a1 d+ ~1 w; |. g$ ~ 建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。
' i! p4 T% ~& ~! W1 q" [9 G0 H
0 `! D/ v W2 [4 H* f% N
. ]9 y' N! R5 V 举报/反馈
( |0 V; M; ~% B* O% j# l6 b
! B9 l" z1 C+ ^- r- r' l6 u% D6 J
$ U E1 P- Z9 l" f4 K; c) H8 t! } x7 u) p$ ?0 ~; s" E3 o: w+ N- ^2 b
& |+ t7 M/ F5 R" a! G4 i
. ^3 Y9 A" }1 q8 Q; c, G3 E
| 
