文/沈毅 整理/胡世龙
如果你喜欢玩游戏,一定有被某些游戏中的画面渲染效果惊艳到过。而当这些游戏级的渲染技术应用到数据的可视化中,又会发生什么呢?在7月15日的第15期数据侠实验室活动中,百度ECharts团队核心开发者之一的沈毅从技术角度分享了如何利用ECharts实现高质量的渲染效果,并展示了几个酷炫的可视化案例。今天,DT君就带你来感受下什么是可视化之美。
过去20年,游戏的渲染技术突飞猛进
我今天要讲的题目是,“在数据可视化中探索高品质的渲染”。
提到渲染技术,首先大家来看下这张图片,这是动作冒险游戏《古墓丽影》的主角劳拉从初代到最新一代的模型的变化。初代的时候非常简单,就是一个轮廓的样子,但最近一代的就非常精细了。
(图片说明:游戏《古墓丽影》女主角劳拉的历代形象变化)
下图是1996年的初代《古墓丽影》的一个场景,因为机器性能的限制,只能用非常少的多边形去画那个场景,光影也非常简单,甚至没有阴影,贴图也非常简陋。
(图片说明:《古墓丽影》初代中的主角形象)
下面则是2015年发行的最新一代的《古墓丽影·崛起》的画面,可以看到人物更精细了,也可以看到非常丰富的光影效果。
(图片说明:《古墓丽影·崛起》中的主角劳拉形象)
大家可以看到,这个游戏的画面,在20年时间里有了一些突飞猛进的变化。其中,除了机器性能的提升,还有很多新的渲染技术的应用。比如,软阴影、景深、抗锯齿等,都是之前研究比较多的实时渲染技术。
ECharts对游戏中的渲染技术的借鉴
通过上面的《古墓丽影》游戏的例子,我们ECharts团队也在想,能不能把这些在游戏里面用的渲染技术,应用到可视化里面?当然是可以的。
比如下面这张柏林城市建筑图,用了一个基础的明暗去表现光照效果,来呈现这个建筑群的大概轮廓,但是非常简陋,让人没有看的欲望。大家会觉得,看这类图,还不如看那些二维的图。
(图片说明:柏林建筑群的简单光影效果)
但如果我们把刚刚提到的一些景深的效果、丰富的阴影都加上去之后,就可以把它渲染地非常真实。下图是通过ECharts GL进行渲染,然后加上了一些景深、阴影等后期效果,出来的效果有点像是微缩的模型。
(图片说明:经过一系列后期处理后的柏林城市建筑群)
总的来说,我们通过EChartsGL进行渲染的方式主要有3种,第一种是光影,让场景呈现出立体的形态;其次是材质,可以通过用不同的材质,让用户看清楚物体的属性,是金属、还是木头等,让用户有更强的代入感;第三种则是后期,通过后期的处理让渲染出来的画面更有质感。
首先来看光影,包括日光、环境光、物体的自发光三类。日光,是一个场景的主光源,它能给一个物体提供一个最基础的明暗度的变化,比较典型的就是地球这个例子。从下图我们可以看到不同时间段,哪些地方是被照亮的。
(图片说明:左为北京时间凌晨4点中国的日光照射情况,右为早晨9点的情况。)
日光,为场景提供一个单方向的光源,但是在生活中,很多物体的表面可能受到来自不同方向的光。除了外来的光源,有些物体它本身也会发光,而不会因为阴影的缘故无法被看到。比如各种霓虹灯,这些因为自发光而高亮的点非常容易吸引人的注意力。
比如我们拿这张夜晚的图片放到地球上,它里面的星星点点的灯光就属于灯光的自发光。它们不会受太阳暗面的影响,反而因为其它地方都暗下来了,更容易突出哪些地方比较繁华,哪些地方夜生活比较少,哪些地方几乎没有人烟。
(图片说明:日光照射下的地球、搭配城市夜景灯光图的情形)
接着我们来看材质。渲染里的材质有两个极端,一种是追求真实,要真实感;还有一种是风格化,就是按某种特定的风格去渲染,比如模拟卡通效果,电子效果,素描效果等等。不管是真实感还是风格化,材质的存在都是为了能够让人增加对图形的感知,看到这个东西后一下就产生代入感和沉浸感。
比如,同样是球体,我们在用ECharts进行渲染时,就可以选择不同的材质、颜色等。
(图片说明:通过不同材质和颜色渲染出来的球体形象)
最后则是摄影和后期处理。我们会用到摄影中常用的一些镜头效果,比如景深等。并且还会在PS里面进行二次调色等。
(图片说明:景深效果在世界地图上的应用)
(图片说明:左为冷色调的建筑群,右为暖色调)
利用ECharts来做可视化的三个案例
最后我举几个利用ECharts对数据进行可视化的案例。
第一个案例是图片的像素。图片的像素数据它是二维的,每一个像素有 x, y, r, g, b, a 的属性。我们可以把每个像素画成一个柱子。柱子的颜色就是像素的颜色。然后切换到三维视角。
然后把每个像素计算出来的亮度映射到柱子的高度,再加上后期效果,就可以得到这个非常奇幻、有点像是丛林和火山的形状。
第二个案例是音频数据的可视化(视频链接点这里)。我们可以用一个简单的可视化,把音乐的波形图给画出来。这是一个最基础的把音频的波形可视化出来的效果,横轴是时间。我们可以使用WebAudio的API把时域的波形图转成频域。同时通过镜头动画辅助表达整个音乐的节奏,可以让用户更容易被带入节奏。
最后再举一个我自己前段时间做的例子。我从南非一个政府网上获取到了两份开放数据,出租车路线数据和城市建筑群数据。然后用QGIS(DT君注:一款著名的桌面地理信息系统软件)大概清理了下,保留了左边这块比较密集的建筑群。不然体积太大加载会比较慢。然后用ECharts GL组件画在了mapbox 上。
(图片说明:使用QGIS软件进行数据处理的截图)
下图是加上一些渲染效果后的情况,因为出租车路线的颜色是叠加的,所以在一些线路比较密集的区域,它的颜色会比较亮一些,偏向黄色。同样的,如果再加入一些渲染效果,像一些比较亮的地方,就会有一种光流的效果。而在一些建筑上面,也加入了一些丰富的光影。而值得一提的是,这个图还可以交互地去看一些细节的区域的情况。
(图片说明:加入渲染效果的南非开普敦部分区域的出租车路线图)
数据侠门派
沈毅,百度前端研发工程师,ECharts团队核心开发者之一。
如何加入数据侠
“数据侠”栏目网罗全球最IN的数据侠客,利用人工智能、机器学习等各种前瞻算法,从数据的视角洞察消费生活的方方面面,打造理性酷炫、活泼有趣的数据分析盛宴。用大数据,阐述事实及其背后的故事和逻辑趋势。
DT时代超级英雄正在组队!你也想要成为数据侠吗?请联系我们。
举报/反馈

DT商业观察

10.1万获赞 8.8万粉丝
「 DT] 是 第 一 财 经 旗 下 传 播 与 研 究 机 构 , 关 汪 互 联 网 、 消 费 、 文 娱 、 科 技 等 领 域 , 致 力 于 通 过 洞 察 人 群 趋 势 和 商 业 逻 辑 的 内 容 和 服 务 , 帮 助 读 者 更 洁 晰 地 认 识 世 界 , 助 力 品 牌 、 企 业 更 好 地 决 策 、 沟 通 和 连 接 。
鲲鹏计划获奖作者
关注
0
收藏
分享