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

本堂课重点内容

本堂课介绍了WebGL的基础概念、WebGL的渲染原理、glsl-doodle的shader使用。

WebGL

什么是WebGL?

运用了GPU的来完成绘图的API，不完全等同于3D，涉及计算机图形学的知识：
- Modern Graphics System
  - 光栅：构成图像的像素阵列
  - 像素：一个像素对应图像上的一个点，可以保存图像的颜色等信息
  - 帧缓存：绘图时（轮廓提取 → 光栅化 → 帧缓存 → 渲染），像素信息被存放于帧缓存中，是一块内存地址
  - CPU：中央处理单元，负责逻辑计算
  - GPU：图形处理单元，负责图形计算
使用WebGL的步骤
1. 创建WebGL上下文
2. 创建WebGL Program
3. 将数据存入缓冲区
4. 将缓冲区数据读取到GPU
5. GPU执行WebGL程序，输出结果
注意：WebGL坐标系原点在正中间
绘制成什么图形和图源有关系，对几何图形进行三角剖分，通过▲顶点进行绘制，3D模型通过设计软件将三角网格分割，将导出的数据直接传输到WebGL中进行渲染
图形可以平移、旋转和缩放，其中旋转和缩放是线性变换（齐次矩阵）
3D标准模型的齐次矩阵：
1. 投影矩阵Projection Matrix ：定义坐标系，缩放或者旋转坐标系
2. 模型矩阵Model Matrix：进行transform变换
3. 视图矩阵View Matrix：相当于移动摄像机
4. 法向量矩阵Normal Matrix：法线坐标，使用法向量计算夹角
推荐阅读：
1. The book of shaders（适合图形学入门）
2. Mesh.js
3. glsl-doodle
4. SpriteJS
5. ThreeJS
6. ShaderToy
7. 充分理解WebGL

glsl-doodle的shader使用

画一个圆：

#version 300 es
precision highp float;
uniform vec2 dd_resolution;
out vec4 fragColor;
vold main() {
    vec2 st = gl_FragCoord.xy / dd_ resolution;
    vec2 center = vec2(0.5); //圆心
    float r = 0.2;  //半径
    float d = length(st - center);
    fragColor.rgb = smoothstep(d - 0.01, d, r) *vec3(1.0);  //平滑锯齿
    fragColor.a = 1.0;
}

画圆环：封装一个stroke方法（画分割线），距离长构图法

#version 300 es
precision highp float;
uniform vec2 dd_resolution;
out vec4 fragColor;
float stroke(float d, float d0, float w, float smth) {
    float th = 0.5*w;
    smth = smth * w;
    float start = d0 - th;
    float end = d0 + th;
    return smoothstep(start, start + smth, d) - smoothstep(end -
    smth, end, d);
}
void main(){ 
    vec2 st = gl_FragCoord.xy / dd_ resolution;
    vec2 center = vec2(0.5);
    float r = 0.2;
    float d = length(st - center);
    float d2 = stroke(d, r, 0.02, 0.3);
    fragColor.rgb = d2 * vec3(1.0);
    fragColor.a = 1.0;
}

个人总结

好玩是真的好玩，难是真的难，又是距离长又是极坐标啥的，我的数学知识已经离我而去了o(╥﹏╥)o

WebGL月影带练 | 青训营笔记

本堂课重点内容

WebGL

glsl-doodle的shader使用

个人总结