. J& V3 ?# l5 \4 h; d, k
! g. O, ?8 X& l5 ?. j+ [" o 前言
& _! S6 }3 e/ X# R5 h. K
1 X2 m5 ~/ e3 w1 n 4 a" s7 _0 _, V% a, Y
我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。
x, Y" |2 o6 m+ a# h " e% `4 s' S, E1 h7 L2 }4 m
1 K% h5 C p6 x- R; q$ |
风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。 ! @0 |" H" K# b
+ l7 m3 g' ?5 T4 h. u T
# Q: r; @) ?+ ^2 _ a0 F
介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。
; M7 I7 k: p. p/ i5 m: G
+ b W4 |$ ]* \) m ( A, ?) M/ g' a9 H ~% {8 |
界面简介及效果总览
2 Y, U' G( H# h, y$ P1 r% F* S9 A1 b, X 0 E0 U4 D7 b3 c, N. @; D
2 Z: D. A+ q6 y9 S
, Q+ R9 Y9 N# \* D
- c& S! `% [( Q8 c! T! c% F + y+ N: D# j* E' @& b
Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。
* Y( o( Y9 b/ P( V 7 y" d7 W/ |) j, W7 t4 n% A( c: U# T/ i
% G" ^2 O* T. d' _4 ?7 b
* g( H' i0 m+ m1 M
- C: A3 j+ n& k3 _2 S% T( @* O; K 8 l Z; N1 L7 J& I
点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。 ' i/ A2 u# s! ^8 v: J9 @- z8 |$ H
/ G3 e" Z) W" V! |! t$ s# A
" [7 Z( ]9 _, `( o
实现过程 9 P. z0 s6 C2 H, r: x9 c/ ~8 {# ]7 `
2 }4 [* f2 ?# ?% t! n# R7 U b
3 o, e5 w* B7 r( U% J+ \ 场景加载 + v8 z5 {6 }8 E' x, w0 h
5 t: S$ K+ J+ f: w/ h
& q6 w1 G; R* @* N$ x8 g
在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。
) I/ `# c& P3 T7 z( i7 G * e( z0 r" c5 q5 f
" x% a5 [, _3 I& o+ U
开场动画
' Q& B3 ~! Z) q8 ~$ `: j 8 T* v! W; Y( X5 Q/ ~3 u' K) h& q
# |' M* v% t' \% z0 l
! {9 p a, z8 q0 c& t! g/ K
) c6 w% ^0 _7 m$ y1 j 7 O; ?/ f. i. E8 q
本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。 1 I& Q, D6 E3 C" r( J
/ e2 {8 m: y6 p" V8 y( \ 5 n9 ?( H' F: x- [( g- q7 j
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 参数进行。
) N* v7 e2 v* F
! }# B7 n! F) k7 x+ K; n! f* p ; A: ^; ^9 f/ a5 M) _: Z$ p; j
finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。 ) g( v4 C; x7 P# ^. r5 z
3 _. Z7 ?4 Y, l/ n, z1 T+ f
/ Q/ g7 m" x( p H) C 本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。
. C2 v' y: V+ v3 E2 H
4 f% e- s) f Y! i
, [; l1 p2 o# y% F g, P/ z1 { 实现价值 7 i5 u5 f% @, s( X% c1 P* m
+ m. q' D1 i5 h" W" ]( V
2 h* B! Z: W6 f3 ]. X- X$ E( A 风电机组： 5 s) b: n/ f+ I8 z
4 c6 u* ]3 g6 s- r7 K0 u2 i# V
j& X: W+ i% e( N* J. N: R9 J 随风而动，将海上风能转化为电能
% e* l& g* ^# w! f8 M7 e
. t/ [: M1 f+ ?3 U. k . d# c) L9 l3 a) m5 e# a
# L" A& u) h/ I1 g& O/ o4 P
: ?# q$ k5 T0 S c# V
8 P( c& h" j9 _# H 在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。
" K7 y* J$ `$ I' L9 H
+ \ D# c+ f/ ]; I# O) W
1 Z2 y/ z) q& }6 [! R G 批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示： & v6 C; f7 I: a' s6 [7 m" U
" u7 Y- k0 `! |# C
5 l7 v5 V3 G/ y; S5 v
4 p; _; f" ^0 {4 N# ^ & ~* B" x5 ]0 h; A6 ]: v8 F
* [8 u9 C4 F8 W3 X* I/ `
2 P' k3 G6 Z& C: a- K & }: D: i5 O. N" b1 p7 x
0 {" Y8 ?/ e! y( p4 u
在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。
5 y6 I; I3 e7 z % D3 ?8 H; B' c0 A
# T( `1 l' a; W' b 风电机的详细信息：
6 F% c+ y: ~5 O
3 ^! F* V% x0 ?. C1 f- q
: z. I# Y' ^! x/ h1 j5 H& }+ M+ X 进入微观视角，将风电机的一切尽收眼底 * S4 a, u4 t( T) J) m( s+ k
6 t* V9 }; ?; P7 O& K" A! [& ~ : i( W U& x# o; m
5 L( i9 P9 r) M0 z
* l, Z$ g4 L9 s2 w
' Z9 ~& P" E0 k8 H8 ~% Y$ A; W f 点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。 0 a4 j5 a, o$ Y3 z$ u& F; w M
& B4 H' e* X1 p0 q" d& Y$ ]6 O
! W5 P& o7 v9 y& ]" c1 Z% s& }; F
输电系统： 5 ]& q% j% M3 G- ?' v9 o
4 I2 W1 W1 K4 w$ I* {" F
' Y" ~. y% c2 h6 o3 j2 G 不辞劳苦，将电能源源不断地输送给升压台
' o. h. I2 q" b( ^/ D6 P, O1 j # x2 {: m6 j f9 [6 _
, {( B' v) b3 n2 |5 x
经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。
, f) Q* @& I7 v5 r5 Q e' v
5 Q4 m6 q1 q: ^( U8 N# g4 @/ [
2 `5 J% q6 O/ W. o# ?; x; [ 在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示：
2 R8 k; N( r0 }: c
' J+ Y u {7 W 7 P' Z% B* R8 M
9 E$ [3 @* J! X+ _9 j5 H # }6 d3 \ g9 G/ |0 l
. O; K# @' i9 {/ r5 D0 t7 g6 d 总结 % N: e3 h. p6 F3 c$ c# W+ Y
5 E0 G( c6 I2 G' R # [& _1 |8 d; v
建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。
- @3 c1 F0 z& g* k: O
1 Q" Q* t3 A2 r" j1 [' f , E9 V2 W$ ? n7 L3 Y: O
举报/反馈
- ^ @) ]5 Q7 e0 T( E: c 4 r/ ]9 v9 e" B' O
, ^. ^( n! k& Y" W
6 H, G+ \; ]2 M9 F0 L# B1 \( |2 R: P+ J. M) Q
7 T# k ]' w1 c# N
| 
