9 q7 u5 p- s- t# Q
, Y: ]" X- z* J" k/ ^1 G* i 前言 " \- {+ N+ `- L
) Q: [& A1 H# F2 d- H ( O7 x5 _4 j6 X; |
我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。 4 n: z- I$ Q# G4 C
/ I, j! c, u5 x, p+ r
8 I% U2 I9 M; S
风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。
$ S) ~; X- `) o4 }- E' l3 J7 I2 _; O
( _- E- |! }2 _; A
9 x! a0 ]! q/ s0 D) ^" K( A0 O1 O 介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。 " {# }+ a7 l) C5 Z: T3 F
' d! U' b; {9 X7 H
9 \) a! P7 y/ ?' n8 s9 G
界面简介及效果总览 # C8 z% O$ c3 o q
% D/ d5 ]% X8 _/ _
4 e; ~& \$ `. G; i+ g7 J; A- ?
: y! \; T c3 `1 @4 [0 l9 t P ; Y* G: l$ `% G! L J, N: q) T
2 V; b/ p3 F, w, u% j; O) J" q
Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。 2 y( i! P& o1 Z2 b, K1 s- A
f* v# G" K( d
/ O3 s0 O* D2 e; P& P- o + b5 e) F0 @, h% f# L
& {: G4 F+ K8 e; O7 V6 d5 ]
# a8 `' }7 N0 U/ R 点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。
! g* A. @. `: n% M; I
4 s# H# S3 G* d- {
1 v1 S# z* V4 `( h 实现过程 : ?. K4 ^7 U& Y3 {* L
4 |( o* w# `9 @& L* \' i0 X9 u9 B) a
* I @! {) W- C, J- C
场景加载 2 I: q7 ^! K$ M2 f- m; R- ~
, K8 b0 h7 z/ p+ p9 w( V3 @
; {' U9 [! B/ H) J 在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。
& G; K; a7 R( |0 k# f
3 `' z9 i& ?' X
& @) t2 u2 U' }4 [, T! ?- j% ?9 H1 Q" I 开场动画 , ~ l. v2 n7 ~. a n" J/ m
! F9 L2 T- P+ x: |% _& [
: c0 X! |$ w; E( W$ ~$ H7 ~
$ O( @/ v: Z8 @7 f" `' _2 y! e4 g
6 Q! J* L( c$ V, Z8 V/ Z: E$ A. | / l- Z( N L8 D9 R
本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。
; n/ G; i- y5 X8 p! s# R7 N 4 `- P% R0 J: j6 X k
: h3 J2 C4 `& Q. u' \ 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 参数进行。 ) p2 y* e A+ n& J
& T, S( b6 i2 E2 ~ 6 j" E9 N2 e A" n- s5 w
finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。
8 ~$ u3 L6 U# h. v# F& j
: E9 {/ ^& H" I6 A ' r! v* O' }7 k; {
本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。 0 F7 ` Q* P' b# r
! Y; i! M5 e* O! ^; Q+ j/ V" R
7 q* k* h; g* R- \1 e9 G2 }
实现价值 - j( R/ w) ?9 G
0 b- _: ^! V! L& R) k( I2 `
5 y: k* Q* e7 n 风电机组：
9 o, D6 S8 X0 s) y- ^* X 4 @+ l. R7 O( L- Y6 q! b/ G; t
( U3 I `/ j* M5 u( U
随风而动，将海上风能转化为电能
3 s5 B6 q8 D; U# |* s
5 S! H! V; n+ y4 F8 z! X
2 o0 |+ j! A" P5 s5 a, y
7 Y/ R/ s; S' e; i0 p * V4 P! J6 q, c6 G9 K
; ]2 L) k8 r" g# t" b7 o: G
在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。
8 o2 B- A' \. y/ y: {6 K
& V3 c, b0 }# P$ o1 h ' s6 Q6 Z' ^% w! }9 ~) \
批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示： 7 L5 A/ K" M- n' t
( ~! I$ c2 [ u( ]' e L- Z2 S. k
6 x* v: J- |/ {5 L. d+ G
3 o; p' |; d+ t% b4 s F/ W" @ + [ s: ]8 {' S$ V) u3 w
- [2 x: D( A- f/ |
1 q2 [! f3 |' {2 Y: |% V ; M7 I5 E$ u) l: t& `
5 V0 ~0 R: [( d 在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。
+ P/ |5 j, s0 h K/ S5 V5 h$ E5 a- w( d1 R
5 R6 V7 {( L5 P" O! m% L3 H' E7 t 风电机的详细信息： 0 ~, C. ~6 K* Q4 a/ @
* g! b+ b: j8 {; y" Q1 O$ b
% X5 Z" F1 f3 m2 e; | 进入微观视角，将风电机的一切尽收眼底
1 P8 z* {( C9 R- v , A9 i: M5 p7 Z2 h% W( |
) L( O+ l; \2 w& W/ x! N
. a9 L+ N3 ?2 {: f8 K! e! q9 w- q
! P+ S4 Z9 B8 w& g/ L* A7 P) T* R
% A- Y: D5 X( D; c3 m, K" H* J 点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。
7 \0 h7 |0 r3 U( R7 U
. ?) y6 G) ~6 [+ |4 r) j$ t - }+ n% s- }- j: u' s# d. y9 g$ m5 K. s9 z
输电系统： ( Q+ L5 e3 i) l4 ~
l3 m; }2 d( v; x. N
/ S0 F/ L, ~% o" ?, L
不辞劳苦，将电能源源不断地输送给升压台
9 w: @/ m) R" ]% v 4 z8 L! M: R% u* I# r$ l2 U8 \
' ~* i# ~1 q- r! N' `4 }1 h 经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。 - C# b" ~& P0 J) p6 w& X
2 g& t: m) U, _* d4 P
" ]* M: z- L$ o6 Y& H9 G
在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示： 2 a) N% z8 } s3 J0 r0 I$ Y+ D- J
B+ c: {1 P4 ~% A' N' C* ~4 u
' ^% m7 V5 o) J {" ?. n+ a$ e1 t
# |7 B3 e6 D8 P2 {0 C1 `. j
0 W( l& D! A2 [8 @5 q4 `( T : k$ S; x' R. U. Y" s* E) h
总结
M. }1 s7 m( K( ^0 V. W
1 T: t- k8 ?/ C) F4 P9 S% C
' V" c( [% \/ }; D+ D8 m5 w 建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。 9 _! L1 y H1 E) X- s) W" ^
" h: v4 E7 ^5 A, ]7 t
9 X* I9 b) G9 |9 a5 S& l* O2 g" v 举报/反馈
1 { P& w: H0 _ 9 d/ Y6 ?5 V) v& d- d, m
- a [# P# r1 Z0 u/ q7 y! J7 X# y6 ]# m6 c5 [9 ]5 t7 r
. W+ J1 |9 u" n, V2 z0 ?) i. M+ f4 h% G; y( O: R9 w/ @. M& I( h' |3 }
| 
