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

一、本堂课重点内容:

学习WebGL的基本概念和原理，了解WebGL是什么。
学习WebGL的绘图流程和技术，理解WebGL的坐标系。
学习WebGL的案例。

二、详细知识点介绍:

WebGL是什么？

WebGL 是一种 JavaScript API，用于在任何兼容的 web 浏览器中渲染高性能的交互式 3D 和 2D 图形，无需使用插件。WebGL 通过引入一种与 OpenGL ES 2.0 非常接近的 API，可以在 HTML <canvas> 元素中使用。这种一致性使得该 API 可以利用硬件图形加速。

WebGL的绘图流程和技术

WebGL 的绘图流程大致可以分为以下步骤：

准备画布：在 Web 页面中创建一个 HTML canvas 元素，并设置其大小和位置。这个画布将用于显示 WebGL 绘制或者渲染的图形内容。
初始化 WebGL：通过 JavaScript 获取 canvas 元素的 WebGL 上下文，用于与 WebGL API 交互。
创建 WebGL Program：编写顶点着色器（Vertex Shader）和片元着色器（Fragment Shader）的 GLSL 代码，并将它们链接到一个 WebGL Program 对象中。着色器是用于在 GPU 上执行图形计算的程序，顶点着色器负责处理顶点数据，片元着色器负责处理像素数据。
将数据存入缓冲区：创建缓冲区对象（Buffer Object），并将图形相关的数据（如顶点坐标，顶点颜色等）存入缓冲区中。缓冲区是用于在 CPU 和 GPU 之间传输数据的内存区域。
将缓冲区数据读取到 GPU：通过绑定缓冲区对象，设置顶点属性指针（Vertex Attribute Pointer），并启用顶点属性（Enable Vertex Attribute），将缓冲区中的数据读取到 GPU 的顶点着色器中。
GPU 执行 WebGL Program，输出结果：通过调用 drawArrays 或 drawElements 方法，指定绘制的图元类型（如点，线，三角形等），以及绘制的顶点数量或索引数量，让 GPU 执行 WebGL Program，对每个顶点和片元进行计算，并将计算结果输出到画布上。

一个简单的 WebGL 绘图流程的例子是：在画布上绘制一个红色的三角形。代码如下：

<canvas id="canvas" width="300" height="300"></canvas>
<script>
  // 获取画布元素
  var canvas = document.getElementById("canvas");
  // 获取WebGL上下文
  var gl = canvas.getContext("webgl");
  // 顶点着色器代码
  var vertexShaderSource = `
    attribute vec2 a_position; // 顶点属性，接收缓冲区数据
    void main() {
      gl_Position = vec4(a_position, 0, 1); // 设置顶点坐标
    }
  `;
  // 片元着色器代码
  var fragmentShaderSource = `
    precision mediump float; // 设置浮点数精度
    void main() {
      gl_FragColor = vec4(1, 0, 0, 1); // 设置片元颜色为红色
    }
  `;
  // 创建着色器对象
  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  // 将着色器源码赋值给着色器对象
  gl.shaderSource(vertexShader, vertexShaderSource);
  gl.shaderSource(fragmentShader, fragmentShaderSource);
  // 编译着色器
  gl.compileShader(vertexShader);
  gl.compileShader(fragmentShader);
  // 创建程序对象
  var program = gl.createProgram();
  // 将着色器附着到程序对象上
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  // 链接程序对象
  gl.linkProgram(program);
  // 使用程序对象
  gl.useProgram(program);
  // 顶点数据，三个顶点的二维坐标
  var vertices = [
    -0.5, -0.5, // 第一个顶点
    0.5, -0.5, // 第二个顶点
    0, 0.5 // 第三个顶点
  ];
  // 创建缓冲区对象
  var buffer = gl.createBuffer();
  // 将缓冲区对象绑定到目标
  gl.bindBuffer(gl.ARRAY_BUFFER,

WebGL Startup

创建WebGL上下文
创建WebGL Program
将数据存入缓冲区
将缓冲区数据读取到 GPU
GPU 执行WebGL程序,输出结果

The Shaders

3DMatrix

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

三、引用参考：

青训营ppt

WebGL 月影带练 | 青训营笔记