WebGL基本概念

1. WebGL 的基本概念

(1) WebGL 是什么？

• WebGL 是一种用于在浏览器中渲染 3D 图形的 API，基于 OpenGL ES 2.0。
• 它通过 JavaScript 与 GPU 交互，实现高性能的图形渲染。

(2) WebGL 的核心组件

• Canvas：WebGL 的渲染目标，通过 <canvas> 元素创建。
• 上下文：通过 getContext('webgl') 获取 WebGL 上下文。
• 着色器：控制图形的渲染方式，包括顶点着色器和片段着色器。
• 缓冲区：用于存储顶点数据、纹理数据等。
• 纹理：用于贴图，增强图形的视觉效果。
• 矩阵变换：通过矩阵实现平移、旋转、缩放等 3D 变换。

(3) WebGL 的渲染管线

1. 顶点着色器：处理顶点数据，计算顶点的最终位置。
2. 图元装配：将顶点组装成图元（如点、线、三角形）。
3. 光栅化：将图元转换为像素。
4. 片段着色器：计算每个像素的颜色。
5. 测试与混合：处理深度测试、透明度混合等。

---

2. WebGL 的使用步骤

(1) 初始化 WebGL 上下文

const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
   
  console.error('WebGL 不支持');
}

(2) 定义顶点数据

const vertices = [
  -1, -1, 0,
  1, -1, 0,
  0, 1, 0
];

(3) 创建着色器

• 顶点着色器：处理顶点位置。

  const vertexShaderSource = `
    attribute vec3 aPosition;
    void main() {
      gl_Position = vec4(aPosition, 1.0);
    }
  `;
  

• 片段着色器：处理像素颜色。

  const fragmentShaderSource = `
    void main() {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
    }