这是我参与「第四届青训营」笔记创作活动的的第17天，今天的课程是「WebGL 与动画实现」，老师主要讲解了现代图形系统、 GPU 、 WebGL的使用、着色器、矩阵等内容。

现代图形系统

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

绘制过程：
1、轮廓提取/meshing
2、光栅化
3、帧缓存
4、渲染

GPU

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

使用WebGL

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

创建WebGL上下文

const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl');

老的浏览器需要考虑到兼容性：

function create3DContext(canvas,options){
    const names = ['webgl','experimental-webgl','webkit-3d','moz-webgl'];
    if(options.webgl2) names.unshift('webgl2');
    let context = null;
    for(let ii = 0;ii < names.length;++ii){
        try{
            context = canvas.getContext(names[ii],options);
        }catch(e){
            //no-empty
        }
        if(context){
            break;
        }
    }
    return context;
}

写着色器

1、Vertex Shader顶点着色器：主要用于处理图形的轮廓
2、Fragment Shader片元着色器：光栅化后把像素点映射到片元着色器来处理颜色

创建WebGL Program

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader,vertex);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader,fragment);
gl.compileShader(fragmentShader);

const program = gl.createProgram();
gl.attachShader(program,vertexShader);
gl.attachShader(program,fragmentShader);
gl.linkProgram(program);

gl.useProgram(program);

3D Matrix

3D标准模型的四个齐次矩阵：
1、投影矩阵Projection Matrix
2、模型矩阵Model Matrix
3、视图矩阵View Matrix
4、法向量矩阵Normal Matrix

WebGL 与动画实现 ｜ 青训营笔记