乐趣区

关于前端:follow-me-一起去了解下数据可视化图形学WebGLShader

jiezi

背景

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

  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.... 哎呦都是好货色 … 我都急不可待写了(脑补坏笑的表情~)

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

退出移动版