當可視化遇上渲染技術，原來畫面可以如此炫酷

文/沈毅 整理/胡世龍

如果你喜歡玩遊戲，一定有被某些遊戲中的畫面渲染效果驚艷到過。而當這些遊戲級的渲染技術應用到數據的可視化中，又會發生什麼呢？在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 的屬性。我們可以把每個像素畫成一個柱子。柱子的顏色就是像素的顏色。然後切換到三維視角。

然後把每個像素計算出來的亮度映射到柱子的高度，再加上後期效果，就可以得到這個非常奇幻、有點像是叢林和火山的形狀。

第二個案例是音頻數據的可視化（視頻鏈接點這裡）。我們可以用一個簡單的可視化，把音樂的波形圖給畫出來。這是一個最基礎的把音頻的波形可視化出來的效果，橫軸是時間。我們可以使用n WebAudio的API把時域的波形圖轉成頻域。同時通過鏡頭動畫輔助表達整個音樂的節奏，可以讓用戶更容易被帶入節奏。

最後再舉一個我自己前段時間做的例子。我從南非一個政府網上獲取到了兩份開放數據，計程車路線數據和城市建築群數據。然後用QGIS（DT君註：一款著名的桌面地理信息系統軟體）大概清理了下，保留了左邊這塊比較密集的建築群。不然體積太大載入會比較慢。然後用ECharts GL組件畫在了mapbox 上。

（圖片說明：使用QGIS軟體進行數據處理的截圖）

下圖是加上一些渲染效果後的情況，因為計程車路線的顏色是疊加的，所以在一些線路比較密集的區域，它的顏色會比較亮一些，偏向黃色。同樣的，如果再加入一些渲染效果，像一些比較亮的地方，就會有一種光流的效果。而在一些建築上面，也加入了一些豐富的光影。而值得一提的是，這個圖還可以交互地去看一些細節的區域的情況。

（圖片說明：加入渲染效果的南非開普敦部分區域的計程車路線圖）

數據俠門派

沈毅，百度前端研發工程師，ECharts團隊核心開發者之一。

如何加入數據俠

「數據俠」欄目網羅全球最IN的數據俠客，利用人工智慧、機器學習等各種前瞻演算法，從數據的視角洞察消費生活的方方面面，打造理性酷炫、活潑有趣的數據分析盛宴。用大數據，闡述事實及其背後的故事和邏輯趨勢。

DT時代超級英雄正在組隊！你也想要成為數據俠嗎？請將你腦洞大開的數據作品，發到數據俠聯盟盟主程一祥郵箱：chengyixiang@yicai.com。