_- V, s' @, j6 L
' U" q$ V* X* ?- L0 i: @# N 前言
5 J4 I! n, u. b# k# Z, v$ G9 s; J 4 ~, v0 V. j) G( [# `# `+ u/ [
: ]9 L/ S; O) z) ~" q R
我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。
4 B0 _) J' a( _; Z# h1 |4 k/ J% U
. n( \/ Z( _8 F5 ?2 [! B {6 A6 f% K# Z+ P1 p* W
风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。
+ A, C& h( n" `$ B' v* g5 |- Z ; i: `9 x8 |; s8 T+ W
y# r4 M; Z" ~ 介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。 + ]; U- O! _/ w0 T- s: W9 o+ E+ Z5 [' r
$ q& K' P, E# N$ g
$ G; l& e& m6 `6 J, q5 A1 w, Q& w 界面简介及效果总览
2 B! P$ x) y% n# m8 e5 o
8 j# E# A4 Z0 N/ [/ a 3 _* L9 T8 e' c' A- ~7 P9 z
( g/ l/ t U. G5 V$ e, o5 Y
0 M; X) F( B6 F4 ^% F" V L5 n! ^, b9 m" U) X) i' a
Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。 ( j; `4 D+ B" n( r7 Q6 C
0 y# v6 a* w- G6 Q z
) x/ q; [: {# `4 D2 f1 | 5 F! e) ~4 Y' u: d9 X3 B* _
& f% ~. j8 S; K9 ]' ?+ o) c
) E! z, p u3 l7 i* v- ~4 s# Q 点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。 7 l* `, S8 y2 { B6 |
3 J1 i5 W/ H: U' D, l) l2 o
& n+ u" G/ i& R1 h' e6 L0 b 实现过程 ; | x+ l. s) e" ?& ~
1 s# a3 u9 y% N8 ]# C& [) l
5 J6 ^# Z: c3 I! @ 场景加载 3 o) l' a1 f9 P9 W, o3 C
6 ]/ Q! U8 v8 ~ : E5 F" I* X, Y
在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。 4 p& g, k7 b$ W) y1 e, |1 z) D
, L, G! B; Z5 g s) l/ F) `3 v# `) G' g1 D: P7 P- `
开场动画 ; p; J9 i1 d5 c+ S- d0 x2 ]
) N! [3 j. U" G' M: \) i ( g7 |9 v) K( y V( f
9 z+ Q: `# h/ M. { b# B1 x
4 y8 z0 L$ S+ J, E5 o! k
6 b! M c$ K; [ 本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。
# ^: B& v; \& f- ^( w, D+ j; s3 ~
* _4 d/ t8 ~7 p3 m$ |, l d* G
4 F$ Y& L# G, h% W- ?% r: _8 Q 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 参数进行。
5 i8 n u1 G" } J
* i* i, V( u" S$ r6 i6 o1 p
) q4 F1 |9 B6 K* S( k L" ` finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。
5 C% _2 _+ Q8 K2 l
+ h% Q3 H2 T' ]* Q! e- M( D e
3 g' F+ s1 P q9 w 本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。 2 v5 F5 ]5 |% k S2 t
5 w6 H: Y2 p2 f6 ~, ^- `
' ]# j- z) k% \" U- H' y. n/ y 实现价值
9 U: K* ]* M; t" u
7 M ], [ ^# o ; i8 j& G' ?& R/ F4 o, }1 J
风电机组： 9 N# O! M. Q' J& ^, r
: i2 c( R: G$ C. k ]% K
- Y, _' }( n: T6 h+ F" I5 H. T! e 随风而动，将海上风能转化为电能 ' F2 n9 I3 q _: n: r2 l
6 A/ G9 i! W/ e% A, a4 c 8 d: U) [: R0 t3 c% j& r
+ \/ ?8 B$ `( C2 Z
j# ^ r! C/ L _
$ |& }0 @3 W$ d+ p1 X$ U% u z d 在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。 # \9 u3 I7 J3 U+ w. \' `1 m
& g8 e: D5 U, {2 v
2 c7 ^4 b7 ?$ ]0 O* i* ?- r 批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示：
* m5 C/ f5 T E * k; M, u2 ^" ~
: O8 S5 y+ ^+ x3 p- }9 k
V1 M4 D0 x" [# }; O$ T
q7 T8 ~. D3 W6 o8 m( e6 a" v
7 @/ `7 _% k, a) R. X
. s4 l: v: M# t% `1 h
! e, Y. a+ y3 J. }; m* Z2 e % K* @$ N c1 e z5 A% N9 C
在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。 + `8 L8 P* V- j t
1 P. o! s4 o& `) p% Q; \% u1 G
5 t4 M. N0 Y" G- { 风电机的详细信息： : ~& J. M- q a8 Z& r; F0 ^* h
" |( D( F, ]; h/ ?4 l" a! ` + p S/ i5 V+ _* S. s3 O$ |
进入微观视角，将风电机的一切尽收眼底
0 s# |) N7 u9 p) m( B3 R* D$ @ * i* Q" C |" h9 R$ a$ B% |
9 u. p8 s9 x: i+ i
2 Y1 x& _0 Y7 i* M0 }* P* e, I: i
& F1 y) p9 f% |+ b' i
5 _2 i. k- A% _ 点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。 6 {' T" d0 l, h, o
# W% b6 U, C7 g+ _8 w G1 w: m( ^3 x: E7 n
输电系统： $ j8 K& ?1 I: m/ b+ x+ P
8 G7 A# i, q" w# O! b0 S
! ]7 B0 n0 o6 |" I! t! ^' X 不辞劳苦，将电能源源不断地输送给升压台
# m. W6 }9 g* p+ y! k . _1 B0 \5 u' M4 p. P8 l2 J4 Z: m
9 i! D# ` v* }/ F$ V( h
经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。
: l4 m* m: O d m3 Y + `$ `) Q8 g- \2 q9 e! K
+ f: s& d: R3 |3 E* y' \' a
在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示： . C9 K' u2 g1 j' O& T5 A2 o4 ?8 N
6 R: p, R1 u7 u4 d6 \& b0 y
* O1 s& j$ x! I( [% o* P F1 E2 }% ?
. f# j% _3 v: }1 M- ]$ X2 g
; Q# b/ [! S2 o; k2 x
Y {; |$ g' A( g D* R* j0 s 总结
, z, B* m# F) `* m6 m 1 }( E' Q, f0 S- g& Q
% E/ L2 ?1 @3 {" F$ f4 z 建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。
) ~- Z2 {: q3 I3 y - B+ X* L# k/ ^/ A+ j
" _. A p! E' l
举报/反馈 ; i8 g5 Z3 x5 Y8 L2 [( e
% b9 A2 x5 x6 I% q y+ ?; k! Q' |7 b, d4 n$ M X
4 y# ]8 P4 h7 ^4 A
' N1 j. ~# g2 l+ m
5 m* L) x6 f+ P8 Q+ j" d# N' ^ | 
