# ]1 Z- a' g5 C3 u2 ` i- ]8 u# V # X) E, g) O- [8 K6 t4 m
前言
4 Q& d8 m+ W# Z7 w# ?
( z8 ^; t! U4 L! m $ g+ h; X; Y, k# \* @, }
我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。 # d6 C& ^4 c# T( }; N" P0 M; @+ P/ b
5 ?, L: w+ ~. N
9 U N9 n# d3 |. r2 o* ^
风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。 / G t: F; c4 V% S+ I: w
" ?$ F9 }# w& w- O( c
9 a' \8 K. A: P0 m+ _6 L 介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。
/ f- c: U I, s9 V. \" S ) o- D4 A* m# d& a, p
s' y& {$ G3 {, c$ H. |8 p
界面简介及效果总览
0 |: F! g7 E! w: ]5 ^& g # `* f8 R9 q' `) f8 j" q
* w' @( P! k6 f! J
, h9 E( s) E! D2 ~5 F5 {) R1 H
7 p1 O9 _4 e5 U
: d! C9 b: z! j0 d1 v0 X3 _+ I; ^
Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。
5 _ } B8 w2 g/ E% i+ Z " u$ _9 ]( a. i% E$ q
" {* ?& S" S7 w" h % u* T$ W3 v8 r: \, y, ~
$ U' s% }8 w, R' P, K. ?
" W! N2 G" R, t) ?& I" {% N2 Y 点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。 1 y% K4 h) o4 D& `
# l4 s/ h5 @( J4 g$ t" a6 Q
& t6 W! x* I: U f. f 实现过程
: @9 E, H4 w& W6 ]" n
& i8 O; p4 A6 o# K6 A
8 c. K6 C/ C9 B: s0 T8 `* j: b0 G 场景加载
7 {3 O. A! S+ Q+ |1 ` . l9 j6 o- n0 N8 B% D9 \
/ y% l9 ^1 X$ B. j9 n) i( I
在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。
, Z& O0 n& n" d$ K $ v4 y- I+ `" `! p# ]
: C0 Y2 p9 w- p# n' m+ M
开场动画 5 b. k/ W# w& |$ N6 _
8 Y {. f2 f) X' B, e2 z
4 x, {# g7 w& L( C* M
' ?( e3 d0 k: G% m4 L 5 [, }5 N1 P2 g/ V ?2 V
0 K0 [" L% h* J' Y4 L5 V4 M 本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。 3 Z& S5 R6 Z1 x1 v) ]& v
6 {' ^8 J0 Q2 G : W- B' F: O& _& @' z0 D7 T4 S( Z* d
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 K( n/ H2 v8 e . v6 d& y; I# o. c0 N% W
8 g$ K% @# }! l) ?
finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。 6 j9 k I& y' Q- ^" U g
, s2 j; c/ w T4 N* V 0 o$ p% U) [# b/ }& E# H6 Z
本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。
W+ e3 t9 G* t* u* T
) L* v5 ]: |1 o2 O: A& ]
: c7 b) d1 F& [$ y4 d 实现价值
8 E2 w/ p& K3 l2 D2 Y; `7 W- Z. `( t
& e7 \$ Z, A6 V! ^( @ + c' i5 ^6 l" V q: E- ^' V( X
风电机组：
4 p) B) w- R& z1 w5 p
. J( R# u5 E- O4 ^) I2 r! Y' L % c. _4 i3 {" {) E# D
随风而动，将海上风能转化为电能
3 Y0 d! F; ^1 z3 ]3 q, t # Q2 B" \, Y, G; P
4 @# h' M' h, H, T, r. E
& l& P, u5 K. L/ D6 N/ F / n, [! ~3 l6 d' i; @4 x9 ?7 b
7 Q7 v" {) C% `, A- z/ g9 p
在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。
& D7 Z/ ~4 A0 ~2 I. e: H* G % L5 P8 |! ~% \2 M; Z0 N/ t) h
3 E$ |) u2 o4 [9 S& O 批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示：
, u* ?: Q8 b: e$ R
; _; K0 K0 } k u
6 t. N% t, j5 d, q; r* Q 0 G7 M0 R# E6 z% p/ P; `
% V" V' E5 X! I! ?4 J1 Q e/ W
" u; [4 G/ M, t3 o 5 t8 x- G! r, J' ^/ n
" e/ ]7 `) [4 \. o i- Q% W6 ]* c
6 d5 |8 y* f! G: ~5 O 在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。 3 Z/ L- n* b* _$ y% B# o' q. K$ g
" w' c4 a( s9 h
" x. {' T" f4 C% ] 风电机的详细信息： : w) M; }* R/ {$ V
3 ^' u9 t' h5 Y8 x
& j7 j( K0 M) Y7 q l# R
进入微观视角，将风电机的一切尽收眼底 ( R3 D$ \4 ?) o
! k; k4 ^$ G/ Y8 f& I
& H7 x& }5 _0 Z6 p
# T% q2 b+ K. B5 U/ o ( z* L e" D# a. v
( U3 M' Y0 G" ^6 X" m3 l- d 点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。
" Z4 a( t- w! |& l2 W
* n" K1 `' `2 y: b. j7 E
3 p8 K6 T* W S w# M 输电系统：
) j# N# f2 _( m' Y $ w! C5 S/ y: k( y# m. y
( l( v P3 }/ l
不辞劳苦，将电能源源不断地输送给升压台 7 L: ~& [4 g* ]% ]8 i: Z {7 j0 M
+ ?! ?* {3 |4 U* [
% t4 B) G9 u" B. U 经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。 ; m2 j J) \/ z7 |3 M: @
( }/ E+ U. x" A- O/ r8 l / h8 [/ }1 g, V" w8 h$ l$ y4 ]9 J1 c
在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示：
. m" m4 X2 l0 V1 y ' H8 w1 ~. i& L v/ h8 `8 Z7 Y0 B
# I& p& l6 f( ~2 A; Q$ S
) r' |& J2 d, q. p1 m
' w) w; F$ e! t5 G# O) K
& t' I" F( }5 @8 D
总结 # s3 X! T- ?" z
. E9 X9 X6 z. N& R; O8 Y/ k' q2 T+ w% k0 Q
! u; p6 S* C$ i/ f 建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。 ! m* b8 Z! N6 Z0 M) Q" B, M
( |: Z5 H% z$ Z, Z4 f
5 P0 X ]4 ~1 P( l 举报/反馈 5 R& N o8 D7 |" O$ y6 G. J/ U
) U- P5 j! ]% T
( K) w/ z. ^3 B) y/ ]
! s) b& s8 m! g5 v8 a3 N- b ?$ k2 s
/ j2 q) _$ S, E! Z0 i6 h# U3 p- z6 [9 w$ i
| 
