这是我参与「第五届青训营」伴学笔记创作活动的第 15 天，今天学习的是WebGL月影带练，将学习的内容记录下来，以便时时回顾巩固记忆。

主要学习内容

WebGL是什么
WebGL学习

WebGL是什么

WebGL 是在网页上绘制和渲染三维图形的技术，可以让用户与其进行交互。随着 5G 时代的到来，3D可视化需求大量涌现。3D 游戏，酷炫的活动宣传页，三维数字城市，VR全景展示、3D 产品展示等领域中，很多项目都是用 WebGL 实现的，也只能用WebGL来做。

为什么要学习WebGL

WebGL的行业背景决定理论其在市场中具有广大的需求量。

WebGL发展潜力大，很长一段时间内不会面临被淘汰的风险。

WebGL的职场竞争压力比VUE、REACT要小。

WebGL学习

GPU和CPU的区别和联系：

在CPU中，数据有秩序的进入CPU管道，然后被依次取出。
在GPU中，数据可以被大量读入，GPU一次可以处理大量的数据，再一次性吐出来。

#canvas 2D
function ctxDraw() {
    ctx.fillStyle = '#f60';
    ctx.fillRect((width - rectWidth) / 2, (height - rectHeight) / 2, rectWidth, rectHeight);
}

#WebGL
const vertexShader = `
    attribute vec4 a_position;
    void main () {
        gl_Position = a_position;
    }
`

const fragmentShader = `
    precision mediump float;
    void main () {
        highp vec4 color = vec4(1.0, 0.4, 0.0, 1.0);
        gl_FragColor = color;
    }
`
function glDraw() {
    let program = util.initWebGL(gl, vertexShader, fragmentShader);
    gl.useProgram(program);

    let points = new Float32Array([
        -0.5, -0.5,
        0.5, -0.5,
        0.5, 0.5,
        0.5, 0.5,
        -0.5, 0.5,
        -0.5, -0.5
    ]);

    const buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

    const a_position = gl.getAttribLocation(program, 'a_position');
    gl.enableVertexAttribArray(a_position);
    gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);

    gl.drawArrays(gl.TRIANGLES, 0, 6);
}

WebGL绘制一个普通的矩形比canvas 2D多不少代码，但实际上性能上，使用canvas 2D确实又比WebGL慢，因为canvas 2D在重绘上比较慢。

着色器：

1、顶点着色器：

attribute vec4 a_position;
void main () {
  gl_Position = a_position;
}

声明了一个全局的vec4变量
gl_Position是顶点着色器中的内置变量

2、片元着色器：

precision mediump float;
void main () {
  highp vec4 color = vec4(1.0, 0.4, 0.0, 1.0);
  gl_FragColor = color;
}

全局声明了片元着色器中浮点数类型的精度
声明了一个局部的vec4变量

部分内容参考引用自：入门WebGL，看这一篇就够了_大前端_一颗大橄榄_InfoQ写作社区

WebGL月影带练 | 青训营笔记

主要学习内容

WebGL是什么

WebGL学习