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

${website.getHeaderOriginal(${article.taxonomyName})}


本文转自DT数据侠(ID:DTdatahero)··|,沈毅演讲PPT可至该号后台回复“渲染动效”获取··|--。


过去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君年度巨献


7月27日··|,DT君将带着“地铁1公里”小组空降深圳··|,发布首份《深圳城市大数据活跃报告》··|,同时推出基于大数据的交互可视化在线工具··|,欢迎各位数据爱好者扫码报名亲临现场··|--。届时··|,请关注DT财经微信公众号(ID:dtcaijing)··|,了解获取报告的方式··|--。

${website.getFooterOriginal(${article.taxonomyName})}

发布者 :齐乐娱乐_齐乐娱乐老虎机_齐乐娱乐qile110 - 分类 齐乐娱乐平台官网