$ n+ r1 E2 y5 o# e7 O) _ 5 F- Y1 y5 ?7 z
前言 . L5 S' J, F& C* _9 x; m5 t/ h
! A* a, ]$ R4 Z9 D) r1 Q
4 y2 S2 q! c$ @+ b$ L/ Q5 P9 J 我国是一个海洋大国，拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出：“坚持陆海统筹，加快建设海洋强国”。从海洋大国到海洋强国，符合我国发展规律、世界发展潮流，是实现中华民族伟大复兴“中国梦”的必然选择。
0 g8 ~' |( r) s: r
1 t6 k/ S& _- t+ A+ D& v; M/ E+ [" Z , ]4 [# d# T/ e( }
风能，作为一种清洁无公害，取之不尽，用之不竭的可再生资源，非常适合用来发电。我国风能资源丰富，可开发利用的风能储量约为 10 亿千瓦，其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源，加快海上风电项目的建设和发展，对加速沿海地区的能源转型，推动地方经济发展，提升沿海地区的生态环境，推动风电技术进展和产业升级，促进能源结构调整具有重要的意义。因此，海上风力发电场应运而生。 5 r0 s0 Q4 ~! S# |" x" d) w% {9 c
8 N: X5 c& t; P r6 Q8 l, O6 o
& W, \% A' p2 I3 v$ T: A0 p( Y 介于 2D 组态和 3D 组态上， Hightopo （以下简称 HT） 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案，希望能够抛砖引玉，给大家带来更多海上风电场的思考和讨论。 9 F4 }% H v8 U$ i* } }
, i7 \( [9 h* Z/ J! j . j$ `- u/ U* E* b0 L
界面简介及效果总览 * t2 y7 K j# n) r: Z3 a+ @
1 g4 u# a3 F3 _* N w; }
! _5 ^. g2 U u+ \3 y" z
1 w: x4 V# _& w" F [2 J1 _! s0 W( b
2 p, w2 `' m' A+ S* b
Demo 主页面中展示了海上风电场的基本构成，包括一定规模数量的风电机组，输电系统和升压台。风电机组有序排放，叶片随风向和风速不停转动，将海洋上丰富的风的动能经过一系列转换，转化为宝贵的电能输出；每个风电机节点产生的电能经过输电系统源源流动，如同水流般汇聚于海上风电场的“心脏”——升压台。 * I' n& p# a' b5 Z4 N7 m" G
; ]8 L5 T- B5 |- w" x
9 L3 I9 U6 ^% w" J8 J) L V
! ?% a9 t( q9 t3 n$ L* N& F
# l: X% T$ ~' m
6 h0 _* x8 \! `# F! [ \# q 点击风机叶片，可以进入叶片的微观世界，以微观视角看风机的详细信息，包括风机参数，环境参数，发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成，其中的动画和人机交互也是基于自主研发的组件，依托于 JavaScript 和 HTML5 完成。 & {+ O7 K- U5 j( ?& V! @8 ?6 u
9 l. c3 o& k1 ?% w
* h9 f2 Q k0 t1 E 实现过程
" T4 V3 b+ v3 i/ `3 D0 [
8 z4 m+ X9 J5 T4 L/ D" [ 6 |6 _8 Z9 e+ X' [0 g5 r7 r
场景加载 ' o! t2 B! i0 j2 M/ N" c& `$ y
& i `) n6 G4 D. R! r e9 x3 a3 v b+ G2 @
在前面部分，文章提到本案例的场景都是通过自主研发的渲染引擎完成，那么搭建好的场景如何通过代码加载，呈现给用户呢？在 HT 中，我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景，然后通过反序列化完成场景的加载。 # g) h% L: C' W& i
" O6 m2 p' n1 C! G. A G6 i
) a7 M. o" \! n6 }' @ G/ L4 A 开场动画
1 p9 k8 _! D5 e ; {5 R$ R1 O: Y9 X! l
6 \( z# `+ I% b) B0 G
6 o$ T8 g3 C* e p$ v8 P
# m$ i# T' W& L" W8 m# r$ N
" M' k. [! t, @& \ 本案例的开场动画相对比较简单，动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim()，通过启动一个动画对象来使整个动画运行起来。
) o; ^* x H$ _* E o3 Q. G# d& \* q3 ^: ~9 S t! H7 q
/ b v1 U- @; R) ?9 s5 A* b
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 参数进行。 # E/ r) Q0 M0 }) [ T
$ m* g b9 C& x9 T% W
* \2 e/ Y' Y: ^$ ]; D6 X+ p
finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数，通过一些效果的搭配使用，可以使用户达到平滑的动画效果。 2 [- Q! W3 n- L, e$ a& a
3 E0 j" g% c/ k& o0 `0 L! s
9 ~1 S& ?& j0 d# \) `/ j/ G2 Z 本案例的开场动画通过设置起始和终止视角的位置，在一定周期内， 使用 setEye(eye) 来完成视角的变化。
/ n# R7 M" R( g
: l4 E [0 P9 \0 c1 q 8 p0 q ]2 o$ u$ S u
实现价值
[0 i% `* o3 e, ?7 z# _ 7 Q" B5 J, @" b5 F _6 e
8 i% ]& N+ W0 ]. g8 J 风电机组： 9 J1 L. h' }4 J: q( y
* K! s" c6 O/ V# F
! b# R, A& ~& [; M; L+ U; Y( ]( N 随风而动，将海上风能转化为电能
) E) x4 ~! e. q( W/ o$ E! ]
; e. T0 U" j \7 s7 }5 `* B
: r1 `& ^ I* r+ |- X: J. O
& S9 c8 r% p2 p: i# g # F7 K8 R5 O1 W& s% O
; i7 g" {1 c0 M- L0 m8 L
在海上风电场项目中，风电机组的数量都是具有一定规模的，这些风电机组收集海上丰富的风能，转化为人类所需的电能。那对于这些一定规模数量的风电机组，如何保证其运行的流畅性呢？本案例使用了 HT 提供的批量 （batch）提高系统性能。 1 ~+ @0 d. \; J, i3 a8 N8 |8 ~
' o7 O+ l- O* p6 P3 \0 `: u) o+ T
$ G( E& ~* b; {( ] 批量的原理即如果图元一个个单独绘制模型时性能较差，但是当一批图元聚合成一个大模型进行一次性绘制时，则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量，再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示： 5 R8 M( g0 |2 K( U) q# f5 c9 Y
% h9 a! t0 U# P& U8 v! J
6 ]" t) w. ^& P* r% w8 W $ S' S; X! v1 ]$ C' i1 f
) j% ]1 Z) [ ]" l
V/ q6 `( B. m1 ^" o% |; D3 I6 Z / R# W4 [3 L) W" \9 J
# |) s# G. m/ L' e. p
, V D: q2 ~4 e8 A% Q' v8 ~ 在本案例中，每个风机模型被分为三部分，标签部分1，叶片部分2 和 主体部分 3。在上面图示的 batch 流程中，可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作，但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动，其属性会发生频繁变化，在 batch 里面的图元尽可能避免频繁的变化，如果属性频繁变化，将可能起到反作用。
( D! c0 g( o0 q
- |0 V6 v1 _0 T* _9 B' ` / v! J% u0 N( n6 U- k$ B
风电机的详细信息： 4 d& u4 i% R0 z5 q' m& n* k# i. k
: p% `7 j4 @7 E 5 o# V3 z* A7 h: T5 s3 l& b
进入微观视角，将风电机的一切尽收眼底 & l2 w4 f# |4 k( p' c
6 ^: i X0 I9 T1 }
, m; {2 ^; k0 V 6 E6 @1 ^0 a- b0 r- d5 m
- Q" |- `) [. D( ~
' G& T8 N$ w h 点击每个风电机的叶片，都能打开风电机的详细页面。在此场景中，我们采用了科技线框风格来展示风电机的内部架构，相对于大部分的实景搭建，感官上更为震撼和炫酷。在展示风机内部结构的同时，两侧还展示了该风机周围的环境参数，海上风向风速信息，风机本身的数据监测，发电参数等。点击风电机的某个部位，可以看到以 billboard 样式展示的详细信息。 # k' d v* \) [6 v9 e& n' i
4 B* g" W) c: n" s% p4 {5 e2 [
+ j! [8 v# J# Q/ G+ {: T5 f! w3 p 输电系统：
0 k3 R8 @. S4 l3 `) Q: {& b5 ^1 ~ 7 J) K3 t7 K. S u7 C, l
5 S$ \$ F: Q& ^( U8 i
不辞劳苦，将电能源源不断地输送给升压台
) k: q6 A: T% I1 Z0 n ( u, k" p4 ^7 U- n' r7 [
' h P* p7 ~( N3 \& \' _ 经过风电机转换而来的电能，通过输电系统源源不断地输送给升压台，如同涓涓细流汇入大江大河。在本案例中，输电系统是使用空间管线 ht.polyline 实现的，ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。 " Q, d' C' ^* z0 L6 b' e0 b/ _
0 {( t" p* b5 F + Z7 |6 z! s* ~ I
在本案例中，输电系统的管道也是数量庞大的，因此也采用 batch 实现。其流程如图所示：
/ I! b: x+ D- m9 A$ I 4 |8 D( U& `- ~; w9 Q( k0 \+ H% {( l
* ?/ m" u9 V7 H$ F6 x2 h
$ ], C& M" |7 Z* t4 V5 k
; x0 U+ m0 X$ n' k- D 6 O" M; w6 n) Q* ~, k) T
总结 7 W: m% k) \& ?3 a$ s
4 D; F6 U! ^; W4 d
+ a2 h8 k2 J8 v9 k3 [* D 建设海洋强国，寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境，全面、准确而深刻地了解海洋，掌握海洋的运动规律，才能为建设海洋强国提供坚实的基础。开发海洋，经略海洋，保护海洋，拓展蓝色经济空间，已经成为人类生存和社会发展的趋势。海洋经济，海洋科技将来是一个主攻方向，而海上风力发电场作为海洋强国的一部分，也将会涌现一批又一批精品工程，给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发，在力所能及的领域贡献一份力量。 2 r) Y- ?- T: ^ q5 u% N
, \, B. J; o. ~/ Y: E# Z
' O- e6 z. e8 l2 c2 t2 a V 举报/反馈 ) K& S- ~: C/ L! b& v( t1 ~
6 Y. l) N3 |2 S1 r H: ?
# a: q0 ~2 _! X, G/ h1 C' @
( ?+ D }* u, U; l6 a6 w S9 S; a
; s# e. t3 O8 x. w! E
| 
