1 J+ B0 b- T, q8 z' t0 O
" W3 E; ^7 ~8 W1 m; r! F+ D 前言 V0 v" b& A5 C" _" c8 l
8 \( `& F+ W# L
" y, j+ A; m$ D# O, g* Z 我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。 1 Q2 W A% y) d) [* _" {$ N
& u0 K2 A# ~ z* ?) P( b" u
7 J! g4 t6 `) K: r* P! g 风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。 ( ]" u0 W! B- a2 t
5 D2 B% A. t8 Y1 | m ' y e( B: d( r+ B, U6 I" [
介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。
3 y, J, ]4 `! ?2 e& h! V # j. n- e: T2 D" n1 N
! C6 h0 N; a/ G9 t) x0 V, r" Y$ V 界面简介及效果总览
8 q. `% {& J% [4 F& s, i
/ Z* r6 z! h+ n/ I2 ]( F; v D* o8 G9 [" N) q
5 H& m' l* Z. y; ?' Y' ~) Q p
7 P) }8 N! g( y( s% K0 V4 c7 \ 7 M! h7 n( g& w& x$ l; j
Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。
& ^; M+ U4 `+ r% Q1 g5 h 3 ?6 ?& y& k' `% E J4 B
% w* J2 U, D% _4 ]" L, m$ a) S
& v3 A, b) W4 J/ S/ C' G4 G
% I8 r9 S' x9 G! t
, _+ t, N# ~# k$ C0 `, H' n 点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。 8 V+ b) X7 Z0 J, a; ~
) F; U2 n' T3 n3 x4 V
, @! k" _, z0 q- F u* w, o. z0 ~ 实现过程
1 Q2 u8 t# Q" h8 C: p% P $ q' e& q) u. H$ i) J
) a- Q4 z- F% N* I
场景加载
; P+ _, P( j7 L% s5 Z$ l& @# R
# ^) J, Y' U7 r) u - J8 }- F1 N6 a B! ], F; G8 l( {; E# x
在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。
9 k6 j# s" z" p( ]5 P0 w$ g5 R
2 W0 J: _* ~* J& c+ h & I, r3 t* e+ Z
开场动画
+ S' R9 ]' Q. }: g# ~* E% {
7 `* h% F; d- Z 9 y& U- J. b3 m* |: J* \
& x& i! F% h. H& e
: l5 M: X& p) Z0 X8 s% x( S- h
$ j3 ~# _: o& [ 本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。
" {3 p5 P) b, O( n0 n6 Y& s8 B
X( m& g- q- |: a% J5 B& g% P 8 I* W. p. H! g5 }7 n$ 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 参数进行。
- W( T% n) ^' r& M) V ' G) p2 g# l* q+ d7 {
3 j7 e8 h1 a4 W/ E/ k# n finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。 ) t7 X5 Z9 y0 i* P( i( m. @5 l
, L7 M ?# i- W$ [) }: G
& u: d* m+ U* d- F# p" R 本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。
# F. ]) ]1 l+ @ X1 b % Q) f/ r4 c" z* t4 U( B" o
; A' e/ v0 a r% ~& G 实现价值 $ q d3 s( w- |
* E/ U9 H1 a, v/ X 9 {6 q2 j( [0 T& y' k
风电机组：
5 E- n) y1 x( s& A. \3 d: o
' k) ~% W( ?/ M* z0 Y; l P/ M + D6 }" M& k8 x* W) f; E! D4 ^
随风而动，将海上风能转化为电能 7 y3 ]% B9 Z0 e' E. S( C
3 L4 t/ y3 ]! N7 X& k7 B* e
. @8 @& U4 i6 {8 e* m/ j * r: s0 v7 L5 V0 G {
' l0 T6 D; V) y! I$ N1 u% C
4 s8 ^0 e, O+ {( _. H: [* {' ` 在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。 , T( Z/ V" m6 j7 D
: m, B6 u n3 r, S! B5 C1 ~
& s' ~. D2 O5 p7 r. M2 `
批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示： 5 P$ q5 }3 y h: I! b4 D
6 s, b' G. e0 q+ o" X
+ d1 T+ K, H n
+ c; n, G5 R; G5 J7 y
: I, N9 [% V$ G B( a7 ~
3 q9 k1 }3 ^! K
$ ~9 o' o6 I, T5 q- y
( c! t3 M7 |5 ~& Y / l& {3 R' q" A# R
在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。 3 f) q# B* E" ^# u" p% [$ _5 W' z
7 n7 [( q; z* w$ c
3 l. M1 N q! c/ ? 风电机的详细信息：
$ X" f: I. G6 N: G# b7 x
9 q4 Q* e6 `% ~4 | 6 J9 ]9 ]9 {) }6 r; h
进入微观视角，将风电机的一切尽收眼底 0 Z$ I/ o" C4 _) \6 m' P
8 I8 S! q- N/ ~5 r $ `8 g; S( |- }8 v( i9 W
" I% F; E+ u; D% d/ Z, Q% E
( e: U/ U! a+ K/ m. u- L) q) w : }. k0 r: I8 \$ W$ H
点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。
& y1 ~" M; D; j; A$ E. S' P4 |# S ; L8 g# U& D+ s& k7 M
, \. O) O7 d% p7 S 输电系统：
3 k( P; P2 S0 s" i$ t. t: Y 6 U! v+ y! w" M& |$ Z- H% _' B
p+ g9 y8 W- ^* u 不辞劳苦，将电能源源不断地输送给升压台 - X' V, C9 A2 \
8 D5 ]6 a q$ p+ z, g" I
( ^0 {/ S: D" d7 _/ A 经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。 ) z; \+ T$ V/ c, {$ H
6 m6 d( W4 F! Z! c; p 7 y; W/ C# d! w2 j( h9 a$ H
在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示：
. `: Z3 A3 y. W3 ~) ]( m - X7 g3 y! C. t% z: y
2 U1 a& v6 w/ ?+ G# |7 s$ u1 T
- `1 R) A' `- b+ a& j+ N2 ?9 j # w0 v1 m3 C) D) ~# D% e
- @* [& H, a, A& o
总结 $ }: ~) p( |! N, {% A% e6 R2 v+ m
3 E: j& ?/ ?+ Y3 t' D3 d* N
, Y, h+ B# G6 T: v k+ }9 e' y" c
建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。 & _5 [3 P2 D( g$ h
% b* Q# Z0 n" @' i
0 V7 `! h! T% M6 t 举报/反馈 3 r H- y8 k8 ~2 a$ O5 I1 ^, M
! R, L+ L' ?( A8 E+ j
( p6 }. \$ I5 M! x3 L
# N. Y; l3 j4 ~7 u- v
0 S1 V6 u% S* |' P! Z5 o; ~; P8 I- Z
8 H0 O! [) s6 g7 E4 Z/ h
| 
