有了游戏级渲染技术加持,数据可视化竟能如此炫酷 !

如果你喜欢玩游戏,一定被某些游戏中的画面渲染效果惊艳过,如果把这些游戏级的渲染技术应用到数据的可视化中,又会发生什么呢?在7月15日第15期数据侠实验室活动中,百度ECharts团队核心开发者之一沈毅,给大家分享了如何利用ECharts实现炫酷的渲染效果。今天,DT君就带你来感受下什么是可视化之美。

过去20年,游戏的渲染技术突飞猛进

我今天要讲的题目是,“在数据可视化中探索高品质的渲染”。

提到渲染技术,首先大家来看下这张图片,这是动作冒险游戏《古墓丽影》的主角劳拉从初代到最新一代的模型的变化。初代的时候非常简单,就是一个轮廓的样子,但最近一代的就非常精细了。

(图片说明:游戏《古墓丽影》女主角劳拉的历代形象变化)

下图是1996年的初代《古墓丽影》的一个场景,因为机器性能的限制,只能用非常少的多边形去画那个场景,光影也非常简单,甚至没有阴影,贴图也非常简陋。

(图片说明:《古墓丽影》初代中的主角形象)

下面则是2015年发行的最新一代的《古墓丽影·崛起》的画面,可以看到人物更精细了,也可以看到非常丰富的光影效果。

(图片说明:《古墓丽影·崛起》中的主角劳拉形象)

大家可以看到,这个游戏的画面,在20年时间里有了一些突飞猛进的变化。其中,除了机器性能的提升,还有很多新的渲染技术的应用。比如,软阴影、景深、抗锯齿等,都是之前研究比较多的实时渲染技术。

ECharts对游戏中的渲染技术的借鉴

通过上面的《古墓丽影》游戏的例子,我们ECharts团队也在想,能不能把这些在游戏里面用的渲染技术,应用到可视化里面?当然是可以的。

比如下面这张柏林城市建筑图,用了一个基础的明暗去表现光照效果,来呈现这个建筑群的大概轮廓,但是非常简陋,让人没有看的欲望。大家会觉得,看这类图,还不如看那些二维的图。

(图片说明:柏林建筑群的简单光影效果)

但如果我们把刚刚提到的一些景深的效果、丰富的阴影都加上去之后,就可以把它渲染地非常真实。下图是通过ECharts GL进行渲染,然后加上了一些景深、阴影等后期效果,出来的效果有点像是微缩的模型。

(图片说明:经过一系列后期处理后的柏林城市建筑群)

总的来说,我们通过ECharts GL进行渲染的方式主要有3种,第一种是光影,让场景呈现出立体的形态;其次是材质,可以通过用不同的材质,让用户看清楚物体的属性,是金属、还是木头等,让用户有更强的代入感;第三种则是后期,通过后期的处理让渲染出来的画面更有质感。

首先来看光影,包括日光、环境光、物体的自发光三类。日光,是一个场景的主光源,它能给一个物体提供一个最基础的明暗度的变化,比较典型的就是地球这个例子。从下图我们可以看到不同时间段,哪些地方是被照亮的。

(图片说明:左为北京时间凌晨4点中国的日光照射情况,右为早晨9点的情况。)

日光,为场景提供一个单方向的光源,但是在生活中,很多物体的表面可能受到来自不同方向的光。除了外来的光源,有些物体它本身也会发光,而不会因为阴影的缘故无法被看到。比如各种霓虹灯,这些因为自发光而高亮的点非常容易吸引人的注意力。

比如我们拿这张夜晚的图片放到地球上,它里面的星星点点的灯光就属于灯光的自发光。它们不会受太阳暗面的影响,反而因为其它地方都暗下来了,更容易突出哪些地方比较繁华,哪些地方夜生活比较少,哪些地方几乎没有人烟。

(图片说明:日光照射下的地球、搭配城市夜景灯光图的情形)

接着我们来看材质。渲染里的材质有两个极端,一种是追求真实,要真实感;还有一种是风格化,就是按某种特定的风格去渲染,比如模拟卡通效果,电子效果,素描效果等等。不管是真实感还是风格化,材质的存在都是为了能够让人增加对图形的感知,看到这个东西后一下就产生代入感和沉浸感。

比如,同样是球体,我们在用ECharts进行渲染时,就可以选择不同的材质、颜色等。

(图片说明:通过不同材质和颜色渲染出来的球体形象)

最后则是摄影和后期处理。我们会用到摄影中常用的一些镜头效果,比如景深等。并且还会在PS里面进行二次调色等。

(图片说明:景深效果在世界地图上的应用)

(图片说明:左为冷色调的建筑群,右为暖色调)

利用ECharts来做可视化的三个案例

最后我举几个利用ECharts对数据进行可视化的案例。

第一个案例是图片的像素。图片的像素数据它是二维的,每一个像素有 x, y, r, g, b, a 的属性。我们可以把每个像素画成一个柱子。柱子的颜色就是像素的颜色。然后切换到三维视角。

然后把每个像素计算出来的亮度映射到柱子的高度,再加上后期效果,就可以得到这个非常奇幻、有点像是丛林和火山的形状。

(图片说明:三维像素柱)

第二个案例是音频数据的可视化。我们可以用一个简单的可视化,把音乐的波形图给画出来。这是一个最基础的把音频的波形可视化出来的效果,横轴是时间。我们可以使用 WebAudio的API把时域的波形图转成频域。同时通过镜头动画辅助表达整个音乐的节奏,可以让用户更容易被带入节奏。无敌震撼视觉请戳下方视频。

(建议在Wifi环境下观看,音量调大有惊喜!!!)

视频内容

最后再举一个我自己前段时间做的例子。我从南非一个政府网上获取到了两份开放数据,出租车路线数据和城市建筑群数据。然后用QGIS(DT君注:一款著名的桌面地理信息系统软件)大概清理了下,保留了左边这块比较密集的建筑群。不然体积太大加载会比较慢。然后用ECharts GL组件画在了mapbox 上。

(图片说明:使用QGIS软件进行数据处理的截图)

下图是加上一些渲染效果后的情况,因为出租车路线的颜色是叠加的,所以在一些线路比较密集的区域,它的颜色会比较亮一些,偏向黄色。同样的,如果再加入一些渲染效果,像一些比较亮的地方,就会有一种光流的效果。而在一些建筑上面,也加入了一些丰富的光影。而值得一提的是,这个图还可以交互地去看一些细节的区域的情况。

(图片说明:加入渲染效果的南非开普敦部分区域的出租车路线图)

注:本文整理自数据侠沈毅演讲内容,已经本人审阅,文章仅代表作者观点。

整理| 胡世龙

数据侠门派

沈毅,百度前端研发工程师,ECharts团队核心开发者之一。

“数据侠”栏目网罗全球最IN的数据侠客,利用人工智能、机器学习等各种前瞻算法,从数据的视角洞察消费生活的方方面面,打造理性酷炫、活泼有趣的数据分析盛宴。用大数据,阐述事实及其背后的故事和逻辑趋势。

原文发布于微信公众号 - DT数据侠(DTdatahero)

原文发表时间:2017-07-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IT派

一个很皮的实践 Python自动生成表情包

作为一个数据分析师,应该信奉一句话----"一图胜千言"。不过这里要说的并不是数据可视化,而是一款全民向的产品形态----表情包!!!!

19900
来自专栏量化投资与机器学习

CTA和商品指数的收益来源是什么?【CTA系列一】

量化投资与机器学习 为中国的量化投资事业贡献一份我们的力量! 分享一篇近期看到的文章来自 University of Illinois Urbana-Champ...

438140
来自专栏新智元

【计算机图形学生成完美笑容】科学家根据时空轨迹生成“成功的微笑”

【新智元导读】面部表情是社会性互动中非语言沟通的重要形式,美国明尼苏达大学的一项新研究使用3D计算机模拟生成微笑表情,并对其进行评价,发现“成功的微笑”所具有的...

42070
来自专栏web前端教室

一个好玩的东西,从clip path polygon 动画看前端的多方向性

clip path,话说这个东西是css3中的新特性,它可以遮罩许多形状,圆的、方的、扁的都可以,还有多边形(polygon),这个polygon最是有趣。 因...

22360
来自专栏CDA数据分析师

读图读什么——数据分析图表解密!

“字不如表,表不如图”,这八字诀在数据分析工作者眼中被视为秘籍,各种 数据分析图表,各种“忽悠”,数据会说谎,统计会撒谎,图表也会骗人。现在信息可视化如此流行,...

26790
来自专栏钱塘大数据

可视化数据图表要怎么做才好看?

作者:整理自网络 可视化技术仿佛有一种化平凡为非凡的魔力,冷冰冰的数据,经过可视化技术的加工,便酒曲入瓮般幻化成视觉的盛宴,炫酷的、缤纷的、简约的、繁复的……数...

40270
来自专栏媒矿工厂

AI如何用于现场直播场景

与许多产业一样,通过软件和算法辅助,电视与视频制作很可能被人工智能和机器学习所改造,而当前这些制作任务都是由人来执行。随着现场直播报道涉及的范围越来越广,而相关...

41730
来自专栏量子位

太像人手了!OpenAI用打DOTA的算法,教会了机械手“盘核桃”

在OpenAI的实验室里,它缓缓 盘着核桃 转动着一个木块。没有人告诉它该动哪根指头,驱使它的,是在模拟器里训练出来的强化学习算法。

10500
来自专栏大数据文摘

【可视化】图表展示中的10个经典问题

31270
来自专栏智能算法

把照片滤镜成“电影风”,其实没你想象的简单

P过许多张图片、磨过不少皮,却依然不了解其中的奥秘。趁着刚被一波滤镜刷屏的节奏,今天,我们扒一扒“滤镜”。 化腐朽为神奇的滤镜 ? 《你的名字》剧照 美仑美焕的...

48550

扫码关注云+社区

领取腾讯云代金券