follow me ~ 一塊兒去了解下-數據可視化/圖形學/WebGL/Shader

背景

《數據可視化和圖形學》專欄建立已然日久,想了好久怎麼去開展這個系列(專欄輸出比碎片化的輸出難多了~):

1. 如何精簡凝練相關知識體系。
2. 如何將系列知識,文章碎片化。
3. 每章節如何承上啓下,與總體可拆可合。
4. 最重要一點第一篇咋個搞合適...

總之在糾結中一直遲遲難如下筆。一天，一天.... 草稿箱裏十幾篇總有的,後面想通了。我盡力 在途中獲得你們的意見而後加速改進。那麼就開始咱們的《數據可視化和圖形學》

本篇大綱

1. 介紹圖形學和可視化
2. engineer/前端er如何入手
3. GPU渲染管線
4. webgl介紹 & coding

1. 什麼是圖形學? 什麼是數據可視化?

圖形學

圖形學:利用數學公式/函數基礎理論來以圖形形式表現
簡單介紹幾點:

1. 提及圖形學不要只想到遊戲,還有不少應用工業,醫學,影視...領域很廣
2. 圖形學不僅僅指渲染，還有數學(計算)，美術,物理...等等
3. 想學好圖形學並非會點API就能夠,更要學習其背後的基礎知識(數學/物理)
4. 圖形學的人才/知識積累/文獻資料/先進技術..太稀缺了,大佬萌新們抓緊進來一塊兒搞

討論圖形學牽扯一點圖像處理,簡單說一下。圖像處理就是圖形學邏輯相反 輸入圖形輸出數學公式/函數。

數據可視化

數據可視化:將數據轉化成爲交互的圖形或圖像等。 數據可視化主要旨在藉助於圖形化⼿段，清晰有效地傳達與溝通訊息

在以前談起可視化更多說是歸屬於計算機圖形學CG(computer graphics)一類的,到後來發展勢頭愈來愈強,逐步脫離出來。知識圖譜/醫療等等方向都有數據可視化的應用。

2. software engineer/前端er如何入手

從一些現實問題簡單回答一下:

• 業務需求須要用到部分可視化
• 想深刻圖形學/可視化,奈何技法缺失(語言,數學...)
• 不知道如何入手(各個領域的engineer)
• ...

依此的簡單回答:

1. 業務需求主導可視化 框架確定是利器,可是你會缺失發現它內部美的東西。有人就會說了 讀源碼能夠嘛? 能夠。可是這個工做量可能更大。並不必定是最有效途徑。
2. 深刻圖形學/可視化 方向迷茫。這點我也是在碰壁中，只能說把我踩過的坑分享出來。讀文獻 學數學 推導公式..這個是個漫長的過程 須要凝練 須要分類(分層) 二次打包推到更多人的視野。(不幸的是相關資料不多,由於圖形學確實難...)
3. engineer不知道如何入手?首先在工程師角色加持下。最起碼語言不用過度擔憂。拿前端er舉例來講 入手固然是webGL(固然個人觀點依舊是API僅僅是API.. 使用API並非圖形學的最佳途徑) 可是拿問題驅動你的學習這個是可行的。

3. GPU渲染管線

明確一點 在不一樣的系列的GPU渲染管線存在差別

GPU的編碼同CPU區別 debug不存在的... 無memory交集... 總之你會喜歡上它的~
請看下圖:

• 圖片來源網絡 侵刪

1. CPU 計算節點基礎信息(數量)
2. GPU Vertex Shader 進行頂點繪製
3. primitives Generation 負責結構生成(link/三角形)
4. Rasterization 光柵化
5. Fragment Shader 片元 (着色)
6. Testing Blending 混合測試 (Alpha透明度)
7. final render 渲染(圖像呈現)

光柵化:把頂點數據轉換爲片元的過程(簡單理解就是找到圖形並轉換所覆蓋的像素)

着色過程當中通常是線性補充(好比 0-1區間會進行線性補充 0.1 0.2....)

webgl介紹 coding

WebGL（Web圖形庫）是一個JavaScript API，可在任何兼容的Web瀏覽器中渲染高性能的交互式3D和2D圖形，而無需使用插件。WebGL經過引入一個與OpenGL ES 2.0很是一致的API來作到這一點，該API能夠在HTML5 <canvas>元素中使用。 這種一致性使API能夠利用用戶設備提供的硬件圖形加速。

補充說明OpenGL也是渲染API ES是嵌入式的意思(可Google/baidu) 倆者API很是相近能夠去了解一下。鏈接統一後面貼

coding

首先 MDNwebGL相關介紹更全一些 以及 Tutorial (教程) 很是適合入門.你們能夠去學習一下。可是深刻仍是須要參考一些學習資料(能夠本身動手實現一些光線追蹤,折射...圖形學歡迎你)

編碼過程總結

1. init shader(vertex,fragment) compile
2. create attrbute buffer (coding no buffer)
3. draw

來吧展現 最小的程序 效果就是繪製一個rect

html

<!-- 畫布 -->
<canvas id="myDiagram" width="200" height="200"></canvas>
<!-- webgl utils -->
<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>

JavaScript

// init shader(vertex,fragment) 
const vs = `
// vertex shader
void main() {
  gl_Position = vec4(0, 0, 0, 1);  // 居中
  gl_PointSize = 120.0; //大小
} 
`;

const fs = `
// fragment shader
void main() {
  gl_FragColor = vec4(0, 0, 0, 1);  // 黑色
}
`;
// setup 
//create program & use program
const program = webglUtils.createProgramFromSources(gl, [vs, fs]);
gl.useProgram(program);

const offset = 0; 
const count = 1;
// 繪製函數 drawArrays 
// gl.POINTS 內置繪製方式 
// offset 偏移 
// count 個數
gl.drawArrays(gl.POINTS, offset, count);

so easy webgl就學會了... 哈哈 沒那麼簡單的啦。咱們後續慢慢搞

最後

系列文章的下筆是如此的困難...系列的視頻可如何是好! 你們多提提意見~

後續可視化方向會多一點,數學會多一點,物理會多一點.... 咱們加油!

數學(算法)很美的:quadtree,cluster-kmeans.... 哎呦都是好東西... 我都火燒眉毛寫了(腦補壞笑的表情~)

若是有須要加微信羣的聯繫我 ~