! G; Y. u$ X# s' b$ r& {
1 b; L. @* `/ D% o+ C/ a
前言
. a. x, D1 l4 {( T* i; h5 I6 f 6 B/ U1 { p/ U- ^+ E- S
" {/ d _& M: W6 B 我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。 0 w) U& L7 H) G; ^
3 P' Y" l1 ~8 E. C, B
/ O) Q+ d J& h! u
风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。 6 G5 w l' u- L: J: r! P' d
9 i9 P$ S* J% r2 x
" S/ r% ]/ T/ o5 [5 {# X- g 介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。
6 Z2 d7 j0 D( R+ B- b. ^( v 8 U/ b% H; Q: p, ~& i1 y1 I
/ [; M, [! G- D$ [0 E
界面简介及效果总览 3 ], c' P1 C& l; b# m% A
0 N0 L7 y9 J/ {6 c
7 z- \/ I. ?! j - c# c7 u* y6 ]3 Q. O! K
" L5 i! P$ [+ a9 a) {2 t / b# F* R% _6 ?' C q5 G/ ^. C
Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。 * b8 O: Y! R) u5 T* H i" _
2 z& x, j2 v9 V1 g: z; f0 G1 |6 ^
4 k6 w2 |4 y& M. y3 o9 E . k% Z& s0 a7 ~+ s" V
5 V2 W; `4 m- x @ `) w* r
: \' t' C+ }4 l$ m 点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。
/ [, K5 t% T( N3 t; f ) C) U" N! @- k
% ~" A1 z- S& P G2 E* O' [
实现过程
9 Z. X3 s# i/ g: O
) ~4 v. l* k$ _& W7 @+ s3 P 6 Z' r8 t9 M* F' \; ?) G7 r
场景加载 2 C2 x2 f- x; x8 r2 e
9 q* C8 D+ T0 n5 S' p- l
* \* _% D6 X( s6 f; E 在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。 2 i# u8 A& i. @$ T5 S
3 h0 h( q& E7 T |3 W
/ D7 D# I8 d1 A K$ E 开场动画 5 g' b; J. T; I" \
$ @$ r% x6 D4 T1 x& J6 {
5 M2 ] e j8 S* g5 C3 s4 J
# C1 @' u+ E8 W& S
3 _2 O9 \3 R: Z9 T) c + n5 W# h. g1 l. V) X1 }8 h
本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。 " o$ K/ D$ o# B; v: A3 j
. p) ?9 |! [ M0 q B, n) e( x
% `& g/ j% _9 t+ h
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 参数进行。 " t, d; |, X4 }" k) e V
^8 s9 {1 [, {7 r! M; K
: F6 a9 x+ A! q9 y
finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。 5 M$ x. r {% i( |% U
9 ~/ Z: U! U2 @* X. w9 b; H
5 h7 x8 J: s9 M) X' N4 `! p3 U 本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。 # p& m+ y3 R3 ]4 F/ O/ n
7 ^, k u; d4 }
2 _, r" F0 }; T9 t3 z# z% s 实现价值
' t0 W G- u( ~' h2 o' r
; o+ v2 k/ V( z* [6 i
8 J3 c0 s" L: D 风电机组： , U/ i; X. g- ?9 X! c. P
) v) p5 }7 q+ y% d0 x) ?
2 x/ W6 d/ ^; o. R/ r# Z) j 随风而动，将海上风能转化为电能
6 H! D0 Y" P0 m' A
5 I9 h ^" ]0 a% }% c % p1 w( r- ^5 n, M
X1 W0 f3 M4 I# U: M- O
5 ]+ _1 M8 q2 M5 R
$ }$ o# c6 v, n1 E
在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。
& v4 l3 f: q" j8 ` 3 E h Z5 c# Z! a1 G/ Y) F6 f
( |& T ~& \2 j: l, M$ q* a 批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示： * T$ M. U7 q2 V. T$ ^, W3 ]
- G7 P4 ]3 y2 i! \
: I3 [. ~/ f* [* @ B
1 @: r4 ?4 \2 M7 m2 c, p) v
7 l7 c- z, b" P% U0 T9 U 6 s3 o6 _1 {$ w
) w+ D+ B- O- O; s" d 3 ~# R; D( q* [) s, Q
6 i! I& s* e1 f$ T 在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。
; Z% ~& i V' F6 Y" E3 r+ ` , @- N0 r, ^6 D; q, R1 g
. V* e9 T+ _) ~$ a& E: O3 w' w 风电机的详细信息： 7 U7 t4 o4 @$ K" L2 s# ^$ T; h* b
; ]4 [( H* ?; i% h2 g 7 K% Q1 }! v: i
进入微观视角，将风电机的一切尽收眼底
% |: X( k& S& |9 M N& Y5 D( {9 j% n
1 R7 i" u5 ]+ A* {
! U i( `. e p6 u: P0 h
8 {# Q0 I0 p4 ?# v7 u
9 G# r7 P; P+ K 点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。 ) z/ w5 M) a4 [4 Q& b7 k2 }( K
# O4 @$ | m8 x; F5 m; p : k6 }1 B( j% H7 ^9 \2 j1 `9 ]
输电系统： ; r! x) t# }) ]) ?+ ?. z; h
6 l0 Y% k& o4 ]: D2 {3 [
& R. Z" A6 O: v6 g 不辞劳苦，将电能源源不断地输送给升压台
% _$ k$ B( ~; r7 d% D% W1 M 9 t8 {8 t% O$ |- }+ r# w- D
( K7 K- n2 j; p/ w( d5 L 经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。
7 Z: r E" r5 }, z/ Z # z; @( M7 E. T5 o, ~+ c
7 Y4 @2 I; H' {/ k- J9 P 在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示：
2 d q& V! y( g$ ]" T9 L
5 p3 t3 @2 A) f
6 g1 C# a A( x+ y
) H( m% j+ I* D; F + K, Z* V* Q; C' D+ X' @0 e
' V: c5 Q! H$ i% F0 ] 总结
0 \& x$ H1 x( n; N8 A& S) G; ~5 X) K
5 W/ s' p; ], q# _3 e. W2 A
; D2 X* X: G: v8 V 建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。 , N6 D' s. C1 O1 K# l
" J, ~* ?2 n3 J" K7 w4 m
9 ?- e# W3 ]" z& [8 |2 }
举报/反馈
9 r2 l$ n% R Q" O: v; g! P5 k
- Y, V# K. A5 A
5 C- e$ ]* y4 H1 Z3 }7 |: F9 r _* y- K, y
+ B! J6 `; r6 e3 {1 S( G
3 N; F4 S* w8 I" X | 
