《数据可视化和图形学》专栏创建已然日久,想了很久怎么去开展这个系列(专栏输出比碎片化的输出难多了~):
总之在纠结中一直迟迟难以下笔。一天,一天.... 草稿箱里十几篇总有的,后面想通了。我尽力 在途中得到大家的意见然后加速改进。那么就开始我们的《数据可视化和图形学》
- 介绍图形学和可视化
- engineer/前端er如何入手
- GPU渲染管线
- webgl介绍 & coding
图形学:利用数学公式/函数基础理论来以图形形式表现
简单介绍几点:
讨论图形学牵扯一点图像处理,简单说一下。图像处理就是图形学逻辑相反 输入图形输出数学公式/函数。
数据可视化:将数据转化成为交互的图形或图像等。 数据可视化主要旨在借助于图形化?段,清晰有效地传达与沟通信息
在之前谈起可视化更多说是归属于计算机图形学CG(computer graphics)一类的,到后来发展势头越来越强,逐步脱离出来。知识图谱/医疗等等方向都有数据可视化的应用。
依此的简单回答:
明确一点 在不同的系列的GPU渲染管线存在差异
GPU的编码同CPU区别 debug不存在的... 无memory交集... 总之你会喜欢上它的~
请看下图:
光栅化:把顶点数据转换为片元的过程(简单理解就是找到图形并转换所覆盖的像素)
着色过程中一般是线性补充(比如 0-1区间会进行线性补充 0.1 0.2....)
WebGL(Web图形库)是一个JavaScript API,可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形,而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0非常一致的API来做到这一点,该API可以在HTML5 <canvas>元素中使用。 这种一致性使API可以利用用户设备提供的硬件图形加速。
补充说明OpenGL也是渲染API ES是嵌入式的意思(可Google/baidu) 俩者API非常相近可以去了解一下。连接统一后面贴
首先MDNwebGL相关介绍更全一些 以及Tutorial (教程) 非常适合入门.大家可以去学习一下。但是深入还是需要参考一些学习资料(可以自己动手实现一些光线追踪,折射...图形学欢迎你)
来吧展示 最小的程序 效果就是绘制一个rect
<!-- 画布 -->
<canvas id="myDiagram" width="200" height="200"></canvas>
<!-- webgl utils -->
<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
// 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....
哎呦都是好东西... 我都迫不及待写了(脑补坏笑的表情~)
如果有需要加微信群的联系我 ~
简介: 企业上云多账号架构中,如何做到从上到下管理的同时,处理好员工的权限边...
John Au-Yeung 来源:medium 译者:前端小智 有梦想,有干货,微信搜索 【大迁世...
1.HTML5的内容类型 内容类型 描述 内嵌 向文档中添加其他类型的内容,例如audio...
content属性一般用于::before、::after伪元素中,用于呈现伪元素的内容。平时con...
注释1:上图整个大背景是这个网页的全部尺寸,中间的小框才是浏览器中的可见尺寸...
复制代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
解决方法如下: 第一种 使用iframe,但是目前使用iframe的人已经越来越少了,而...
data URI scheme 允许我们使用内联(inline-code)的方式在网页中包含数据,可以...
Redis 官方在 2020 年 5 月正式推出 6.0 版本,提供很多振奋人心的新特性,所以...
先点赞再看,养成好习惯 前言 这两天在另一个社区看到了一个关于 Tomcat 的提问...