: M& L0 d9 y$ M) l' }% x
8 y9 n" F% I& L; C9 ` 前言
: c) x5 s! u' A 2 \7 [$ z( m7 o& M8 U0 [7 I8 f# S
( E m- u* c6 k$ C" u, `% e 我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。 ! y4 V+ S2 v6 b( S
) R* C/ Z0 w+ {, \) f3 l! |+ w& V
% M6 [, D- ]! t: l% [7 ^
风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。 ! `1 `0 B6 A* \( M
$ b6 T& D( _& X+ v
6 S# }2 H$ C8 V4 l, U* X 介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。 3 r/ d, `: e6 c ?0 M& M
, h& e, `+ ~& O" l; U7 n& S
2 n) S# A# r1 ^5 p7 Y J 界面简介及效果总览 - e1 m: L$ X6 g8 }. h6 i. z N( g
5 }* t5 B* _$ E/ ^4 Y ; g& w- [9 s% e. M
4 ~4 X& x: v! S3 j w4 q Q* q/ D
! }7 w! e; c) u* z3 O
' ]: D6 F0 \% S( C/ \! Z/ @+ k# `
Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。 6 N2 S' p% H/ o% c; z6 Y! h [# A: D
9 ~4 m/ H* `# m% ? - n: b8 y5 k/ ]% u4 k, f
- Q) G7 v/ i9 F0 ~
0 c4 }/ S$ {/ w6 i ( |7 Z$ ~ A$ j! O4 x+ Z$ j) d: b
点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。 0 l! _6 H" N, f
4 O( \' l3 |( h$ g
, k6 t) r2 Y$ I+ x8 }" w6 p2 I# O 实现过程
0 R( ?% A# T8 z
% N3 p; h% F' W. l) Z2 J " N# [* u5 A' G# S9 y% N9 s
场景加载
! b) i, J6 m7 u3 k 8 F: A# v/ Q/ Z- O, R2 ?% C
" y! c% u1 z$ f9 W
在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。
5 b$ W5 [) g5 Q8 |
/ m4 e' f% E1 |
6 T! [7 n! q# W% y9 ^6 W 开场动画 ! s/ @" l. E. b7 y: J+ w F- a
, i- j2 P0 o1 _( Y" q/ i! r* a
' O. u& B. |8 K# }4 @6 @
1 ?* N4 F, I* h; T5 t1 ^, X9 U / A3 u& V, N7 q3 z8 B
" ]1 z1 f# G, T7 E9 z1 z( o* Z 本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。 0 C( ?" ]4 A6 u& Z/ ~' }
( V* _2 Z/ i3 Y: n. ^
7 L0 }$ L6 G' \. G* v( n- O 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 参数进行。 + f$ ]1 A- x# g9 d( D h# ^: L
1 p" s) T* v# l$ K; C0 m
2 {! w. m/ \1 S" p3 r/ H% h finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。
7 z0 A( U; K# s. k0 D7 R m
$ Z2 X1 i6 `) S4 `; U% s / V# S! }, J9 ^+ P3 y/ [2 S
本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。
8 B3 D3 i/ C1 Q* Y/ B# `+ M
* R. D- c8 c* @2 |% s ( d8 R7 K3 `0 @, ^2 ^
实现价值 : e [! c$ ?: m$ X" X) ?
5 v+ S% w0 O% Z0 D- {
1 C: I9 E N# A 风电机组：
]2 d R3 E! k+ e ' _5 @# f, _0 X0 @& R4 k) d6 ?$ i
! g: v3 F! E$ C0 U+ k! _; o 随风而动，将海上风能转化为电能
7 |/ Z7 {) \/ X$ t4 c( `3 N- z 8 K1 D$ O4 `' b0 V6 m' j
3 o. Q- ?/ P- ~5 @$ v: \
7 o* Z5 I; b4 X
* y* M! q( G- y ) q* x; \3 n' u: P) a. @
在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。
+ b" z/ M9 E8 k, {
: V5 O- v9 G5 D' k; d! h
+ k! w- p. c. `4 y 批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示：
5 W- m/ l2 ~4 N* f1 r1 k+ w* @' ` ( k4 K+ y* m: i* ]
; F q' O3 T3 n! a& U8 J$ u
4 L7 Q. x; H+ m4 m. @, G3 N3 {( D ! A0 |+ j) _" @! E
1 r0 `- }1 `1 `) ]
8 U* w& e. ^# i
* U) q# i( f$ T4 B3 t! l2 V% L
4 {4 c" h+ U8 S0 r6 F 在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。 : M4 Q5 L2 l) U
) A0 [3 a& q2 g. N6 x' p, H
, k V2 X1 b: V4 {
风电机的详细信息：
0 t) m0 t1 f3 a: c, C( H ' X1 r! C- D0 T/ d }
5 S9 l' g: ~ h9 F 进入微观视角，将风电机的一切尽收眼底
' \4 b4 M# }) Q, _2 v . ?- D" V: M# e" b. P N2 c. v% @
% U5 \/ k/ s1 [6 e, p
* S4 _6 u+ p, `8 S
% s$ |5 k2 ^3 O5 Z : A+ |8 P& {% @8 }
点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。 4 {" |2 G# m/ u* B% c
9 m/ V4 \0 c1 k4 V; K
/ [5 l5 N8 M) x; `) ? 输电系统： 7 V3 |/ w/ |8 {: e$ {* z
; E( M/ |- J( J/ p! d1 Y% M/ h
- u' J1 v# g, p" i$ T6 |9 } 不辞劳苦，将电能源源不断地输送给升压台 ( Y, ^: h5 g; G2 S
8 A4 U+ s4 _- q. ` 4 h7 Z1 ~3 \3 }$ F
经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。 + e" s* [1 {; v( `& v
; |' F6 r8 P2 }9 }& `
6 `: r0 [" x) @6 m4 \% k 在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示： 7 W$ Y6 y( }7 A- ]( k
5 O8 y) Y$ u' D# C1 a1 Y
% g3 V2 v6 D9 Y 6 T8 q2 b% ~0 ?4 Z( F, `% j1 a
5 N1 ?$ j3 A$ U1 s9 p8 y/ s
% z. R* }' M/ }, C 总结
; a# |' t x5 O% a$ k8 I/ r; C
3 k3 M/ H8 n! G- o: h( R6 w 4 ?( e8 D7 }" n0 p5 |$ \2 E
建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。
9 J: t5 m, n$ |; u& i. |. ` ( _5 i- Z8 I/ N. i: \6 ?
; w2 l* i/ w* l9 m' Y
举报/反馈
8 U+ O+ t" `! S- Q, M' b V, o' I4 a5 i+ i( V2 n4 }
L9 _$ @% U$ c) l& J! f* R3 G# J3 ]$ ~$ A
$ G$ }1 M0 q; l% m) m5 ^) g5 O8 w6 ], a, ?
| 
