& l+ u( L2 y3 z) K- s$ s& t1 f, \
2 O$ h1 }9 E5 m0 w5 p 前言
o6 d- ]( r' U+ u - `* A3 |! Q/ J+ h% ^7 }
& C e! o- ?& V6 `$ U
我国是一个海洋大国,拥有漫长的海岸线、辽阔的管辖海域和丰富的海洋资源。党的十九大报告明确提出:“坚持陆海统筹,加快建设海洋强国”。从海洋大国到海洋强国,符合我国发展规律、世界发展潮流,是实现中华民族伟大复兴“中国梦”的必然选择。 8 q, L: f3 Y8 o# ?# H
, S% y- a4 L+ t+ b1 d3 G% l. B
2 t% j! v$ ]9 j9 X. X 风能,作为一种清洁无公害,取之不尽,用之不竭的可再生资源,非常适合用来发电。我国风能资源丰富,可开发利用的风能储量约为 10 亿千瓦,其中海上可开发和利用的风能储量达到了 7.5 亿千瓦。依托于丰富的海洋风能资源,加快海上风电项目的建设和发展,对加速沿海地区的能源转型,推动地方经济发展,提升沿海地区的生态环境,推动风电技术进展和产业升级,促进能源结构调整具有重要的意义。因此,海上风力发电场应运而生。
0 j6 w* A* G! b- @
, k9 J( s8 C1 o4 S# Y7 o1 a* E
/ Q$ J3 A9 _ }2 J8 b 介于 2D 组态和 3D 组态上, Hightopo (以下简称 HT) 的 HT for Web 产品拥有丰富的组态化可供选择。文章将介绍如何运用 HT 丰富的 2D/3D 组态搭建出一个海上风力发电场的解决方案,希望能够抛砖引玉,给大家带来更多海上风电场的思考和讨论。
, l8 T! I# `$ l
9 {5 N$ d2 W6 l$ P- i$ _: E c/ a# G3 Z8 i
界面简介及效果总览
; W) J, l# E$ ? : E% l) Q) y0 f) ^
8 }* l; n6 F! V- U
, {' ^9 F6 V$ T, c: F9 e+ c + Z/ M9 e, y0 Y l7 C! c
4 q. z, `2 A+ f* `# O8 j; X
Demo 主页面中展示了海上风电场的基本构成,包括一定规模数量的风电机组,输电系统和升压台。风电机组有序排放,叶片随风向和风速不停转动,将海洋上丰富的风的动能经过一系列转换,转化为宝贵的电能输出;每个风电机节点产生的电能经过输电系统源源流动,如同水流般汇聚于海上风电场的“心脏”——升压台。 h3 x$ Y# s- G
' C* E" z Q$ l: W6 g
# W( e. U% k; y4 M5 L7 I u
- G. M) Y* |0 S# ]0 q
. O. s% l+ [8 q! H
, n7 p; z0 s, P5 N& ] 点击风机叶片,可以进入叶片的微观世界,以微观视角看风机的详细信息,包括风机参数,环境参数,发电信息和故障信息等。场景的搭建采用 HT 自主研发的基于 HTML5 的 2D/3D 渲染引擎完成,其中的动画和人机交互也是基于自主研发的组件,依托于 JavaScript 和 HTML5 完成。 - h) D5 g+ R$ M
2 k( ^3 G& n) q( B5 z ; Y( U/ K8 t% S% |' I `7 P5 Z$ ?
实现过程 , ?0 ]3 p8 U6 w# `% h
' |7 \$ u, f; e" E6 P& d; o 3 g, Q0 D# r# v9 h- @
场景加载 # r" j" X9 \. B5 h
; s3 S e, \1 u& a, D9 f* f: l3 m
! m b% a& P4 x 在前面部分,文章提到本案例的场景都是通过自主研发的渲染引擎完成,那么搭建好的场景如何通过代码加载,呈现给用户呢?在 HT 中,我们通过 ht.graph.GraphView 和 ht.graph.Graph3DView 分别来呈现 2D 和 3D 场景,然后通过反序列化完成场景的加载。 * E1 W4 o, G5 O, v1 n; ]# g4 H
. K) r; ]7 ?. P' L4 A8 ^$ ~7 n' Q
! G7 S+ ?7 O; q+ R
开场动画 " T: M4 I5 E: x! X& z- U( V* z
5 R. {( m* m0 L2 |7 I0 l
Z# r: i. D- [
/ b$ k' p! c* _/ p6 b
7 \! v, \/ H& X& l) o+ g
' F0 V' _/ H/ J' i& |5 \: D8 ~- |9 p 本案例的开场动画相对比较简单,动画的核心机制是使用了 HT 内部封装的动画函数 ht.Default.startAnim(),通过启动一个动画对象来使整个动画运行起来。 5 v8 y* D' |$ Y6 R0 w
" i. g& B+ g5 \ F4 }/ }, d
# w( N1 w& P2 V& |0 |( l/ v 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 参数进行。 $ U& n8 ?* q! I1 S1 N/ V: a
! h, b( n6 M" P9 @2 N" I% h1 a$ q
5 p! c5 Y1 X) x! X finishFunc 参数代表动画结束后的动作。action 函数和 finishFunc 动画结束回调函数,通过一些效果的搭配使用,可以使用户达到平滑的动画效果。 ; |3 E5 a4 I8 a; r* a/ |/ O8 K
7 H$ S& H# \0 }+ r
% v! R* E, G- u } 本案例的开场动画通过设置起始和终止视角的位置,在一定周期内, 使用 setEye(eye) 来完成视角的变化。
! U6 b/ u4 l" m8 d
0 ~5 _. ?, u9 I& l# p
% D E: s8 \& g 实现价值 + E; y- v# J0 g: P0 q
* s% h6 y# M! n3 p7 w. t7 e5 u
& d3 F w; n- |) W& a
风电机组: % Q1 V4 C& i) [* x2 g# C" b
( \8 M& r9 t% ~% t, ^ ?- S$ w, ]
+ X5 g) O' \4 d( f4 y* Z 随风而动,将海上风能转化为电能 $ I4 u% z; S2 v, M. L4 s
' ?( _$ q. `7 m0 G " b8 G h5 z& N2 c
* F1 F( P) a% `
`& \2 ^/ x1 ?$ _ # C5 @" D1 c7 B% y4 `. s8 q
在海上风电场项目中,风电机组的数量都是具有一定规模的,这些风电机组收集海上丰富的风能,转化为人类所需的电能。那对于这些一定规模数量的风电机组,如何保证其运行的流畅性呢?本案例使用了 HT 提供的批量 (batch)提高系统性能。 ( v8 e8 U1 U. y
( }9 a V8 {4 u# D9 x; I ( e8 {% q* |' `- n2 `! m& C1 g
批量的原理即如果图元一个个单独绘制模型时性能较差,但是当一批图元聚合成一个大模型进行一次性绘制时,则会极大提高 WebGL 的刷新性能。批量的使用方法是先通过 ht.Default.setBatchInfo 函数全局注册批量,再对 Data 使用 .s(batch, batchName) 设置对应的 batch 批量名。流程如图所示: 2 |1 g7 H! S$ a+ h) g
3 n+ N7 G+ S1 d ) V# X# x' V+ e; h$ l: }4 k7 A% T. _: \
# `9 z! D5 I( v6 X8 E
7 M) ]$ u* @( }! E+ a" ^: k/ y
. l9 ]2 B! X$ A4 F( J* m E
' d9 l$ F4 R$ o0 y# n# L ( h( F2 J% \" @1 k
; `) A* K3 t% n' U% M$ N
在本案例中,每个风机模型被分为三部分,标签部分1,叶片部分2 和 主体部分 3。在上面图示的 batch 流程中,可以发现只对标签部分 1 和 主体部分 3 应用了 batch 操作,但是没有对主体部分 2 运用 batch。这是因为叶片部分需要随风转动,其属性会发生频繁变化,在 batch 里面的图元尽可能避免频繁的变化,如果属性频繁变化,将可能起到反作用。
% C" Z6 N% i! k. _7 z5 Y/ E3 F
1 {& r: ~+ Q3 ^( A) j, s a ( { K5 d- o( h) n: M( N/ ~! U3 J
风电机的详细信息: ( ^1 o) l" q5 c
# S* A' o. [' n
9 _9 k& K0 P9 [. f. l$ n0 l
进入微观视角,将风电机的一切尽收眼底
3 R) o: w! L1 ~8 S) \ - H6 c4 f; \$ |8 T
4 {; N/ b6 S3 G : H& o+ C3 @, t, `
0 S( e) }( N p1 v; Z/ h7 u7 a2 W
: [) |5 E& Z) }7 k
点击每个风电机的叶片,都能打开风电机的详细页面。在此场景中,我们采用了科技线框风格来展示风电机的内部架构,相对于大部分的实景搭建,感官上更为震撼和炫酷。在展示风机内部结构的同时,两侧还展示了该风机周围的环境参数,海上风向风速信息,风机本身的数据监测,发电参数等。点击风电机的某个部位,可以看到以 billboard 样式展示的详细信息。 - L# ?- N" h6 u( I
% S6 E! _; V! {* A6 F2 C
/ S* [+ T( Q+ J0 [
输电系统:
! s1 @* l' M1 x. B
; W& l7 s3 F$ J$ } a - ]% b B/ M+ {+ F
不辞劳苦,将电能源源不断地输送给升压台
0 O3 G- S* B+ V) i; V4 G 8 l/ p0 W7 M, M) a$ d
$ G' W$ R$ ~5 T
经过风电机转换而来的电能,通过输电系统源源不断地输送给升压台,如同涓涓细流汇入大江大河。在本案例中,输电系统是使用空间管线 ht.polyline 实现的,ht.polyline 继承于 ht.shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述。 ht.polyline 的走向由 points 和 segments 决定。案例中的流动效果是通过使用 setInterval 方法来不停地动态改变管线的 top.uv.offset 属性来实现。 $ }- F, O$ `) P0 X. A7 p6 t9 B* z
: m2 J, N/ x$ ^) n, N 0 ?4 v& V K7 }6 e8 n' e- \
在本案例中,输电系统的管道也是数量庞大的,因此也采用 batch 实现。其流程如图所示: 8 K: H' w5 C" u ?
5 i4 o- P: ^1 X8 U
; s H% H, C1 E/ x7 Q
6 m0 l: _ o+ c
1 A6 T2 n! h. e/ H3 W
1 @/ S- n) G$ n. m7 K. i: S 总结 6 ?" X6 E* d! e
4 f h4 w3 q1 Z9 u5 J 2 [& C$ h* R% O2 Y# O; | A" L
建设海洋强国,寄托着中华民族向海图强的愿望。人类对海洋的探索永无止境,全面、准确而深刻地了解海洋,掌握海洋的运动规律,才能为建设海洋强国提供坚实的基础。开发海洋,经略海洋,保护海洋,拓展蓝色经济空间,已经成为人类生存和社会发展的趋势。海洋经济,海洋科技将来是一个主攻方向,而海上风力发电场作为海洋强国的一部分,也将会涌现一批又一批精品工程,给中国经济的底色注入更多的蓝色。我们也会更加专注于自主产品研发,在力所能及的领域贡献一份力量。 ' L- f& e% g, p9 x: U& x8 M) L
8 r& Q D, T+ `5 z; q; _ 2 c% o/ A5 Y$ P$ X( F: x" p/ g
举报/反馈
/ h$ x$ p n( ]8 ^; T" S" w 0 m& t! g9 Z( |" N& v+ Z1 q6 {8 h
; B/ q. E5 w* D0 z. m( j3 ^& @$ e
% j2 \- j# O7 V0 ?* Z& D; g
2 S% s1 W6 q5 k) [/ k) h- R; _, D1 F% ]/ l) j) f
|