第一天：
1.canvas和webgl的区别
Canvas 和 WebGL 都是用于在网页上绘制图形的技术，它们通过浏览器提供的 API 使开发者能够创建丰富的视觉内容，但它们的工作原理和用途有所不同。
Canvas
Canvas API 提供了一个通过 JavaScript 和 HTML <canvas> 元素绘制 2D 图形的方法。它是一个由网页浏览器渲染的矩形区域，你可以通过 JavaScript 动态地绘制其中的图像（如线条、形状、图像等）。Canvas 适用于较简单的图形和动画，以及图像处理和游戏的 2D 渲染。
- 2D 绘图：Canvas API 主要关注于 2D 图形的绘制。
- 即时渲染：绘制操作立即执行，不涉及场景或对象的概念。
- 简单易用：API 相对简单，容易上手，适合快速开发简单的图形应用。
WebGL
WebGL（Web Graphics Library）是一个 JavaScript API，允许在不需要任何插件的情况下，在 Web 浏览器中使用 GPU 加速的方式进行 3D 绘图。WebGL 是 OpenGL ES 的一个绑定（即一个低级图形 API 的 Web 版本），它允许开发者创建复杂的 3D 图形和效果。
- 3D 绘图：WebGL 提供了创建和操纵在浏览器中渲染的复杂 3D 图形的能力。
- GPU 加速：利用用户的图形处理器（GPU），可以实现高性能的图形渲染。
- 复杂度高：由于提供了对底层图形硬件的直接访问，因此比 Canvas API 更复杂，学习曲线更陡峭。
关键区别
- 维度和性能：Canvas 更适合 2D 图形和简单动画，而 WebGL 专注于更复杂的 3D 渲染和高性能图形。
- API 复杂性：Canvas 的 API 相对简单易学，而 WebGL 提供了更接近硬件的控制，因此更为复杂。
- 使用场景：对于需要绘制简单图形或处理图像的应用，Canvas 可能是更好的选择。对于需要复杂三维效果、高性能渲染的应用，WebGL 将是更合适的技术。
2.什么是着色器？
着色器（Shader）是一种用于在图形处理器（GPU）上执行的小程序，专门用于图形渲染的计算。它们是现代图形API（如OpenGL、DirectX）和图形渲染管线的核心组件。着色器使得开发者能够对渲染过程中的顶点、像素（片段）、纹理等进行高度控制和自定义，从而产生各种视觉效果。主要有以下几种类型：
-
顶点着色器（Vertex Shaders）：处理顶点数据，如位置、颜色、纹理坐标等。它运行在渲染流程的早期，负责将3D坐标转换为另一种3D坐标，同时进行一些顶点级别的处理。
-
片段着色器（Fragment Shaders）/像素着色器（Pixel Shaders）：处理渲染到屏幕上每个像素的颜色和其他属性。它决定了最终像素的颜色值，包括贴图、阴影、光照效果等。
-
几何着色器（Geometry Shaders）：介于顶点着色器和片段着色器之间，可以生成从一个顶点到另一个顶点的新图形。
-
曲面细分着色器（Tessellation Shaders）：可以根据某些规则增加几何体的细节或顶点数量，通常用于实现物体表面的平滑渲染。
-
计算着色器（Compute Shaders）：并不直接参与图形渲染，而是用于处理非图形的通用计算任务，如物理模拟、图像处理等。
3.绘制一个点的流程
一个个像素
第二天
1.canvas坐标系
 |  |
| canvas坐标系 | webgl三维坐标系 |
2.绘制一个水平移动的点
3.声明attribute 变量:只能在顶点着色器使用
3.1.声明变量attribute
3.2attribute获取变量
3.3通过鼠标控制绘制
第三天
1.改变点的颜色
1.1使用uniform 变量
通过添加uniform设置变量
给uniform变量赋值
gl.uniform4f(uColor，1.0，0.0，0.0，1.0)使用uniform的需要设置精度
precision mediump float;既可以在顶点着色器使用也可以在片源着色器使用，但是顶点着色器不能使用顶点坐标
uniform 变量的使用流程
2使用缓冲区对象-绘制多个点
2.1什么是缓存区对象？
缓冲区对象是WebGL系统中的一块内存区域，可以一次性地向缓冲区对象中填充大量的顶点数据，然后将这些数据保存在其中，供顶点着色器使用
2.2Float32Array是类型化数组
在 webgl 中，需要处理大量的相同类型数据，所以引入类型化数组，这样程序就可以预知到数组中的数据类型，提高性能。
2.3绘制流程
2.4多缓存区和数据偏移
流程和aPosition一样
