一、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 渲染效果！