) ~* E" c( c r b6 n( X! i4 j" t+ C
) s- L) G% d ~$ }7 y 前言
0 D/ l6 D/ g: x; j, |2 {5 u! K; | 3 R$ p. E6 h3 f
2 S, H" y r. ?0 G 我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。
2 a' ?) n9 L5 P9 v; H
% N; q2 N- H7 X 1 @+ _1 Q" a; C: R, p( `- e; V
风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。
- r) S1 w! Z @( K9 q
5 H( T5 @$ B: ^ u
# G! k' ?0 h2 X% _2 y5 e 介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。
8 |! F! s8 a/ t5 k. |
2 d( V& M% N$ Q
* E8 m2 F; X4 ` L- q6 e 界面简介及效果总览
; Y8 |5 w6 c" ?9 z; N
4 e$ U1 d5 U( E t 8 p* v( L8 T( Y
5 b/ d; Y0 i" \; f5 z7 z; ?7 ] 0 ], g' ]# `% Q# K$ B$ C
+ O/ L* a/ r K+ ?) r8 E* K% ~ Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。
/ D" P/ o" ]2 w- Y
; _+ E: j! l; E# e* @8 R 8 w+ N5 U" I9 d, J+ g# n
; N T* P/ ]3 z ~' w7 v
; Z5 ?( R7 k D# K9 N' b2 |0 m : R2 Z4 ?2 K* ]( ]% `
点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。
& }' C- ^! x r( x' V8 o! U
* l( V9 s* d$ ? ^7 I
' D4 q* t% X& p8 A) r- E0 D X# U7 [% F 实现过程
, Y; w9 j3 A: u5 r+ k
, \+ H3 `! p9 `6 a 0 ?( `2 I: C7 Q% R
场景加载 % B: x& h+ o$ N$ |! r X! S$ D
/ m9 j- T* |, `$ J
5 D: L7 l9 m3 k 在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。
4 g+ z! c; n* w' ?, b ) _0 a5 N% U* L1 I+ j! T/ C# _
+ w+ j" I' _, X& k4 U
开场动画
$ _- x6 M X* t6 Q4 J: _! s
5 c' R" J) G5 ~3 R7 W! p - \$ Y* v6 X2 b9 X+ m1 p3 B+ p
1 R4 {& _: }* Z2 J" a
4 Y( L! X% g% X) }" m+ D) h8 R8 m' L
7 h6 L* }# v& m3 [
本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。 % ~& [9 t; e3 i0 \( m6 Q: g
: V# Q2 M4 p, n8 x% B; U
7 S2 l5 V6 p; _. e 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 参数进行。
3 P6 I1 d: |' o& e+ q1 \% N
; p" P, Z G+ U7 w! \
H7 L1 N( H2 {! k' c finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。 4 E, \, }6 g( \1 y) k
, y s* z( a! P2 {3 | ! x* v8 [. K; X4 w# @2 n# \
本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。 3 S: ^+ u1 B W. w% W; @1 O
1 C+ P+ X8 l8 ]0 Q
% ~2 c5 i& ~ {# `; X% L
实现价值 1 a0 s6 G) E" [) u
, l' d9 y3 L" s$ ^& l* i
1 [, L& n* k6 N" \) {" h
风电机组： * d: X+ P# S+ j7 B- w
) o0 j, n+ a" B M8 u, m* Q7 L/ x+ Q& ?
% {1 c4 M: l9 s9 J8 W 随风而动，将海上风能转化为电能
" |. W4 n1 i: e% m2 \- g2 ` / n$ e5 E8 X" V6 A
9 r8 Z% H) N. `4 W2 t! X( t
1 S5 g! V6 W, f6 G W4 ` + h8 w. F, f, _" T
: h; A$ U4 ]! F& U; R2 L" \0 ~4 q 在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。 8 Z" ?6 w( C0 H1 h; C" X+ v
9 _$ `3 j) Z) e+ @6 t
) P2 y! H' ~, E g& \2 W/ G7 c
批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示： 7 W# Y% d, o8 N4 u
% w: O3 u; ^% D9 L. u! A
: g7 }2 }% g4 b9 I3 U% \0 i
3 R/ q1 C8 |( g& X! X
6 H3 K6 Y# v7 N2 E+ P E* i * t+ W6 n9 e5 Z" @4 w* ^
# B9 K$ j+ O( x) f6 Y- C' W
& M( B. S/ K) a# l |' D- |) f/ f
) U! s: }8 s; T2 R1 p3 p 在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。 2 @5 _1 C! y$ A$ ~, o, U, m
0 h- F: d' N( b8 v( j
# D, G; u( w% `& R+ H+ e 风电机的详细信息： $ J; @, O$ h" w5 s7 i
- K- U( |' m1 p5 N, {9 w! G
7 M6 h& U, X' M @6 V# i 进入微观视角，将风电机的一切尽收眼底 7 [5 N: P3 G" J# D
* X8 q# I$ f+ L, G
3 y% {1 c( c+ q5 N7 q, v' \, W7 C
: o4 J% q/ _' i# R+ b 8 F) j. I* F4 S! e, T2 v1 u
b4 _) p! { u- Z0 N# v8 w0 ]
点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。 # Z! G- M2 j& y" `
- j! g5 h; ]* F% q
) K3 H! J: \- V
输电系统：
* V" l# |( O0 a5 f4 R6 _ : d6 m8 b7 f" B+ h+ q8 r
! V+ L1 `+ \+ ~4 }" }7 y) o
不辞劳苦，将电能源源不断地输送给升压台
% z* A2 B9 V; i3 @
4 o- z* l3 Z7 G, O " ]+ W9 B: [% K, E% l' _/ U( p. e
经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。
; P# }( j0 J7 a0 Z4 o. M + f% P/ T8 w$ R
y2 j5 S. O, ~+ s' f# G7 A( N
在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示：
5 b, S4 R+ X' W0 J" ~ . I4 q: Z3 @% v9 i! L
0 J* c" G* x# ?+ f) S k* V
. o' a) \# J( L% Q9 ~. Z+ @( ~
$ o; b" q# P/ \# a* Z" ]1 P. [# g
% M, k% O. U6 w8 R) |0 P 总结 9 L. {5 o$ V4 w* b
8 L( ~% ?' s& e: D- \1 c
$ o, q! M3 k( S% V
建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。
/ a. ~& `6 X, [) m4 | * R7 M- b. r* V; d2 i' F) j
1 Y& W7 B6 Z5 [8 {7 r$ j; g) G
举报/反馈
9 u. A2 e$ q" F6 U7 V 6 W' _$ d% `9 M5 n9 z* S+ f
) f4 F1 P& d8 ?) W7 l7 b
5 u* ]+ }5 `% r% ?7 N* f6 x1 A, S' v# h
: G: f+ H- i1 \3 B+ F1 {
| 
