认识webgl WebGL 是一组基于 JavaScript 语言的图形规范，浏览器厂商按照这组规范进行实现，为 Web 开发者提供一套3D图形相关的 API。
1.工作原理 WebGL 的工作方式和流水线类似，也是按照流水线的方式将 3D 模型数据渲染到 2D 屏幕上的，业界把这种渲染方式称为图形管线或者渲染管线。
WebGL 只能够绘制点、线段、三角形这三种基本图元，立方体、球体、圆柱体等这些模型本质上是由一个一个的点组成，GPU 将这些点用三角形图元绘制成一个个的微小平面，这些平面之间互相连接，从而组成各种各样的立体模型。
一般情况下，最初的顶点坐标是相对于模型中心的，不能直接传递到着色器中，我们需要对顶点坐标按照一系列步骤执行模型转换，视图转换，投影转换，转换之后的坐标才是 WebGL 可接受的坐标，即裁剪空间坐标。最终的变换矩阵和原始顶点坐标传递给 GPU，GPU 的渲染管线对它们执行流水线作业。
GPU 渲染管线的主要处理过程如下：
首先进入顶点着色器阶段，利用 GPU 的并行计算优势对顶点逐个进行坐标变换。 然后进入图元装配阶段，将顶点按照图元类型组装成图形。 接下来来到光栅化阶段，光栅化阶段将图形用不包含颜色信息的像素填充。 在之后进入片元着色器阶段，该阶段为像素着色，并最终显示在屏幕上。
WebGL实践 1.基本操作 创建着色器对象：
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.FRAGMENT_SHADER：片段着色器。 gl.VERTEX_SHADER：顶点着色器。
分配着色器代码：
const fragmentShaderSource = ` void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
} `; gl.shaderSource(fragmentShader, fragmentShaderSource);
编译着色器：
gl.compileShader(fragmentShader);
创建程序对象：
const program = gl.createProgram();
附加着色器：
gl.attachShader(program, fragmentShader);
链接程序：
gl.linkProgram(program);
使用程序：
gl.useProgram(program);
2.坐标系统 右手坐标系，默认范围：-1.0 到 1.0：
X轴：向右为正。 Y轴：向上为正。 Z轴：指向屏幕外为正
3.绘制操作 清空画布：
gl.clearColor(0.0, 0.0, 0.0, 1.0); // 设置为黑色 gl.clear(gl.COLOR_BUFFER_BIT);
绘制图元：
gl.drawArrays(mode, first, count);
mode：图元类型（如 gl.POINTS、gl.LINES、gl.TRIANGLES）。 first：起始点索引。 count：点的数量。
