. V2 B+ D7 h4 S$ @
+ F7 \9 P+ t; O: k7 g' b 前言 ?, k; s- ?! q$ A' E4 F& X: z5 |8 C3 Z& `
! x; m0 g1 V" ^' @. f/ r* f
4 _$ r* Y7 H) H
我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。
" A1 s+ \/ m* q& M7 Q2 I* ? 0 o. r: Z* s& X4 g, D
, v/ K x! T: j! \ 风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。
% I( C1 {' A! V" p8 ~" h, _" w6 q7 q
6 M* m6 k: }5 g
& b$ o+ l/ r, h7 U) s4 Q( F 介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。
2 S4 K. @& N1 a% ^4 M+ ~: Y
8 L6 G9 \' s4 j' w& |, B& l3 z8 j 5 V* n: I% y" B- ^2 L$ z' v
界面简介及效果总览 3 {: @+ M- e ]3 r% f
0 k8 W T( r ^1 g8 O % I& S* ?8 Z3 A4 p; z
% w( M0 d1 I* V! P- y' ?1 F. J
L. Q+ n3 {( n4 \ ) y: ]1 M/ e) S
Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。
- {8 [2 ?5 `6 Z9 R. D6 k5 P" d # S+ E$ U% E" o
9 y* N! h" D& ~5 E |* A" ?0 O
5 c' u! {" F# k9 q
; l# M9 ]/ H4 z3 |! T
% X+ k' G0 K7 M4 v& i) O( D2 Q 点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。
+ P0 a/ E7 `# S( r
* g: e' S; A$ n; w* n6 S8 O- ^
; f& u0 q% O1 @+ l 实现过程
1 \" L$ _5 D& k& M/ q4 i
$ D9 j" i, h; [* ?" V0 R , O% y0 v( p, V6 I" b5 W
场景加载 - w* Z% B: H2 g1 t: x1 A
H, m8 M& l" c$ D# k: }
; J- D) f, Q! s9 I 在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。 % y: F( S& b! ~% i8 v, V
8 g/ l) u" N9 t3 [( J; ~
- l. X* H8 v! H2 y! U% h 开场动画
) I+ Z) N0 Z: y 6 @6 `( X5 ?; U1 G6 J
6 o" R) a, q0 Z6 U3 V $ H0 |; ^* L$ w; {/ ~
2 }7 [( j% ]' b$ f7 q4 F 0 _4 c L, o: R( L
本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。 ( u2 o# A. }9 C6 T4 z2 k6 D
6 V! A' \: l& |) _6 ^8 g
~& [; V5 p3 s) j6 n8 s8 Y) T 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 参数进行。
2 J9 n5 y$ m8 G6 `1 K' N / T, n+ B) h }) B. H, |7 Y8 G/ p
) R3 N# k4 H& Y' o1 G
finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。 ) d$ s8 R8 U' J+ @+ Q8 x6 b+ v
$ n2 `0 P/ L' f( t% h1 `( u% ` 5 y/ ~$ ]/ r @% Y& ?; C
本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。 & e' [' I/ w1 d) x4 ?
9 x7 M$ U0 Y' m6 B) f/ v# R
6 \: G& }! Z& z' Q, p' k 实现价值 * I [5 r: j8 d3 [- I0 D# A5 N
# D H' o; N' Z
& y' B* S: D" m 风电机组： " g* b9 Y6 W. t1 Z
# B# }* |: ]- U* g7 R* n% K
* V0 P5 P# Y! z9 I 随风而动，将海上风能转化为电能 6 w6 s9 b1 i4 A e# p
. h" O3 w9 Q; A) w # e$ M: g/ |4 x7 \, A6 D( i# w- r
$ ]' L7 Y/ s# g
. ^* M1 P& A9 H. ~' x
) _* J2 J: B8 @0 j
在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。
7 b- k1 u6 P# n" n" u2 A
: C/ v4 o. O8 ^0 T & x. V' ]9 w( Z8 [: {: x& Q
批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示：
: l+ _1 ]0 A. m ) r7 I1 d; ?+ r6 u- H; N
, K8 b- ?* X+ e0 ]$ Q6 v
. y, q! @+ ~) u, P& t: Q
3 s! f2 W, b. R2 P6 Y$ I 4 X; v* i4 i5 ` r) f
$ s! ~+ ^4 n7 u; l" S* n L
3 C9 d. v6 V) U( N m& {) W( u
( @) j9 ^) W& ^3 t0 `+ r" o/ c 在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。
4 p" q! O+ v% ]. J$ b. S 3 j2 Q" i# ]) I- Q5 u8 q
. C" O+ n' W/ S1 O$ t4 e+ r+ @
风电机的详细信息： # Z1 r$ ~( c6 S, c7 V o, W
4 B. _8 j; e) o! u# @ }1 F
5 i7 V& M5 F. _# F 进入微观视角，将风电机的一切尽收眼底
- A7 U4 n4 s5 `2 w: w - |2 U5 q: S! T; \3 ^' j
_( n; X, Q' \( v7 ?* o# l
- V6 Q& D; x) B6 k : [# R3 L! `+ `$ Z( H0 w& o
2 K% x* w- w, D% @7 l# `
点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。 $ b D& k/ o9 V) _3 S @) p! V
, B+ h y6 O* T$ d% z+ M' `
+ i3 F+ L8 C0 z1 ?& O- p7 A 输电系统：
8 D* r/ g5 ^1 ? D, B4 G- I . o1 u' w( d R! A
" w' C1 g% R% p5 Q) W8 o
不辞劳苦，将电能源源不断地输送给升压台 ' f1 d# w* L ~' K4 h
" T, L f1 c# p2 w
$ }3 s# V/ _$ K 经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。 ' ?: `/ m, w) J$ p6 A M- ?
6 [" ]& g2 J, U2 d+ z
( M- N( m0 O8 M1 Z: F 在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示：
5 N P( C+ C+ c* L
; j+ T: C4 p) u& N
* J! m& Q: E d# s; G " J1 [; _ g7 {6 @% Q) a
; L, w, q/ o& V' @" b
# i" K3 j; h" w0 X) i
总结 . z- C0 T- A7 o+ Y$ y/ z7 y
/ r5 k+ U+ A- f' k1 r0 M
) U/ x. a$ T) ^8 {/ B' L0 X 建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。
1 ^1 t. w7 i) n: |1 P, r8 t
6 H: d, S) Y2 V+ S- `
# b' d% V3 b6 z( F2 M 举报/反馈 , U* `7 B0 M' b) @3 y
8 x/ g$ B; Y; D K% ~
$ ? u" i! L. L4 x
$ _: \8 F! V+ A6 }2 S9 [
_9 ^- _: X+ g$ C* {( Y% w8 U# }8 k5 f0 o
| 
