WebGL 是什麼？瀏覽器如何不用外掛就畫出即時 2D 與 3D

在網頁上拖曳 3D 地圖、旋轉產品、玩遊戲，或在 Figma 的巨大畫布上縮放幾千個圖層時，瀏覽器不是只把預先做好的圖片貼上去。它可能正在呼叫電腦或手機裡的 GPU，重新計算眼前每一幀。WebGL 就是 JavaScript 和這套圖形硬體之間的重要入口。

先講最短的答案：WebGL 是瀏覽器的圖形 API

WebGL 全名是 Web Graphics Library。它是一套跨平台、免權利金的開放標準，讓網頁在 HTML canvas 裡使用 GPU 繪製高效能的 2D 與 3D 圖形。WebGL 1 的能力接近 OpenGL ES 2.0；WebGL 2 則帶入 OpenGL ES 3.0 的更多功能。

WebGL 不是設計軟體，也不是一個會自動產生 3D 世界的引擎。它比較像一組很底層的控制介面：建立緩衝區、上傳頂點、編譯 shader、設定狀態，最後下達 draw call。它給你很大的自由，也要求你把許多細節說清楚。

誰做的？答案不是某一位作者

WebGL 的早期源頭可以追到 Mozilla 工程師 Vladimir Vukićević 推動的 Canvas 3D 實驗。真正成為標準後，它由 Khronos Group 的 WebGL Working Group 共同制定。參與者包括 Apple、Google、Mozilla、Opera，以及許多 GPU 與硬體廠商。

Khronos 在 2011 年 3 月 3 日發布 WebGL 1.0，讓瀏覽器能直接提供以 OpenGL ES 2.0 為基礎的硬體加速 3D，不再要求使用者先安裝外掛。WebGL 2.0 在 2017 年完成，加入 instanced rendering、multiple render targets、uniform buffer objects 等更現代的圖形能力。

所以「誰做了 WebGL」比較接近這個答案：Mozilla 的實驗提供起點，Vladimir Vukićević 後來擔任工作小組主席，而 Khronos 與多家瀏覽器、晶片公司把它變成可跨平台實作的公開規格。

一個像素怎麼從 JavaScript 走到螢幕？

第一步是從 canvas 取得 WebGLRenderingContext。JavaScript 準備資料，例如三角形的頂點位置、顏色、貼圖與相機矩陣，再把這些資料放進 GPU 可以讀取的 buffer。

接下來是 shader。Vertex shader 會處理每個頂點的位置；fragment shader 則決定每個片段最後要顯示的顏色。這些小程式通常用 GLSL 撰寫，編譯後在 GPU 上大量平行執行。JavaScript 負責組織與更新狀態，GPU 負責把幾何轉成螢幕上的像素。

GPU 最喜歡的基本單位是三角形。模型看起來可能是一雙鞋、一棟建築或一個角色，送進圖形管線時仍會拆成許多三角形。材質、燈光和貼圖則改變這些表面最後呈現的顏色。

WebGL 能做什麼？不只有 3D

最直觀的是 3D 地圖、產品展示、建築瀏覽、資料視覺化、粒子效果與網頁遊戲。Google Maps JavaScript API 的 WebGL 功能可以傾斜、旋轉向量地圖，並把自訂 2D 或 3D 圖形直接放進地圖場景。本站的 Midnight Run 與 3D Studio 也都是把 WebGL 當成最後的瀏覽器繪圖層。

WebGL 也很適合複雜 2D。Figma 在瀏覽器裡建立大型、可即時協作的設計畫布時，長期使用 WebGL 渲染大量圖層。畫面不必立體；只要需要 GPU 加速、自訂 shader，或有效率地處理大量圖形，WebGL 就有用武之地。

遊戲引擎也能把作品輸出成 WebGL 版本，在瀏覽器裡執行。教育模擬、醫療影像、線上 CAD 和科學視覺化也常使用同一類能力。共同點是畫面必須即時回應，而且一般 HTML 元素或 Canvas 2D 已經不夠有效率。

它和 CSS、SVG、Canvas 2D 有什麼差別？

文字、表單、一般排版和簡單動畫，優先用 HTML 與 CSS。需要可被 DOM 選取、縮放後仍清晰的圖示或圖表，可以考慮 SVG。要用 JavaScript 快速畫一些 2D 像素，Canvas 2D 通常最直覺。

WebGL 的優勢出現在大量物件、複雜變形、3D 深度、即時光影和自訂像素運算。代價是開發難度、除錯成本、裝置相容性與無障礙處理。canvas 裡的圖形不會自動變成搜尋引擎和螢幕閱讀器看得懂的內容，所以重要文字仍應保留在 HTML。

WebGL、Three.js、Blender 各自在哪一層？

Blender 是製作端：建模、材質、骨架、動畫和 GLB 匯出都在那裡完成。Three.js 是 JavaScript 函式庫：它用 scene、camera、mesh、material 和 renderer 幫你整理瀏覽器裡的即時 3D。WebGL 則是更底下的圖形 API，真正把資料送往 GPU。

多數網站不需要直接用 raw WebGL 寫完整作品。Three.js 已經處理了 shader 編譯、矩陣、材質、模型載入與不同裝置的許多細節。學一點 WebGL，是為了在畫面變黑、shader 出錯或效能下降時，看得懂底下發生了什麼，不必因此放棄函式庫。

這個三角形到底做了多少事？

上面的互動示範只有一個三角形，卻已經走過完整流程：取得 context、編譯兩個 shader、建立 program、上傳位置與顏色、設定 attribute，最後呼叫 drawArrays。下面是刪去錯誤處理後的最小核心。

const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl');

const vertex = `
  attribute vec2 aPosition;
  void main() {
    gl_Position = vec4(aPosition, 0.0, 1.0);
  }
`;

const fragment = `
  precision mediump float;
  void main() {
    gl_FragColor = vec4(0.1, 0.85, 0.95, 1.0);
  }
`;

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

const program = gl.createProgram();
gl.attachShader(program, compile(gl.VERTEX_SHADER, vertex));
gl.attachShader(program, compile(gl.FRAGMENT_SHADER, fragment));
gl.linkProgram(program);
gl.useProgram(program);

const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(
  gl.ARRAY_BUFFER,
  new Float32Array([0, 0.7, -0.65, -0.55, 0.65, -0.55]),
  gl.STATIC_DRAW,
);

const location = gl.getAttribLocation(program, 'aPosition');
gl.enableVertexAttribArray(location);
gl.vertexAttribPointer(location, 2, gl.FLOAT, false, 0, 0);
gl.clearColor(0.02, 0.05, 0.1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);

如果用 Three.js 畫同一個三角形，你會用 Geometry、Material、Mesh 與 Renderer 表達意圖；函式庫替你處理上面大部分樣板。這正是理解 raw WebGL 後，再回去看 Three.js 會突然清楚很多的地方。

WebGL 2 和 WebGPU 又是什麼？

WebGL 2 是 WebGL 的功能升級，仍沿用熟悉的 OpenGL ES 式狀態模型。WebGPU 則是另一套較新的網頁圖形與運算 API，設計更接近現代的 Vulkan、Metal 與 Direct3D 12，也能使用 compute shader。兩者屬於不同世代的介面，WebGPU 並非單純把 WebGL 的版本號再加一。

新專案是否該直接選 WebGPU，要看目標瀏覽器、團隊能力與函式庫支援。WebGL 的優勢仍是成熟、廣泛支援和大量既有內容；WebGPU 提供更現代的控制與效能空間。像 Figma 這類產品已逐步採用 WebGPU，但仍保留 WebGL fallback，這比宣告其中一個已經「被淘汰」更接近真實世界。

什麼時候真的該用 WebGL？

先問畫面是否需要即時重算，以及 GPU 是否能明顯改善體驗。如果只是背景漸層、幾個圖示或一段轉場，CSS 和 SVG 通常更快、更省電，也更容易維護。只有在大量圖形、空間互動、自訂 shader 或複雜資料讓一般方案開始吃力時，WebGL 的成本才比較合理。

正式上線還要準備 fallback、限制 devicePixelRatio、避免不必要的持續渲染，並處理 context lost。WebGL 讓網頁得到 GPU 的力量，但效能預算、文字內容與可存取性仍是網站自己的責任。