读《WebGL 入门与实践》，相关笔记，持续记录

认识webgl

WebGL 是一组基于 JavaScript 语言的图形规范，浏览器厂商按照这组规范进行实现，为 Web 开发者提供一套3D图形相关的 API。

1.工作原理

WebGL 的工作方式和流水线类似，也是按照流水线的方式将 3D 模型数据渲染到 2D 屏幕上的，业界把这种渲染方式称为图形管线或者渲染管线。

WebGL 只能够绘制点、线段、三角形这三种基本图元，立方体、球体、圆柱体等这些模型本质上是由一个一个的点组成，GPU 将这些点用三角形图元绘制成一个个的微小平面，这些平面之间互相连接，从而组成各种各样的立体模型。

着色器（Shader）是用 GLSL（OpenGL Shading Language）编写的代码片段，用于定义图形的渲染方式。

• 顶点着色器（Vertex Shader）处理顶点数据，它对每个顶点执行操作，如变换（平移、旋转、缩放）、光照计算等。顶点着色器的输出是片元着色器的输入。
• 片元着色器（Fragment Shader）处理像素数据，它对每个像素执行操作，如颜色计算、纹理采样等。片元着色器的输出是最终显示在屏幕上的像素颜色。
• 程序（Program）是将顶点着色器和片元着色器组合在一起的实体。它定义了整个渲染流程，从顶点处理到像素着色

WebGL实践

WebGL理论基础：https://webglfundamentals.org/webgl/lessons/zh_cn/

1.基本操作

着色器（Shader）是用 GLSL（OpenGL Shading Language）编写的代码片段，用于定义图形的渲染方式。

• 顶点着色器（Vertex Shader）处理顶点数据，它对每个顶点执行操作，如变换（平移、旋转、缩放）、光照计算等。顶点着色器的输出是片元着色器的输入。
• 片元着色器（Fragment Shader）处理像素数据，它对每个像素执行操作，如颜色计算、纹理采样等。片元着色器的输出是最终显示在屏幕上的像素颜色。

程序（Program）是将顶点着色器和片元着色器组合在一起的实体。它定义了整个渲染流程，从顶点处理到像素着色

创建着色器对象：

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：点的数量。