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

1.Modern Graphics System

1. 光栅 (Raster): 几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。
2. 像素(Pixel): 一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
3. 缓存 (Frame Buffer) : 在绘图过程中，像素信息被存放于顿缓存中，顿缓存是一块内存地址。
4. CPU (Central Processing Unit) : 中央处理单元，负责逻辑计算。
5. GPU (Graphics Processing Unit) : 图形处理单元，负责图形计算。

2.CPU vs GPU

1. GPU由大量的小运算单元构成；
2. 每个运算单元只负责处理很简单的计算；
3. 每个运算单元彼此独立；
4. 因此所有计算可以并行处理。

3.WebGL Startup

1. 创建 WebGL 上下文;
2. 创建 WebGL Program;
3. 将数据存入缓冲区;
4. 将缓冲区数据读取到 GPU;
5. GPU 执行 WebGL 程序，输出结果。

4.3D 标准模型的四个齐次矩阵(mat4)

1. 1投影矩阵 Projection Matrix；
2. 模型矩阵 Model Matrix；
3. 视图矩阵 View Matrix；
4. 法向量矩阵 Normal Matrix；

5.glsl Doodle

这是 Fragment Shaders 的一个轻量库，可以用来作为 WebGL 学习入门，也可以用在项目中实现高性能的、有趣的图案和图形效果。

#ifdef GL_ES precision mediump float;

#endif

uniform vec2 dd_resolution; uniform float dd_time;

// www.pouet.net/prod.php?wh…

void main() { vec2 st = gl_FragCoord.xy / dd_resolution;

vec2 r = dd_resolution.xy; float t = dd_time;

vec3 c; float l, z = t;

for(int i = 0; i < 3; i++) { vec2 uv, p = st; uv = p; p -= 0.5; p.x *= r.x / r.y; z += 0.07; l = length(p); uv += p / l * (sin(z) + 1.0) * abs(sin(l * 9.0 - z * 2.0)); c[i] = 0.01 / length(abs(mod(uv, 1.0) - 0.5)); }

gl_FragColor = vec4(c/l, t);

}

6.webgl可描述的东西

要说在WebGL的世界里能够描画什么，其实任何东西都可以描画。而描画的最基本的东西就是下面几种。

1. 点，
2. 线段，
3. 三角形。