' S/ `. F( n O
8 K+ h; c0 [8 H! N) d 前言
" p+ f& A) u$ r7 [# ] ! a; W P8 d1 j; j+ x Q; U# j0 q
# o; c. ] k3 e! S
我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。
) _$ |4 h2 w. T# _& ^' n9 N7 |
& W$ c! A! a" z3 { o + @% R; J x# _5 i p! F, J9 J
风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。
$ Q( Z2 d# M6 S4 C1 J ; C0 J2 A5 x6 F/ D1 u. p% c5 Q
% y* J8 E. G( h$ K+ A2 T/ C( s, I3 a 介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。 + ^+ w1 R7 d* V0 h+ l
k: T- [8 o7 [; i
R8 Z( O: f! p B' \0 I/ H) @
界面简介及效果总览
. |2 F8 ?" a# K* W. |
' }( b2 Y) I- b2 w" ~ 2 L1 b! d, @ b; e+ }
' S' k; M& Y: T: m3 u
* b3 N* P% j$ A( \2 A m6 W- c0 H* U
: u: o v" |7 e* z7 }. k# J Y- K Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。 ) ^* n# C8 d/ a9 I' C( G6 M
- x$ K, C1 M% {0 F! k; ^) H. }
9 p% W& z* M1 R3 w5 @
$ E, d" c9 v% l7 r
4 L% z/ c8 Y* @+ q+ y" B* z
) c" z$ Z) Z: J" w+ } 点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。 ( c. w1 {' {5 x- x8 k5 V r
- @% Y* M7 j& T! z5 c9 j: o & `7 D; [; r- D: H5 X- v
实现过程
2 x8 O" S- Z" l& w & u0 m9 m5 g2 u# h; u$ d- p. c
$ a7 u4 R9 o+ g1 a( Q8 U
场景加载 4 h6 B' A R* Q1 b
" J! F2 N, Z' B8 j
1 I7 k$ F3 Z- L5 h4 k1 a 在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。 9 ?3 \/ J% u7 R4 e/ d
( y% m2 c# Z) |. j" s
; Q5 n# M i; L8 r9 ]4 N: [8 L! M 开场动画 5 l) G4 p* }4 A) }7 R* A" X
! }% m1 S9 j8 q# }5 I" `9 s
1 ^# X1 E* N. L# U6 B7 C) n& F
' {( Z3 g! C3 a& Q
s. l9 H. k# H4 H! A7 [( b; f" q9 m
' H+ K1 E; I- P' [, E, T: C* w9 l 本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。
, V y t% Y9 ?5 d5 c
: i' b9 j% a5 u' U8 T* Y4 C
5 G. \; S! t6 r6 i$ | 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 参数进行。
0 g$ D% [+ D, z! f9 f4 H
- D: A% `1 |0 i9 E . S9 a: e1 }- E3 C) g1 T; x
finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。 2 C* v: d) M8 q" Q* P) }0 ~ U' e
, g; p; y. ~. g, ? l* C
% M# @! F& v5 E) o6 f) P 本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。 # R. k1 n3 t5 U2 D1 @ g
' f1 w4 _8 Y, M) v
* C9 y9 T4 n; v
实现价值 ( v+ ^- Y: H- L# M- {; q
* Y* W- T/ M5 W" y5 o# L
+ A9 C# }) i6 J+ K 风电机组： # v; [/ c. o" D$ @& r
" j7 {& P4 K0 K9 i0 }
& D- P8 `5 h7 E; p: U
随风而动，将海上风能转化为电能 . f1 _/ B& I7 L+ ~& z
% L" Y7 j, I) G& A & `2 z) ~( e6 Q3 ^6 p, t( }) O. c
# U2 F1 j( ~- F+ h& C: R; e
+ ?1 Q: Z! A& z3 }8 `& o1 M9 Q }
. T, p! {2 N" T8 { 在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。
6 I* A3 L# e2 v% T
8 q& z" i1 k1 |& w # l- a1 N* V9 q, T. P
批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示：
" g9 n( y" W9 b! ?% c& A: h) `
/ r4 h- r) S: i. J' K
% d3 l+ ^! ]% b! `. e% `: k1 j1 E ' B( _3 M. K, t" c
7 _ U. _$ a+ \0 B4 x- y$ L& ?& d+ e
" _( r& Y; A+ U$ j
7 p$ v0 c8 C. s8 e3 t% j" H % W) ~% r: M4 w8 f& q
5 w- T( l+ ~: o$ s5 S/ R/ M- [
在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。
. v3 K/ @ h, ~3 F6 v+ d
8 |5 H- v2 i# E2 N6 ~5 \! a/ C 4 s5 x! T9 L4 F8 U. T7 i$ Q
风电机的详细信息：
# N; P! x0 q! f' C# Q; H9 ~' M
0 k7 c$ b9 _" m, I$ Y, B% X
) ~4 w3 I8 Y' E 进入微观视角，将风电机的一切尽收眼底
+ |" k6 D! |- T4 h0 r - t5 h" J( T, W+ p
7 ~, p/ M1 d L0 Z7 Y* n / ]2 |! ^: ~/ n' \
& R4 F. v9 S% b& [5 j
! Y6 F; r B' R 点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。
% { B. C! i5 z5 ` + F5 t! H* |$ e: v0 A
7 n0 a3 i* [% Y4 v, I 输电系统：
, ]. P4 K, ~7 d% b6 o& h0 T * S( M( l! g. n
! r# d) m# s1 @) @. D3 H3 J 不辞劳苦，将电能源源不断地输送给升压台 ! D; E# c5 b5 X- w* h
& g" \7 ^7 H7 ]; B2 J
6 g0 h7 l6 r Y$ B
经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。 % D4 w# x8 J6 o
& Y, X* ~: s+ | `) V2 S" }
! V$ I5 u0 {+ a2 |& ]
在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示： 8 p9 g4 F' Y" S$ P7 o# p0 {
; {# [- h8 d3 Y
( G6 B. z1 B& B: M; [# M# x; }
+ I2 ~5 K: z# \; X" I% Q/ g
. k3 v: z2 J" F2 Z : d3 i1 t- B* a5 N- D: d: p0 s# C
总结
; S9 T7 s1 x$ K+ X4 X$ B
' `4 u, G' D" U( P, d/ D ; W _) ~! L& D( f! m7 t
建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。 8 k8 j, w h. l/ Q
& { g8 p3 _3 i / v, N6 G! i7 N
举报/反馈 4 v1 f) ~) U1 ?- h* H
! q/ i* J7 Z; \: A7 F( o) W/ K8 P# F1 X* u5 a
, O, |/ a& A& k# K w
8 n% J. ]4 u. @% t
, c" Q% S- A" m9 W3 R; E4 y | 
