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); // 红色}
  `;
  

(4) 编译着色器并链接程序

function createShader(gl, type, source) {const shader = gl.createShader(type);gl.shaderSource(shader, source);gl.compileShader(shader);if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {console.error('着色器编译失败:', gl.getShaderInfoLog(shader));return null;}return shader;
}const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {console.error('程序链接失败:', gl.getProgramInfoLog(program));
}
gl.useProgram(program);

(5) 绑定顶点数据

const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);const aPosition = gl.getAttribLocation(program, 'aPosition');
gl.enableVertexAttribArray(aPosition);
gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0);

(6) 渲染循环

function render() {gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);requestAnimationFrame(render);
}render();

---

3. WebGL 的核心技术

(1) 矩阵变换

• 模型矩阵：控制物体的平移、旋转、缩放。
• 视图矩阵：控制相机的位置和方向。
• 投影矩阵：控制 3D 场景到 2D 屏幕的投影方式。
• 示例：

  import { mat4 } from 'gl-matrix';const modelMatrix = mat4.create();
  mat4.translate(modelMatrix, modelMatrix, [0, 0, -5]);
  

(2) 纹理

• 创建纹理：

  const texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
  gl.generateMipmap(gl.TEXTURE_2D);
  

• 使用纹理：

  const uSampler = gl.getUniformLocation(program, 'uSampler');
  gl.uniform1i(uSampler, 0);
  

(3) 光照

• Phong 光照模型：包括环境光、漫反射光和镜面反射光。
• 示例：

  const lightPosition = [1, 1, 1];
  const uLightPosition = gl.getUniformLocation(program, 'uLightPosition');
  gl.uniform3fv(uLightPosition, lightPosition);
  

(4) 阴影

• 阴影映射：通过渲染深度图实现阴影效果。
• 示例：

  const shadowMap = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, shadowMap);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT16, 1024, 1024, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_SHORT, null);
  

---

4. WebGL 的难点

(1) 复杂的数学计算

• 问题：WebGL 涉及大量的矩阵运算和向量计算。
• 解决方案：使用数学库（如 gl-matrix）简化计算。

(2) 着色器编程

• 问题：编写 GLSL 着色器代码需要熟悉图形编程和 GPU 架构。
• 解决方案：学习 GLSL 语法和 WebGL 渲染管线。

(3) 性能优化

• 问题：复杂的场景可能导致性能下降。
• 解决方案：减少绘制调用、使用 LOD、优化纹理和材质。

(4) 跨浏览器兼容性

• 问题：不同浏览器对 WebGL 的支持程度不同。
• 解决方案：使用 WebGL 检测工具，提供降级方案。