背景

《数据可视化和图形学》专栏创立未然日久,想了很久怎么去发展这个系列(专栏输入比碎片化的输入难多了~):

  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 shadervoid main() {  gl_Position = vec4(0, 0, 0, 1);  // 居中  gl_PointSize = 120.0; //大小} `;const fs = `// fragment shadervoid main() {  gl_FragColor = vec4(0, 0, 0, 1);  // 彩色}`;// setup //create program & use programconst 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.... 哎呦都是好货色... 我都急不可待写了(脑补坏笑的表情~)

如果有须要加微信群的分割我 ~