WebGL知识框架

一、WebGL 基础概念

1. WebGL 简介

• 是什么？

  • 基于 OpenGL ES 的浏览器 3D 图形 API，直接操作 GPU 渲染。

• 核心特点

  • 底层、高性能、需手动控制渲染管线。

  • 依赖 JavaScript 和 GLSL（着色器语言）。

• 与 Three.js 的关系

  • Three.js 是对 WebGL 的高级封装，简化开发。

2. 核心工作原理

• 渲染管线（Pipeline）

  

• 关键步骤

  • 顶点着色器：处理顶点坐标变换。

  • 片段着色器：计算每个像素的颜色。

3. 开发环境准备

• 基础 HTML 结构

  <canvas id="glCanvas"></canvas>
  <script src="app.js"></script>

• 初始化 WebGL 上下文

  const canvas = document.getElementById('glCanvas');
  const gl = canvas.getContext('webgl');
  if (!gl) alert('WebGL 不支持！');

---

二、WebGL 核心流程

4. 着色器（Shaders）

• GLSL 语言基础

  • 类 C 语言，专为图形计算设计。

  • 示例（顶点着色器）：

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

• 着色器编译与链接

  function createShader(gl, type, source) {const shader = gl.createShader(type);gl.shaderSource(shader, source);gl.compileShader(shader);return shader;
  }

5. 缓冲区（Buffers）

• 顶点缓冲区（VBO）

  • 存储顶点数据（位置、颜色、纹理坐标等）。

  const vertices = new Float32Array([0, 1, 0, -1, -1, 0, 1, -1, 0]);
  const vertexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

6. 绘制图形

• 绘制命令

  gl.drawArrays(gl.TRIANGLES, 0, 3); // 绘制三角形

• 清除画布

  gl.clearColor(0, 0, 0, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);

---

三、WebGL 进阶技术

7. 纹理（Textures）

• 加载纹理

  const texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  const image = new Image();
  image.onload = () => {gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
  };
  image.src = 'texture.jpg';

• 纹理坐标

  • 需在顶点数据中定义 uv 坐标。

8. 变换与矩阵

• 矩阵运算库（glMatrix）

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

• MVP 矩阵

  • Model（模型变换）、View（视图变换）、Projection（投影变换）。

9. 光照与材质

• Phong 光照模型

  • 环境光 + 漫反射 + 镜面反射。

• 法线向量

  • 需在顶点数据中传递法线信息。

---

四、WebGL 高级主题

10. 帧缓冲（FBO）

• 离屏渲染

  const framebuffer = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);

11. 实例化渲染（Instancing）

• 高效绘制重复物体

  gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, 100); // 绘制 100 个实例

12. WebGL 2.0 特性

• 新功能

  • 计算着色器、多重渲染目标（MRT）、纹理数组。

---

五、性能优化

13. 最佳实践

• 减少状态切换

  • 批量绘制相同材质的物体。

• 使用 VAO（Vertex Array Object）

  • 简化顶点属性配置（WebGL 2.0 原生支持）。

14. 调试工具

• WebGL Inspector

  • 捕获帧分析、查看纹理和缓冲区。

---

六、学习路线建议

1. 初级阶段（1-2 周）

• 掌握 WebGL 渲染管线。

• 编写基础着色器，绘制简单图形。

2. 中级阶段（1-2 个月）

• 实现纹理贴图、矩阵变换。

• 添加基础光照（漫反射）。

3. 高级阶段（2-3 个月）

• 离屏渲染（FBO）、后处理特效。

• 集成物理引擎（如 Cannon.js）。

4. 实战项目

• 初级：2D 图像滤镜（灰度、边缘检测）。

• 高级：3D 地形生成（噪声算法 + 光照）。

---

七、资源推荐

• 书籍

  • 《WebGL 编程指南》

  • 《Real-Time Rendering》

• 在线教程

  • WebGL Fundamentals

  • Learn OpenGL（概念通用）

通过这个框架，你可以逐步深入 WebGL 的底层原理，最终实现复杂的 3D 渲染效果！