共计 2583 个字符，预计需要花费 7 分钟才能阅读完成。
背景
《数据可视化和图形学》专栏创立未然日久, 想了很久怎么去发展这个系列(专栏输入比碎片化的输入难多了~):
- 如何精简凝练相干常识体系。
- 如何将系列常识, 文章碎片化。
- 每章节如何承前启后, 与整体可拆可合。
- 最重要一点第一篇咋个搞适合 …
总之在纠结中始终迟迟难以下笔。一天，一天 …. 草稿箱里十几篇总有的, 前面想通了。我尽力 在途中失去大家的意见而后减速改良。那么就开始咱们的《数据可视化和图形学》
本篇纲要
- 介绍图形学和可视化
- engineer/ 前端 er 如何动手
- GPU 渲染管线
- webgl 介绍 & coding
1. 什么是图形学? 什么是数据可视化?
图形学
图形学: 利用数学公式 / 函数基础理论来以图形模式体现
简略介绍几点:
- 说起图形学不要只想到游戏, 还有很多利用工业, 医学, 影视 … 畛域很广
- 图形学不单单指渲染，还有数学(计算)，美术, 物理 … 等等
- 想学好图形学并不是会点 API 就能够, 更要学习其 背地的基础知识(数学 / 物理)
- 图形学的人才 / 常识积攒 / 文献资料 / 先进技术.. 太稀缺了,大佬萌新们放松进来一起搞
探讨图形学牵扯一点图像处理, 简略说一下。图像处理就是图形学逻辑相同 输出图形输入数学公式 / 函数。
数据可视化
数据可视化: 将数据转化成为交互的图形或图像等。数据可视化次要旨在借助于图形化⼿段，清晰无效地传播与沟通信息
在之前谈起可视化更多说是归属于计算机图形学 CG(computer graphics)一类的, 到起初发展势头越来越强, 逐渐脱离进去。常识图谱 / 医疗等等方向都有数据可视化的利用。
2. software engineer/ 前端 er 如何动手
从一些事实问题简略答复一下:
- 业务需要须要用到局部可视化
- 想深刻图形学 / 可视化, 奈何技法缺失(语言, 数学 …)
- 不晓得如何动手(各个领域的 engineer)
- …
依此的简略答复:
- 业务需要主导可视化 框架必定是利器, 然而你会缺失发现它外部美的货色。有人就会说了 读源码能够嘛? 能够。然而这个工作量可能更大。并不一定是最有效途径。
- 深刻图形学 / 可视化 方向迷茫。这点我也是在碰壁中，只能说把我踩过的坑分享进去。读文献 学数学 推导公式.. 这个是个漫长的过程 须要凝练 须要分类(分层) 二次打包推到更多人的视线。(可怜的是相干材料很少, 因为图形学的确难 …)
- engineer 不晓得如何动手? 首先在工程师角色加持下。最起码语言不必过分放心。拿前端 er 举例来说 动手当然是 webGL(当然我的观点仍旧是 API 仅仅是 API.. 应用 API 并不是图形学的最佳路径) 然而拿问题驱动你的学习这个是可行的。
3. GPU 渲染管线
明确一点 在不同的系列的 GPU 渲染管线存在差别
GPU 的编码同 CPU 区别 debug 不存在的 … 无 memory 交加 … 总之你会喜爱上它的~
请看下图:
- 图片起源网络 侵删
- CPU 计算节点根底信息(数量)
- GPU Vertex Shader 进行顶点绘制
- primitives Generation 负责构造生成(link/ 三角形)
- Rasterization 光栅化
- Fragment Shader 片元 (着色)
- Testing Blending 混合测试 (Alpha 透明度)
- 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 (教程) 非常适合入门. 大家能够去学习一下。然而深刻还是须要参考一些学习材料(能够本人入手实现一些光线追踪, 折射 … 图形学欢送你)
编码过程总结
- init shader(vertex,fragment)
compile - create attrbute buffer
(coding no buffer) - 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.... 哎呦都是好货色 … 我都急不可待写了(脑补坏笑的表情~)
如果有须要加微信群的分割我 ~
