/ |, \2 r S5 g( e3 |! u9 d
" ?0 H& y! P2 g, X" b 前言 % @; ~) G8 Z& r
: w2 B4 ?6 u% W1 I7 @" I
7 F' ?( z; r5 B
我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。
5 p/ T8 }% M' p! a5 y; E
( I n6 q' @2 ~8 g3 R+ r' J 4 _/ r( ?8 M" h7 A) s
风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。
% ]* k3 o- s6 k- U# m3 ?/ o * u% M% r0 V T8 {2 `7 O; I
A b/ ]2 `0 _8 k) m3 N
介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。
8 ]; A! f: M/ | , Y ?' [0 B- o) |# W$ I+ G. a
' W4 A) B% c2 H! I8 B l8 u 界面简介及效果总览
3 Q. C6 R Z- y 9 V: H/ R0 [# i8 U+ u4 T1 C
) Y3 w2 b$ v. t6 u# S
3 f% ^2 n* k1 z' v4 f* ^' y. f0 ?
$ c% @/ z! d, ~8 ^. ~2 N6 D2 u
/ N6 S# V; K0 n, D [7 L6 ^$ O Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。
% {! e2 B/ p6 F% r# O" N * c' [ {& ~! G* u5 J$ S
" O- S. m+ D9 W2 v# i% m
4 G$ X$ v) D, o9 G 4 Z9 U, T; G- R ~, s3 E' m
4 t3 m# w! U, p) Q# I 点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。 & m& _! E3 _. C" s9 { q9 C
1 w$ U: m# f9 h6 d8 j m
- L9 A! y& `3 C$ Y 实现过程 ; I! T2 ~" B! n: A* M9 J9 h* f
7 @$ `7 v" p' D. C% U, W
6 _2 Z9 b: ?. y& c3 g- I 场景加载 . S! f7 k) t; k) {
" q. {: V2 J) I! N1 O " w* \, G4 I M
在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。
$ x$ Q* M3 U' B* n 6 b) b" _* x, @ c# T
" l/ |; }: z; h( ] ~2 T 开场动画
- [2 j6 Z9 m3 ]1 ` ) L) ?) Q/ k$ _, k0 u4 w* H
5 b8 T0 m$ P' m3 H0 k
% S3 |3 k, e& N5 Y0 f1 E
4 M' {5 F3 r( u" D6 j9 a8 X R ) z, N6 ?4 m* p, H" p2 c
本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。
6 e S, d# L0 l" X
; B7 X+ F" q) L$ { : L% D. x: ?1 s6 i% p2 g
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 参数进行。 # Y4 D1 i j m3 F' m& M' k% F& E, J
( M5 O. ~; d0 S% T; Q' u6 L " L+ v, q0 X% H
finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。 ! E- _3 p. z7 F1 O
9 X: U2 {0 C7 ]6 ^! } 8 y* t/ s& G8 i3 ?, S3 y
本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。 + ]& U/ U- n7 A2 L# u) @6 L
, o5 j3 @, t: _& L1 B 8 }+ \4 B0 R6 B7 }# I' | }
实现价值
' L7 k4 O; Z" Y
% R/ H2 Y- v8 s' z5 P9 n : g! Y2 m% e& k N2 y0 J# }7 N
风电机组： " m' e$ J* q* P. ]3 B4 |. a
* ?+ O) U: I7 v! C! C % {' C5 [; Q8 S. A$ V0 ?4 N( ?
随风而动，将海上风能转化为电能
C0 r% W$ j4 s9 M2 d7 f) d " ^/ z% G5 u4 |" S" ] V" u' o
% _& T) g. `8 N) }! K8 @
/ b( d4 E" A# f! b. M* i
, P& u/ y( S' ]
- e. p- S% _. x; d; [
在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。
: B( d5 f" V& ^7 t/ `9 W% ^" Z , r3 E; r9 w. m* |6 t k: k4 Y" {- t# P
' I/ j( w E% R% O2 R* T1 O
批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示：
& ^+ n6 f' ?0 K. J4 ^# X & ~* @9 w" G$ W' p7 ~
: A! z% }+ Q U 7 @# F5 f7 T! A! F& K
5 m& m2 J' q" n; l; s8 U . I/ A" ^6 }2 V. i1 t
2 D+ J, F* Y, E k, D& q
& s/ e8 x( C- S4 w& O & d4 V! L2 z+ q6 |. W5 B
在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。 ( G9 l/ m) \, i6 w; j% [
7 V7 K4 e$ g( q0 K: O4 E3 x2 |
; r; l" d- p' q
风电机的详细信息： ' G# G3 t j" I* _: A& t3 b
6 L0 }( o ^5 [1 ]# r0 `+ ^
7 k- o) b, y: P& ?- L
进入微观视角，将风电机的一切尽收眼底 2 w1 t$ ]/ o( U! T
+ N% t5 ]. l1 r, V % z o! \( o$ u
1 t1 N Z2 `" y
/ R7 H- G7 A' G/ Y 0 p( m+ v3 ?) P: L; ]
点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。 1 W3 u R, j4 s* w+ R1 ~
- v- X( f4 ]# U4 X7 P3 x$ y ' Q* ^. f9 W0 o5 z$ ]
输电系统：
+ S' y$ \) ?: q; y% h 0 C) S0 m, B. u% E5 I. \4 a
3 h u4 E) E& {! b- [2 {$ n
不辞劳苦，将电能源源不断地输送给升压台 2 U: I' G- s4 k6 A) {9 H5 x
4 z( E, Z( {6 ?3 z- e; m4 N 0 M+ m) \1 Y3 U; v& f. [8 R
经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。
6 p/ a; D# c' N- B. M4 Z, I
- R5 F4 t& r* ~$ |# k / |) y, r5 \3 l3 ~8 c
在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示：
, ]% p2 k' A# f! e: O
, A3 I- P9 Y p S8 j6 S
" A s) V4 { R- g6 S* q 5 p t% _" a& r) D4 a
( J, [$ K' b! V# h6 u2 s) O, g / J+ K; d; x. ^) }3 x
总结 6 M, H# b0 T9 F. H D9 \
3 _6 M( j; A% V( {. E
1 \; p: C5 G% V0 ~/ u: F+ c 建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。 5 _5 F, n- V6 Z/ X6 N7 N
& _& @! A8 N( ?$ p+ a , c# C) Q1 d, w- R2 E
举报/反馈
0 ~* T/ O3 x0 M; _& S( F $ G- u' v% n# O9 B/ Z9 z# T! n
0 t0 I5 k! g1 ~6 a. a
- T6 H" i3 r% X, ^3 T/ l4 _% k) W( l7 B
: a0 [1 r0 n$ |( G2 T" g r
| 
