这是我参与「第五届青训营」笔记创作活动的第9天

仅作为个人笔记使用

数据可视化 D3 G2 Vega Echarts

光栅Raster: 几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图形的像素阵列，

像素pixel: 通常保存在某个具体位置的颜色等信息

帧缓存 Frame Buffer ：像素信息被放在帧缓存中，帧缓存是一块内存地址

CPU 中央处理单元，负责逻辑计算

GPU 图形处理单元，负责图形计算

轮廓提取（meshing）通过CPU→光栅化→帧缓存→渲染

从数据到帧缓冲区framer buffer到像素的管道

GPU比CPU更适合计算百万级别的点阵

GPU由大量的小运算单元构成，每个运算单元只负责处理很简单的计算

每个运算单元彼此独立，因此所有计算可以并行处理

webGL以js方式调用openGL的接口

复杂多边形通过earcut切分成多个三角形，然后绘制三角形

function update(){.....图形乘上矩阵旋转}

requestAnimationFrame(update) 开启动画

在3D标准模型中使用的四个齐次矩阵（mat4)

1.投影矩阵 Projection Matrix

2.模型矩阵 Model Matrix

3.视图矩阵 View Matrix

4.法向量矩阵 Normal Matrix

const vertex = attribute vec2 position;

uniform mat3 modelMatrix;

void main() {

gl_PointSize = 1.0;

vec3 pos = modelMatrix * vec3(position,1.0)

gl_Position = vec4(pos,1.0) }

glsl

// 分辨率 uniform vec2 dd_resolution

// 每个像素点的坐标/分辨率=[0,1] vec2 st = gl_FragCoord.xy/dd_resolution // st为{[0,1],[0,1]}

step(0.5,st.x) st.x大于0.5返回1否则返回0、 float r = 0.2 vec center = vec2(0.5) // 圆形,只有半径大于r才是黑色 fragColor.rgb = step(length(st-center),r) * vec3(1.0)

smoothstep自带平滑边缘效果 smoothstep(d-0.01,d,r) d-0.01到d之间都是平滑的

再做一个圆向量 vec3 c1 = smoothstep(d,d-0.01,r)*vec3(1.0) vec3 c2 = smoothstep(d,d+0.01,r-0.03)*vec3(1.0) fragColor.rgb = c1 - c2 得到圆环

webGL和shader | 青训营笔记