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.... 哎呦都是好东西... 我都迫不及待写了(脑补坏笑的表情~)

如果有需要加微信群的联系我 ~