HTML5 WebGL 实现民航客机飞行监控系统

天空渲染效果

既然是监控系统肯定是 24 小时无差别的监控，这就涉及到一个问题，我总不可能半夜的时候飞机也从瓦蓝瓦蓝的天空上飞过，这就很欠缺真实性了，所以要有一个天空从亮到暗再从暗到亮的过程，这个过程我暂定到 06:00-06:30 和19:00-19:30 这两个时间段。

天空采用的是 shape3d : ‘sphere’ 球形，包裹整个场景，然后使用 reverse.flip 背拷贝 和 blend 染色，之后天空就可以渲染成我想要的颜色，如果按照时间改变天空明暗只要改变染色值就可以了。

但是由于白天和晚上光照情况的不同，云反射光的强度也不同，就导致了白天和晚上云的差异，所以也要调整云道和云背景的贴图的 opacity 透明度，晚间更为透明度，代码如下：

if ((hour > 6 && hour < 19) || (hour == 6 && minutes >= 30)) {
timePane && timePane.a({
'morning.visible': false,
'day.visible': true,
'dusk.visible': false,
'night.visible': false,
'day.opacity': 1
})
skyBox.s({
"shape3d.blend": 'rgb(127, 200, 240)',
})
cloudBackground.s({
"back.opacity": 0.7,
})
clouds.s({
"shape3d.opacity": 0.7,
})
} else if ((hour < 6 || hour > 19) || (hour == 19 && minutes >= 30)) {
//...省略
} else if (hour == 6 && minutes < 15 ) {
//...省略
} else if (hour == 6 && minutes >= 15 && minutes < 30) {
//...省略
} else if (hour == 19 && minutes < 15) {
//...省略
} else if (hour == 19 && minutes >= 15 && minutes < 30) {
//...省略
}

这里我还增加了对右上角时间面板时间状态图标的支持，并增加了图标切换时的渐隐渐显效果，同时给时间面板状态图标位置增加了点击切换到下一时间状态的功能。

为了演示效果我增加了时间倍速按钮，下图是 500 倍时间流速下的变化情况：

总结

通过这个 demo ，我发现生活中有很多没有被人所注意到的细节都存在数据可视化的可能，在这个大数据的时代更多的可能性值得被人发掘出来，不要错个身边每一个值得数据可视化的细节，这样不仅可以更好的挖掘 HT for Web 的潜力，也可以加强自身身为一个程序员的综合素质。