. X' X) W" E1 a& w" H" H; e& o
7 W) W6 V8 Z9 ]" p 前言 , i! d% r' h: O! j! T4 N8 I, M. m; J
# l7 U0 h; k: F/ t8 r
* |0 w- v, d9 X0 F$ z, l
我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。
^' l. I5 h9 Q- _2 ~ 9 `# V5 ]6 d! B
, E6 n7 H1 ]1 P 风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。 , X3 i* v9 Y) H& h7 W2 |
8 P$ s( C6 |% n$ g \
9 E7 a, M! o8 m
介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。 2 i9 J" M2 e0 m! l' O3 E% R$ H8 G
0 L0 Q7 J( [3 v- r+ Z ; _5 n! B& r, m T- S6 H0 |3 A
界面简介及效果总览
4 F1 c: p$ b" l0 Z$ a6 s 4 ^, U9 O! X/ p: t1 `
6 u9 e7 W, x5 ^' i5 B
& K6 v/ _6 Y/ ?/ C6 c5 x 8 e; o( u7 ?9 t5 X
5 q/ E* M9 H: j& O8 ]* m' M" H# r, V. z" S0 x Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。
, j# N% R4 O* L% T l: ? . z7 G! U4 m( I6 c& {
: i& v$ g* [; b ; e5 I) Z# C; e; t- R F' m
9 w ~1 L: w; C2 J$ z0 D
6 g1 N5 \5 E: X6 }0 @( m7 O 点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。 4 Y- P& p$ B" R, T7 Q, U' g9 {
+ s" V+ h" P% b1 P- R* w5 e . N4 Z3 {& K1 U r, z G" \
实现过程 7 `0 o! j& c; F
& H4 J5 K- L3 Y! C$ {
# T+ ~( ^. ]2 F8 X. Y3 v% Q7 p
场景加载
5 c" D/ n' `8 w# B1 U# i / U0 ]5 |8 d7 a& d9 }8 x+ f5 j. h
6 R9 K- w. ^& {; I
在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。 % M8 P! Z5 j+ H, d
% q+ l Y) M* @0 n ' o0 E4 B8 V J0 t# h( {3 ?' _
开场动画 ( S: J$ s/ S$ u) x2 [. G% Z
3 Y/ `/ h+ L; j0 L* F( ~( Y
1 V' [0 v o! `1 o1 p- V" u ; u+ b* k" Y' D2 B
; \7 a: g v( a
. L: m$ i* y# u. ^' w
本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。 * ]5 J$ Z, G6 m3 c; K- g6 Y- h. B$ U
- x3 e. m% | J0 M: A% b
$ u2 A) @! M. l. M, E+ |; L 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 参数进行。 * p1 U L8 R. V
7 g% c3 N- ~( B3 E0 p) u
4 U: l: ]1 C4 J. Z
finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。
. d# z( h( w, }8 c( M6 c ) @, w2 N: @) ~1 @) ~
, e8 \6 \* J, B, P) L
本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。
: F3 K) j, N. a+ M" U/ Y
2 V' C0 F" w* I0 J! K 5 j1 ]8 }1 @0 f5 |" |+ Z
实现价值
9 V4 Y! l) x* J3 F
\2 Y3 ] \0 ^ _" o& b9 A2 E
4 B! `$ z) h% K: W 风电机组： ' }0 o) r& Z2 x, s, \
/ k) b2 d9 y! z) B! @ + {* C8 G5 t1 W. r" ^" W$ R; K! |# _
随风而动，将海上风能转化为电能
+ h6 d. i% z. c
& H5 M% R+ |: q4 N6 S7 i! \, n 4 M" Q. K9 @; C9 c% d `0 A
& L7 k$ C4 I6 N! _( z2 B2 S
1 {( N8 D9 B) @# E) S! u, Q * ~( `8 @8 p0 n& W0 W3 Q
在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。
1 ^# w9 q u. X 7 S. U/ E0 t; O/ ~, U- V2 c
& Q# D! O9 M ?; h
批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示： ; j4 d3 E& x; M4 ^
( V9 P3 V/ _" b6 m3 _8 J6 r$ K
x% t1 f# U, ~3 M$ q8 I: u # ~$ ^2 u( k: A7 @+ W
b7 A% w" Y) z9 Z. e+ B! [
8 {6 i7 b7 S7 O) N: m. I
- L, Z! ?: C. T$ M9 y
& Z+ v* C/ { r0 D' n: s& r
`6 ^6 s. b# K" a/ i 在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。
/ f: T& e4 |$ e( v7 P0 \. N* h: S 7 a: `! I3 e, h' S' H
7 C$ R h. k7 K' p' C/ @ 风电机的详细信息： 0 w$ g. C4 t. f: d. J/ P& ~
5 }- h5 v" v p5 j
6 X( H9 a7 I. }3 c2 e6 x& Q8 v 进入微观视角，将风电机的一切尽收眼底
6 U, ]( Y0 x' v
8 Z( O5 ~- r) f; N( [) X* q. @0 X
2 a" X. @2 N) V
5 B, f1 N3 z* }4 { / J8 L& @3 F; B; D B- c5 P
, V+ W# f3 C. H
点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。
8 p# K4 Y3 C% d. c% C1 W7 G3 B3 a" @ 1 {" q/ T, O/ W" U) r
! e! g# K1 g( t& O3 C) g& o 输电系统： . c+ l4 M& L# B6 R
3 j6 @* b& S3 U) H$ J/ v
; O9 ?7 t% B. H1 V 不辞劳苦，将电能源源不断地输送给升压台 " A5 h' C7 [! v3 R J
, N @+ I& b; w3 B( [* e+ b7 O
2 _: n* U2 ]' `$ z* C 经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。 " b2 D- s* O, B: k3 o& c3 R- F" ?
+ W5 ^+ q2 b' `2 Y
4 c+ t; E1 Y& ^" _1 \
在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示： 6 v- O2 W2 M$ @6 h9 e
) A% M) P, {( W
$ A8 ^: T! e$ y: w0 p q: t
5 Q% X3 b) m7 l' n5 E) }' g
. ?4 `/ ~5 E' x) t 4 U" O" q: w- w+ T! d
总结 ~: B7 Z! w- _8 t. M- r9 i- k
, z7 b1 R. E9 t. }1 q b : @) ^9 r7 E/ A/ w- n" p: X
建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。 * \! [: _3 c7 a
! @2 {- F1 ~( {( T& T7 j ' ~( u s: Z5 O. ~
举报/反馈
: u# _8 g# a u# R1 ~7 z
5 X. [. ]2 D3 s4 C
$ x" v: I5 G" q' r$ v6 ~
5 x! v7 s; F) c, A; ]* Z. [1 P# R; @$ V. H, b3 }- R& Y
9 o/ E1 B* }- X3 H
| 
